Skip to content

Commit 37f4a90

Browse files
quechauquechau
committed
add app layout.
1 parent ac4d93b commit 37f4a90

File tree

4 files changed

+145
-0
lines changed

4 files changed

+145
-0
lines changed

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

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>App Layout</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: sans-serif;
16+
color: #343a40;
17+
font-size: 24px;
18+
height: 100vh;
19+
text-align: center;
20+
font-weight: bold;
21+
22+
display: grid;
23+
grid-template-columns: 80px 400px 1fr 250px;
24+
grid-template-rows: 80px 1fr;
25+
}
26+
27+
nav,
28+
section,
29+
main,
30+
aside {
31+
padding-top: 24px;
32+
}
33+
nav {
34+
background-color: #343a40;
35+
color: #fff;
36+
grid-row: 1 / -1;
37+
}
38+
39+
menu {
40+
background-color: #7048e8;
41+
color: #fff;
42+
grid-column: 2/-1;
43+
display: flex;
44+
align-items: center;
45+
gap: 12px;
46+
padding: 0 40px;
47+
}
48+
49+
button {
50+
display: inline-block;
51+
font-size: 16px;
52+
font-weight: bold;
53+
background-color: #5f3dc4;
54+
border: none;
55+
cursor: pointer;
56+
color: #fff;
57+
padding: 8px 12px;
58+
}
59+
60+
button:last-child {
61+
background-color: #d6336c;
62+
margin-left: auto;
63+
}
64+
65+
section {
66+
background-color: #e9ecef;
67+
padding: 40px;
68+
69+
/* How elements that don't fit into container appear */
70+
overflow: scroll;
71+
72+
display: flex;
73+
flex-direction: column;
74+
gap: 40px;
75+
}
76+
77+
.email {
78+
background-color: #adb5bd;
79+
height: 96px;
80+
flex-shrink: 0;
81+
82+
display: flex;
83+
align-items: center;
84+
justify-content: center;
85+
}
86+
87+
aside {
88+
background-color: #e9ecef;
89+
}
90+
</style>
91+
</head>
92+
<body>
93+
<nav>Nav</nav>
94+
<menu>
95+
<button>New</button>
96+
<button>Reply</button>
97+
<button>Forward</button>
98+
<button>Mark unread</button>
99+
<button>Trash</button>
100+
</menu>
101+
<section>
102+
<div class="email">Email 1</div>
103+
<div class="email">Email 2</div>
104+
<div class="email">Email 3</div>
105+
<div class="email">Email 4</div>
106+
<div class="email">Email 5</div>
107+
<div class="email">Email 6</div>
108+
<div class="email">Email 7</div>
109+
<div class="email">Email 8</div>
110+
<div class="email">Email 9</div>
111+
<div class="email">Email 10</div>
112+
</section>
113+
<main>Email view</main>
114+
<aside>Additional info</aside>
115+
</body>
116+
</html>

‎starter/07-Omnifood-Desktop/content/content.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,3 +126,18 @@ Careers
126126
Recipe directory
127127
Help center
128128
Privacy & terms
129+
130+
#######
131+
132+
## Sections
133+
134+
- Logo + Navigation
135+
- Hero
136+
- Featured in
137+
- How it works
138+
- Meals (and list of diets)
139+
--> 3 Phần tiếp theo khác quan trọng để trying to sell products & services.
140+
- Testimonials + Gallery
141+
- Pricing + Features
142+
- CTA: Call to action
143+
- Footer

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

Whitespace-only changes.

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
7+
<link rel="stylesheet" href="css/style.css" />
8+
9+
<title>Omnifood</title>
10+
</head>
11+
<body>
12+
<h1>A healthy meal delivered to your door, every single day</h1>
13+
</body>
14+
</html>

0 commit comments

Comments
 (0)