├── index.html
└── main.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | CSS Course
8 |
9 |
10 |
11 |
18 |
21 |
22 | CSS Grid or Flexbox
23 |
24 | When should you use which?
25 |
26 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | font-family: sans-serif;
7 | margin: 0;
8 | display: grid;
9 | grid-template-columns: 30% auto;
10 | grid-template-rows: 60px auto 60px;
11 | grid-template-areas: "hd hd"
12 | "sidebar main"
13 | "footer footer";
14 | }
15 |
16 | header,
17 | aside,
18 | main,
19 | footer {
20 | padding: 16px;
21 | text-align: center;
22 | }
23 |
24 | header {
25 | background: #521751;
26 | grid-area: hd;
27 | }
28 |
29 | aside {
30 | background: #fa923f;
31 | grid-area: sidebar;
32 | }
33 |
34 | main {
35 | grid-area: main;
36 | }
37 |
38 | footer {
39 | background: black;
40 | grid-area: footer;
41 | }
42 |
43 | .navigation-list {
44 | list-style: none;
45 | margin: 0;
46 | padding: 0;
47 | display: flex;
48 | flex-direction: row;
49 | justify-content: center;
50 | align-items: center;
51 | height: 100%;
52 | }
53 |
54 | .navigation-item {
55 | margin: 0 10px;
56 | }
57 |
58 | .navigation-item a {
59 | text-decoration: none;
60 | color: white;
61 | }
62 |
63 | .navigation-item a:hover,
64 | .navigation-item a:active {
65 | color: #fa923f;
66 | }
--------------------------------------------------------------------------------