Skip to content

Commit 3c9c17b

Browse files
N0sBaN0sBa
committed
2 parents 4015523 + 33f91f8 commit 3c9c17b

File tree

3 files changed

+160
-14
lines changed

3 files changed

+160
-14
lines changed

‎starter/06-Components/06-app-layout.html

Lines changed: 52 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,85 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Document</title>
7+
<title>App Layout Document</title>
88
<style>
9+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
10+
911
* {
1012
margin: 0;
1113
padding: 0;
1214
box-sizing: border-box;
1315
}
16+
1417
body {
15-
font-family: sans-serif;
16-
color: #333a40;
18+
font-family: "Inter", sans-serif;
1719
font-size: 24px;
20+
color: #fff;
1821
height: 100vh;
1922

2023
display: grid;
21-
grid-template-columns: 80px 400px 1fr 250px;
22-
grid-template-rows: 80px 1fr;
24+
grid-template-columns: 80px 300px 1fr 250px;
25+
grid-template-rows: 90px 1fr;
2326
}
27+
2428
nav {
25-
grid-column: 1;
29+
/* grid-column: 1; */
2630
grid-row: 1 / -1;
27-
background-color: black;
31+
background-color: #413c3c;
2832
}
33+
2934
menu {
30-
35+
grid-row: 1;
36+
grid-column: 2 / -1;
37+
background-color: aqua;
3138
}
39+
3240
section {
41+
background-color: royalblue;
42+
overflow: scroll;
43+
padding: 40px;
3344

45+
/* display: flex;
46+
flex-direction: column;
47+
gap: 40px; */
3448
}
35-
main {
3649

50+
main {
51+
background-color: aquamarine;
3752
}
53+
3854
aside {
55+
background-color: blueviolet;
56+
}
57+
58+
.email {
59+
background-color: steelblue;
60+
height: 96px;
3961

62+
/* display: flex;
63+
align-items: center;
64+
justify-content: center; */
4065
}
4166
</style>
4267
</head>
68+
4369
<body>
44-
<nav>Nav</nav>
45-
<menu>Menu</menu>
46-
<section>Inbox</section>
47-
<main>Main</main>
48-
<aside>Aside</aside>
70+
<nav>NAV</nav>
71+
<menu>MENU</menu>
72+
<section>
73+
<div class="email">Email 12</div>
74+
<div class="email">Email 12</div>
75+
<div class="email">Email 12</div>
76+
<div class="email">Email 12</div>
77+
<div class="email">Email 12</div>
78+
<div class="email">Email 12</div>
79+
<div class="email">Email 12</div>
80+
<div class="email">Email 12</div>
81+
<div class="email">Email 12</div>
82+
<div class="email">Email 12</div>
83+
</section>
84+
<main>MAIN</main>
85+
<aside>ASIDE</aside>
4986
</body>
87+
5088
</html>

‎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)