Skip to content

Commit 9381242

Browse files
nuthancnuthanc
committed
'Update'
1 parent f05c843 commit 9381242

File tree

3 files changed

+306
-50
lines changed

3 files changed

+306
-50
lines changed

‎starter/07-Omnifood-Desktop/README.md

Lines changed: 74 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,8 @@
144144
* similar to article element, but article element is self-contained
145145
* For section to exist, there should be multiple sections which are then part of something bigger
146146
* Give classname prefixed with section `class="section-hero"` so that it becomes easy to identify
147+
* Anchor tag for going somewhere and button for Actions(not related to Navigation)
148+
* That is why we have used anchor tag and styled them like buttons
147149
* Select everything using classes in css for consistency
148150
* `css grids` for the section-hero even though it is 1D layout to have equal sized columns and to have uniform layouts across the page
149151
* It could have been done using flex also, something like this
@@ -201,14 +203,83 @@
201203
* `box-shadow: inset 0 0 0 3px #fff;`
202204
* Nice animations for buttons using just css
203205
* `transition: all 1s`
204-
* Put transition on the original state
206+
* Put transition on the **original state**
205207
* We require for only background-color, so ``transition: background-color 0.3s``
206208
* Property to animate, over how much time
207209
* For space between the buttons, we could just add `margin-right` to `btn--full`
208210
* But that's not the right way as all the button `btn--full` class will have margin-right
209211
* Instead we will add helper class `margin-right-sm`
212+
* We also add important so that it gets applied over other styles
210213
```css
211214
.margin-right-sm {
212-
margin-right: 1.6rem;
215+
margin-right: 1.6rem !important;
213216
}
214-
```
217+
```
218+
* Choosing Inter typeface and paste it before our own Stylesheet
219+
* But we should use a *Rounder typeface* for Calm personality
220+
* *Rubik* is better suited for this
221+
* Delivered meals customer images below the buttons
222+
* `display: flex` for **.delivered-meals** because here we don't care about the column size and let the content determine the width
223+
* For the *images to overlap* on each other, use negative margin(**margin-right: -1.6rem**) on the image itself as negative gap doesn't seem to work on the flex container
224+
* For the overlapping images, border of *same color as the background*
225+
* **Coolers(https://coolors.co/) -> Contrast Checker** page for checking the contrast
226+
227+
### Building the Header
228+
229+
* Navigation and Logo *outside of fixed width container*
230+
* Use `header` element with class before `section-hero`
231+
* It consisits of img and nav elements
232+
* Using `main` element -> Main part of the Page
233+
* Doesn't include header and footer, which remains the same for multiple pages
234+
* Format our stylesheet to various sections like GENERAL REUSABLE COMPONENTS, HEADER and HERO SECTION
235+
* For logo image, usually we style the **height**
236+
* We want image on 1 side and Navigation on the other and we use flexbox to achieve this
237+
* After adding header(with img and nav), it has white background, make it have the *same background as the Hero section*
238+
* Giving a **fixed height** to header(instead of content determining the height and giving some padding)
239+
* This is done to make the **Navigation sticky(same position when scrolled down)** as it is easier with fixed height
240+
* Padding only for left and right is given because for top and bottom we have already given fixed height
241+
* When resized, the text is glued to the sides, so to fix it, we use padding to the hero class
242+
243+
### Building the Navigation
244+
245+
* Initially in our previous project, we used a bunch of anchor elements inside Navigation
246+
* But the proper way to do this is using *anchor tag* within *unordered lists*
247+
* Use `transition` for changing colors on hover on **original state**
248+
* Usually the last link will be a CTA
249+
* `display: inline-block` for all the links so that padding applies properly(for now, only for last link)
250+
251+
### Setting up a Reusable Grid
252+
253+
* Add another section(section-how)
254+
* Reusable grid by creating a grid class and variation classes
255+
```css
256+
.grid {
257+
display: grid;
258+
gap: 9.6rem;
259+
}
260+
261+
.grid--2-cols {
262+
grid-template-columns: repeat(2, 1fr);
263+
}
264+
265+
.grid--3-cols {
266+
grid-template-columns: repeat(3, 1fr);
267+
}
268+
```
269+
* Also create reusable container class
270+
```css
271+
.container {
272+
max-width: 120rem;
273+
/* Padding so that content is no longer glued to the sides */
274+
padding: 0 3.2rem;
275+
margin: 0 auto;
276+
}
277+
```
278+
* Max-width of 120rem(1200 px) is a standard. We also sometimes use 1140px
279+
* We would want the background-color or image to extend to the whole width and not just the fixed width, so we wrap the fixed width within a div, just like how we did for hero section
280+
* Could have used this for hero section, but we have a bigger width(130rem). Usually we have hero section bigger than rest of the content
281+
282+
### Building the How-It-Works Section
283+
284+
* Check out "Building the How-It-Works Section" in pdf for the design
285+
* Remember there should only 1 h1 per page, so we will use h2

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

Lines changed: 168 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,21 @@
66
77
* Font Weights
88
Default: 400
9+
Medium: 500
10+
Semi-bold: 600
11+
Bold: 700
912
1013
* Line Heights
1114
Default: 1
15+
Small: 1.05
16+
Paragraph default: 1.6
1217
1318
--- 02 COLORS
1419
1520
* Primary Color: #e67e22
1621
1722
* Tints(Darker versions): #fdf2e9
18-
* Shades(Lighter versions):
23+
* Shades(Lighter versions): #cf711f
1924
* Accents:
2025
* Greys:
2126
#555
@@ -25,6 +30,8 @@ Default: 1
2530
2631
--- 06 BORDER-RADIUS
2732
33+
Default: 9px
34+
2835
--- 07 WHITESPACE
2936
3037
* Spacing System (px)
@@ -45,7 +52,7 @@ html {
4552
}
4653

4754
body {
48-
font-family: sans-serif;
55+
font-family: 'Rubik', sans-serif;
4956
line-height: 1;
5057
font-weight: 400;
5158
color: #555;
@@ -68,22 +75,27 @@ body {
6875
flex: 1;
6976
} */
7077

71-
/* Hero section with Grid */
72-
.section-hero {
73-
background-color: #fdf2e9;
74-
padding: 9.6rem 0;
78+
/* *********************************** */
79+
/* GENERAL REUSABLE COMPONENTS */
80+
/* *********************************** */
81+
82+
.container {
83+
max-width: 120rem;
84+
padding: 0 3.2rem;
85+
margin: 0 auto;
7586
}
76-
.hero {
77-
max-width: 130rem;
87+
88+
.grid {
7889
display: grid;
79-
grid-template-columns: 1fr 1fr;
80-
margin: 0 auto;
81-
align-items: center;
8290
gap: 9.6rem;
8391
}
8492

85-
.hero-img {
86-
width: 100%;
93+
.grid--2-cols {
94+
grid-template-columns: repeat(2, 1fr);
95+
}
96+
97+
.grid--3-cols {
98+
grid-template-columns: repeat(3, 1fr);
8799
}
88100

89101
.heading-primary {
@@ -95,43 +107,173 @@ body {
95107
margin-bottom: 3.2rem;
96108
}
97109

98-
.hero-description {
99-
font-size: 2rem;
100-
line-height: 1.6;
101-
margin-bottom: 4.8rem;
102-
}
103-
104-
.btn:link, .btn:visited {
110+
.btn:link,
111+
.btn:visited {
105112
font-size: 2rem;
113+
font-weight: 600;
106114
text-decoration: none;
107115
display: inline-block;
108116
padding: 1.6rem 3.2rem;
109-
border-radius: 0.9rem;
117+
border-radius: 9px;
110118
/* Put transition on original state */
111119
transition: background-color 0.3s;
112120
}
113121

114-
.btn--full:link, .btn:visited {
122+
.btn--full:link,
123+
.btn:visited {
115124
background-color: #e67e22;
116125
color: #fff;
117126
}
118127

119-
.btn--full:hover, .btn--full:active {
128+
.btn--full:hover,
129+
.btn--full:active {
120130
background-color: #cf711f;
121131
color: #fff;
122132
}
123133

124-
.btn--outline:link, .btn--outline:visited {
134+
.btn--outline:link,
135+
.btn--outline:visited {
125136
background-color: #fff;
126137
color: #555;
127138
}
128139

129-
.btn--outline:hover, .btn--outline:active {
140+
.btn--outline:hover,
141+
.btn--outline:active {
130142
background-color: #fdf2e9;
131143
/* border: 3px solid #fff; Jumping with this*/
132144
box-shadow: inset 0 0 0 3px #fff;
133145
}
134146

135147
.margin-right-sm {
136-
margin-right: 1.6rem;
148+
margin-right: 1.6rem !important;
149+
}
150+
151+
/* *********************************** */
152+
/* HEADER */
153+
/* *********************************** */
154+
155+
.header {
156+
display: flex;
157+
align-items: center;
158+
justify-content: space-between;
159+
background-color: #fdf2e9;
160+
/* Fixed Height because we want header to be sticky later */
161+
height: 9.6rem;
162+
padding: 0 4.8rem;
163+
}
164+
165+
.logo {
166+
/* 2.4rem is too big and 1.6rem is way too low, so breaking the rule */
167+
height: 2.2rem;
168+
}
169+
170+
/* *********************************** */
171+
/* NAVIGATION */
172+
/* *********************************** */
173+
174+
.main-nav-list {
175+
list-style: none;
176+
display: flex;
177+
align-items: center;
178+
gap: 3.2rem;
179+
font-size: 1.8rem;
180+
}
181+
182+
.main-nav-link:link,
183+
.main-nav-link:visited {
184+
display: inline-block;
185+
text-decoration: none;
186+
color: #333;
187+
font-weight: 500;
188+
font-size: 1.8rem;
189+
transition: all 0.3s;
190+
}
191+
192+
.main-nav-link:hover,
193+
.main-nav-link:active {
194+
color: #cf711f;
195+
}
196+
197+
.main-nav-link.nav-cta:link,
198+
.main-nav-link.nav-cta:visited {
199+
padding: 1.2rem 2.4rem;
200+
border-radius: 9px;
201+
color: #fff;
202+
background-color: #e67e22;
203+
}
204+
205+
.main-nav-link.nav-cta:hover,
206+
.main-nav-link.nav-cta:hover {
207+
color: #fff;
208+
background-color: #cf711f;
209+
}
210+
211+
/* *********************************** */
212+
/* HERO SECTION */
213+
/* *********************************** */
214+
215+
.section-hero {
216+
background-color: #fdf2e9;
217+
padding: 4.8rem 0 9.6rem 0;
218+
}
219+
.hero {
220+
max-width: 130rem;
221+
padding: 0 3.2rem;
222+
display: grid;
223+
grid-template-columns: 1fr 1fr;
224+
margin: 0 auto;
225+
align-items: center;
226+
gap: 9.6rem;
227+
}
228+
229+
.hero-img {
230+
width: 100%;
231+
}
232+
233+
.hero-description {
234+
font-size: 2rem;
235+
line-height: 1.6;
236+
margin-bottom: 4.8rem;
237+
}
238+
239+
.delivered-meals {
240+
display: flex;
241+
align-items: center;
242+
gap: 1.6rem;
243+
margin-top: 8rem;
244+
}
245+
246+
.delivered-imgs {
247+
display: flex;
248+
}
249+
250+
.delivered-imgs img {
251+
height: 4.8rem;
252+
width: 4.8rem;
253+
border-radius: 50%;
254+
margin-right: -1.6rem;
255+
border: 3px solid #fdf2e9;
256+
}
257+
258+
.delivered-imgs img:last-child {
259+
margin: 0;
260+
}
261+
262+
.delivered-text {
263+
font-size: 1.8rem;
264+
font-weight: 600;
265+
}
266+
267+
.delivered-text span {
268+
color: #cf711f;
269+
font-weight: 700;
270+
}
271+
272+
/* *********************************** */
273+
/* HOW IT WORKS SECTION */
274+
/* *********************************** */
275+
276+
.section-how {
277+
padding: 9.6rem 0;
278+
background-color: aqua;
137279
}

0 commit comments

Comments
 (0)