Skip to content

Commit 0e2cf6f

Browse files
Nadix92Nadix92
committed
Optimized page ready for deplyment
1 parent 302bdfd commit 0e2cf6f

File tree

13 files changed

+173
-28
lines changed

13 files changed

+173
-28
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ html {
6666
/* 10px / 16px = 0.625 = 62.5% */
6767
/* Percenteage of user's browser font-size settings */
6868
font-size: 62.5%;
69-
scroll-behavior: smooth;
69+
/* scroll-behavior: smooth; */
7070
}
7171

7272
body {
@@ -79,6 +79,10 @@ body {
7979
/* Only works if there is nothing absolutely positioned in relation to body */
8080
}
8181

82+
/* body .sticky {
83+
margin-top: 8rem;
84+
} */
85+
8286
/****************************/
8387
/* GENERAL REUSEABLE COMPONENTS */
8488
/****************************/

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

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,11 +123,13 @@ Insted, 1rem = 1em = 16px */
123123
/* MOBILE NAVIGATION */
124124
.btn-mobile-nav {
125125
display: block;
126-
z-index: 100;
126+
z-index: 9999;
127127
}
128128

129129
.main-nav {
130130
background-color: rgba(255, 255, 255, 0.9);
131+
-webkit-backdrop-filter: blur(5px);
132+
backdrop-filter: blur(5px);
131133
position: absolute;
132134
top: 0;
133135
left: 0;
@@ -283,3 +285,55 @@ Insted, 1rem = 1em = 16px */
283285
padding: 3.2rem;
284286
}
285287
}
288+
289+
/**************************/
290+
/* Fixing Safari flexbox gap */
291+
/**************************/
292+
.no-flexbox-gap .main-nav-list li:not(:last-child) {
293+
margin-right: 4.8rem;
294+
}
295+
296+
.no-flexbox-gap .list-item:not(:last-child) {
297+
margin-bottom: 1.6rem;
298+
}
299+
300+
.no-flexbox-gap .list-icon:not(:last-child) {
301+
margin-right: 1.6rem;
302+
}
303+
304+
.no-flexbox-gap .delivered-faces {
305+
margin-right: 1.6rem;
306+
}
307+
308+
.no-flexbox-gap .meal-attribute:not(:last-child) {
309+
margin-bottom: 2rem;
310+
}
311+
312+
.no-flexbox-gap .meal-icon {
313+
margin-right: 1.6rem;
314+
}
315+
316+
.no-flexbox-gap .footer-row div:not(:last-child) {
317+
margin-right: 6.4rem;
318+
}
319+
320+
.no-flexbox-gap .social-links li:not(:last-child) {
321+
margin-right: 2.4rem;
322+
}
323+
324+
.no-flexbox-gap .footer-nav li:not(:last-child) {
325+
margin-bottom: 2.4rem;
326+
}
327+
328+
@media (max-width: 75em) {
329+
.no-flexbox-gap .main-nav-list li:not(:last-child) {
330+
margin-right: 3.2rem;
331+
}
332+
}
333+
334+
@media (max-width: 59em) {
335+
.no-flexbox-gap .main-nav-list li:not(:last-child) {
336+
margin-right: 0;
337+
margin-bottom: 4.8rem;
338+
}
339+
}

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,22 @@
7575
display: none;
7676
}
7777

