├── image
└── background.jpg
├── index.html
├── main.css
└── main.js
/image/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/academind/side-navigation-bar/6628c13b4024e0e6ff05d65c58930109183e045f/image/background.jpg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Yummy
7 |
8 |
9 |
10 |
11 |
26 |
27 |
28 |
29 |
30 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Hind|Indie+Flower');
2 |
3 | body {
4 | margin: 0;
5 | font-family: 'Hind', sans-serif;
6 | }
7 |
8 | .header {
9 | background: rgb(24, 109, 24);
10 | color: white;
11 | display: flex;
12 | align-items: center;
13 | justify-content: space-between;
14 | height: 50px;
15 | padding: 5px 20px;
16 | }
17 |
18 | /*hamburger icon*/
19 | .hamburger {
20 | display: flex;
21 | align-items: center;
22 | }
23 |
24 | .hamburger__button {
25 | width: 3rem;
26 | background: transparent;
27 | border: none;
28 | cursor: pointer;
29 | padding-top: 0;
30 | padding-bottom: 0;
31 | }
32 |
33 | .hamburger__button:focus {
34 | outline: none;
35 | }
36 |
37 | .hamburger__button--bar {
38 | width: 100%;
39 | height: 0.2rem;
40 | background: white;
41 | display: block;
42 | margin: 0.6rem 0;
43 | }
44 |
45 | /*desktop*/
46 | .desktop__navigation {
47 | display: flex;
48 | justify-content: flex-end;
49 | }
50 |
51 | .desktop__navigation div {
52 | padding-left: 20px;
53 | }
54 |
55 | /*background*/
56 | .background__image {
57 | background: url("image/background.jpg");
58 | width: 100vw;
59 | height: 40vh;
60 | background-size: cover;
61 | background-position: center;
62 | }
63 |
64 | /*footer*/
65 | footer div {
66 | color: gray;
67 | font-family: 'Indie Flower', sans-serif;
68 | font-size: 60px;
69 | width: 80vw;
70 | margin: auto;
71 | text-align: center;
72 | padding: 100px 0;
73 | }
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/academind/side-navigation-bar/6628c13b4024e0e6ff05d65c58930109183e045f/main.js
--------------------------------------------------------------------------------