Skip to content

Commit 15f2b2c

Browse files
owen-webbowen-webb
committed
section-6: Layout.
1 parent 86d2bc7 commit 15f2b2c

File tree

1 file changed

+112
-0
lines changed

1 file changed

+112
-0
lines changed

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

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

0 commit comments

Comments
 (0)