diff --git a/src/css/footer.css b/src/css/footer.css index 479191e..f0f56c9 100644 --- a/src/css/footer.css +++ b/src/css/footer.css @@ -1 +1,209 @@ /* Footer styles */ +.footer { + padding-top: 40px; + padding-bottom: 40px; +} + +.footer-wrap { + display: flex; + flex-direction: column; + gap: 40px; + margin-bottom: 80px; +} + +.footer-logo { + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-direction: column; + gap: 14px; + width: 296px; + +} + +.footer-logo-link { + display: flex; + gap: 4px; + align-items: center; + /*justify-content: center;*/ +} + +.footer-logo-icon-mob { + fill: #fbfbfb; +} + +.footer-logo-icon-tab { + display: none; + fill: #fbfbfb; +} + +.footer-text { + font-weight: 500; + font-size: 14px; + line-height: 1.29; + color: #fbfbfb; +} + +.footer-blok-nav { + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-direction: column; + gap: 40px; +} + +.footer-nav-list { + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-direction: column; + gap: 14px; + +} + +.footer-nav-link { + font-size: 28px; + line-height: 1; + letter-spacing: -0.01em; + color: #fbfbfb; +} + +.footer-address { + display: flex; + align-items: flex-start; + justify-content: flex-start; + flex-direction: column; + gap: 14px; +} + +.footer-address-link { + line-height: 1.29; + letter-spacing: -0.01em; + color: #fbfbfb; +} + +.footer-address-text { + width: 179px; + line-height: 1.29; + letter-spacing: -0.01em; + color: #fbfbfb; +} + +.footer-soc { + display: flex; + flex-direction: row; + gap: 8px; +} + +.footer-soc-link { + font-weight: 500; + font-size: 12px; + line-height: 1.33; + letter-spacing: -0.01em; + color: rgba(251, 251, 251, 0.5); +} + +.footer-soc-text { + font-weight: 500; + font-size: 12px; + line-height: 1.33; + letter-spacing: -0.01em; + color: rgba(251, 251, 251, 0.5); +} + +.footer-soc-link:last-child { + margin-left: auto; +} + +@media screen and (min-width:768px) { + .footer { + padding-top: 32px; + padding-bottom: 32px; + } + + .footer-wrap { + margin-bottom: 100px; + flex-direction: row; + } + + .footer-logo { + gap: 25px; + width: 265px; + } + + .footer-logo-link { + gap: 8px; + } + + .footer-logo-icon-mob { + display: none; + } + + .footer-logo-icon-tab { + display: flex; + fill: #fbfbfb; + } + + .footer-text { + font-size: 16px; + line-height: 1.25; + } + + .footer-blok-nav { + margin-left: auto; + gap: 64px; + } + + .footer-nav-list { + gap: 25px; + } + + .footer-nav-link { + font-size: 32px; + } + + .footer-address { + gap: 25px; + } + + .footer-address-link { + font-size: 18px; + line-height: 1.11; + } + + .footer-address-text { + width: 215px; + font-size: 18px; + line-height: 1.11; + } + + .footer-soc-link { + font-size: 18px; + line-height: 1.11 + } + + .footer-soc-text { + font-size: 18px; + line-height: 1.11 + } + +} + +@media screen and (min-width:1280px) { + + .footer { + padding-top: 50px; + padding-bottom: 50px; + } + + .footer-wrap { + margin-bottom: 125px; + } + + .footer-blok-nav { + margin-left: auto; + flex-direction:row; + gap: 121px; + } + +} \ No newline at end of file diff --git a/src/css/reviews.css b/src/css/reviews.css index 143675f..abfff63 100644 --- a/src/css/reviews.css +++ b/src/css/reviews.css @@ -29,6 +29,7 @@ } .reviews-img { + background-color: #e0e0e0; display: block; margin: auto; margin-bottom: 24px; diff --git a/src/partials/footer.html b/src/partials/footer.html index 61b6ef2..d84b9bf 100644 --- a/src/partials/footer.html +++ b/src/partials/footer.html @@ -1,3 +1,56 @@ <footer class="footer"> - + <div class="container"> + <div class="footer-wrap"> + <div class="footer-logo"> + <a class="footer-logo-link" href="./index.html"> + <svg class="footer-logo-icon-mob" width="16" height="16"> + <use href="./img/icons.svg#mini-cubiki"></use> + </svg> + <svg class="footer-logo-icon-mob" width="148" height="12"> + <use href="./img/icons.svg#mini-green-harvest"></use> + </svg> + <svg class="footer-logo-icon-tab" width="18" height="18"> + <use href="./img/icons.svg#big-cubiki"></use> + </svg> + <svg class="footer-logo-icon-tab" width="168" height="15"> + <use href="./img/icons.svg#big-green-harvest"></use> + </svg> + </a> + <p class="footer-text"> + Whether you're looking for a healthy snack or a thoughtful gift, our + fruit baskets are the perfect choice. + </p> + </div> + <div class="footer-blok-nav"> + <nav class="footer-nav"> + <ul class="footer-nav-list"> + <li> + <a class="footer-nav-link" href="#how-it-works">how it works</a> + </li> + <li> + <a class="footer-nav-link" href="#vegetables">vegetables</a> + </li> + <li><a class="footer-nav-link" href="#reviews">reviews</a></li> + </ul> + </nav> + <address class="footer-address"> + <a class="footer-address-link" href="tel:+380684439426" + >+380 (68) 443-94-26</a + > + <p class="footer-address-text"> + 1678 S. Pioneer Road Salt Lake City UT 84104 + </p> + </address> + </div> + </div> + + <div class="footer-soc"> + <a class="footer-soc-link" href="">Privacy Policy</a> + <p class="footer-soc-text">/</p> + <a class="footer-soc-link" href="">Cookie settings</a> + <a class="footer-soc-link" href="./index.html" + >©Green Harvest 2023</a + > + </div> + </div> </footer>