├── 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 |
12 | 19 | 25 |
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 --------------------------------------------------------------------------------