Skip to content

Commit

Permalink
updated footer styling for mobile and desktop
Browse files Browse the repository at this point in the history
  • Loading branch information
@lauriejefferson
lauriejefferson committed Dec 6, 2023
1 parent b144a4f commit 02e9360
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 30 deletions.
78 changes: 61 additions & 17 deletions fylo-dark-theme-landing-page-master/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,23 +353,25 @@ <h1 class="early-access__title">Get early access today</h1>
</section>
</main>
<footer class="footer">
<svg
width="176"
height="52"
xmlns="http://www.w3.org/2000/svg"
class="footer__logo"
>
<g fill="#FFF" fill-rule="evenodd">
<path
d="M0 16.372v.128l29.754 13.764 29.859-13.811v-.035L29.754 2.608 0 16.372zm10.727.064l19.028-8.802 19.03 8.802-19.031 8.801-19.027-8.801zM29.754 35.61L0 22.052v5.014l29.754 13.59L59.613 27.02v-5.015L29.754 35.61zm0 10.17L0 32.22v5.015l29.754 13.591L59.613 37.19v-5.014L29.754 45.78zM169.216 26.22a8.564 8.564 0 0 0-2.285-5.892 7.675 7.675 0 0 0-2.473-1.768 7.259 7.259 0 0 0-3.015-.636 7.259 7.259 0 0 0-3.015.636 7.674 7.674 0 0 0-2.473 1.768 8.565 8.565 0 0 0-2.285 5.893 8.564 8.564 0 0 0 2.285 5.893 7.674 7.674 0 0 0 2.473 1.767 7.258 7.258 0 0 0 3.015.637 7.258 7.258 0 0 0 3.015-.637 7.675 7.675 0 0 0 2.473-1.767 8.563 8.563 0 0 0 2.285-5.893zm6.784 0c0 2.044-.377 3.937-1.13 5.681a13.849 13.849 0 0 1-3.11 4.526c-1.319 1.273-2.866 2.279-4.64 3.017-1.775.739-3.667 1.108-5.677 1.108s-3.894-.37-5.653-1.108a14.659 14.659 0 0 1-4.617-3.04 14.116 14.116 0 0 1-3.11-4.55c-.753-1.744-1.13-3.622-1.13-5.633 0-1.98.385-3.842 1.154-5.586a14.718 14.718 0 0 1 3.133-4.573 14.457 14.457 0 0 1 4.617-3.064c1.759-.739 3.627-1.108 5.606-1.108 2.01 0 3.902.369 5.677 1.108 1.774.738 3.321 1.744 4.64 3.017 1.32 1.272 2.356 2.789 3.11 4.549.753 1.76 1.13 3.645 1.13 5.657zm-31.422 13.483a9.087 9.087 0 0 1-1.814.613 9.217 9.217 0 0 1-2.096.236c-1.005 0-1.971-.134-2.898-.4a6.347 6.347 0 0 1-2.426-1.297c-.69-.597-1.24-1.375-1.649-2.334-.408-.958-.612-2.113-.612-3.465V.717h6.925v31.16c0 1.132.228 1.91.683 2.334.456.425.997.637 1.625.637.786 0 1.54-.236 2.262-.707v5.562zM130.02 12.55l-12.249 32.386c-.91 2.42-2.104 4.164-3.58 5.233-1.476 1.068-3.235 1.603-5.277 1.603a8.4 8.4 0 0 1-1.036-.071 7.784 7.784 0 0 1-1.083-.212l-2.262-6.317a8.974 8.974 0 0 0 1.65.59 6.61 6.61 0 0 0 1.6.211c1.069 0 2.042-.243 2.922-.73.879-.488 1.554-1.391 2.025-2.711l.943-2.734-10.506-27.248h7.396l6.266 17.536 5.889-17.536h7.302zm-28.502-4.102H83.806v8.769h17.478v5.94H83.806v16.688h-7.16V2.179h24.873v6.27z"
/>
</g>
</svg>
<div class="footer__logo">
<svg
width="176"
height="52"
xmlns="http://www.w3.org/2000/svg"
class="footer__logo"
>
<g fill="#FFF" fill-rule="evenodd">
<path
d="M0 16.372v.128l29.754 13.764 29.859-13.811v-.035L29.754 2.608 0 16.372zm10.727.064l19.028-8.802 19.03 8.802-19.031 8.801-19.027-8.801zM29.754 35.61L0 22.052v5.014l29.754 13.59L59.613 27.02v-5.015L29.754 35.61zm0 10.17L0 32.22v5.015l29.754 13.591L59.613 37.19v-5.014L29.754 45.78zM169.216 26.22a8.564 8.564 0 0 0-2.285-5.892 7.675 7.675 0 0 0-2.473-1.768 7.259 7.259 0 0 0-3.015-.636 7.259 7.259 0 0 0-3.015.636 7.674 7.674 0 0 0-2.473 1.768 8.565 8.565 0 0 0-2.285 5.893 8.564 8.564 0 0 0 2.285 5.893 7.674 7.674 0 0 0 2.473 1.767 7.258 7.258 0 0 0 3.015.637 7.258 7.258 0 0 0 3.015-.637 7.675 7.675 0 0 0 2.473-1.767 8.563 8.563 0 0 0 2.285-5.893zm6.784 0c0 2.044-.377 3.937-1.13 5.681a13.849 13.849 0 0 1-3.11 4.526c-1.319 1.273-2.866 2.279-4.64 3.017-1.775.739-3.667 1.108-5.677 1.108s-3.894-.37-5.653-1.108a14.659 14.659 0 0 1-4.617-3.04 14.116 14.116 0 0 1-3.11-4.55c-.753-1.744-1.13-3.622-1.13-5.633 0-1.98.385-3.842 1.154-5.586a14.718 14.718 0 0 1 3.133-4.573 14.457 14.457 0 0 1 4.617-3.064c1.759-.739 3.627-1.108 5.606-1.108 2.01 0 3.902.369 5.677 1.108 1.774.738 3.321 1.744 4.64 3.017 1.32 1.272 2.356 2.789 3.11 4.549.753 1.76 1.13 3.645 1.13 5.657zm-31.422 13.483a9.087 9.087 0 0 1-1.814.613 9.217 9.217 0 0 1-2.096.236c-1.005 0-1.971-.134-2.898-.4a6.347 6.347 0 0 1-2.426-1.297c-.69-.597-1.24-1.375-1.649-2.334-.408-.958-.612-2.113-.612-3.465V.717h6.925v31.16c0 1.132.228 1.91.683 2.334.456.425.997.637 1.625.637.786 0 1.54-.236 2.262-.707v5.562zM130.02 12.55l-12.249 32.386c-.91 2.42-2.104 4.164-3.58 5.233-1.476 1.068-3.235 1.603-5.277 1.603a8.4 8.4 0 0 1-1.036-.071 7.784 7.784 0 0 1-1.083-.212l-2.262-6.317a8.974 8.974 0 0 0 1.65.59 6.61 6.61 0 0 0 1.6.211c1.069 0 2.042-.243 2.922-.73.879-.488 1.554-1.391 2.025-2.711l.943-2.734-10.506-27.248h7.396l6.266 17.536 5.889-17.536h7.302zm-28.502-4.102H83.806v8.769h17.478v5.94H83.806v16.688h-7.16V2.179h24.873v6.27z"
/>
</g>
</svg>
</div>
<div class="footer__info">
<ul class="foooter_location">
<ul class="foooter__location">
<li class="footer__link">
<svg
width="64"
width="24"
height="18"
xmlns="http://www.w3.org/2000/svg"
class="footer__svg"
Expand Down Expand Up @@ -432,9 +434,51 @@ <h1 class="early-access__title">Get early access today</h1>
<li class="footer__contact--link"><a href="#">Privacy</a></li>
</ul>
<ul class="footer__social">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li class="footer__social--link">
<a href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
height="14"
width="24"
viewBox="0 0 320 512"
>
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<path
fill="#fefffe"
d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"
/></svg
></a>
</li>
<li class="footer__social--link">
<a href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
height="14"
width="24"
viewBox="0 0 512 512"
>
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<path
fill="#fffefd"
d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"
/></svg
></a>
</li>
<li class="footer__social--link">
<a href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
height="14"
width="24"
viewBox="0 0 448 512"
>
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<path
fill="#fffdf8"
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
/></svg
></a>
</li>
</ul>
</div>
</footer>
Expand Down
74 changes: 61 additions & 13 deletions fylo-dark-theme-landing-page-master/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,7 +339,7 @@ section {
}

