Skip to content

Commit d605275

Browse files
andreituicuandreituicu
committed
Section 7 - Omnifood project. part 4 - Footer
1 parent ba9c15b commit d605275

File tree

3 files changed

+172
-8
lines changed

3 files changed

+172
-8
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ paragraph default: 1.6
2828
- Shades: #cf711f #eb984e
2929
- Accents:
3030
- Greys:
31+
#888
32+
#767676 lightest gray allowed on white
3133
#6f6f6f lightest gray allowed on #fdf2e9
3234
#555
3335
#333
@@ -235,6 +237,10 @@ body {
235237
grid-template-columns: repeat(4, 1fr);
236238
}
237239

240+
.grid--5-cols {
241+
grid-template-columns: repeat(5, 1fr);
242+
}
243+
238244
strong {
239245
font-weight: 500;
240246
}

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

Lines changed: 80 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -468,7 +468,7 @@
468468
/**********************/
469469

470470
.section-cta {
471-
padding: 9.6rem 0;
471+
padding: 4.8rem 0 12.8rem 0;
472472
}
473473

474474
.cta {
@@ -542,7 +542,7 @@
542542
.cta-form select {
543543
}
544544

545-
.cta-form button .cta-img-box {
545+
.cta-img-box {
546546
background-image: linear-gradient(
547547
to right bottom,
548548
rgb(235, 152, 78, 0.35),
@@ -552,3 +552,81 @@
552552
background-size: cover;
553553
background-position: center;
554554
}
555+
556+
/**********************/
557+
/* Footer SECTION */
558+
/**********************/
559+
560+
.footer {
561+
padding: 12.8rem 0;
562+
border-top: solid 1px #eee;
563+
}
564+
565+
.grid--footer {
566+
grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr;
567+
row-gap: 0;
568+
}
569+
570+
.footer-logo {
571+
display: block;
572+
margin-bottom: 3.2rem;
573+
}
574+
575+
.social-icon {
576+
height: 2.4rem;
577+
width: 2.4rem;
578+
}
579+
580+
.logo-col {
581+
display: flex;
582+
flex-direction: column;
583+
}
584+
585+
.copyright {
586+
font-size: 1.4rem;
587+
line-height: 1.6rem;
588+
color: #767676;
589+
margin-top: auto;
590+
}
591+
592+
.contacts {
593+
font-style: normal;
594+
font-size: 1.6rem;
595+
line-height: 1.6;
596+
}
597+
598+
.address {
599+
margin-bottom: 2.4rem;
600+
}
601+
602+
.footer-heading {
603+
font-size: 1.8rem;
604+
font-weight: 500;
605+
margin-bottom: 3.2rem;
606+
}
607+
608+
.footer-nav {
609+
list-style: none;
610+
display: flex;
611+
flex-direction: column;
612+
gap: 4rem;
613+
}
614+
615+
.footer-link:link,
616+
.footer-link:visited {
617+
text-decoration: none;
618+
font-size: 1.6rem;
619+
color: #767676;
620+
transition: all 0.3s;
621+
}
622+
623+
.footer-link:hover,
624+
.footer-link:active {
625+
color: #555;
626+
}
627+
628+
.social-links {
629+
list-style: none;
630+
display: flex;
631+
gap: 2.4rem;
632+
}

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

Lines changed: 86 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,16 @@
2525
</head>
2626
<body>
2727
<header class="header">
28-
<img class="logo" alt="omnifood logo" src="img/omnifood-logo.png" />
28+
<a href="#"
29+
><img class="logo" alt="omnifood logo" src="img/omnifood-logo.png"
30+
/></a>
2931
<nav class="main-nav">
3032
<ul class="main-nav-list">
31-
<li><a class="main-nav-link" href="#">Section 1</a></li>
32-
<li><a class="main-nav-link" href="#">Section 2</a></li>
33-
<li><a class="main-nav-link" href="#">Section 3</a></li>
34-
<li><a class="main-nav-link" href="#">Section 4</a></li>
35-
<li><a class="main-nav-link nav-cta" href="#">Section 5</a></li>
33+
<li><a class="main-nav-link" href="#">How it works</a></li>
34+
<li><a class="main-nav-link" href="#">Meals</a></li>
35+
<li><a class="main-nav-link" href="#">Testimonials</a></li>
36+
<li><a class="main-nav-link" href="#">Pricing</a></li>
37+
<li><a class="main-nav-link nav-cta" href="#">Try for free</a></li>
3638
</ul>
3739
</nav>
3840
</header>
@@ -602,5 +604,83 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
602604
</div>
603605
</section>
604606
</main>
607+
608+
<footer class="footer">
609+
<div class="container grid grid--5-cols grid--footer">
610+
<div class="logo-col">
611+
<a href="#" class="footer-logo"
612+
><img class="logo" alt="omnifood logo" src="img/omnifood-logo.png"
613+
/></a>
614+
615+
<ul class="social-links">
616+
<li>
617+
<a href="#" class="footer-link">
618+
<ion-icon name="logo-instagram" class="social-icon"></ion-icon>
619+
</a>
620+
</li>
621+
<li>
622+
<a href="#" class="footer-link">
623+
<ion-icon name="logo-facebook" class="social-icon"></ion-icon>
624+
</a>
625+
</li>
626+
<li>
627+
<a href="#" class="footer-link">
628+
<ion-icon name="logo-twitter" class="social-icon"></ion-icon>
629+
</a>
630+
</li>
631+
</ul>
632+
633+
<p class="copyright">
634+
Copyright &copy; 2027 by Omnifood, Inc. All rights reserved.
635+
</p>
636+
</div>
637+
638+
<div class="address-col">
639+
<p class="footer-heading">Contact us</p>
640+
641+
<address class="contacts">
642+
<p class="address">
643+
623 Harrison St., 2nd Floor, San Francisco, CA 94107
644+
</p>
645+
<a class="footer-link" href="tel:415-201-6370">415-201-6370</a
646+
><br />
647+
<a class="footer-link" href="mailto:hello@omnifood.com"
648+
>hello@omnifood.com</a
649+
>
650+
</address>
651+
</div>
652+
653+
<nav class="nav-col">
654+
<p class="footer-heading">Company</p>
655+
<ul class="footer-nav">
656+
<li><a href="#" class="footer-link">About Omnifood</a></li>
657+
<li><a href="#" class="footer-link">For Business</a></li>
658+
<li><a href="#" class="footer-link">Cooking partners</a></li>
659+
<li><a href="#" class="footer-link">Careers</a></li>
660+
</ul>
661+
</nav>
662+
663+
<nav class="nav-col">
664+
<p class="footer-heading">Account</p>
665+
<ul class="footer-nav">
666+
<li><a href="#" class="footer-link">Create account</a></li>
667+
<li><a href="#" class="footer-link">Sign in</a></li>
668+
<li><a href="#" class="footer-link">iOS App</a></li>
669+
<li><a href="#" class="footer-link">Andreid App</a></li>
670+
</ul>
671+
</nav>
672+
673+
<nav class="nav-col">
674+
<p class="footer-heading">Resources</p>
675+
<ul class="footer-nav">
676+
<li><a href="#" class="footer-link">Recipe directory</a></li>
677+
<li><a href="#" class="footer-link">Help center</a></li>
678+
<li><a href="#" class="footer-link">Privacy & terms</a></li>
679+
</ul>
680+
</nav>
681+
682+
<div class=""></div>
683+
</div>
684+
</footer>
605685
</body>
606686
</html>

0 commit comments

Comments
 (0)