Skip to content

Commit 8429082

Browse files
zangeronimozangeronimo
committed
feat: building the Navigation
1 parent 25da1cc commit 8429082

File tree

2 files changed

+179
-58
lines changed

2 files changed

+179
-58
lines changed

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

Lines changed: 106 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,14 @@
77
88
- Font weights:
99
Default: 400
10+
Medium: 500
11+
Semi-bold: 600
12+
Bold: 700
1013
1114
- Line height:
1215
Default: 1
16+
Small: 1.05
17+
Paragraph default: 1.6
1318
1419
--- 02 COLORS
1520
@@ -24,6 +29,7 @@ Default: 1
2429
--- 03 SHADOWS
2530
2631
--- 04 BORDER-RADIUS
32+
Default 9px
2733
2834
--- 05 WHITESPACE
2935
@@ -49,19 +55,9 @@ body {
4955
color: #555;
5056
}
5157

52-
.section-hero {
53-
background-color: #fdf2e9;
54-
padding: 9.6rem 0;
55-
}
56-
57-
.hero {
58-
max-width: 130rem;
59-
margin: 0 auto;
60-
display: grid;
61-
grid-template-columns: 1fr 1fr;
62-
gap: 9.6rem;
63-
align-items: center;
64-
}
58+
/*************************************/
59+
/* GENERAL REUSABLE COMPONENTS */
60+
/*************************************/
6561