.early-access form button {
width: 40%;
width: 90%;
padding: 0.8em;
border: none;
border-radius: 120px;
Expand All @@ -348,46 +348,42 @@ section {
font-size: 1rem;
font-weight: var(--fw-500);


}

footer {
background-color: var(--dark-blue-3);
padding: 3.5em;
/* margin: 0 auto; */
}

.footer__logo {
/* transform: scale(2); */
margin: 35em 8em 8em 8em;
margin: 20em 0 3em 0;
}

.footer__links {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 2em;
gap: 2.5em;
margin: 1em 0;
}

.footer__svg {
transform: scale(1.8)
}

.footer__link {
display: flex;
justify-content: center;
justify-content: flex-start;
align-items: baseline;
gap: 0.25em;
gap: 1em;
font-size: 1rem;
font-weight: var(--fw-300);
}

.footer__link p {
margin-left: 1em;
.footer__link--text {
text-align: left;
max-width: 40ch;
}


.footer__about {
display: flex;
flex-direction: column;
Expand All @@ -414,6 +410,21 @@ footer {
font-weight: var(--fw-300);
}

.footer__social {
display: flex;
justify-content: center;
align-items: center;
gap: 1em;
}

.footer__social--link {
border: 2px solid white;
padding: 1em;
width: 50px;
border-radius: 50%;
margin-bottom: 1em;
}

@media(min-width: 768px) {

.hero__text {
Expand Down Expand Up @@ -462,9 +473,46 @@ footer {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
padding: 20em 10em;
}

.footer__info {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 3em;
}

.footer__links {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 3em;
margin: 1em 0;
}

.footer__link {
display: flex;
justify-content: flex-start;
align-items: baseline;
gap: 1em;
font-size: 1rem;
font-weight: var(--fw-300);
}

.footer__social {
display: flex;
justify-content: center;
gap: 1em;

}

.footer__social--link {
display: flex;
justify-content: center;
margin-left: 2em;
}
}

0 comments on commit 02e9360

Please sign in to comment.