Skip to content

Commit 33f91f8

Browse files
N0sBaN0sBa
committed
update
1 parent 547f92c commit 33f91f8

File tree

2 files changed

+108
-0
lines changed

2 files changed

+108
-0
lines changed

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Omnifood</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<section class="hero-section">
12+
<div class="hero-information">
13+
<h1>A healthy meal delivered to your door, every single day</h1>
14+
<p>The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. We have delivered 250,000+ meals last year!</p>
15+
<div class="hero-cta">
16+
<a class="btn btn-main" href="#">Eating clean now</a>
17+
<a class="btn btn-sub" href="#">More information</a>
18+
</div>
19+
</div>
20+
<img class="hero-image" src="content/img/hero.png" alt="eating">
21+
</section>
22+
</body>
23+
</html>

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/*
2+
SPACING SYSTEM (px)
3+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
4+
5+
FONT SIZE SYSTEM (px)
6+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
7+
8+
main-color: #e67e22;
9+
grey-color:
10+
tints: #fdf2e9;
11+
shades:
12+
*/
13+
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
}
19+
20+
html {
21+
font-size: 62.5%;
22+
}
23+
24+
body {
25+
font-family: sans-serif;
26+
font-weight: 400;
27+
line-height: 1;
28+
font-size: 1.6rem;
29+
}
30+
31+
.hero-section {
32+
display: flex;
33+
max-width: 1200px;
34+
background-color: #fdf2e9;
35+
padding: 4.8rem;
36+
}
37+
38+
.hero-information {
39+
display: flex;
40+
flex-direction: column;
41+
align-items: center;
42+
justify-content: center;
43+
}
44+
45+
.hero-information h1 {
46+
font-size: 3.6rem;
47+
word-spacing: -1px;
48+
}
49+
50+
.hero-information p {
51+
margin-top: 4.4rem;
52+
}
53+
54+
.hero-cta {
55+
margin-top: 4.4rem;
56+
}
57+
58+
.btn:link,
59+
.btn:visited {
60+
padding: 1.6rem 3.2rem;
61+
text-decoration: none;
62+
border-radius: 0.8rem;
63+
transition: background-color 0.3s ease-in-out;
64+
}
65+
66+
.btn-main:link,
67+
.btn-main:visited {
68+
background-color: #e67e22;
69+
color: #fff;
70+
}
71+
72+
.btn-main:hover,
73+
.btn-main:active {
74+
background-color: #cf711f;
75+
}
76+
77+
.btn-sub:link,
78+
.btn-sub:visited {
79+
background: #fff;
80+
color: #555;
81+
}
82+
83+
.hero-image {
84+
width: 100%;
85+
}

0 commit comments

Comments
 (0)