add footer

css/styles.css

@@ -14416,16 +14416,14 @@ a:hover {
 
 /* line 134, global.scss */
 #MainContent {
-  position: absolute;
-  top: 40px;
+  position: relative;
+  margin-top: 40px;
   z-index: 0;
-  min-height: 200vh;
+  min-height: 100vh;
   overflow: hidden;
-  left: 50%;
-  transform: translateX(-50%);
 }
 
-/* line 144, global.scss */
+/* line 142, global.scss */
 #map {
   width: 100%;
   border-radius: 3px;
@@ -14433,17 +14431,6 @@ a:hover {
   padding: 10px;
 }
 
-/* line 152, global.scss */
-#menuLeft {
-  margin-top: 70px;
-}
-@media only screen and (min-width: 768px) {
-  /* line 152, global.scss */
-  #menuLeft {
-    margin-top: 0;
-  }
-}
-
 /* line 3, forms.scss */
 input,
 select,
@@ -14567,57 +14554,59 @@ input[type="radio"] + label::before {
 
 /* line 2, header.scss */
 header {
+  position: relative;
   background: #4e984a;
   height: 70px;
   width: 100%;
+  top: 0;
 }
-/* line 7, header.scss */
+/* line 9, header.scss */
 header .logo {
   position: fixed;
   top: 0;
   left: 0;
   height: 70px;
 }
-/* line 15, header.scss */
+/* line 17, header.scss */
 header .container.main {
   height: 70px;
   position: fixed;
   background: #4e984a;
   z-index: 500;
 }
-/* line 23, header.scss */
+/* line 25, header.scss */
 header .hamburger {
   position: fixed;
   top: 6px;
   right: 0;
 }
-/* line 30, header.scss */
+/* line 32, header.scss */
 header .openings {
   position: relative;
   top: 0;
 }
-/* line 34, header.scss */
+/* line 36, header.scss */
 header .openings .hours {
   font-size: 0.75rem;
   text-align: left;
   position: absolute;
   top: 100px;
 }
-/* line 39, header.scss */
+/* line 41, header.scss */
 header .openings .hours span {
   display: inline;
   border-right: 1px solid #aaa;
   padding: 0 5px;
 }
-/* line 44, header.scss */
+/* line 46, header.scss */
 header .openings .hours span:first-child {
   padding: 0;
 }
-/* line 48, header.scss */
+/* line 50, header.scss */
 header .openings .hours span:first-child, header .openings .hours span:last-child {
   border-right: none;
 }
-/* line 56, header.scss */
+/* line 58, header.scss */
 header .topmenu {
   height: calc(100vh - 70px);
   position: fixed;
@@ -14629,7 +14618,7 @@ header .topmenu {
   overflow: auto;
   z-index: 500;
 }
-/* line 67, header.scss */
+/* line 69, header.scss */
 header .topmenu ul {
   text-align: center;
   font-size: 1.125rem;
@@ -14639,13 +14628,13 @@ header .topmenu ul {
   padding: 0;
   line-height: 30px;
 }
-/* line 77, header.scss */
+/* line 79, header.scss */
 header .topmenu ul li {
   list-style: none;
   padding: 5px 15px;
   display: block;
 }
-/* line 82, header.scss */
+/* line 84, header.scss */
 header .topmenu ul li a {
   color: #4e984a;
   text-decoration: none;
@@ -14655,11 +14644,11 @@ header .topmenu ul li a {
   border-radius: 3px;
   padding: 5px;
 }
-/* line 92, header.scss */
+/* line 94, header.scss */
 header .topmenu ul li a:hover {
   color: #71986e;
 }
-/* line 100, header.scss */
+/* line 102, header.scss */
 header .breadcrumb {
   font-size: 0.75rem;
   padding: 5px;
@@ -14674,24 +14663,24 @@ header .breadcrumb {
   height: 30px;
   z-index: 1;
 }
-/* line 114, header.scss */
+/* line 116, header.scss */
 header .breadcrumb .container {
   overflow: hidden;
   overflow-x: auto;
 }
-/* line 118, header.scss */
+/* line 120, header.scss */
 header .breadcrumb .container .crumbs {
   height: 20px;
   display: ruby;
 }
-/* line 121, header.scss */
+/* line 123, header.scss */
 header .breadcrumb .container .crumbs a {
   color: #4e984a;
   text-decoration: none;
   transition: .4s;
   cursor: pointer;
 }
-/* line 126, header.scss */
+/* line 128, header.scss */
 header .breadcrumb .container .crumbs a:hover {
   color: #666;
 }
@@ -15090,6 +15079,54 @@ header .breadcrumb .container .crumbs a:hover {
   margin-left: 5px;
 }
 
+/* line 2, footer.scss */
+footer {
+  position: relative;
+  background: #4e984a;
+  padding: 20px 0;
+  width: 100%;
+  text-align: center;
+}
+/* line 9, footer.scss */
+footer .footer-logo {
+  max-height: 60px;
+  max-width: 90%;
+}
+/* line 15, footer.scss */
+footer .footermenu {
+  display: inline-block;
+  width: 100%;
+  border-top: 1px dotted #d1efb5;
+  padding-top: 20px;
+  text-transform: uppercase;
+}
+/* line 22, footer.scss */
+footer .footermenu ul {
+  text-align: left;
+  font-size: 0.75rem;
+  margin: 0;
+  padding: 0;
+}
+/* line 28, footer.scss */
+footer .footermenu ul li {
+  padding: 0 10px;
+  display: block;
+  border: none;
+  width: 50%;
+  float: left;
+}
+/* line 35, footer.scss */
+footer .footermenu ul li a {
+  color: white;
+  background: none;
+  display: block;
+  padding: 3px;
+}
+/* line 41, footer.scss */
+footer .footermenu ul li a:hover {
+  color: rgba(255, 255, 255, 0.6);
+}
+
 @media only screen and (min-width: 768px) {
   /* line 5, mediaqueries/viewports/_768up.scss */
   header {
@@ -15186,12 +15223,32 @@ header .breadcrumb .container .crumbs a:hover {
     top: 120px;
   }
 
-  /* line 103, mediaqueries/viewports/_768up.scss */
+  /* line 102, mediaqueries/viewports/_768up.scss */
+  footer {
+    text-align: left;
+  }
+  /* line 105, mediaqueries/viewports/_768up.scss */
+  footer .footermenu {
+    border: none;
+    padding: 0;
+  }
+  /* line 109, mediaqueries/viewports/_768up.scss */
+  footer .footermenu ul li {
+    border-left: 1px dotted #d1efb5;
+    width: 33.333%;
+  }
+  /* line 116, mediaqueries/viewports/_768up.scss */
+  footer .bl {
+    padding-left: 20px;
+    border-left: 1px dotted #d1efb5;
+  }
+
+  /* line 123, mediaqueries/viewports/_768up.scss */
   #MainContent {
-    top: 160px;
+    margin-top: 160px;
   }
 
-  /* line 109, mediaqueries/viewports/_768up.scss */
+  /* line 129, mediaqueries/viewports/_768up.scss */
   .banner {
     height: 90px;
     padding: 0 !important;
@@ -15199,3 +15256,17 @@ header .breadcrumb .container .crumbs a:hover {
     float: left;
   }
 }
+@media only screen and (min-width: 1024px) {
+  /* line 6, mediaqueries/viewports/_1024up.scss */
+  footer .logo-container {
+    text-align: left;
+  }
+  /* line 10, mediaqueries/viewports/_1024up.scss */
+  footer .footer-logo,
+  footer p {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: left;
+  }
+}

footer.php

@@ -0,0 +1,41 @@
+
+<footer>
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-sm-4 col-md-2 my-2 logo-container">
+                <img class="footer-logo" src="<?php echo $BASE_URLs;?>/images/header.png">
+            </div>
+            <div class="col-12 col-sm-4 col-md-3 text-white font-10 my-2 bl">
+                <p>
+                    Via Settimio Mobilio, 17 - 84127 SALERNO <br>
+                    Tel 089.405080 089.795900 - Fax 089.798628 <br>
+                    E-Mail: ordinefarmacistisa@pec.fofi.it
+                </p>
+            </div>
+
+            <div class="col-12 col-sm-4 col-md-3 text-white font-10 my-2 bl">
+                <p>
+                    Codice Fiscale: 80048490652<br>
+                    C.C. Postale: 39419031<br>
+                    Codice IBAN: IT43T0760115200000039419031
+                </p>
+            </div>
+
+            <div class="col-sm-4 d-none d-sm-block d-md-none"></div>
+
+            <div class="col-12 col-sm-8 col-md-4 d-none d-sm-block my-2 px-0">
+                <div class="footermenu">
+                    <ul>
+                        <li><a href="<?php echo $BASE_URLs;?>/home">Home</a></li>
+                        <li><a href="<?php echo $BASE_URLs;?>/consiglio-direttivo">Consiglio</a></li>
+                        <li><a href="<?php echo $BASE_URLs;?>/albo">Albo</a></li>
+                        <li><a href="<?php echo $BASE_URLs;?>/farmacie">Farmacie</a></li>
+                        <li><a href="<?php echo $BASE_URLs;?>/parafarmacie">Parafarmacie</a></li>
+                        <li><a href="<?php echo $BASE_URLs;?>/contatti">Contatti</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</footer>

index.php

@@ -75,6 +75,7 @@
     <?php
         @include 'header.php';
     ?>
+
     <section>
         <div id="MainContent" class="container">
             <div class="row">
@@ -84,12 +85,19 @@
                     @include 'content.php';
                     @include 'menu-right.php';
 
-            //         @include $getQ[0].'.php';
                 ?>
             </div>
         </div>
     </section>
 
+
+    <?php
+
+        @include 'footer.php';
+
+    ?>
+
+
     <script type="text/javascript" src="<?php echo $BASE_URL;?>/node_modules/jquery/dist/jquery.min.js"></script>
     <script type="text/javascript" src="<?php echo $BASE_URL;?>/node_modules/jquery-colorbox/jquery.colorbox-min.js"></script>
     <script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>

scss/footer.scss

@@ -0,0 +1,49 @@
+
+footer{
+    position: relative;
+    background: $green;
+    padding: 20px 0;
+    width: 100%;
+    text-align: center;
+
+    .footer-logo{
+      max-height: 60px;
+      max-width: 90%;
+    }
+
+
+    .footermenu{
+        display: inline-block;
+        width: 100%;
+        border-top: 1px dotted $light-grey;
+        padding-top: 20px;
+        text-transform: uppercase;
+
+        ul{
+            text-align: left;
+            font-size: $font-12;
+            margin: 0;
+            padding: 0;
+
+            li{
+                padding: 0 10px;
+                display: block;
+                border: none;
+                width: 50%;
+                float: left;
+
+                a{
+                    color: white;
+                    background: none;
+                    display: block;
+                    padding: 3px;
+
+                    &:hover{
+                        color: $alpha;
+                    }
+                }
+            }
+        }
+    }
+
+}

scss/global.scss

@@ -132,27 +132,17 @@ a{
 }
 
 #MainContent{
-    position: absolute;
-    top: 40px;
-    z-index: 0;
-    min-height: 200vh;
-    overflow: hidden;
-    left: 50%;
-    transform: translateX(-50%);
+  position: relative;
+  margin-top: 40px;
+  z-index: 0;
+  min-height: 100vh;
+  overflow: hidden;
 }
 
 #map{
-    width: 100%;
-    border-radius: 3px;
-    overflow: hidden;
-    padding: 10px;
+  width: 100%;
+  border-radius: 3px;
+  overflow: hidden;
+  padding: 10px;
 }
 
-
-#menuLeft{
-  margin-top: 70px;
-
-  @media only screen and (min-width: 768px){
-    margin-top: 0;
-  }
-}

scss/header.scss

@@ -1,8 +1,10 @@
 
 header{
+    position: relative;
     background: $green;
     height: 70px;
     width: 100%;
+    top: 0;
 
     .logo{
         position: fixed;

scss/main.scss

@@ -13,7 +13,7 @@
 @import "forms";
 @import "header";
 @import "navigation";
-
 @import "sections/sections";
+@import "footer";
 
 @import "mediaqueries/mediaqueries";

scss/mediaqueries/viewports/_1024up.scss

@@ -1 +1,17 @@
 // 1024up
+
+
+footer{
+
+  .logo-container{
+    text-align: left;
+  }
+
+  .footer-logo,
+  p{
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: left;
+  }
+}

scss/mediaqueries/viewports/_768up.scss

@@ -99,9 +99,29 @@ header{
 }
 
 
+footer{
+  text-align: left;
+
+  .footermenu{
+    border: none;
+    padding: 0;
+    ul{
+      li{
+        border-left: 1px dotted $light-grey;
+        width: 33.333%;
+      }
+    }
+  }
+
+  .bl{
+    padding-left: 20px;
+    border-left: 1px dotted $light-grey;
+  }
+
+}
 
 #MainContent{
-    top: 160px;
+    margin-top: 160px;
 }