Skip to content

Commit 7d6796f

Browse files
onkar-03onkar-03
committed
Complete Responsive Omnifood Project
0 parents  commit 7d6796f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+2366
-0
lines changed

‎.gitattributes

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto

‎Js/script.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
// Dynamic Year update in HTML using JavaScript in footer section
2+
const year = document.querySelector('.year');
3+
const currentYear = new Date().getFullYear();
4+
year.textContent = currentYear;
5+
6+
// Toggle menu for Mobile Navigation
7+
const button = document.querySelector('.btn-mobile-nav');
8+
const header = document.querySelector('.header');
9+
10+
button.addEventListener('click', function () {
11+
header.classList.toggle('nav-open');
12+
});
13+
14+
// Smooth scrolling animation
15+
const allLinks = document.querySelectorAll('a:link');
16+
17+
allLinks.forEach(function (link) {
18+
link.addEventListener('click', function (e) {
19+
e.preventDefault();
20+
const href = link.getAttribute('href');
21+
22+
// Scroll back to top
23+
if (href === '#')
24+
window.scrollTo({
25+
top: 0,
26+
behavior: 'smooth',
27+
});
28+
29+
// Scroll to other links
30+
if (href !== '#' && href.startsWith('#')) {
31+
const sectionEl = document.querySelector(href);
32+
sectionEl.scrollIntoView({ behavior: 'smooth' });
33+
}
34+
35+
// Close mobile navigation
36+
if (link.classList.contains('main-nav-link'))
37+
header.classList.toggle('nav-open');
38+
});
39+
});
40+
41+
// Sticky Navigation using Js
42+
// We want the navigation to get sticky when the hero-section is out of viewport
43+
const sectionHero = document.querySelector('.section-hero');
44+
45+
const obs = new IntersectionObserver(
46+
function (entries) {
47+
// Collecting the first entry from array of entries which corresponds to each threshold value
48+
const ent = entries[0];
49+
50+
// Add sticky nav as soon as the section ends
51+
if (ent.isIntersecting === false) {
52+
document.body.classList.add('sticky');
53+
}
54+
55+
// Remove sticky nav as soon as we get back up
56+
if (ent.isIntersecting === true) {
57+
document.body.classList.remove('sticky');
58+
}
59+
},
60+
{
61+
// viewing the stick nav In the Viewport -> root:null;
62+
root: null,
63+
64+
//Fire event the sticky nav as soon as there is 0% of the hero-section is inside of the viewport
65+
threshold: 0,
66+
67+
// To load the sticky nav as soon as there is only 80px left for hte hero section to finish completely
68+
rootMargin: '-80px',
69+
},
70+
);
71+
72+
// Calling Function
73+
obs.observe(sectionHero);
74+
75+
// Fixing flexbox gap property missing in some Safari versions
76+
function checkFlexGap() {
77+
var flex = document.createElement('div');
78+
flex.style.display = 'flex';
79+
flex.style.flexDirection = 'column';
80+
flex.style.rowGap = '1px';
81+
82+
flex.appendChild(document.createElement('div'));
83+
flex.appendChild(document.createElement('div'));
84+
85+
document.body.appendChild(flex);
86+
var isSupported = flex.scrollHeight === 1;
87+
flex.parentNode.removeChild(flex);
88+
console.log(isSupported);
89+
90+
if (!isSupported) document.body.classList.add('no-flexbox-gap');
91+
}
92+
checkFlexGap();

‎css/general.css

