Skip to content

Commit 800d2d3

Browse files
quechauquechau
committed
add Header (logo).
1 parent 6b9d04c commit 800d2d3

File tree

2 files changed

+93
-59
lines changed

2 files changed

+93
-59
lines changed

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

Lines changed: 51 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -53,21 +53,9 @@ body {
5353
color: #555;
5454
}
5555

56-
.section-hero {
57-
background-color: #fdf2e9;
58-
padding: 9.6rem 0;
59-
}
60-
61-
.hero {
62-
/* width: 1300px; */
63-
max-width: 130rem;
64-
margin: 0 auto;
65-
display: grid;
66-
grid-template-columns: 1fr 1fr;
67-
gap: 9.6rem;
68-
align-items: center;
69-
}
70-
56+
/***************************/
57+
/* GENERAL REUSABLE COMPONENTS */
58+
/***************************/
7159
.heading-primary {
7260
font-size: 5.2rem;
7361
font-weight: 600;
@@ -76,13 +64,6 @@ body {
7664
margin-bottom: 3.2rem;
7765
}
7866

79-
.hero-description {
80-
font-size: 2rem;
81-
line-height: 1.5;
82-
letter-spacing: -0.5px;
83-
margin-bottom: 4.8rem;
84-
}
85-
8667
.btn:link,
8768
.btn:visited {
8869
display: inline-block;
@@ -124,14 +105,58 @@ body {
124105
box-shadow: inset 0 0 0 3px #fff;
125106
}
126107

127-
.hero-img {
128-
width: 100%;
129-
}
130-
131108
.margin-right-sm {
132109
margin-right: 1.6rem !important;
133110
}
134111

112+
/***************************/
113+
/* HEADER */
114+
/***************************/
115+
.header {
116+
display: flex;
117+
justify-content: space-between;
118+
align-items: center;
119+
background-color: #fdf2e9;
120+
121+
/* Because we want header to be sticky later */
122+
height: 9.6rem;
123+
padding: 0 4.8rem;
124+
}
125+
126+
.logo {
127+
height: 2.2rem;
128+
}
129+
130+
/***************************/
131+
/* HERO SECTION */
132+
/***************************/
133+
.section-hero {
134+
background-color: #fdf2e9;
135+
padding: 4.8rem 0 9.6rem 0;
136+
}
137+
138+
.hero {
139+
/* width: 1300px; */
140+
max-width: 130rem;
141+
margin: 0 auto;
142+
padding: 0 3.2rem;
143+
display: grid;
144+
grid-template-columns: 1fr 1fr;
145+
gap: 9.6rem;
146+
align-items: center;
147+
}
148+
149+
.hero-description {
150+
font-size: 2rem;
151+
line-height: 1.5;
152+
letter-spacing: -0.5px;
153+
margin-bottom: 4.8rem;
154+
}
155+
156+
.hero-img {
157+
width: 100%;
158+
}
159+
135160
.delivered-meals {
136161
display: flex;
137162
align-items: center;

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

Lines changed: 42 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -15,42 +15,51 @@
1515
<title>Omnifood</title>
1616
</head>
1717
<body>
18-
<section class="section-hero">
19-
<div class="hero">
20-
<div class="hero-text-box">
21-
<h1 class="heading-primary">
22-
A healthy meal delivered to your door, every single day
23-
</h1>
24-
<p class="hero-description">
25-
The smart 365-days-per-year food subscription that will make you eat
26-
healthy again. Tailored to your personal tastes and nutritional
27-
needs.
28-
</p>
18+
<header class="header">
19+
<img src="img/omnifood-logo.png" alt="Omnifood logo" class="logo" />
20+
<nav class="main-nav">Navigation</nav>
21+
</header>
2922

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-imgs">
36-
<img src="img/customers/customer-1.jpg" alt="Customer" />
37-
<img src="img/customers/customer-2.jpg" alt="Customer" />
38-
<img src="img/customers/customer-3.jpg" alt="Customer" />
39-
<img src="img/customers/customer-4.jpg" alt="Customer" />
40-
<img src="img/customers/customer-5.jpg" alt="Customer" />
41-
<img src="img/customers/customer-6.jpg" alt="Customer" />
23+
<main>
24+
<section class="section-hero">
25+
<div class="hero">
26+
<div class="hero-text-box">
27+
<h1 class="heading-primary">
28+
A healthy meal delivered to your door, every single day
29+
</h1>
30+
<p class="hero-description">
31+
The smart 365-days-per-year food subscription that will make you
32+
eat healthy again. Tailored to your personal tastes and
33+
nutritional needs.
34+
</p>
35+
36+
<a href="#" class="btn btn--full margin-right-sm"
37+
>Start eating well</a
38+
>
39+
<a href="#" class="btn btn--outline">Learn more &darr;</a>
40+
<div class="delivered-meals">
41+
<div class="delivered-imgs">
42+
<img src="img/customers/customer-1.jpg" alt="Customer" />
43+
<img src="img/customers/customer-2.jpg" alt="Customer" />
44+
<img src="img/customers/customer-3.jpg" alt="Customer" />
45+
<img src="img/customers/customer-4.jpg" alt="Customer" />
46+
<img src="img/customers/customer-5.jpg" alt="Customer" />
47+
<img src="img/customers/customer-6.jpg" alt="Customer" />
48+
</div>
49+
<p class="delivered-text">
50+
<span>250,000+</span> meals last year!
51+
</p>
4252
</div>
43-
<p class="delivered-text"><span>250,000+</span> meals last year!</p>
53+
</div>
54+
<div class="hero-img-box">
55+
<img
56+
src="img/hero.png"
57+
alt="Woman enjoying food, meals in storage container, and food bowls on a table."
58+
class="hero-img"
59+
/>
4460
</div>
4561
</div>
46-
<div class="hero-img-box">
47-
<img
48-
src="img/hero.png"
49-
alt="Woman enjoying food, meals in storage container, and food bowls on a table."
50-
class="hero-img"
51-
/>
52-
</div>
53-
</div>
54-
</section>
62+
</section>
63+
</main>
5564
</body>
5665
</html>

0 commit comments

Comments
 (0)