78-
.icon-mobile-nav[name='menu-outline'] {
78+
/* STICKY NAVIGATION */
79+
.sticky .header {
80+
position: fixed;
81+
top: 0;
82+
/* bottom: 0; */
83+
width: 100%;
84+
background-color: rgba(255, 255, 255, 0.95);
85+
height: 8rem;
86+
padding-top: 0;
87+
padding-bottom: 0;
88+
z-index: 999;
89+
box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
90+
}
91+
92+
.sticky .section-hero {
93+
margin-top: 9.6rem;
7994
}
8095

8196
/****************************/

‎starter/07-Omnifood-Desktop/img/favicon180x180.png

11.2 KB
Loading

‎starter/07-Omnifood-Desktop/img/favicon192x192.png

12.2 KB
Loading

‎starter/07-Omnifood-Desktop/img/favicon512x512.png

15.2 KB
Loading

‎starter/07-Omnifood-Desktop/img/favicon64x64.png

3.6 KB
Loading

‎starter/07-Omnifood-Desktop/img/hero-1200x1184-min.webp

200 KB
Binary file not shown.

‎starter/07-Omnifood-Desktop/img/hero.png

-2.76 MB
Binary file not shown.

‎starter/07-Omnifood-Desktop/img/hero1200x1184-min.png

444 KB
Loading

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

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,27 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta
8+
name="description"
9+
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."
10+
/>
711
<link rel="stylesheet" href="css/general.css" />
812
<link rel="stylesheet" href="css/style.css" />
913
<link rel="stylesheet" href="css/queries.css" />
1014

15+
<link rel="shortcut icon" href="img/favicon64x64.png" type="image/x-icon" />
16+
<link rel="apple-touch-icon" href="img/favicon180x180.png" />
17+
<link rel="manifest" href="manifest.webmanifest" />
18+
19+
<script defer src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script>
20+
1121
<script src="js/script.js" defer></script>
1222

13-
<title>Omnifood</title>
23+
<title>Omnifood &mdash; Never cook again!</title>
1424
</head>
1525
<body>
1626
<header class="header">
17-
<a href="/"><img class="logo" src="img/omnifood-logo.png" alt="omnifood-logo" /></a>
27+
<a href="#"><img class="logo" src="img/omnifood-logo.png" alt="omnifood-logo" /></a>
1828
<nav class="main-nav">
1929
<ul class="main-nav-list">
2030
<li><a class="main-nav-link" href="#how">How it works</a></li>
@@ -32,16 +42,16 @@
3242
</header>
3343

3444
<main>
35-
<section class="section-hero">
45+
<section class="section-hero" id="hero">
3646
<div class="hero">
3747
<div class="hero-text-box">
3848
<h1 class="heading-primary">A healthy meal delivered to your door, every single day</h1>
3949
<p class="hero-description">
4050
The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to
4151
your personal tastes and nutritional needs.
4252
</p>
43-
<a href="#" class="btn btn--full margin-right-sm">Start eating well</a>
44-
<a href="#" class="btn btn--outline">Learn more &darr;</a>
53+
<a href="#signup" class="btn btn--full margin-right-sm">Start eating well</a>
54+
<a href="#how" class="btn btn--outline">Learn more &darr;</a>
4555

4656
<div class="delivered-meals">
4757
<div class="delivered-imgs">
@@ -56,11 +66,16 @@ <h1 class="heading-primary">A healthy meal delivered to your door, every single
5666
</div>
5767
</div>
5868
<div class="hero-image-box">
59-
<img
60-
src="img/hero.png"
61-
alt="Woman enjoing good, meals in storage container, and food bowls on a table"
62-
class="hero-img"
63-
/>
69+
<picture>
70+
<source srcset="img/hero-1200x1184-min.webp" type="image/webp" />
71+
<source srcset="img/hero-1200x1184-min.png" type="image/png" />
72+
73+
<img
74+
src="img/hero1200x1184-min.png"
75+
alt="Woman enjoing good, meals in storage container, and food bowls on a table"
76+
class="hero-img"
77+
/>
78+
</picture>
6479
</div>
6580
</div>
6681
</section>
@@ -454,20 +469,20 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
454469
Healthy, tasty and hassle-free meals are waiting for you. Start eating well today. You can
455470
cancel or pause anytime. And the first meal is on us!
456471
</p>
457-
<form class="cta-form" action="#">
472+
<form class="cta-form" name="sign-up" netlify>
458473
<div>
459474
<label for="full-name">Full Name</label>
460-
<input id="full-name" type="text" placeholder="John Smith" required />
475+
<input id="full-name" type="text" placeholder="John Smith" name="full-name" required />
461476
</div>
462477

463478
<div>
464479
<label for="email">Email adress</label>
465-
<input id="email" type="email" placeholder="me@example.com" required />
480+
<input id="email" type="email" placeholder="me@example.com" name="email" required />
466481
</div>
467482

468483
<div>
469484
<label for="select-where">Where did you hear from us?</label>
470-
<select name="" id="select-where" required>
485+
<select name="select-where" id="select-where" required>
471486
<option value="">Please choose one option:</option>
472487
<option value="friends">Friends and family</option>
473488
<option value="youtube">Youtube video</option>

‎starter/07-Omnifood-Desktop/js/script.js

Lines changed: 54 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,57 @@
1+
///////////////////////////////////////////////////////////
2+
// Fixing scrolling animation
3+
const allLink = document.querySelectorAll('a:link');
4+
const headerEl = document.querySelector('.header');
5+
6+
allLink.forEach(function (link) {
7+
link.addEventListener('click', function (e) {
8+
e.preventDefault();
9+
const href = link.getAttribute('href');
10+
11+
// Scroll back to top
12+
if (href === '#') window.scrollTo({ top: 0, behavior: 'smooth' });
13+
14+
// Scroll to spesific section
15+
if (href !== '#' && href.startsWith('#')) {
16+
const sectionEl = document.querySelector(href);
17+
sectionEl.scrollIntoView({ behavior: 'smooth' });
18+
}
19+
20+
// close mobile navigation
21+
if (link.classList.contains('main-nav-link')) headerEl.classList.toggle('nav-open');
22+
});
23+
});
24+
25+
///////////////////////////////////////////////////////////
26+
// Sticky Navigation
27+
const heroSection = document.getElementById('hero');
28+
29+
const obs = new IntersectionObserver(
30+
function (entries) {
31+
const ent = entries[0];
32+
if (!ent.isIntersecting) document.body.classList.add('sticky');
33+
else document.body.classList.remove('sticky');
34+
},
35+
{
36+
// In the viewport
37+
root: null,
38+
threshold: 0,
39+
rootMargin: '-80px',
40+
}
41+
);
42+
obs.observe(heroSection);
43+
44+
///////////////////////////////////////////////////////////
45+
// get and set current year in footer copy right
46+
document.getElementById('year').textContent = new Date().getFullYear();
47+
48+
///////////////////////////////////////////////////////////
49+
// Make mobile navigation work
50+
const btnNav = document.querySelector('.btn-mobile-nav');
51+
btnNav.addEventListener('click', () => {
52+
headerEl.classList.toggle('nav-open');
53+
});
54+
155
///////////////////////////////////////////////////////////
256
// Fixing flexbox gap property missing in some Safari versions
357
function checkFlexGap() {
@@ -17,14 +71,3 @@ function checkFlexGap() {
1771
if (!isSupported) document.body.classList.add('no-flexbox-gap');
1872
}
1973
checkFlexGap();
20-
21-
// https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js
22-
23-
// get and set current year in footer copy right
24-
document.getElementById('year').textContent = new Date().getFullYear();
25-
26-
// Make mobile navigation work
27-
const btnNav = document.querySelector('.btn-mobile-nav');
28-
btnNav.addEventListener('click', () => {
29-
document.querySelector('.header').classList.toggle('nav-open');
30-
});

‎starter/07-Omnifood-Desktop/manifest.webmanifest

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"icons": [
3+
{
4+
"src": "/img/favicon192x192.png",
5+
"type":"image/png",
6+
"sizes": "192x192"
7+
},
8+
{
9+
"src": "/img/favicon512x512.png",
10+
"type":"image/png",
11+
"sizes": "512x512"
12+
}
13+
]
14+
}

0 commit comments

Comments
 (0)