Skip to content

Commit 5a246cc

Browse files
mounikaperimounikaperi
committed
Feature Additions to Website
1 parent 19bd2a6 commit 5a246cc

File tree

11 files changed

+229
-47
lines changed

11 files changed

+229
-47
lines changed

‎Project-OmniFood/general.css

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
2+
/* ----------------------------------- */
3+
/* General Section - Reusable */
4+
/* ----------------------------------- */
5+
.heading__primary,
6+
.heading__secondary {
7+
font-size: 5.2rem;
8+
font-weight: 700;
9+
margin-bottom: 3.2rem;
10+
color: #333;
11+
}
12+
.heading__primary{
13+
line-height: 1.05;
14+
color: #333;
15+
color: #343a40;
16+
letter-spacing: -0.5px;
17+
}
18+
.heading__secondary {
19+
font-size: 4.4rem;
20+
line-height: 1.2;
21+
margin-bottom: 9.6rem;
22+
color: #333;
23+
}
24+
.heading__tertiary {
25+
font-size: 3.6rem;
26+
line-height: 1.2;
27+
margin-bottom: 3.2rem;
28+
color: #333;
29+
}
30+
.subheading{
31+
display: inline-block;
32+
font-size: 1.6rem;
33+
font-weight: 500;
34+
color: #cf711f;
35+
text-transform: uppercase;
36+
margin-bottom: 1.6rem;
37+
letter-spacing: 0.75px;
38+
}
39+
.btn:link,
40+
.btn:visited {
41+
font-size: 2rem;
42+
color: #fff;
43+
display: inline-block;
44+
padding: 1.6rem 3.2rem;
45+
text-decoration: none;
46+
font-weight: 600;
47+
border-radius: 1.0rem;
48+
transition: background-color 0.3s; /* Always put it in original state */
49+
}
50+
.btn--full:link,
51+
.btn--full:visited {
52+
background-color: #e67e22;
53+
}
54+
.btn--full:hover,
55+
.btn--full:active {
56+
background-color: #cf711f;
57+
58+
}
59+
.btn--outline:link,
60+
.btn--outline:visited {
61+
background-color: #fff;
62+
color: #555;
63+
}
64+
.btn--outline:hover,
65+
.btn--outline:active {
66+
background-color: #fdf2e9;
67+
box-shadow: inset 0 0 0 3px #fff; /*Trick to add border inside */
68+
}
69+
.margin-right-sm {
70+
margin-right: 1.6rem;
71+
}
72+
.container {
73+
max-width: 120rem;
74+
padding: 0 3.2rem;
75+
margin: 0 auto;
76+
}
77+
.grid {
78+
display: grid;
79+
row-gap: 9.6rem;
80+
column-gap: 6.4rem;
81+
}
82+
.grid--2--cols {
83+
grid-template-columns: repeat(2, 1fr);
84+
}
85+
.grid--3--cols {
86+
grid-template-columns: repeat(3, 1fr);
87+
}
88+
.grid--4--cols {
89+
grid-template-columns: repeat(4, 1fr);
90+
}
91+
.grid--center--v {
92+
align-items: self;
93+
}

‎Project-OmniFood/img/app/app-screen-1.png

140 KB
Loading

‎Project-OmniFood/img/app/app-screen-2.png

214 KB
Loading

‎Project-OmniFood/img/app/app-screen-3.png

210 KB
Loading

‎Project-OmniFood/img/logos/business-insider.png

18.8 KB
Loading

‎Project-OmniFood/img/logos/forbes.png

20.7 KB
Loading

‎Project-OmniFood/img/logos/techcrunch.png

15 KB
Loading

‎Project-OmniFood/img/logos/the-new-york-times.png

24.9 KB
Loading

‎Project-OmniFood/img/logos/usa-today.png

20.2 KB
Loading

