1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
7+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
8+ < title > App Layout Document</ title >
9+ < style >
10+ @import url ('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap' );
11+
12+ *
13+ margin : 0 ;
14+ padding : 0 ;
15+ box-sizing : border-box;
16+ }
17+
18+ body {
19+ font-family : "Inter" , sans-serif;
20+ font-size : 24px ;
21+ color : # fff
22+ height : 100vh ;
23+
24+ display : grid;
25+ grid-template-columns : 80px 300px 1fr 250px ;
26+ grid-template-rows : 90px 1fr ;
27+ }
28+
29+ nav {
30+ /* grid-column: 1; */
31+ grid-row : 1 / -1 ;
32+ background-color : # 413c3c
33+ }
34+
35+ menu {
36+ grid-row : 1 ;
37+ grid-column : 2 / -1 ;
38+ background-color : aqua;
39+ }
40+
41+ section {
42+ background-color : royalblue;
43+ overflow : scroll;
44+ padding : 40px ;
45+
46+ /* display: flex;
47+ flex-direction: column;
48+ gap: 40px; */
49+ }
50+
51+ main {
52+ background-color : aquamarine;
53+ }
54+
55+ aside {
56+ background-color : blueviolet;
57+ }
58+
59+ .email {
60+ background-color : steelblue;
61+ height : 96px ;
62+
63+ /* display: flex;
64+ align-items: center;
65+ justify-content: center; */
66+ }
67+ </ style >
68+ </ head >
69+
70+ < body >
71+ < nav > NAV</ nav >
72+ < menu > MENU</ menu >
73+ < section >
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+ < div class ="email "> Email 12</ div >
84+ </ section >
85+ < main > MAIN</ main >
86+ < aside > ASIDE</ aside >
87+ </ body >
88+
89+ </ html >
0 commit comments