diff --git a/content.php b/content.php new file mode 100644 index 0000000..77e5669 --- /dev/null +++ b/content.php @@ -0,0 +1,6 @@ + +
+ +
diff --git a/css/styles.css b/css/styles.css index 929e3ea..723e73b 100644 --- a/css/styles.css +++ b/css/styles.css @@ -14477,25 +14477,30 @@ body { } /* line 5, global.scss */ +label { + margin: 0; +} + +/* line 10, global.scss */ .container { width: 100%; max-width: 1280px; padding: 0 20px; } -/* line 11, global.scss */ +/* line 16, global.scss */ .border { border: 1px solid red; } -/* line 16, global.scss */ +/* line 21, global.scss */ .middle { position: absolute; top: 50%; transform: translateY(-50%); } -/* line 22, global.scss */ +/* line 27, global.scss */ .middle-right { position: absolute; right: 0; @@ -14503,7 +14508,7 @@ body { transform: translateY(-50%); } -/* line 29, global.scss */ +/* line 34, global.scss */ .full-middle { position: absolute; left: 50%; @@ -14511,56 +14516,171 @@ body { transform: translate(-50%, -50%); } -/* line 38, global.scss */ +/* line 43, global.scss */ .bg-alpha { background: rgba(255, 255, 255, 0.5); } -/* line 42, global.scss */ +/* line 47, global.scss */ .radius { border-radius: 3px; } -/* line 46, global.scss */ +/* line 51, global.scss */ .radius-bottom { border-radius: 0 0 3px 3px; } +/* line 55, global.scss */ +.banner { + background: #2e981e; + border: 1px solid #2e981e; + height: 60px; + width: 100%; + border-radius: 3px; + margin-bottom: 4px; +} + +/* line 65, global.scss */ +#MainContent { + top: 90px; + z-index: 0; + min-height: 200vh; + overflow: hidden; +} + +/* line 3, forms.scss */ +input, button { + border-radius: 3px; + margin: 5px 0; + -webkit-appearance: none; +} +/* line 7, forms.scss */ +input::-ms-clear, button::-ms-clear { + display: none; +} +/* line 10, forms.scss */ +input:focus, button:focus { + outline: none; +} +/* line 11, forms.scss */ +input::-moz-focus-inner, button::-moz-focus-inner { + border: 0; +} + +/* line 14, forms.scss */ +input[type=text], +input[type=password] { + border: 1px solid #aaa; + color: #aaa; + padding: 5px 20px; + width: 100%; + text-align: left; + box-sizing: border-box; +} + +/* line 24, forms.scss */ +input[type=button], +input[type=submit], +button { + background-color: #2e981e; + color: white; + text-align: center; + padding: 5px 20px; + font-size: 0.75rem; + cursor: pointer; + border: none; + transition: .5s; +} +/* line 37, forms.scss */ +input[type=button]:hover, +input[type=submit]:hover, +button:hover { + color: white; + background-color: #aaa; +} + +/* line 46, forms.scss */ +input[type="radio"], +input[type="checkbox"] { + display: none; +} +/* line 50, forms.scss */ +input[type="radio"] + label::before, +input[type="checkbox"] + label::before { + content: ""; + display: inline-block; + width: 12px; + height: 12px; + border: solid 1px black; + background: transparent; + cursor: pointer; + vertical-align: middle; + margin: -4px 4px 0 0; + font-size: 1rem; + line-height: 10px; +} +/* line 65, forms.scss */ +input[type="radio"]:checked + label::before, +input[type="checkbox"]:checked + label::before { + font-family: 'FontAwesome'; + content: "\f00c"; + padding: 0 0 1px 0; +} + /* line 2, header.scss */ header { - background: #2e981e; + background: #58984e; height: 70px; - position: fixed; width: 100%; } /* line 8, header.scss */ +header .container.main { + height: 70px; + position: fixed; + background: #58984e; + z-index: 500; +} +/* line 16, header.scss */ header .logo { position: fixed; top: 0; left: 0; height: 70px; } -/* line 15, header.scss */ +/* line 23, header.scss */ header .hamburger { position: fixed; top: 6px; right: 0; } -/* line 22, header.scss */ -header .first { +/* line 30, header.scss */ +header .openings { position: relative; - top: 110px; - height: 70px; + top: 0; } -/* line 29, header.scss */ -header .hours { +/* line 34, header.scss */ +header .openings .hours { font-size: 0.75rem; + text-align: left; + position: absolute; + top: 100px; } -/* line 31, header.scss */ -header .hours span { - display: block; +/* line 39, header.scss */ +header .openings .hours span { + display: inline; + border-right: 1px solid #aaa; + padding: 0 5px; +} +/* line 44, header.scss */ +header .openings .hours span:first-child { + padding: 0; } -/* line 36, header.scss */ +/* line 48, header.scss */ +header .openings .hours span:first-child, header .openings .hours span:last-child { + border-right: none; +} +/* line 56, header.scss */ header .topmenu { height: calc(100vh - 70px); position: fixed; @@ -14570,8 +14690,9 @@ header .topmenu { width: 100%; display: none; overflow: auto; + z-index: 500; } -/* line 46, header.scss */ +/* line 67, header.scss */ header .topmenu ul { text-align: center; font-size: 1.125rem; @@ -14581,24 +14702,24 @@ header .topmenu ul { padding: 0; line-height: 30px; } -/* line 56, header.scss */ +/* line 77, header.scss */ header .topmenu ul li { list-style: none; padding: 15px; display: block; border-top: 1px solid rgba(255, 255, 255, 0.6); } -/* line 61, header.scss */ +/* line 82, header.scss */ header .topmenu ul li a { color: white; text-decoration: none; transition: .4s; } -/* line 65, header.scss */ +/* line 86, header.scss */ header .topmenu ul li a:hover { color: rgba(255, 255, 255, 0.6); } -/* line 73, header.scss */ +/* line 94, header.scss */ header .breadcrumb { font-size: 0.75rem; padding: 5px; @@ -14608,37 +14729,125 @@ header .breadcrumb { width: 100%; position: absolute; left: 0; + top: 70px; color: #aaa; height: 30px; } -/* line 85, header.scss */ +/* line 107, header.scss */ header .breadcrumb .container { overflow: hidden; overflow-x: auto; } -/* line 88, header.scss */ +/* line 111, header.scss */ header .breadcrumb .container .crumbs { height: 20px; display: ruby; } -/* line 91, header.scss */ +/* line 114, header.scss */ header .breadcrumb .container .crumbs a { color: #aaa; text-decoration: none; transition: .4s; } -/* line 95, header.scss */ +/* line 118, header.scss */ header .breadcrumb .container .crumbs a:hover { color: #666; } +/* line 3, navigation.scss */ +.dropdown { + border-top: 3px solid #58984e; + border-bottom: 3px solid #58984e; + border-radius: 3px; + margin-bottom: 4px; + background: #eceeef; + transition: .4s; +} +/* line 11, navigation.scss */ +.dropdown .title { + font-size: 0.75rem; + font-weight: bold; + text-align: left; + padding: 10px; + position: relative; + cursor: pointer; + background: #58984e; + color: white; + transition: .4s; +} +/* line 22, navigation.scss */ +.dropdown .title:after { + content: '\f105'; + font-family: 'FontAwesome'; + position: absolute; + right: 10px; + transition: .4s; +} +/* line 33, navigation.scss */ +.dropdown:hover { + border-top: 3px solid #2e981e; + border-bottom: 3px solid #2e981e; +} +/* line 36, navigation.scss */ +.dropdown:hover .title { + background: #2e981e; +} +/* line 41, navigation.scss */ +.dropdown .items { + overflow: hidden; + height: 0px; + padding: 0 10px; + margin: 0; +} +/* line 47, navigation.scss */ +.dropdown .items li { + font-size: 0.75rem; + text-align: left; + border-bottom: 1px solid #aaa; + padding: 10px 0; + list-style: none; +} +/* line 54, navigation.scss */ +.dropdown .items li a { + color: #666; + text-decoration: none; + transition: .4s; + cursor: pointer; +} +/* line 59, navigation.scss */ +.dropdown .items li a:hover { + color: #aaa; +} +/* line 63, navigation.scss */ +.dropdown .items li:last-child { + border-bottom: none; +} +/* line 70, navigation.scss */ +.dropdown.active { + border-top: 3px solid #2e981e; + border-bottom: 3px solid #2e981e; +} +/* line 74, navigation.scss */ +.dropdown.active .title { + background: #2e981e; +} +/* line 76, navigation.scss */ +.dropdown.active .title:after { + transform: rotate(90deg); +} +/* line 80, navigation.scss */ +.dropdown.active .items { + height: auto; +} + @media only screen and (min-width: 768px) { /* line 5, mediaqueries/viewports/_768up.scss */ header { background: #2e981e; height: 120px; + position: absolute; } - /* line 9, mediaqueries/viewports/_768up.scss */ + /* line 10, mediaqueries/viewports/_768up.scss */ header .logo { position: absolute; top: 10px; @@ -14649,25 +14858,47 @@ header .breadcrumb .container .crumbs a:hover { background-repeat: no-repeat; background-position: left top; } - /* line 21, mediaqueries/viewports/_768up.scss */ - header .container { + /* line 22, mediaqueries/viewports/_768up.scss */ + header .container.main { + height: 120px; + position: relative; + background: #2e981e; background-image: url("../images/caduceus.png"); background-size: 400px; background-repeat: no-repeat; background-position: left -60px top -60px; } - /* line 28, mediaqueries/viewports/_768up.scss */ - header .first { - display: block; + /* line 34, mediaqueries/viewports/_768up.scss */ + header .openings { position: relative; height: 80px; top: 0; + background: none; + } + /* line 40, mediaqueries/viewports/_768up.scss */ + header .openings .hours { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + background: rgba(255, 255, 255, 0.5); + text-align: right; + border-radius: 0 0 3px 3px; } - /* line 35, mediaqueries/viewports/_768up.scss */ + /* line 49, mediaqueries/viewports/_768up.scss */ + header .openings .hours span { + display: block; + border-right: none; + } + /* line 53, mediaqueries/viewports/_768up.scss */ + header .openings .hours span:first-child { + padding: 0 5px; + } + /* line 60, mediaqueries/viewports/_768up.scss */ header .hamburger { display: none; } - /* line 39, mediaqueries/viewports/_768up.scss */ + /* line 64, mediaqueries/viewports/_768up.scss */ header .topmenu { height: 40px; position: relative; @@ -14675,7 +14906,7 @@ header .breadcrumb .container .crumbs a:hover { top: 0px; display: block; } - /* line 46, mediaqueries/viewports/_768up.scss */ + /* line 71, mediaqueries/viewports/_768up.scss */ header .topmenu ul { text-align: right; font-size: 0.75rem; @@ -14683,7 +14914,7 @@ header .breadcrumb .container .crumbs a:hover { margin: 0; line-height: 40px; } - /* line 53, mediaqueries/viewports/_768up.scss */ + /* line 78, mediaqueries/viewports/_768up.scss */ header .topmenu ul li { list-style: none; padding: 0 10px; @@ -14691,8 +14922,17 @@ header .breadcrumb .container .crumbs a:hover { border: none; border-left: 1px solid rgba(255, 255, 255, 0.6); } - /* line 59, mediaqueries/viewports/_768up.scss */ + /* line 84, mediaqueries/viewports/_768up.scss */ header .topmenu ul li:first-child { border-left: none; } + /* line 91, mediaqueries/viewports/_768up.scss */ + header .breadcrumb { + top: 120px; + } + + /* line 98, mediaqueries/viewports/_768up.scss */ + #MainContent { + top: 160px; + } } diff --git a/header.php b/header.php index b5ccb40..db4db9b 100644 --- a/header.php +++ b/header.php @@ -1,19 +1,20 @@
-
+
-
-
+
+
Orario di apertura sede: Lun e Mar 9:00-14:00 Mer, Gio e Ven 9:00-14:00 e 15:30-18:30 Sab 9:00-13:00
+
@@ -42,4 +43,13 @@
+
+
+ Orario di apertura sede: + Lun e Mar 9:00-14:00 + Mer, Gio e Ven 9:00-14:00 e 15:30-18:30 + Sab 9:00-13:00 +
+
+
diff --git a/home.php b/home.php new file mode 100644 index 0000000..cfc6b01 --- /dev/null +++ b/home.php @@ -0,0 +1,10 @@ + +
+
+
+
+ +
+ a +
+
diff --git a/index.php b/index.php index 887a522..e4e7b1d 100755 --- a/index.php +++ b/index.php @@ -54,11 +54,22 @@ +
+
+
+ +
+
+
diff --git a/js/scripts.js b/js/scripts.js index de20425..973dc02 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -12,4 +12,18 @@ $(document).ready(function(){ }); + $('.dropdown .title').on('click', function(){ + +// $('.dropdown').removeClass('active'); + $(this).parent().toggleClass('active'); + + if($(this).parent().hasClass('active')){ + $('html, body').animate({ + scrollTop: $(this).parent().offset().top + },500); + } + + }); + + }); diff --git a/menu-left.php b/menu-left.php new file mode 100644 index 0000000..196430e --- /dev/null +++ b/menu-left.php @@ -0,0 +1,57 @@ + +
+ + + + + + + + + +
diff --git a/menu-right.php b/menu-right.php new file mode 100644 index 0000000..5e02ded --- /dev/null +++ b/menu-right.php @@ -0,0 +1,11 @@ + +
+ + + + + + + + +
diff --git a/scss/.sass-cache/7537e22ae7528080974021381c7670ade8022661/_768up.scssc b/scss/.sass-cache/7537e22ae7528080974021381c7670ade8022661/_768up.scssc index 7270b62..8b80dca 100644 Binary files a/scss/.sass-cache/7537e22ae7528080974021381c7670ade8022661/_768up.scssc and b/scss/.sass-cache/7537e22ae7528080974021381c7670ade8022661/_768up.scssc differ diff --git a/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/forms.scssc b/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/forms.scssc new file mode 100644 index 0000000..91e0f92 Binary files /dev/null and b/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/forms.scssc differ diff --git a/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/global.scssc b/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/global.scssc index c6efe09..88b54e1 100644 Binary files a/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/global.scssc and b/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/global.scssc differ diff --git a/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/header.scssc b/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/header.scssc index 665451a..c354b5b 100644 Binary files a/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/header.scssc and b/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/header.scssc differ diff --git a/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/main.scssc b/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/main.scssc index b8a6607..fa211b7 100644 Binary files a/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/main.scssc and b/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/main.scssc differ diff --git a/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/navigation.scssc b/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/navigation.scssc new file mode 100644 index 0000000..e5d89e9 Binary files /dev/null and b/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/navigation.scssc differ diff --git a/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/variables.scssc b/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/variables.scssc index f9497d5..2e3f8bd 100644 Binary files a/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/variables.scssc and b/scss/.sass-cache/bdcb2ec4843708bc0e130897363854e74056ec3e/variables.scssc differ diff --git a/scss/forms.scss b/scss/forms.scss new file mode 100644 index 0000000..73fcf15 --- /dev/null +++ b/scss/forms.scss @@ -0,0 +1,71 @@ + + +input,button{ + border-radius: 3px; + margin: 5px 0; + -webkit-appearance: none; + &::-ms-clear { + display: none; + } + &:focus {outline:none;} + &::-moz-focus-inner {border:0;} +} + +input[type=text], +input[type=password]{ + border: 1px solid $grey; + color: $grey; + padding: 5px 20px; + width: 100%; + text-align: left; + box-sizing: border-box; +} + +input[type=button], +input[type=submit], +button{ + + background-color: $green; + color: white; + text-align: center; + padding: 5px 20px; + font-size: $font-12; + cursor: pointer; + border: none; + transition: .5s; + + &:hover{ + color: white; + background-color: $grey; + } + +} + + + +input[type="radio"], +input[type="checkbox"]{ + display: none; + + &+label::before { + content: ""; + display: inline-block; + width: 12px; + height: 12px; + border: solid 1px black; + background: transparent; + cursor: pointer; + vertical-align: middle; + margin: -4px 4px 0 0; + font-size: 1rem; + line-height: 10px; + } + + &:checked{ + &+label::before{ + font-family: 'FontAwesome'; + content: "\f00c"; + padding: 0 0 1px 0; + } + } +} diff --git a/scss/global.scss b/scss/global.scss index b88df92..6842a72 100644 --- a/scss/global.scss +++ b/scss/global.scss @@ -2,6 +2,11 @@ body{ font-family: 'Roboto'; } +label{ + margin: 0; +} + + .container{ width: 100%; max-width: 1280px; @@ -46,3 +51,20 @@ body{ .radius-bottom{ border-radius: 0 0 3px 3px; } + +.banner{ + background: $green; + border: 1px solid $green; + height: 60px; + width: 100%; + border-radius: 3px; + margin-bottom: 4px; +} + + +#MainContent{ + top: 90px; + z-index: 0; + min-height: 200vh; + overflow: hidden; +} diff --git a/scss/header.scss b/scss/header.scss index 8600ab8..b7fb3a8 100644 --- a/scss/header.scss +++ b/scss/header.scss @@ -1,10 +1,18 @@ header{ - background: $green; + background: $light-green; height: 70px; - position: fixed; width: 100%; + .container{ + &.main{ + height: 70px; + position: fixed; + background: $light-green; + z-index: 500; + } + } + .logo{ position: fixed; top: 0; @@ -19,20 +27,32 @@ header{ } - .first{ + .openings{ position: relative; - top: 110px; - height: 70px; - } - + top: 0; - .hours{ - font-size: $font-12; - span{ - display: block; + .hours{ + font-size: $font-12; + text-align: left; + position: absolute; + top: 100px; + span{ + display: inline; + border-right: 1px solid $grey; + padding: 0 5px; + + &:first-child{ + padding: 0; + } + + &:first-child, + &:last-child{ + border-right: none; + } + } } } - + .topmenu{ height: calc(100vh - 70px); position: fixed; @@ -42,6 +62,7 @@ header{ width: 100%; display: none; overflow: auto; + z-index: 500; ul{ text-align: center; @@ -79,12 +100,14 @@ header{ width: 100%; position: absolute; left: 0; + top: 70px; color: $grey; height: 30px; .container{ - overflow: hidden; - overflow-x: auto; + overflow: hidden; + overflow-x: auto; + .crumbs{ height: 20px; display: ruby; diff --git a/scss/main.scss b/scss/main.scss index 50052df..37f0541 100755 --- a/scss/main.scss +++ b/scss/main.scss @@ -9,7 +9,9 @@ @import "fonts"; @import "global"; +@import "forms"; @import "header"; +@import "navigation"; diff --git a/scss/mediaqueries/viewports/_768up.scss b/scss/mediaqueries/viewports/_768up.scss index b06e142..3ab6c6d 100755 --- a/scss/mediaqueries/viewports/_768up.scss +++ b/scss/mediaqueries/viewports/_768up.scss @@ -5,6 +5,7 @@ header{ background: $green; height: 120px; + position: absolute; .logo{ position: absolute; @@ -17,21 +18,45 @@ header{ background-position: left top; } - .container{ - background-image: url('../images/caduceus.png'); - background-size: 400px; - background-repeat: no-repeat; - background-position: left -60px top -60px; + &.main{ + height: 120px; + position: relative; + background: $green; + background-image: url('../images/caduceus.png'); + background-size: 400px; + background-repeat: no-repeat; + background-position: left -60px top -60px; + } } - - .first{ - display: block; + + + .openings{ position: relative; height: 80px; top: 0; - } + background: none; + .hours{ + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + background: rgba(255,255,255,0.5); + text-align: right; + border-radius: 0 0 3px 3px; + + span{ + display: block; + border-right: none; + + &:first-child{ + padding: 0 5px; + } + } + } + } + .hamburger{ display: none; } @@ -62,4 +87,14 @@ header{ } } } + + .breadcrumb{ + top: 120px; + } } + + + +#MainContent{ + top: 160px; +} diff --git a/scss/navigation.scss b/scss/navigation.scss new file mode 100644 index 0000000..c6aa14e --- /dev/null +++ b/scss/navigation.scss @@ -0,0 +1,84 @@ + + +.dropdown{ + border-top: 3px solid $light-green; + border-bottom: 3px solid $light-green; + border-radius: 3px; + margin-bottom: 4px; + background: $light-grey; + transition: .4s; + + .title{ + font-size: $font-12; + font-weight: bold; + text-align: left; + padding: 10px; + position: relative; + cursor: pointer; + background: $light-green; + color: white; + transition: .4s; + + &:after{ + content: '\f105'; + font-family: 'FontAwesome'; + position: absolute; + right: 10px; + transition: .4s; + } + + + } + + &:hover{ + border-top: 3px solid $green; + border-bottom: 3px solid $green; + .title{ + background: $green; + } + } + + .items{ + overflow: hidden; + height: 0px; + padding: 0 10px; + margin: 0; + + li{ + font-size: $font-12; + text-align: left; + border-bottom: 1px solid $grey; + padding: 10px 0; + list-style: none; + + a{ + color: $dark-grey; + text-decoration: none; + transition: .4s; + cursor: pointer; + &:hover{ + color: $grey; + } + } + &:last-child{ + border-bottom: none; + } + } + } + + + &.active{ + border-top: 3px solid $green; + border-bottom: 3px solid $green; + + .title{ + background: $green; + &:after{ + transform: rotate(90deg); + } + } + .items{ + height: auto; + } + } +} diff --git a/scss/variables.scss b/scss/variables.scss index 9eb786e..c7e25bd 100644 --- a/scss/variables.scss +++ b/scss/variables.scss @@ -68,6 +68,7 @@ $font-53: 3.312rem; /* 53px */ $alpha: rgba(255,255,255,0.6); $green: #2e981e;//#67a562; +$light-green: #58984e; $red: #aa0000; $grey: #aaa; $light-grey: #eceeef;