Skip to content

Commit

Permalink
styled footer for desktop
Browse files Browse the repository at this point in the history
  • Loading branch information
@lauriejefferson
lauriejefferson committed Dec 4, 2023
1 parent 1621dc9 commit b144a4f
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 112 deletions.
193 changes: 98 additions & 95 deletions fylo-dark-theme-landing-page-master/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,105 +365,108 @@ <h1 class="early-access__title">Get early access today</h1>
/>
</g>
</svg>
<ul class="footer__links">
<li class="footer__link">
<svg
width="64"
height="18"
xmlns="http://www.w3.org/2000/svg"
class="footer__svg"
>
<path
d="M6.188 0C2.74 0 0 2.79 0 6.3 0 10.98 6.188 18 6.188 18s6.187-7.02 6.187-11.7c0-3.51-2.74-6.3-6.188-6.3zm0 8.55c-1.238 0-2.21-.99-2.21-2.25s.972-2.25 2.21-2.25c1.237 0 2.21.99 2.21 2.25s-.973 2.25-2.21 2.25z"
fill="#FFF"
fill-rule="evenodd"
/>
</svg>
<p class="footer__link--text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</li>

<li class="footer__link">
<svg
width="18"
height="18"
xmlns="http://www.w3.org/2000/svg"
class="footer__svg"
>
<path
d="M17 12.5c-1.2 0-2.4-.2-3.6-.6-.3-.1-.7 0-1 .2l-2.2 2.2c-2.8-1.4-5.1-3.8-6.6-6.6l2.2-2.2c.3-.3.4-.7.2-1-.3-1.1-.5-2.3-.5-3.5 0-.6-.4-1-1-1H1C.4 0 0 .4 0 1c0 9.4 7.6 17 17 17 .6 0 1-.4 1-1v-3.5c0-.6-.4-1-1-1zM16 9h2c0-5-4-9-9-9v2c3.9 0 7 3.1 7 7zm-4 0h2c0-2.8-2.2-5-5-5v2c1.7 0 3 1.3 3 3z"
fill="#FFF"
fill-rule="evenodd"
/>
</svg>
<p class="footer__link--phone">+1-543-123-4567</p>
</li>
<li class="footer__link">
<svg
width="20"
height="16"
xmlns="http://www.w3.org/2000/svg"
class="footer__svg"
>
<g fill="none" fill-rule="evenodd">
<path d="M-2-4h24v24H-2z" />
<div class="footer__info">
<ul class="foooter_location">
<li class="footer__link">
<svg
width="64"
height="18"
xmlns="http://www.w3.org/2000/svg"
class="footer__svg"
>
<path
d="M18 0H2C.9 0 0 .9 0 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zm0 14h-2V5.2L10 9 4 5.2V14H2V2h1.2L10 6.2 16.8 2H18v12z"
d="M6.188 0C2.74 0 0 2.79 0 6.3 0 10.98 6.188 18 6.188 18s6.187-7.02 6.187-11.7c0-3.51-2.74-6.3-6.188-6.3zm0 8.55c-1.238 0-2.21-.99-2.21-2.25s.972-2.25 2.21-2.25c1.237 0 2.21.99 2.21 2.25s-.973 2.25-2.21 2.25z"
fill="#FFF"
fill-rule="evenodd"
/>
</g>
</svg>
<p class="footer__link--email">[email protected]</p>
</li>
</ul>
<ul class="footer__about">
<li class="footer__about--link"><a href="#">About Us</a></li>
<li class="footer__about--link"><a href="#">Jobs</a></li>
<li class="footer__about--link"><a href="#">Press</a></li>
<li class="footer__about--link"><a href="#">Blog</a></li>
</ul>
<ul class="footer__contact">
<li class="footer__contact--link"><a href="#">Contact Us</a></li>
<li class="footer__contact--link"><a href="#">Terms</a></li>
<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>
</ul>
<p class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Your Name Here</a>.
</p>
<ul class="social-icons">
<li>
<a
href="https://www.flaticon.com/free-icons/facebook"
title="facebook icons"
>Facebook icons created by Stockio - Flaticon</a
>
</li>
<li>
<a
href="https://www.flaticon.com/free-icons/twitter"
title="twitter icons"
>Twitter icons created by Stockio - Flaticon</a
>
</li>
<li>
<a
href="https://www.flaticon.com/free-icons/instagram"
title="instagram icons"
>Instagram icons created by Payungkead - Flaticon</a
>
</li>
</ul>
</svg>
<p class="footer__link--text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
</li>
</ul>
<ul class="footer__links">
<li class="footer__link">
<svg
width="18"
height="18"
xmlns="http://www.w3.org/2000/svg"
class="footer__svg"
>
<path
d="M17 12.5c-1.2 0-2.4-.2-3.6-.6-.3-.1-.7 0-1 .2l-2.2 2.2c-2.8-1.4-5.1-3.8-6.6-6.6l2.2-2.2c.3-.3.4-.7.2-1-.3-1.1-.5-2.3-.5-3.5 0-.6-.4-1-1-1H1C.4 0 0 .4 0 1c0 9.4 7.6 17 17 17 .6 0 1-.4 1-1v-3.5c0-.6-.4-1-1-1zM16 9h2c0-5-4-9-9-9v2c3.9 0 7 3.1 7 7zm-4 0h2c0-2.8-2.2-5-5-5v2c1.7 0 3 1.3 3 3z"
fill="#FFF"
fill-rule="evenodd"
/>
</svg>
<p class="footer__link--phone">+1-543-123-4567</p>
</li>
<li class="footer__link">
<svg
width="20"
height="16"
xmlns="http://www.w3.org/2000/svg"
class="footer__svg"
>
<g fill="none" fill-rule="evenodd">
<path d="M-2-4h24v24H-2z" />
<path
d="M18 0H2C.9 0 0 .9 0 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zm0 14h-2V5.2L10 9 4 5.2V14H2V2h1.2L10 6.2 16.8 2H18v12z"
fill="#FFF"
/>
</g>
</svg>
<p class="footer__link--email">[email protected]</p>
</li>
</ul>
<ul class="footer__about">
<li class="footer__about--link"><a href="#">About Us</a></li>
<li class="footer__about--link"><a href="#">Jobs</a></li>
<li class="footer__about--link"><a href="#">Press</a></li>
<li class="footer__about--link"><a href="#">Blog</a></li>
</ul>
<ul class="footer__contact">
<li class="footer__contact--link"><a href="#">Contact Us</a></li>
<li class="footer__contact--link"><a href="#">Terms</a></li>
<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>
</ul>
</div>
</footer>
<!-- <p class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Your Name Here</a>.
</p>
<ul class="social-icons">
<li>
<a
href="https://www.flaticon.com/free-icons/facebook"
title="facebook icons"
>Facebook icons created by Stockio - Flaticon</a
>
</li>
<li>
<a
href="https://www.flaticon.com/free-icons/twitter"
title="twitter icons"
>Twitter icons created by Stockio - Flaticon</a
>
</li>
<li>
<a
href="https://www.flaticon.com/free-icons/instagram"
title="instagram icons"
>Instagram icons created by Payungkead - Flaticon</a
>
</li>
</ul> -->
<script type="importmap">
{
"imports": {
Expand Down
44 changes: 27 additions & 17 deletions fylo-dark-theme-landing-page-master/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,9 @@ body {
font-size: var(--fs-body);
background-color: var(--dark-blue-1);
color: var(--white);
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}

a {
Expand Down Expand Up @@ -314,10 +317,10 @@ section {
}

.early-access__text {
font-size: 1.7rem;
font-size: 1rem;
font-weight: var(--fw-300);
text-align: center;
margin: 1.5em;
margin: 1em;
}

.early-access form {
Expand All @@ -329,32 +332,32 @@ section {

.early-access form input[type="text"] {
width: 90%;
margin: 3em;
padding: 2.5em;
margin: 1em 1.5em;
padding: 1em;
border: none;
border-radius: 120px;
}

.early-access form button {
width: 90%;
padding: 1em;
width: 40%;
padding: 0.8em;
border: none;
border-radius: 120px;
background: linear-gradient(to right, var(--cyan), var(--blue));
color: white;
font-size: 1.7rem;
font-size: 1rem;
font-weight: var(--fw-500);

}

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

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

Expand All @@ -376,7 +379,7 @@ footer {
justify-content: center;
align-items: baseline;
gap: 0.25em;
font-size: 2rem;
font-size: 1rem;
font-weight: var(--fw-300);
}

Expand All @@ -402,12 +405,12 @@ footer {
}

.footer__about--link a {
font-size: 2rem;
font-size: 1rem;
font-weight: var(--fw-300);
}

.footer__contact--link a {
font-size: 2rem;
font-size: 1rem;
font-weight: var(--fw-300);
}

Expand Down Expand Up @@ -441,20 +444,27 @@ footer {

}


.social .quotes {
transform: translate(100px, 100px);
}


.early-access {
width: 70%;
padding: 3em;
transform: translate(25%, -10%);
width: 60%;
padding: 1.5em 3em;
transform: translate(35%, -50%);
}

.early-access form {
display: flex;
flex-direction: row;
}

.footer {
display: flex;
flex-direction: column;
}

.footer__info {
display: flex;
}
}

0 comments on commit b144a4f

Please sign in to comment.