6662
.heading-primary {
6763
font-size: 5.2rem;
@@ -72,12 +68,6 @@ body {
7268
margin-bottom: 3.2rem;
7369
}
7470

75-
.hero-description {
76-
font-size: 2rem;
77-
line-height: 1.6;
78-
margin-bottom: 4.8rem;
79-
}
80-
8171
.btn:link,
8272
.btn:visited {
8373
display: inline-block;
@@ -113,14 +103,107 @@ body {
113103
box-shadow: inset 0 0 0 3px #fff;
114104
}
115105

116-
.hero-img {
117-
width: 100%;
118-
}
119-
120106
.margin-right-sm {
121107
margin-right: 1.6rem !important;
122108
}
123109

110+
/*************************************/
111+
/* HEADER */
112+
/*************************************/
113+
114+
.header {
115+
display: flex;
116+
align-items: center;
117+
justify-content: space-between;
118+
background-color: #fdf2e9;
119+
120+
height: 9.6rem;
121+
padding: 0 4.8rem;
122+
}
123+
124+
.logo {
125+
height: 2.2rem;
126+
}
127+
128+
/*************************************/
129+
/* NAVIGATION */
130+
/*************************************/
131+
132+
.main-nav {
133+
}
134+
135+
.main-nav-list {
136+
list-style: none;
137+
display: flex;
138+
align-items: center;
139+
gap: 3.2rem;
140+
}
141+
142+
.main-nav-link:link,
143+
.main-nav-link:visited {
144+
display: inline-block;
145+
text-decoration: none;
146+
color: #333;
147+
font-weight: 500;
148+
font-size: 1.8rem;
149+
transition: all 0.3s;
150+
}
151+
152+
.main-nav-link:hover,
153+
.main-nav-link:active {
154+
color: #cf711f;
155+
}
156+
157+
.main-nav-link.nav-cta:link,
158+
.main-nav-link.nav-cta:visited {
159+
padding: 1.2rem 2.4rem;
160+
border-radius: 9px;
161+
color: #fff;
162+
background-color: #e67e22;
163+
}
164+
165+
.main-nav-link.nav-cta:link,
166+
.main-nav-link.nav-cta:visited {
167+
background-color: #cf711f;
168+
}
169+
170+
.main-nav-link.nav-cta:hover,
171+
.main-nav-link.nav-cta:active {
172+
padding: 1.2rem 2.4rem;
173+
border-radius: 9px;
174+
color: #fff;
175+
background-color: #e67e22;
176+
}
177+
178+
/*************************************/
179+
/* HERO SECTION */
180+
/*************************************/
181+
182+
.section-hero {
183+
background-color: #fdf2e9;
184+
padding: 4.8rem 0 9.6rem 0;
185+
}
186+
187+
.hero {
188+
max-width: 130rem;
189+
margin: 0 auto;
190+
padding: 0 3.2rem;
191+
display: grid;
192+
grid-template-columns: 1fr 1fr;
193+
gap: 9.6rem;
194+
align-items: center;
195+
}
196+
197+
.hero-description {
198+
font-size: 2rem;
199+
line-height: 1.6;
200+
margin-bottom: 4.8rem;
201+
}
202+
203+
.hero-img {
204+
width: 100%;
205+
}
206+
124207
.delivered-meals {
125208
display: flex;
126209
align-items: center;

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

Lines changed: 73 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -16,43 +16,81 @@
1616
<link rel="stylesheet" href="css/style.css" />
1717
</head>
1818
<body>
19-
<section class="section-hero">
20-
<div class="hero">
21-
<div class="hero-text-box">
22-
<h1 class="heading-primary">
23-
A healthy meal delivered to your door, every single day
24-
</h1>
25-
<p class="hero-description">
26-
The smart 365-days-per-year food subscription that will make you eat
27-
healthy again. Tailored to your personal tastes and nutritional
28-
needs.
29-
</p>
30-
<a href="#" class="btn btn--full margin-right-sm"
31-
>Start eating well</a
32-
>
33-
<a href="#" class="btn btn--outline">Learn more &darr;</a>
34-
<div class="delivered-meals">
35-
<div class="delivered-img">
36-
<img src="img/customers/customer-1.jpg" alt="Customer photo" />
37-
<img src="img/customers/customer-2.jpg" alt="Customer photo" />
38-
<img src="img/customers/customer-3.jpg" alt="Customer photo" />
39-
<img src="img/customers/customer-4.jpg" alt="Customer photo" />
40-
<img src="img/customers/customer-5.jpg" alt="Customer photo" />
41-
<img src="img/customers/customer-6.jpg" alt="Customer photo" />
42-
</div>
43-
<p class="delivered-text">
44-
<span>250,000+</span> meals delivered last year!
19+
<header class="header">
20+
<img src="img/omnifood-logo.png" alt="Omnifood logo" class="logo" />
21+
<nav class="main-nav">
22+
<ul class="main-nav-list">
23+
<li>
24+
<a class="main-nav-link" href="#" alt="Main Nav Section Item"
25+
>Section 1</a
26+
>
27+
</li>
28+
<li>
29+
<a class="main-nav-link" href="#" alt="Main Nav Section Item"
30+
>Section 2</a
31+
>
32+
</li>
33+
<li>
34+
<a class="main-nav-link" href="#" alt="Main Nav Section Item"
35+
>Section 3</a
36+
>
37+
</li>
38+
<li>
39+
<a class="main-nav-link" href="#" alt="Main Nav Section Item"
40+
>Section 4</a
41+
>
42+
</li>
43+
<li>
44+
<a
45+
class="main-nav-link nav-cta"
46+
href="#"
47+
alt="Main Nav Section Item"
48+
>Section 5</a
49+
>
50+
</li>
51+
</ul>
52+
</nav>
53+
</header>
54+
55+
<main>
56+
<section class="section-hero">
57+
<div class="hero">
58+
<div class="hero-text-box">
59+
<h1 class="heading-primary">
60+
A healthy meal delivered to your door, every single day
61+
</h1>
62+
<p class="hero-description">
63+
The smart 365-days-per-year food subscription that will make you
64+
eat healthy again. Tailored to your personal tastes and
65+
nutritional needs.
4566
</p>
67+
<a href="#" class="btn btn--full margin-right-sm"
68+
>Start eating well</a
69+
>
70+
<a href="#" class="btn btn--outline">Learn more &darr;</a>
71+
<div class="delivered-meals">
72+
<div class="delivered-img">
73+
<img src="img/customers/customer-1.jpg" alt="Customer photo" />
74+
<img src="img/customers/customer-2.jpg" alt="Customer photo" />
75+
<img src="img/customers/customer-3.jpg" alt="Customer photo" />
76+
<img src="img/customers/customer-4.jpg" alt="Customer photo" />
77+
<img src="img/customers/customer-5.jpg" alt="Customer photo" />
78+
<img src="img/customers/customer-6.jpg" alt="Customer photo" />
79+
</div>
80+
<p class="delivered-text">
81+
<span>250,000+</span> meals delivered last year!
82+
</p>
83+
</div>
84+
</div>
85+
<div class="hero-img-box">
86+
<img
87+
src="img/hero.png"
88+
alt="Woman enjoying food, meals in storage container, and food bawls on a table"
89+
class="hero-img"
90+
/>
4691
</div>
4792
</div>
48-
<div class="hero-img-box">
49-
<img
50-
src="img/hero.png"
51-
alt="Woman enjoying food, meals in storage container, and food bawls on a table"
52-
class="hero-img"
53-
/>
54-
</div>
55-
</div>
56-
</section>
93+
</section>
94+
</main>
5795
</body>
5896
</html>

0 commit comments

Comments
 (0)