Skip to content

Commit ae2f6c2

Browse files
clinton74clinton74
committed
finished desktop omnifood
1 parent 25da934 commit ae2f6c2

File tree

3 files changed

+310
-10
lines changed

3 files changed

+310
-10
lines changed

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

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,27 @@ Paragraph default: 1.6
2424
2525
--- 02 Colors
2626
27-
- Primary: #e67e22
27+
- Primary:
28+
#e67e22
2829
- Tints:
2930
#fdf2e9
3031
#fae5d3
31-
- Shades: #cf711f
32+
#eb984e
33+
- Shades:
34+
#cf711f
35+
#45260a
3236
- Accents:
3337
- Greys:
38+
#888
39+
#767676
3440
#6f6f6f lightest gray allowed on #fdf2e9
3541
#555
3642
#333
3743
3844
3945
4046
--- 05 Shadows
41-
47+
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
4248
4349
--- 06 Border radius
4450
@@ -109,6 +115,10 @@ body {
109115
grid-template-columns: repeat(4, 1fr);
110116
}
111117

118+
.grid--5-cols {
119+
grid-template-columns: repeat(5, 1fr);
120+
}
121+
112122
.grid--center-v {
113123
align-items: center;
114124
}
@@ -151,6 +161,7 @@ body {
151161
margin-bottom: 3.2rem;
152162
}
153163

164+
.btn,
154165
.btn:link,
155166
.btn:visited {
156167
display: inline-block;
@@ -162,6 +173,10 @@ body {
162173
border-radius: 9px;
163174
font-weight: 600;
164175

176+
border: none;
177+
cursor: pointer;
178+
font-family: inherit;
179+
165180
transition: all 0.3s;
166181
}
167182

@@ -189,6 +204,18 @@ body {
189204
box-shadow: inset 0 0 0 3px #fff;
190205
}
191206

207+
.btn--form {
208+
background-color: #45260a;
209+
color: #fdf2e9;
210+
align-self: end;
211+
padding: 1.2rem;
212+
}
213+
214+
.btn--form:hover {
215+
background-color: #fff;
216+
color: #555;
217+
}
218+
192219
.link:link,
193220
.link:visited {
194221
display: inline-block;
@@ -225,6 +252,13 @@ body {
225252
color: #e67e22;
226253
}
227254

255+
*:focus {
256+
outline: none;
257+
/* outline: 4px dotted #e67e22; */
258+
/* outline-offset: 8px; */
259+
box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5);
260+
}
261+
228262
/* Helper & settings classes*/
229263
.margin-right-sm {
230264
margin-right: 1.6rem !important;

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

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,3 +453,158 @@
453453
font-size: 1.8rem;
454454
line-height: 1.8;
455455
}
456+
457+
/***********************************/
458+
/* CTA section */
459+
/***********************************/
460+
461+
.section-cta {
462+
padding: 4.8rem 0 12.8rem;
463+
}
464+
465+
.cta {
466+
display: grid;
467+
grid-template-columns: 2fr 1fr;
468+
/* background-color: #e67e22; */
469+
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.2);
470+
border-radius: 11px;
471+
overflow: hidden;
472+
473+
background-image: linear-gradient(to right bottom, #eb984e, #e67e22);
474+
}
475+
476+
.cta-text-box {
477+
padding: 4.8rem 6.4rem 6.4rem 6.4rem;
478+
color: #45260a;
479+
}
480+
481+
.cta .heading-secondary {
482+
/* color: #45260a; */
483+
color: inherit;
484+
margin-bottom: 3.2rem;
485+
}
486+
487+
.cta-text {
488+
font-size: 1.8rem;
489+
line-height: 1.8;
490+
margin-bottom: 4.8rem;
491+
}
492+
493+
.cta-img-box {
494+
background-image: linear-gradient(to right bottom, rgba(235, 151, 78, 0.35), rgba(230, 125, 34, 0.35)),
495+
url("../img/eating.jpg");
496+
background-size: cover;
497+
background-position: center;
498+
}
499+
500+
.cta-form {
501+
display: grid;
502+
grid-template-columns: 1fr 1fr;
503+
gap: 2.4rem 3.2rem;
504+
}
505+
506+
.cta-form label {
507+
display: block;
508+
font-size: 1.6rem;
509+
font-weight: 500;
510+
margin-bottom: 1.2rem;
511+
}
512+
.cta-form input,
513+
.cta-form select {
514+
width: 100%;
515+
padding: 1.2rem;
516+
font-size: 1.8rem;
517+
font-family: inherit;
518+
color: inherit;
519+
border: none;
520+
background-color: #fdf2e9;
521+
border-radius: 9px;
522+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
523+
}
524+
525+
.cta-form input::placeholder {
526+
color: #aaa;
527+
}
528+
529+
.cta *:focus {
530+
outline: none;
531+
box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5);
532+
}
533+
534+
/***********************************/
535+
/* Footer */
536+
/***********************************/
537+
538+
.footer {
539+
padding: 12.8rem 0;
540+
border-top: 1px solid #eee;
541+
}
542+
543+
.grid--footer {
544+
display: grid;
545+
grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr;
546+
}
547+
548+
.logo-col {
549+
display: flex;
550+
flex-flow: column;
551+
}
552+
553+
.footer-logo {
554+
display: block;
555+
margin-bottom: 3.2rem;
556+
}
557+
558+
.social-links {
559+
list-style: none;
560+
display: flex;
561+
gap: 2.4rem;
562+
}
563+
564+
.social-icon {
565+
height: 2.4rem;
566+
width: 2.4rem;
567+
}
568+
569+
.copyright {
570+
font-size: 1.4rem;
571+
color: #767676;
572+
line-height: 1.6;
573+
margin-top: auto;
574+
}
575+
576+
.contacts {
577+
font-style: normal;
578+
font-size: 1.6rem;
579+
line-height: 1.6;
580+
}
581+
582+
.address {
583+
margin-bottom: 2.4rem;
584+
}
585+
586+
.footer-heading {
587+
font-size: 1.8rem;
588+
font-weight: 500;
589+
margin-bottom: 4rem;
590+
}
591+
592+
.footer-nav {
593+
list-style: none;
594+
display: flex;
595+
flex-flow: column;
596+
gap: 2.4rem;
597+
}
598+
599+
.footer-link:link,
600+
.footer-link:visited {
601+
text-decoration: none;
602+
font-size: 1.6rem;
603+
color: #767676;
604+
transition: all 0.3s;
605+
}
606+
607+
.footer-link:hover,
608+
.footer-link:active {
609+
color: #555;
610+
}

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

