Skip to content

Commit 0709349

Browse files
rameskumrameskum
committed
navigation and logo
1 parent 8a307d1 commit 0709349

File tree

2 files changed

+81
-48
lines changed

2 files changed

+81
-48
lines changed

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

Lines changed: 50 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -50,19 +50,9 @@ body {
5050
color: #555;
5151
}
5252

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

6757
.heading-primary {
6858
font-size: 5.2rem;
@@ -73,12 +63,6 @@ body {
7363
margin-bottom: 3.2rem;
7464
}
7565

76-
.hero-description {
77-
font-size: 2rem;
78-
line-height: 1.6;
79-
margin-bottom: 4.8rem;
80-
}
81-
8266
.btn:link,
8367
.btn:visited {
8468
display: inline-block;
@@ -119,13 +103,56 @@ body {
119103
box-shadow: inset 0 0 0 3px #fff;
120104
}
121105

106+
.margin-right-sm {
107+
margin-right: 1.6rem !important;
108+
}
122109

123-
.hero-img {
124-
width: 100%;
110+
/**************************************/
111+
/* HEADER */
112+
/**************************************/
113+
114+
.header {
115+
display: flex;
116+
justify-content: space-between;
117+
align-items: center;
118+
background-color: #fdf2e9;
119+
120+
/* Because we want to make it sticky */
121+
height: 9.6rem;
122+
padding: 0 4.8rem;
125123
}
126124

127-
.margin-right-sm {
128-
margin-right: 1.6rem !important;
125+
.logo {
126+
height: 2.2rem;
127+
}
128+
129+
/**************************************/
130+
/* HERO SECTION */
131+
/**************************************/
132+
133+
.section-hero {
134+
background-color: #fdf2e9;
135+
padding: 4.8rem 0 9.6rem 0;
136+
}
137+
138+
.hero {
139+
max-width: 130rem;
140+
margin: 0 auto;
141+
padding: 0 3.2rem;
142+
display: grid;
143+
grid-template-columns: 1fr 1fr;
144+
gap: 9.6rem;
145+
align-items: center;
146+
}
147+
148+
.hero-description {
149+
font-size: 2rem;
150+
line-height: 1.6;
151+
margin-bottom: 4.8rem;
152+
}
153+
154+
.hero-img {
155+
width: 100%;
129156
}
130157

131158
.delivered-meals {

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

Lines changed: 31 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -13,33 +13,39 @@
1313
<link href="css/style.css" rel="stylesheet">
1414
</head>
1515
<body>
16-
<section class="section-hero">
17-
<div class="hero">
18-
<div class="hero-text-box">
19-
<h1 class="heading-primary">A healthy meal delivered to your door, every single day</h1>
20-
<p class="hero-description">
21-
The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal
22-
tastes and nutritional needs. We have delivered 250,000+ meals last year!
23-
</p>
24-
<a class="btn btn--full margin-right-sm" href="#">Start Eating Well</a>
25-
<a class="btn btn--outline" href="#">Learn More &darr;</a>
26-
<div class="delivered-meals">
27-
<div class="delivered-imgs">
28-
<img alt="customer1" src="img/customers/customer-1.jpg">
29-
<img alt="customer2" src="img/customers/customer-2.jpg">
30-
<img alt="customer3" src="img/customers/customer-3.jpg">
31-
<img alt="customer4" src="img/customers/customer-4.jpg">
32-
<img alt="customer5" src="img/customers/customer-5.jpg">
33-
<img alt="customer6" src="img/customers/customer-6.jpg">
16+
<header class="header">
17+
<img alt="Omnifood logo" class="logo" src="img/omnifood-logo.png">
18+
<nav class="main-nav">Navigation</nav>
19+
</header>
20+
<main>
21+
<section class="section-hero">
22+
<div class="hero">
23+
<div class="hero-text-box">
24+
<h1 class="heading-primary">A healthy meal delivered to your door, every single day</h1>
25+
<p class="hero-description">
26+
The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal
27+
tastes and nutritional needs. We have delivered 250,000+ meals last year!
28+
</p>
29+
<a class="btn btn--full margin-right-sm" href="#">Start Eating Well</a>
30+
<a class="btn btn--outline" href="#">Learn More &darr;</a>
31+
<div class="delivered-meals">
32+
<div class="delivered-imgs">
33+
<img alt="customer1" src="img/customers/customer-1.jpg">
34+
<img alt="customer2" src="img/customers/customer-2.jpg">
35+
<img alt="customer3" src="img/customers/customer-3.jpg">
36+
<img alt="customer4" src="img/customers/customer-4.jpg">
37+
<img alt="customer5" src="img/customers/customer-5.jpg">
38+
<img alt="customer6" src="img/customers/customer-6.jpg">
39+
</div>
40+
<p class="delivered-text"><span>250,000+</span> meals delivered last year!</p>
3441
</div>
35-
<p class="delivered-text"><span>250,000+</span> meals delivered last year!</p>
42+
</div>
43+
<div class="hero-img-box">
44+
<img alt="Woman enjoying food, meask in storage container, and food bowls on a table" class="hero-img"
45+
src="img/hero.png">
3646
</div>
3747
</div>
38-
<div class="hero-img-box">
39-
<img alt="Woman enjoying food, meask in storage container, and food bowls on a table" class="hero-img"
40-
src="img/hero.png">
41-
</div>
42-
</div>
43-
</section>
48+
</section>
49+
</main>
4450
</body>
4551
</html>

0 commit comments

Comments
 (0)