‎Project-OmniFood/index.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<link rel="preconnect" href="https://fonts.gstatic.com" />
99
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet" />
10+
<link rel="stylesheet" href="general.css">
1011
<link rel="stylesheet" href="omnifood.css">
1112
<title>OmniFood</title>
1213
</head>
@@ -52,6 +53,68 @@ <h1 class="heading__primary">A healthy meal delivered to your door, every single
5253
</div>
5354
</div>
5455
</section>
56+
<section class="heading__featured">
57+
<div class="container">
58+
<h2 class="heading__featured">As featured in</h2>
59+
<div class="logos">
60+
<img src="img/logos/techcrunch.png" alt="Tech Crunch">
61+
<img src="img/logos/business-insider.png" alt="BusinessInsider" />
62+
<img src="img/logos/the-new-york-times.png" alt="The New York Times" />
63+
<img src="img/logos/forbes.png" alt="Forbes" />
64+
<img src="img/logos/usa-today.png" alt="USA Today" />
65+
</div>
66+
</div>
67+
</section>
68+
<section class="section__how">
69+
<div class="container">
70+
<span class="subheading">How it works</span>
71+
<h2 class="heading__secondary">
72+
Your daily dose of Health in 3 simple steps
73+
</h2>
74+
</div>
75+
<div class="container grid grid--2--cols grid--center--v">
76+
<!-- STEP-01 -->
77+
<div class="step__text-box">
78+
<p class="step__number">01</p>
79+
<h3 class="heading__tertiary">
80+
Tell us what you like (and what not)
81+
</h3>
82+
<p class="step__description">
83+
Never again waste time thinking about what to eat! Omnifood AI will create a 100% personalized weekly meal plan just for you. It makes sure you get all nutrients and vitamins you need, no matter what diet you follow!
84+
</p>
85+
</div>
86+
<div class="step__image-box">
87+
<img src="img/app/app-screen-1.png" alt="iPhone app preferences selection app" class="step__img" />
88+
</div>
89+
<!-- STEP- 02 -->
90+
<div class="step__image-box">
91+
<img src="img/app/app-screen-2.png" alt="iPhone app preferences meal approving plan" class="step__img" />
92+
</div>
93+
<div class="step__text-box">
94+
<p class="step__number">02</p>
95+
<h3 class="heading__tertiary">
96+
Approve your weekly meal plan
97+
</h3>
98+
<p class="step__description">
99+
Once per week, approve the meal plan generated for you by Omnifood AI. You can change ingredients, swap entire meals, or even add your own recipes.
100+
</p>
101+
</div>
102+
<!-- STEP - 03 -->
103+
<div class="step__text-box">
104+
<p class="step__number">03</p>
105+
<h3 class="heading__tertiary">
106+
Receive meals at convenient time
107+
</h3>
108+
<p class="step__description">
109+
Best Chefs in town will cook your selected meal every day, and we will deliver it to your door whenever works best for you. You can change delivery schedule and address daily!
110+
</p>
111+
</div>
112+
<div class="step__image-box">
113+
<img src="img/app/app-screen-3.png" alt="iPhone app delivery screen" class="step__img" />
114+
</div>
115+
</div>
116+
</section>
117+
55118
</main>
56119
</body>
57120

‎Project-OmniFood/omnifood.css