Lines changed: 118 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,16 @@
2222
</head>
2323
<body>
2424
<header class="header">
25-
<img src="img/omnifood-logo.png" class="logo" alt="Omnifood logo" />
25+
<a href="#">
26+
<img src="img/omnifood-logo.png" class="logo" alt="Omnifood logo" />
27+
</a>
2628
<nav class="main-nav">
2729
<ul class="main-nav-list">
28-
<li><a class="main-nav-link" href="#">Section 1</a></li>
29-
<li><a class="main-nav-link" href="#">Section 2</a></li>
30-
<li><a class="main-nav-link" href="#">Section 3</a></li>
31-
<li><a class="main-nav-link" href="#">Section 4</a></li>
32-
<li><a class="main-nav-link nav-cta" href="#">Section 5</a></li>
30+
<li><a class="main-nav-link" href="#">How it works</a></li>
31+
<li><a class="main-nav-link" href="#">Meals</a></li>
32+
<li><a class="main-nav-link" href="#">Testimonials</a></li>
33+
<li><a class="main-nav-link" href="#">Pricing</a></li>
34+
<li><a class="main-nav-link nav-cta" href="#">Try for free</a></li>
3335
</ul>
3436
</nav>
3537
</header>
@@ -421,7 +423,116 @@ <h2 class="heading-secondary">Eat well without breaking the bank</h2>
421423
</div>
422424
</div>
423425
</section>
426+
427+
<section class="section-cta">
428+
<div class="container">
429+
<div class="cta">
430+
<div class="cta-text-box">
431+
<h2 class="heading-secondary">Get your first meal free!</h2>
432+
<p class="cta-text">
433+
Healthy, tasty and hassle-free meals are waiting for you. Start eating well today. You
434+
can cancel or pause anytime. And the first meal is on us!
435+
</p>
436+
<form class="cta-form" action="#">
437+
<div>
438+
<label for="full-name">Full name</label>
439+
<input id="full-name" type="text" placeholder="John Smith" required />
440+
</div>
441+
<div>
442+
<label for="email">Email address</label>
443+
<input id="email" type="email" placeholder="me@example.com" required />
444+
</div>
445+
446+
<div>
447+
<label for="select-where">Where did you hear about us?</label>
448+
<select name="" id="select-where" required>
449+
<option value="">Please choose one option</option>
450+
<option value="friends_family">Friends and family</option>
451+
<option value="youtube">YouTube video</option>
452+
<option value="instagram">Instagram video</option>
453+
<option value="facebook">Facebook ad</option>
454+
<option value="podcast">Podcast</option>
455+
<option value="other">Other</option>
456+
</select>
457+
</div>
458+
459+
<button class="btn btn--form">Sign up now</button>
460+
</form>
461+
</div>
462+
463+
<div class="cta-img-box" role="img" aria-label="Woman enjoying food"></div>
464+
</div>
465+
</div>
466+
</section>
424467
</main>
425-
<footer></footer>
468+
<footer class="footer">
469+
<div class="container grid grid--footer">
470+
<div class="logo-col">
471+
<a href="#" class="footer-logo">
472+
<img src="img/omnifood-logo.png" class="logo" alt="Omnifood logo" />
473+
</a>
474+
475+
<ul class="social-links">
476+
<li>
477+
<a class="footer-link" href="#"
478+
><ion-icon class="social-icon" name="logo-instagram"></ion-icon
479+
></a>
480+
</li>
481+
<li>
482+
<a class="footer-link" href="#"
483+
><ion-icon class="social-icon" name="logo-facebook"></ion-icon
484+
></a>
485+
</li>
486+
<li>
487+
<a class="footer-link" href="#"
488+
><ion-icon class="social-icon" name="logo-twitter"></ion-icon
489+
></a>
490+
</li>
491+
</ul>
492+
493+
<p class="copyright">Copyright &copy; 2027 by Omnifood, Inc. All rights reserved</p>
494+
</div>
495+
<div class="address-col">
496+
<p class="footer-heading">Contact us</p>
497+
<address class="contacts">
498+
<p class="address">623 Harrison St., 2nd Floor, San Francisco, CA 94107</p>
499+
<p>
500+
<a class="footer-link" href="tel:415-201-6370">415-201-6370</a><br /><a
501+
class="footer-link"
502+
href="mailto:hello@omnifood.com"
503+
>hello@omnifood.com</a
504+
>
505+
</p>
506+
</address>
507+
</div>
508+
509+
<nav class="nav-col">
510+
<p class="footer-heading">Account</p>
511+
<ul class="footer-nav">
512+
<li><a class="footer-link" href="#">Create account</a></li>
513+
<li><a class="footer-link" href="#">Sign in</a></li>
514+
<li><a class="footer-link" href="#">iOS app</a></li>
515+
<li><a class="footer-link" href="#">Android app</a></li>
516+
</ul>
517+
</nav>
518+
<nav class="nav-col">
519+
<p class="footer-heading">Company</p>
520+
<ul class="footer-nav">
521+
<li><a class="footer-link" href="#">About Omnifood</a></li>
522+
<li><a class="footer-link" href="#">For Business</a></li>
523+
<li><a class="footer-link" href="#">Cooking partners</a></li>
524+
<li><a class="footer-link" href="#">Careers</a></li>
525+
</ul>
526+
</nav>
527+
<nav class="nav-col">
528+
<p class="footer-heading">Resources</p>
529+
<ul class="footer-nav">
530+
<li><a class="footer-link" href="#">Recipe directory</a></li>
531+
<li><a class="footer-link" href="#">Help center</a></li>
532+
<li><a class="footer-link" href="#">Privacy & terms</a></li>
533+
</ul>
534+
</nav>
535+
</div>
536+
</footer>
426537
</body>
427538
</html>

0 commit comments

Comments
 (0)