Skip to content

Commit 9a05fa2

Browse files
owen-webbowen-webb
committed
section-7: Footer.
1 parent e0ecaf7 commit 9a05fa2

File tree

3 files changed

+160
-7
lines changed

3 files changed

+160
-7
lines changed

‎starter/07-Omnifood-Desktop/css/general.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,10 @@ strong {
145145
grid-template-columns: repeat(4, 1fr);
146146
}
147147

148+
.grid--5-cols {
149+
grid-template-columns: repeat(5, 1fr);
150+
}
151+
148152
.heading-primary, .heading-secondary, .heading-tertiary {
149153
color: #333;
150154
font-weight: 700;

‎starter/07-Omnifood-Desktop/css/style.css

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -512,5 +512,79 @@
512512
}
513513

514514
.section-cta {
515-
padding: 9.6rem 0;
515+
padding: 4.8rem 0 12.8rem 0;
516+
}
517+
518+
519+
/*** FOOTER ***/
520+
521+
.address {
522+
margin-bottom: 2.4rem;
523+
}
524+
525+
.contacts {
526+
font-size: 1.6rem;
527+
font-style: normal;
528+
line-height: 1.6;
529+
}
530+
531+
.copyright {
532+
color: #767676;
533+
font-size: 1.4rem;
534+
line-height: 1.6;
535+
margin-top: auto;
536+
}
537+
538+
.footer {
539+
border-top: 1px solid #eee;
540+
padding: 12.8rem 0;
541+
}
542+
543+
.footer-heading {
544+
font-size: 1.8rem;
545+
font-weight: 500;
546+
margin-bottom: 4rem;
547+
}
548+
549+
.grid--footer {
550+
grid-template-columns: 3fr 3fr 2fr 2fr 2fr;
551+
}
552+
553+
.social-icon {
554+
height: 2.4rem;
555+
width: 2.4rem;
556+
}
557+
558+
.footer-link:link, .footer-link:visited {
559+
color: #767676;
560+
font-size: 1.6rem;
561+
text-decoration: none;
562+
transition: all 300ms;
563+
}
564+
565+
.footer-link:hover, .footer-link:active {
566+
color: #555;
567+
}
568+
569+
.footer-logo {
570+
display: block;
571+
margin-bottom: 3.2rem;
572+
}
573+
574+
.footer-nav {
575+
display: flex;
576+
flex-direction: column;
577+
gap: 2.4rem;
578+
list-style: none;
579+
}
580+
581+
.logo-col {
582+
display: flex;
583+
flex-direction: column;
584+
}
585+
586+
.social-links {
587+
display: flex;
588+
gap: 2.4rem;
589+
list-style: none;
516590
}

‎starter/07-Omnifood-Desktop/index.html

Lines changed: 81 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,16 @@
2121
<body>
2222
<!-- HEADER -->
2323
<header class="header">
24-
<img src="img/omnifood-logo.png" alt="Omnifood logo." class="logo">
24+
<a href="#">
25+
<img src="img/omnifood-logo.png" alt="Omnifood logo." class="logo">
26+
</a>
2527
<nav class="min-nav">
2628
<ul class="main-nav-list">
27-
<li><a href="#" class="main-nav-link">Section 1</a></li>
28-
<li><a href="#" class="main-nav-link">Section 2</a></li>
29-
<li><a href="#" class="main-nav-link">Section 3</a></li>
30-
<li><a href="#" class="main-nav-link">Section 4</a></li>
31-
<li><a href="#" class="main-nav-link nav-cta">Section 5</a></li>
29+
<li><a href="#" class="main-nav-link">How it works</a></li>
30+
<li><a href="#" class="main-nav-link">Meals</a></li>
31+
<li><a href="#" class="main-nav-link">Testimonials</a></li>
32+
<li><a href="#" class="main-nav-link">Pricing</a></li>
33+
<li><a href="#" class="main-nav-link nav-cta">Try for free</a></li>
3234
</ul>
3335
</nav>
3436
</header>
@@ -498,5 +500,78 @@ <h2 class="heading-secondary">
498500
</div>
499501
</section>
500502
</main>
503+
504+
505+
<!-- FOOTER -->
506+
<footer class="footer">
507+
<div class="container grid grid--5-cols">
508+
<div class="logo-col">
509+
<a href="#" class="footer-logo">
510+
<img src="img/omnifood-logo.png" alt="Omnifood logo." class="logo">
511+
</a>
512+
<ul class="social-links">
513+
<li>
514+
<a href="#" class="footer-link">
515+
<ion-icon name="logo-instagram" class="social-icon"></ion-icon>
516+
</a>
517+
</li>
518+
<li>
519+
<a href="#" class="footer-link">
520+
<ion-icon name="logo-facebook" class="social-icon"></ion-icon>
521+
</a>
522+
</li>
523+
<li>
524+
<a href="#" class="footer-link">
525+
<ion-icon name="logo-twitter" class="social-icon"></ion-icon>
526+
</a>
527+
</li>
528+
</ul>
529+
<p class="copyright">Copyright &copy; 2027 by Omnifood, reserved.</p>
530+
</div>
531+
532+
<div class="address-col">
533+
<p class="footer-heading">
534+
Contact us
535+
</p>
536+
<address class="contacts">
537+
<p class="address">623 Harrison St., 2nd Floor, San Francisco, CA 94107</p>
538+
<p>
539+
<a href="tel:415-201-6370" class="footer-link">415-201-6370</a>
540+
<br />
541+
<a href="mailto:hello@omnifood.com" class="footer-link">hello@omnifood.com</a>
542+
</p>
543+
</address>
544+
</div>
545+
546+
<nav class="nav-col">
547+
<p class="footer-heading">Account</p>
548+
<ul class="footer-nav">
549+
<li><a href="#" class="footer-link">Create account</a></li>
550+
<li><a href="#" class="footer-link">Sign in</a></li>
551+
<li><a href="#" class="footer-link">iOS app</a></li>
552+
<li><a href="#" class="footer-link">Android app</a></li>
553+
</ul>
554+
</nav>
555+
556+
<nav class="nav-col">
557+
<p class="footer-heading">Company</p>
558+
<ul class="footer-nav">
559+
<li><a href="#" class="footer-link">About Omnifood</a></li>
560+
<li><a href="#" class="footer-link">For Business</a></li>
561+
<li><a href="#" class="footer-link">Cooking partners</a></li>
562+
<li><a href="#" class="footer-link">Careers</a></li>
563+
</ul>
564+
</nav>
565+
566+
<nav class="nav-col">
567+
<p class="footer-heading">Resources</p>
568+
<ul class="footer-nav">
569+
<li><a href="#" class="footer-link">Recipe directory</a></li>
570+
<li><a href="#" class="footer-link">Help center</a></li>
571+
<li><a href="#" class="footer-link">Privacy & terms</a></li>
572+
</ul>
573+
</nav>
574+
</div>
575+
</footer>
501576
</body>
502577
</html>

0 commit comments

Comments
 (0)