Lines changed: 73 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -13,55 +13,11 @@ body {
1313
color: #555;
1414
}
1515
/* ----------------------------------- */
16-
/* General Section - Reusable */
17-
/* ----------------------------------- */
18-
.heading__primary{
19-
font-size: 5.2rem;
20-
font-weight: 700;
21-
line-height: 1.05;
22-
color: #333;
23-
letter-spacing: -0.5px;
24-
margin-bottom: 3.2rem;
25-
}
26-
.btn:link,
27-
.btn:visited {
28-
font-size: 2rem;
29-
color: #fff;
30-
display: inline-block;
31-
padding: 1.6rem 3.2rem;
32-
text-decoration: none;
33-
font-weight: 600;
34-
border-radius: 1.0rem;
35-
transition: background-color 0.3s; /* Always put it in original state */
36-
}
37-
.btn--full:link,
38-
.btn--full:visited {
39-
background-color: #e67e22;
40-
}
41-
.btn--full:hover,
42-
.btn--full:active {
43-
background-color: #cf711f;
44-
45-
}
46-
.btn--outline:link,
47-
.btn--outline:visited {
48-
background-color: #fff;
49-
color: #555;
50-
}
51-
.btn--outline:hover,
52-
.btn--outline:active {
53-
background-color: #fdf2e9;
54-
box-shadow: inset 0 0 0 3px #fff; /*Trick to add border inside */
55-
}
56-
.margin-right-sm {
57-
margin-right: 1.6rem;
58-
}
59-
/* ----------------------------------- */
6016
/* Header */
6117
/* ----------------------------------- */
6218
.header {
6319
display: flex;
64-
background-color: #fdf2e9;
20+
background-color: #f8d8bd;
6521
justify-content: space-between;
6622
align-items: center;
6723
height: 9.6rem; /*Because we want it to be sticky later */
@@ -106,7 +62,7 @@ body {
10662
/* Hero Section */
10763
/* ----------------------------------- */
10864
.section__hero {
109-
background-color: #fdf2e9;
65+
background-color: #f8d8bd;
11066
padding: 4.8rem 0 9.6rem 0;
11167
}
11268
.hero {
@@ -140,7 +96,7 @@ body {
14096
width: 4.8rem;
14197
border-radius: 50%;
14298
margin-right: -1.6rem;
143-
border: 3px solid #fdf2e9;
99+
border: 3px solid #f8d8bd;
144100
}
145101
.delivered__images img:last-child {
146102
margin: 0;
@@ -152,3 +108,73 @@ body {
152108
.delivered__text span {
153109
color: #cf711f;
154110
}
111+
/* ----------------------------------- */
112+
/* Featured in section */
113+
/* ----------------------------------- */
114+
.section__featured {
115+
padding: 4.8rem 0;
116+
}
117+
.heading__featured{
118+
font-size: 1.4rem;
119+
text-transform: uppercase;
120+
letter-spacing: 0.75px;
121+
text-align:center;
122+
margin-bottom: 2.4rem;
123+
margin-top: 4.8rem;
124+
}
125+
.logos {
126+
display: flex;
127+
justify-content: space-between;
128+
}
129+
.logos img {
130+
height: 3.2rem;
131+
filter: brightness(0);
132+
opacity: 50%;
133+
}
134+
/* ----------------------------------- */
135+
/* How it Works */
136+
/* ----------------------------------- */
137+
.section__how {
138+
padding: 9.6rem 0;
139+
}
140+
.step__number {
141+
font-size: 8.6rem;
142+
font-weight: 600;
143+
color: #b3b3b3;
144+
margin-bottom: 1.2rem;
145+
}
146+
.step__description {
147+
font-size: 1.8rem;
148+
line-height: 1.8;
149+
}
150+
.step__image-box {
151+
display: flex;
152+
align-items: center;
153+
justify-content: center;
154+
position: relative;
155+
}
156+
.step__image-box::before,
157+
.step__image-box::after {
158+
content: '';
159+
display: block;
160+
position: absolute;
161+
top: 50%;
162+
left: 50%;
163+
transform: translate(-50%, -50%);
164+
border-radius: 50%;
165+
}
166+
.step__image-box::before {
167+
width: 60%;
168+
padding-bottom: 60%;
169+
background-color: #f8d8bd;
170+
z-index: -1;
171+
}
172+
.step__image-box::after {
173+
width: 50%;
174+
padding-bottom: 50%;
175+
background-color: #f5cba7;
176+
z-index: -1;
177+
}
178+
.step__img {
179+
width: 35%;
180+
}

0 commit comments

Comments
 (0)