Skip to content

Commit bcb4fe0

Browse files
zangeronimozangeronimo
committed
feat: building the footer
1 parent 29b9068 commit bcb4fe0

File tree

4 files changed

+189
-21
lines changed

4 files changed

+189
-21
lines changed

‎starter/07-Omnifood-Desktop/content.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,10 +119,12 @@ Create account
119119
Sign in
120120
iOS app
121121
Android app
122+
122123
About Omnifood
123124
For Business
124125
Cooking partners
125126
Careers
127+
126128
Recipe directory
127129
Help center
128130
Privacy & terms

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,11 @@ Paragraph default: 1.6
3434
3535
- Accents:
3636
- Greys
37-
#6f6f6f (lightest grey allowed on #fdf2e9)
38-
#555
39-
#333
37+
#888
38+
#767676 (lightest grey allowed on #fff)
39+
#6f6f6f (lightest grey allowed on #fdf2e9)
40+
#555
41+
#333
4042
4143
--- 03 SHADOWS
4244
@@ -106,6 +108,10 @@ body {
106108
grid-template-columns: repeat(4, 1fr);
107109
}
108110

111+
.grid--5-cols {
112+
grid-template-columns: repeat(5, 1fr);
113+
}
114+
109115
.heading-primary,
110116
.heading-secondary,
111117
.heading-tertiary {

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

Lines changed: 79 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -473,7 +473,7 @@
473473
/*************************************/
474474

475475
.section-cta {
476-
padding: 9.6rem 0;
476+
padding: 4.8rem 0 12.8rem 0;
477477
}
478478

479479
.cta {
@@ -549,3 +549,81 @@
549549
outline: none;
550550
box-shadow: 0 0 0 0.8rem rgb(253, 242, 233, 0.5);
551551
}
552+
553+
/*************************************/
554+
/* FOOTER */
555+
/*************************************/
556+
557+
.footer {
558+
padding: 12.8rem 0;
559+
border-top: 1px solid #eee;
560+
}
561+
562+
.grid--footer {
563+
grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr;
564+
}
565+
566+
.logo-col {
567+
display: flex;
568+
flex-direction: column;
569+
}
570+
571+
.footer-logo {
572+
display: block;
573+
margin-bottom: 3.2rem;
574+
}
575+
576+
.social-links {
577+
list-style: none;
578+
display: flex;
579+
gap: 2.4rem;
580+
}
581+
582+
.social-icon {
583+
height: 2.4rem;
584+
width: 2.4rem;
585+
}
586+
587+
.copyright {
588+
font-size: 1.4rem;
589+
line-height: 1.4;
590+
color: #767676;
591+
margin-top: auto;
592+
}
593+
594+
.contacts {
595+
font-style: normal;
596+
font-size: 1.6rem;
597+
line-height: 1.6;
598+
}
599+
600+
.address {
601+
margin-bottom: 2.4rem;
602+
}
603+
604+
.footer-heading {
605+
font-size: 1.8rem;
606+
font-weight: 500;
607+
margin-bottom: 4rem;
608+
}
609+
610+
.footer-nav {
611+
list-style: none;
612+
display: flex;
613+
flex-direction: column;
614+
gap: 2.4rem;
615+
}
616+
617+
.footer-link:link,
618+
.footer-link:visited {
619+
text-decoration: none;
620+
font-size: 1.6rem;
621+
color: #767676;
622+
623+
transition: all 0.3s;
624+
}
625+
626+
.footer-link:hover,
627+
.footer-link:active {
628+
color: #555;
629+
}

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

Lines changed: 99 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,35 +18,43 @@
1818
</head>
1919
<body>
2020
<header class="header">
21-
<img src="img/omnifood-logo.png" alt="Omnifood logo" class="logo" />
21+
<a href="#">
22+
<img src="img/omnifood-logo.png" alt="Omnifood logo" class="logo" />
23+
</a>
2224
<nav class="main-nav">
2325
<ul class="main-nav-list">
2426
<li>
25-
<a class="main-nav-link" href="#" alt="Main Nav Section Item"
26-
>Section 1</a
27+
<a
28+
class="main-nav-link"
29+
href="#how-it-works"
30+
alt="Main Nav Section Item"
31+
>How it works</a
2732
>
2833
</li>
2934
<li>
30-
<a class="main-nav-link" href="#" alt="Main Nav Section Item"
31-
>Section 2</a
35+
<a class="main-nav-link" href="#meals" alt="Main Nav Section Item"
36+
>Meals</a
3237
>
3338
</li>
3439
<li>
35-
<a class="main-nav-link" href="#" alt="Main Nav Section Item"
36-
>Section 3</a
40+
<a
41+
class="main-nav-link"
42+
href="#testimonials"
43+
alt="Main Nav Section Item"
44+
>Testimonials</a
3745
>
3846
</li>
3947
<li>
40-
<a class="main-nav-link" href="#" alt="Main Nav Section Item"
41-
>Section 4</a
48+
<a class="main-nav-link" href="#pricing" alt="Main Nav Section Item"
49+
>Pricing</a
4250
>
4351
</li>
4452
<li>
4553
<a
4654
class="main-nav-link nav-cta"
47-
href="#"
55+
href="#try-for-free"
4856
alt="Main Nav Section Item"
49-
>Section 5</a
57+
>Try for free</a
5058
>
5159
</li>
5260
</ul>
@@ -126,7 +134,7 @@ <h2 class="heading-featured-in">As featured in</h2>
126134
</div>
127135
</section>
128136

129-
<section class="section-how">
137+
<section class="section-how" id="how-it-works">
130138
<div class="container">
131139
<span class="subheading">How it works</span>
132140
<h2 class="heading-secondary">
@@ -194,7 +202,7 @@ <h3 class="heading-tertiary">Receive meals at convenient time</h3>
194202
</div>
195203
</section>
196204

197-
<section class="section-meals">
205+
<section class="section-meals" id="meals">
198206
<div class="container center-text">
199207
<span class="subheading">Meals</span>
200208
<h2 class="heading-secondary">
@@ -316,7 +324,7 @@ <h3 class="heading-tertiary">Works with any diet:</h3>
316324
</div>
317325
</section>
318326

319-
<section class="section-testimonials">
327+
<section class="section-testimonials" id="testimonials">
320328
<div class="testimonials-container">
321329
<span class="subheading">Testimonials</span>
322330
<h2 class="heading-secondary">Once you try it, you can't go back</h2>
@@ -463,7 +471,7 @@ <h2 class="heading-secondary">Once you try it, you can't go back</h2>
463471
</figure>
464472
</div>
465473
</section>
466-
<section class="section-pricing">
474+
<section class="section-pricing" id="pricing">
467475
<div class="container">
468476
<span class="subheading">Pricing</span>
469477
<h2 class="heading-secondary">
@@ -580,7 +588,7 @@ <h2 class="heading-secondary">
580588
</div>
581589
</section>
582590

583-
<section class="section-cta">
591+
<section class="section-cta" id="try-for-free">
584592
<div class="container">
585593
<div class="cta">
586594
<div class="cta-text-box">
@@ -622,7 +630,7 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
622630
</select>
623631
</div>
624632

625-
<button class="btn btn--form">Sign up now</button>
633+
<button class="btn">Sign up now</button>
626634
</form>
627635
</div>
628636
<div
@@ -635,6 +643,80 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
635643
</section>
636644
</main>
637645

646+
<footer class="footer">
647+
<div class="container grid grid--footer">
648+
<div class="logo-col">
649+
<a href="#" class="footer-logo">
650+
<img src="img/omnifood-logo.png" alt="Omnifood logo" class="logo" />
651+
</a>
652+
653+
<ul class="social-links">
654+
<li>
655+
<a class="footer-link" href="#"
656+
><ion-icon class="social-icon" name="logo-instagram"></ion-icon
657+
></a>
658+
</li>
659+
<li>
660+
<a class="footer-link" href="#"
661+
><ion-icon class="social-icon" name="logo-facebook"></ion-icon
662+
></a>
663+
</li>
664+
<li>
665+
<a class="footer-link" href="#"
666+
><ion-icon class="social-icon" name="logo-twitter"></ion-icon
667+
></a>
668+
</li>
669+
</ul>
670+
671+
<p class="copyright">
672+
Copyright &copy; 2027 by Omnifood, Inc. All rights reserved.
673+
</p>
674+
</div>
675+
<div class="address-col">
676+
<p class="footer-heading">Contact us</p>
677+
678+
<address class="contacts">
679+
<p class="address">
680+
623 Harrison St., 2nd Floor, San Francisco, CA 94107
681+
</p>
682+
<p>
683+
<a class="footer-link" href="tel:415-201-6370">415-201-6370</a
684+
><br />
685+
<a class="footer-link" href="mailto:hello@omnifood.com"
686+
>hello@omnifood.com</a
687+
>
688+
</p>
689+
</address>
690+
</div>
691+
<nav class="nav-col">
692+
<p class="footer-heading">Account</p>
693+
<ul class="footer-nav">
694+
<li><a class="footer-link" href="#">Create account</a></li>
695+
<li><a class="footer-link" href="#">Sign in</a></li>
696+
<li><a class="footer-link" href="#">iOS app</a></li>
697+
<li><a class="footer-link" href="#">Android app</a></li>
698+
</ul>
699+
</nav>
700+
<nav class="nav-col">
701+
<p class="footer-heading">Company</p>
702+
<ul class="footer-nav">
703+
<li><a class="footer-link" href="#">About Omnifood</a></li>
704+
<li><a class="footer-link" href="#">For Business</a></li>
705+
<li><a class="footer-link" href="#">Cooking partners</a></li>
706+
<li><a class="footer-link" href="#">Careers</a></li>
707+
</ul>
708+
</nav>
709+
<nav class="nav-col">
710+
<p class="footer-heading">Resources</p>
711+
<ul class="footer-nav">
712+
<li><a class="footer-link" href="#">Recipe directory</a></li>
713+
<li><a class="footer-link" href="#">Help center</a></li>
714+
<li><a class="footer-link" href="#">Privacy & terms</a></li>
715+
</ul>
716+
</nav>
717+
</div>
718+
</footer>
719+
638720
<script
639721
type="module"
640722
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"

0 commit comments

Comments
 (0)