Lines changed: 296 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,296 @@
1+
/*
2+
--- 01 TYPOGRAPHY SYSTEM
3+
4+
- Font sizes (px)
5+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
6+
7+
- Font weights
8+
Default: 400
9+
Medium: 500
10+
Semi-bold: 600
11+
Bold: 700
12+
13+
- Line heights
14+
Default: 1
15+
Small: 1.05
16+
Medium: 1.2
17+
Paragraph default: 1.6
18+
19+
- Letter spacing
20+
-0.5px
21+
0.75px
22+
23+
--- 02 COLORS
24+
25+
- Primary: #e67e22
26+
- Tints:
27+
#fdf2e9
28+
#fae5d3
29+
#eb984e
30+
31+
- Shades:
32+
#cf711f
33+
#45260a
34+
35+
- Accents:
36+
- Greys
37+
38+
#888
39+
#767676 (lightest grey allowed on #fff)
40+
#6f6f6f (lightest grey allowed on #fdf2e9)
41+
#555
42+
#333
43+
44+
--- 05 SHADOWS
45+
46+
0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
47+
48+
--- 06 BORDER-RADIUS
49+
50+
Default: 9px
51+
Medium: 11px
52+
53+
--- 07 WHITESPACE
54+
55+
- Spacing system (px)
56+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
57+
*/
58+
59+
/* Global Reset */
60+
* {
61+
margin: 0;
62+
padding: 0;
63+
box-sizing: border-box;
64+
}
65+
66+
html {
67+
/* Default font-size: 16px */
68+
/* font-size: 10px; */
69+
/* 10 / 16 = 0.625 = 62.5%; */
70+
/* Percentage of User Browser font-size setting */
71+
font-size: 62.5%;
72+
73+
/* Sliding Menu Hide */
74+
overflow-x: hidden;
75+
76+
/* Add smooth scrolling throughout the page */
77+
/* scroll-behavior: smooth; */
78+
}
79+
80+
/* Simple styles to the Body */
81+
body {
82+
font-family: 'Rubik', sans-serif;
83+
line-height: 1;
84+
font-weight: 400;
85+
color: #555;
86+
87+
/* Sliding Menu Hide */
88+
/* Only works if its absolutely positioned in relation in relation to parent */
89+
overflow-x: hidden;
90+
}
91+
92+
/* ********************** */
93+
/* GENERAL REUSABLE COMPONENTS */
94+
/* ********************** */
95+
96+
/* Reusable Centered Container */
97+
.container {
98+
/* Standard Width mostly : 1200px , 1140px */
99+
max-width: 120rem;
100+
101+
/* Adding padding to avoid sticky content on responsive design similar to hero */
102+
padding: 0 3.2rem;
103+
104+
/* Centering Using Margin Trick*/
105+
margin: 0 auto;
106+
}
107+
108+
/* Creating Reusable Grid */
109+
.grid {
110+
display: grid;
111+
row-gap: 9.6rem;
112+
column-gap: 6.4rem;
113+
114+
/* margin-bottom: 9.6rem; */
115+
}
116+
117+
/* .grid:last-child{
118+
margin-bottom: 0;
119+
} */
120+
121+
/* Saying all grids that aren't the last grid will have margin-bottom of 9.6 rem */
122+
.grid:not(last-child) {
123+
margin-bottom: 9.6rem;
124+
}
125+
126+
/* Creating Reusable Grids with Multiple Columns */
127+
128+
.grid--2-cols {
129+
grid-template-columns: repeat(2, 1fr);
130+
}
131+
132+
.grid--3-cols {
133+
grid-template-columns: repeat(3, 1fr);
134+
}
135+
136+
.grid--4-cols {
137+
grid-template-columns: repeat(4, 1fr);
138+
}
139+
140+
.grid--5-cols {
141+
grid-template-columns: repeat(5, 1fr);
142+
}
143+
144+
.grid--center-v {
145+
/* Center all the content inside the columns */
146+
align-items: center;
147+
}
148+
.heading-primary,
149+
.heading-tertiary,
150+
.heading-tertiary {
151+
font-weight: 700;
152+
color: #555;
153+
line-height: 1.05;
154+
}
155+
156+
.heading-primary {
157+
font-size: 5.2rem;
158+
margin-bottom: 32px;
159+
letter-spacing: -0.5px;
160+
}
161+
162+
.heading-secondary {
163+
font-size: 4.4rem;
164+
165+
/* As the screen decrease multiple line heading is formed hence line-height */
166+
line-height: 1.2;
167+
168+
margin-bottom: 9.6rem;
169+
}
170+
171+
.heading-tertiary {
172+
font-size: 3rem;
173+
line-height: 1.2;
174+
margin-bottom: 3.2rem;
175+
}
176+
177+
.subheading {
178+
/* As span inline element */
179+
display: block;
180+
font-size: 1.6rem;
181+
font-weight: 500;
182+
color: #cf711f;
183+
text-transform: uppercase;
184+
margin-bottom: 1.6rem;
185+
letter-spacing: 0.75px;
186+
}
187+
188+
.btn,
189+
.btn:link,
190+
.btn:visited {
191+
/* Inline Block needs to be declared to apply padding */
192+
display: inline-block;
193+
194+
text-decoration: none;
195+
/* background-color: #e67e22; */
196+
font-size: 2rem;
197+
font-weight: 600;
198+
/* color: #fff; */
199+
200+
/* Only for Call to action Button */
201+
border: none;
202+
cursor: pointer;
203+
font-family: inherit;
204+
205+
padding: 1.6rem 3.2rem;
206+
border-radius: 9px;
207+
208+
/* No cursor:pointer; as for anchor elements by default the cursor changes to pointer */
209+
210+
/* Adding smooth transition of to buttons from one state to another */
211+
212+
/* Always add transition to original state */
213+
transition: all 0.3s;
214+
}
215+
216+
.btn--main:link,
217+
.btn--main:visited {
218+
background-color: #e67e22;
219+
color: #fff;
220+
}
221+
222+
.btn--main:hover,
223+
.btn--main:active {
224+
background-color: #cf711f;
225+
color: #fff;
226+
}
227+
228+
.btn--secondary:link,
229+
.btn--secondary:visited {
230+
background-color: #fff;
231+
color: #555;
232+
}
233+
234+
.btn--secondary:hover,
235+
.btn--secondary:active {
236+
background-color: #fdf2e9;
237+
238+
/* To add Border Inside using box-shadow inset property */
239+
box-shadow: 0 0 0 3px #fff inset;
240+
color: #555;
241+
}
242+
243+
.btn--form {
244+
background-color: #45260a;
245+
color: #fdf2e9;
246+
247+
/* Grid items take the full width of the cell of grid hence to set its size and space we align them */
248+
align-self: end;
249+
250+
padding: 1.2rem 1.2rem;
251+
}
252+
253+
.btn--form:hover {
254+
background-color: #fff;
255+
color: #555;
256+
}
257+
258+
.list {
259+
list-style: none;
260+
261+
/* Space Vertically between elements*/
262+
display: flex;
263+
flex-direction: column;
264+
gap: 1.6rem;
265+
}
266+
267+
.list-item {
268+
font-size: 1.8rem;
269+
270+
/* Center teh Icon and Text */
271+
display: flex;
272+
align-items: center;
273+
gap: 1.6rem;
274+
line-height: 1.2;
275+
}
276+
277+
.list-icon {
278+
height: 3rem;
279+
width: 3rem;
280+
color: #e67e22;
281+
}
282+
283+
/* HELPER CLASSES */
284+
/* Used a Helper Class to add right margin using this class whenever we want */
285+
/* ! important to specify highest priority */
286+
.margin-right-sm {
287+
margin-right: 1.6rem !important;
288+
}
289+
290+
.margin-bottom-md {
291+
margin-bottom: 4.8rem !important;
292+
}
293+
294+
.center--text {
295+
text-align: center;
296+
}

0 commit comments

Comments
 (0)