Skip to content

Commit 9a821d6

Browse files
ricardoantonioricardoantonio
committed
footer
1 parent 8957610 commit 9a821d6

File tree

4 files changed

+190
-30
lines changed

4 files changed

+190
-30
lines changed

‎myattempts/Omnifood/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

‎myattempts/Omnifood/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
2929
- Accents:
3030
- Greys:
31+
#888
32+
#767676 (lightest grey allowed on #fff)
3133
#6f6f6f (lightest grey allowed on #fdf2e9)
3234
#555
3335
#333
@@ -98,6 +100,10 @@ body {
98100
grid-template-columns: repeat(4, 1fr);
99101
}
100102

103+
.grid--5-cols {
104+
grid-template-columns: repeat(5, 1fr);
105+
}
106+
101107
.grid--center-v {
102108
align-items: center;
103109
}

‎myattempts/Omnifood/css/style.css‎

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

‎myattempts/Omnifood/index.html‎

Lines changed: 101 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
</head>
1818
<body>
1919
<header class="header">
20-
<img src="img/omnifood-logo.png" alt="Omnifood logo" class="logo" />
20+
<a href="#">
21+
<img src="img/omnifood-logo.png" alt="Omnifood logo" class="logo" />
22+
</a>
2123
<nav class="main-nav">
2224
<ul class="main-nav-list">
2325
<li><a href="#" class="main-nav-link">Section 1</a></li>
@@ -524,34 +526,34 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
524526
</p>
525527
<form class="cta-form" action="#">
526528
<div>
527-
<label for="full-name">Full Name</label>
528-
<input
529-
id="full-name"
530-
type="text"
531-
placeholder="John Smith"
532-
required
533-
/>
534-
</div>
535-
<div>
536-
<label for="email">Email address</label>
537-
<input
538-
id="email"
539-
type="email"
540-
placeholder="me@example.com"
541-
required
542-
/>
543-
</div>
544-
<div>
545-
<label for="select-where">Where did your hear from us?</label>
546-
<select name="select-where" id="" required>
547-
<option value="">Please choose one option:</option>
548-
<option value="friends">Friends and family</option>
549-
<option value="youtube">Youtube video</option>
550-
<option value="podcast">Podcast</option>
551-
<option value="ad">Facebook ad</option>
552-
<option value="others">Others</option>
553-
</select>
554-
</div>
529+
<label for="full-name">Full Name</label>
530+
<input
531+
id="full-name"
532+
type="text"
533+
placeholder="John Smith"
534+
required
535+
/>
536+
</div>
537+
<div>
538+
<label for="email">Email address</label>
539+
<input
540+
id="email"
541+
type="email"
542+
placeholder="me@example.com"
543+
required
544+
/>
545+
</div>
546+
<div>
547+
<label for="select-where">Where did your hear from us?</label>
548+
<select name="select-where" id="" required>
549+
<option value="">Please choose one option:</option>
550+
<option value="friends">Friends and family</option>
551+
<option value="youtube">Youtube video</option>
552+
<option value="podcast">Podcast</option>
553+
<option value="ad">Facebook ad</option>
554+
<option value="others">Others</option>
555+
</select>
556+
</div>
555557
<button class="btn btn--form">Sign up now</button>
556558
</form>
557559
</div>
@@ -565,6 +567,76 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
565567
</section>
566568
</main>
567569

570+
<footer class="footer">
571+
<div class="container grid grid--footer">
572+
<div class="logo-col">
573+
<a href="#" class="footer-logo">
574+
<img src="img/omnifood-logo.png" alt="Omnifood logo" class="logo" />
575+
</a>
576+
577+
<ul class="social-links">
578+
<li>
579+
<a href="#" class="footer-link"
580+
><ion-icon name="logo-instagram" class="social-icon"></ion-icon
581+
></a>
582+
</li>
583+
<li>
584+
<a href="#" class="footer-link"
585+
><ion-icon name="logo-facebook" class="social-icon"></ion-icon
586+
></a>
587+
</li>
588+
<li>
589+
<a href="#" class="footer-link"
590+
><ion-icon name="logo-twitter" class="social-icon"></ion-icon
591+
></a>
592+
</li>
593+
</ul>
594+
595+
<div class="copyright">
596+
Copyright &copy; 2027 by Omnifood, Inc. All rights reserved.
597+
</div>
598+
</div>
599+
600+
<div class="address-col">
601+
<p class="footer-heading">Contact us</p>
602+
<address class="contacts">
603+
<p class="address">623 Harrison St., 2nd Floor, San Francisco, CA 94107</p>
604+
<a href="tel:415-201-6370" class="footer-link">415-201-6370</a><br />
605+
<a href="mailto:hello@omnifood.com" class="footer-link">hello@omnifood.com</a>
606+
</address>
607+
</div>
608+
609+
<div class="nav-col">
610+
<p class="footer-heading">Account</p>
611+
<ul class="footer-nav">
612+
<li><a href="#" class="footer-link">Create account</a></li>
613+
<li><a href="#" class="footer-link">Sign in</a></li>
614+
<li><a href="#" class="footer-link">iOS app</a></li>
615+
<li><a href="#" class="footer-link">Android app</a></li>
616+
</ul>
617+
</div>
618+
619+
<div class="nav-col">
620+
<p class="footer-heading">Company</p>
621+
<ul class="footer-nav">
622+
<li><a href="#" class="footer-link">About Omnifood</a></li>
623+
<li><a href="#" class="footer-link">For Business</a></li>
624+
<li><a href="#" class="footer-link">Cooking partners</a></li>
625+
<li><a href="#" class="footer-link">Careers</a></li>
626+
</ul>
627+
</div>
628+
629+
<div class="nav-col">
630+
<p class="footer-heading">Resources</p>
631+
<ul class="footer-nav">
632+
<li><a href="#" class="footer-link">Recipe directory</a></li>
633+
<li><a href="#" class="footer-link">Help center</a></li>
634+
<li><a href="#" class="footer-link">Privacy & terms</a></li>
635+
</ul>
636+
</div>
637+
</div>
638+
</footer>
639+
568640
<script
569641
type="module"
570642
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"

0 commit comments

Comments
 (0)