Skip to content

Commit f23e350

Browse files
kalpshah485kalpshah485
committed
feat:completed omnifood optimization part
1 parent 90152cd commit f23e350

File tree

14 files changed

+286
-94
lines changed

14 files changed

+286
-94
lines changed

‎09-Omnifood-Optimizations/css/general.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,9 @@ html {
7070
/* Percentage of user's browser font-size setting */
7171
font-size: 62.5%;
7272
overflow-x: hidden;
73+
74+
/* Does NOT work on Safari */
75+
/* scroll-behavior: smooth; */
7376
}
7477

7578
body {

‎09-Omnifood-Optimizations/css/queries.css

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,10 +124,13 @@
124124
/* MOBILE NAVIGATION */
125125
.btn-mobile-nav {
126126
display: block;
127+
z-index: 9999;
127128
}
128129

129130
.main-nav {
130-
background-color: rgba(255, 255, 255, 0.97);
131+
background-color: rgba(255, 255, 255, 0.9);
132+
-webkit-backdrop-filter: blur(5px);
133+
backdrop-filter: blur(10px);
131134
position: absolute;
132135
top: 0;
133136
left: 0;
@@ -298,3 +301,56 @@
298301
- Spacing system (px)
299302
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
300303
*/
304+
305+
/**************************/
306+
/* Fixing Safari flexbox gap */
307+
/**************************/
308+
309+
.no-flexbox-gap .main-nav-list li:not(:last-child) {
310+
margin-right: 4.8rem;
311+
}
312+
313+
.no-flexbox-gap .list-item:not(:last-child) {
314+
margin-bottom: 1.6rem;
315+
}
316+
317+
.no-flexbox-gap .list-icon:not(:last-child) {
318+
margin-right: 1.6rem;
319+
}
320+
321+
.no-flexbox-gap .delivered-faces {
322+
margin-right: 1.6rem;
323+
}
324+
325+
.no-flexbox-gap .meal-attribute:not(:last-child) {
326+
margin-bottom: 2rem;
327+
}
328+
329+
.no-flexbox-gap .meal-icon {
330+
margin-right: 1.6rem;
331+
}
332+
333+
.no-flexbox-gap .footer-row div:not(:last-child) {
334+
margin-right: 6.4rem;
335+
}
336+
337+
.no-flexbox-gap .social-links li:not(:last-child) {
338+
margin-right: 2.4rem;
339+
}
340+
341+
.no-flexbox-gap .footer-nav li:not(:last-child) {
342+
margin-bottom: 2.4rem;
343+
}
344+
345+
@media (max-width: 75em) {
346+
.no-flexbox-gap .main-nav-list li:not(:last-child) {
347+
margin-right: 3.2rem;
348+
}
349+
}
350+
351+
@media (max-width: 59em) {
352+
.no-flexbox-gap .main-nav-list li:not(:last-child) {
353+
margin-right: 0;
354+
margin-bottom: 4.8rem;
355+
}
356+
}

‎09-Omnifood-Optimizations/css/style.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,24 @@
7676
display: none;
7777
}
7878

79+
/* STICKY NAVIGATION */
80+
.sticky .header {
81+
position: fixed;
82+
top: 0;
83+
bottom: 0;
84+
width: 100%;
85+
height: 8rem;
86+
padding-top: 0;
87+
padding-bottom: 0;
88+
background-color: rgba(255, 255, 255, 0.97);
89+
z-index: 999;
90+
box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
91+
}
92+
93+
.sticky .section-hero {
94+
margin-top: 9.6rem;
95+
}
96+
7997
/**************************/
8098
/* HERO SECTION */
8199
/**************************/

‎09-Omnifood-Optimizations/img/apple-touch-icon.png

18.9 KB
Loading

‎09-Omnifood-Optimizations/img/favicon-192.png

20.8 KB
Loading

‎09-Omnifood-Optimizations/img/favicon-512.png

15.2 KB
Loading

‎09-Omnifood-Optimizations/img/favicon.png

-9.95 KB
Loading

‎09-Omnifood-Optimizations/img/hero-min.png

473 KB
Loading

‎09-Omnifood-Optimizations/img/hero.png

-858 KB
Loading

‎09-Omnifood-Optimizations/img/hero.webp

197 KB
Binary file not shown.

‎09-Omnifood-Optimizations/index.html

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,17 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta
7+
name="description"
8+
content="Omnifood is an AI-powered food subscription that will make you eat healthy again, 365 days per year. It's tailored to your personal tastes and nutritional needs."
9+
/>
610

711
<!-- Always include this line of code!!! -->
812
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
913

14+
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon" />
15+
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
16+
<link rel="manifest" href="manifest.webmanifest" />
1017
<link rel="preconnect" href="https://fonts.gstatic.com" />
1118
<link
1219
href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"
@@ -26,7 +33,13 @@
2633
src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.js"
2734
></script>
2835

29-
<title>Omnifood</title>
36+
<script
37+
defer
38+
src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"
39+
></script>
40+
<script defer src="js/script.js"></script>
41+
42+
<title>Omnifood &mdash; Never cook again!</title>
3043
</head>
3144
<body>
3245
<header class="header">
@@ -36,11 +49,13 @@
3649

3750
<nav class="main-nav">
3851
<ul class="main-nav-list">
39-
<li><a class="main-nav-link" href="#">How it works</a></li>
40-
<li><a class="main-nav-link" href="#">Meals</a></li>
41-
<li><a class="main-nav-link" href="#">Testimonials</a></li>
42-
<li><a class="main-nav-link" href="#">Pricing</a></li>
43-
<li><a class="main-nav-link nav-cta" href="#">Try for free</a></li>
52+
<li><a class="main-nav-link" href="#how">How it works</a></li>
53+
<li><a class="main-nav-link" href="#meals">Meals</a></li>
54+
<li>
55+
<a class="main-nav-link" href="#testimonials">Testimonials</a>
56+
</li>
57+
<li><a class="main-nav-link" href="#pricing">Pricing</a></li>
58+
<li><a class="main-nav-link nav-cta" href="#cta">Try for free</a></li>
4459
</ul>
4560
</nav>
4661

@@ -62,10 +77,11 @@ <h1 class="heading-primary">
6277
eat healthy again. Tailored to your personal tastes and
6378
nutritional needs.
6479
</p>
65-
<a href="#" class="btn btn--full margin-right-sm"
80+
<a href="#cta" class="btn btn--full margin-right-sm"
6681
>Start eating well</a
6782
>
68-
<a href="#" class="btn btn--outline">Learn more &darr;</a>
83+
84+
<a href="#how" class="btn btn--outline">Learn more &darr;</a>
6985
<div class="delivered-meals">
7086
<div class="delivered-imgs">
7187
<img src="img/customers/customer-1.jpg" alt="Customer photo" />
@@ -81,11 +97,16 @@ <h1 class="heading-primary">
8197
</div>
8298
</div>
8399
<div class="hero-img-box">
84-
<img
85-
src="img/hero.png"
86-
class="hero-img"
87-
alt="Woman enjoying food, meals in storage container, and food bowls on a table"
88-
/>
100+
<picture>
101+
<source srcset="img/hero.webp" type="image/webp" />
102+
<source srcset="img/hero-min.png" type="image/png" />
103+
104+
<img
105+
src="img/hero-min.png"
106+
class="hero-img"
107+
alt="Woman enjoying food, meals in storage container, and food bowls on a table"
108+
/>
109+
</picture>
89110
</div>
90111
</div>
91112
</section>
@@ -109,7 +130,7 @@ <h2 class="heading-featured-in">As featured in</h2>
109130
</div>
110131
</section>
111132

112-
<section class="section-how">
133+
<section class="section-how" id="how">
113134
<div class="container">
114135
<span class="subheading">How it works</span>
115136
<h2 class="heading-secondary">
@@ -181,7 +202,7 @@ <h3 class="heading-tertiary">Receive meals at convenient time</h3>
181202
</div>
182203
</section>
183204

184-
<section class="section-meals">
205+
<section class="section-meals" id="meals">
185206
<div class="container center-text">
186207
<span class="subheading">Meals</span>
187208
<h2 class="heading-secondary">
@@ -301,7 +322,7 @@ <h3 class="heading-tertiary">Works with any diet:</h3>
301322
</div>
302323
</section>
303324

304-
<section class="section-testimonials">
325+
<section class="section-testimonials" id="testimonials">
305326
<div class="testimonials-container">
306327
<span class="subheading">Testimonials</span>
307328
<h2 class="heading-secondary">Once you try it, you can't go back</h2>
@@ -450,7 +471,7 @@ <h2 class="heading-secondary">Once you try it, you can't go back</h2>
450471
</div>
451472
</section>
452473

453-
<section class="section-pricing">
474+
<section class="section-pricing" id="pricing">
454475
<div class="container">
455476
<span class="subheading">Pricing</span>
456477
<h2 class="heading-secondary">
@@ -560,7 +581,7 @@ <h2 class="heading-secondary">
560581
</div>
561582
</section>
562583

563-
<section class="section-cta">
584+
<section class="section-cta" id="cta">
564585
<div class="container">
565586
<div class="cta">
566587
<div class="cta-text-box">
@@ -571,13 +592,14 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
571592
first meal is on us!
572593
</p>
573594

574-
<form class="cta-form" action="#">
595+
<form class="cta-form" name="sign-up" netlify>
575596
<div>
576597
<label for="full-name">Full Name</label>
577598
<input
578599
id="full-name"
579600
type="text"
580601
placeholder="John Smith"
602+
name="full-name"
581603
required
582604
/>
583605
</div>
@@ -588,13 +610,14 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
588610
id="email"
589611
type="email"
590612
placeholder="me@example.com"
613+
name="email"
591614
required
592615
/>
593616
</div>
594617

595618
<div>
596619
<label for="select-where">Where did you hear from us?</label>
597-
<select id="select-where" required>
620+
<select id="select-where" name="select-where" required>
598621
<option value="">Please choose one option:</option>
599622
<option value="friends">Friends and family</option>
600623
<option value="youtube">YouTube video</option>
@@ -646,7 +669,8 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
646669
</ul>
647670

648671
<p class="copyright">
649-
Copyright &copy; 2027 by Omnifood, Inc. All rights reserved.
672+
Copyright &copy; <span class="year">2027</span> by Omnifood, Inc.
673+
All rights reserved.
650674
</p>
651675
</div>
652676

0 commit comments

Comments
 (0)