generated from goitacademy/vanilla-app-template
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #42 from ElizabethBil/footer
footerzmini
- Loading branch information
Showing
12 changed files
with
74 additions
and
165 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,152 +1,68 @@ | ||
| .footerlist-sections { | ||
| height: 61px; | ||
| } | ||
|
|
||
| .footer-list-menu { | ||
| .footer-list { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| flex-direction: column; | ||
| gap: 26px; | ||
| gap: 25px 40px; | ||
| margin-bottom: 40px; | ||
| } | ||
|
|
||
| .footer-list-menu li { | ||
| width: calc((100% - 25px) / 2); | ||
| } | ||
| .footer-list-item { | ||
| /* Box model */ | ||
| width: calc((100% - 40px) / 2); | ||
|
|
||
| .footer-link-menu { | ||
| /* Typography */ | ||
| color: var(--white, #fcf9f9); | ||
| font-family: Manrope; | ||
| font-size: 14px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 1.29; | ||
| line-height: 18px; | ||
| text-transform: uppercase; | ||
| } | ||
|
|
||
| /* | ||
| @media screen and (min-width: 768px) { | ||
| .footer-section { | ||
| width: 375px; | ||
| height: 649px; | ||
| flex-shrink: 0; | ||
| border-top: 1px solid rgba(252, 249, 249, 0.10); | ||
| } | ||
| .logo-footer-cont { | ||
| width: 335px; | ||
| color: var(--white, #FCF9F9); | ||
| font-family: Manrope; | ||
| font-size: 44px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 54px; | ||
| letter-spacing: -1.32px; | ||
| } | ||
| .footer-title { | ||
| color: var(--white, #fcf9f9); | ||
| font-size: 44px; | ||
| line-height: 1.22em; | ||
| letter-spacing: -0.03em; | ||
|
|
||
| .Ukrainian { | ||
| color: var(--white, #ECD979); | ||
| } | ||
| /* Box model */ | ||
| width: 335px; | ||
| margin-bottom: 80px; | ||
| } | ||
|
|
||
| .bg-picture { | ||
| @media screen and (min-width: 768px) { | ||
| .footer-list { | ||
| display: flex; | ||
| width: 452px; | ||
| height: 401px; | ||
| padding-right: 0px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-shrink: 0; | ||
| } | ||
| .footerlist-sections { | ||
| display: inline-flex; | ||
| align-items: flex-start; | ||
| gap: 40px; | ||
| } | ||
| flex-wrap: nowrap; | ||
| gap: 25px; | ||
| margin-bottom: 80px; | ||
| } | ||
|
|
||
| .footer-list-item { | ||
| /* Box model */ | ||
| width: auto; | ||
| } | ||
|
|
||
| .footer-title { | ||
| /* Box model */ | ||
| width: 521px; | ||
| } | ||
|
|
||
| .footer-container { | ||
| padding-bottom: 40px; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (min-width: 1280px) { | ||
| .footer-section { | ||
| width: 768px; | ||
| height: 370px; | ||
| flex-shrink: 0; | ||
| border-top: 1px solid rgba(252, 249, 249, 0.10); | ||
| } | ||
| .logo-footer-cont { | ||
| width: 521px; | ||
| color: var(--white, #FCF9F9); | ||
| font-family: Manrope; | ||
| font-size: 54px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 64px; | ||
| letter-spacing: -1.62px; | ||
| } | ||
| .Ukrainian { | ||
| color: var(--white, #ECD979); | ||
| } | ||
| .g8.png { | ||
| display: flex; | ||
| width: 452px; | ||
| height: 401px; | ||
| padding-right: 0px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-shrink: 0; | ||
| } | ||
| .footerlist-sections { | ||
| display: inline-flex; | ||
| align-items: flex-start; | ||
| gap: 25px; | ||
| } | ||
| .footer-list { | ||
| margin-bottom: 117px; | ||
| } | ||
|
|
||
| .footer-title { | ||
| /* Box model */ | ||
| width: 754px; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (min-width: 1440px) { | ||
| .footer-section { | ||
| width: 1440px; | ||
| height: 363px; | ||
| flex-shrink: 0; | ||
| border-top: 1px solid rgba(252, 249, 249, 0.10); | ||
| } | ||
| .logo-footer-cont { | ||
| color: var(--white, #FCF9F9); | ||
| font-family: Manrope; | ||
| font-size: 64px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 74px; | ||
| letter-spacing: -1.92px; | ||
| width: 754px; | ||
| } | ||
| .Ukrainian { | ||
| color: var(--white, #ECD979); | ||
| } | ||
| .g8.png { | ||
| display: flex; | ||
| width: 595px; | ||
| height: 528px; | ||
| padding-right: 0px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-shrink: 0; | ||
| } | ||
| .footerlist-sections { | ||
| display: inline-flex; | ||
| align-items: flex-start; | ||
| gap: 25px; | ||
| } | ||
| } | ||
| */ |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,28 @@ | ||
| <footer class="footer-section" id="footer"> | ||
| <div class="container footer-wrapper"> | ||
|
|
||
| <div class="footerlist-sections"> | ||
| <ul class="footer-list-menu"> | ||
| <li><a class="footer-link-menu" href="">about us</a></li> | ||
| <li><a class="footer-link-menu" href="">our collection</a></li> | ||
| <li><a class="footer-link-menu" href="">customer order</a></li> | ||
| <li><a class="footer-link-menu" href="">testimonials</a></li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="logo-footer-cont"> | ||
| <p class="footer-text"> | ||
| A touch of<div class="Ukrainian">Ukrainian</div>culture in every embroidery | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="bg-picture"> | ||
| <source srcset=" | ||
| ./img/footer/g8.png 400w, | ||
| ./img/footer/[email protected] 800w, | ||
| ./img/footer/g8.png 347w, | ||
| ./img/footer/[email protected] 694w, | ||
| ./img/footer/g8.png 342w, | ||
| ./img/footer/[email protected] 684w, | ||
| ./img/footer/g8.png 335w, | ||
| ./img/footer/[email protected] 670w | ||
| " | ||
| sizes="(min-width: 1440px) 400px, (min-width: 1280px) 347px, (min-width: 768px) 342px, (min-width: 320px) 335px" /> | ||
| <img class="g8.png" src="./img/footer/g8.png" | ||
| alt="g8.png" /> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| <footer class="footer-section section" id="footer"> | ||
| <div class="container footer-container"> | ||
| <ul class="footer-list"> | ||
| <li class="footer-list-item"> | ||
| <a href="./index.html#about-us" class="header-nav-link">about us</a> | ||
| </li> | ||
| <li class="footer-list-item"> | ||
| <a href="./index.html#our-collection" class="header-nav-link" | ||
| >our collection</a | ||
| > | ||
| </li> | ||
| <li class="footer-list-item"> | ||
| <a href="./index.html#order-section" class="header-nav-link" | ||
| >customer order</a | ||
| > | ||
| </li> | ||
| <li class="footer-list-item"> | ||
| <a href="./index.html#testimonials" class="header-nav-link" | ||
| >testimonials</a | ||
| > | ||
| </li> | ||
| </ul> | ||
| <h2 class="footer-title"> | ||
| A touch of <span class="hero-title-span">Ukrainian</span> culture in every | ||
| embroidery | ||
| </h2> | ||
| </div> | ||
| </footer> |