├── LICENSE ├── README.md ├── index.html ├── main.js ├── social.svg └── style.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Jesse Hall 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Build A Responsive Website 2 | 3 | Source code for YouTube video: https://youtu.be/nME3fE3c9Qw 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Responive Website Build 9 | 10 | 11 | 23 |

24 |

25 |

Patterns

26 |

Circle

27 |

28 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi 29 | reiciendis totam modi repellat maxime, itaque nulla repudiandae dicta 30 | molestiae, nam aliquam consequatur a possimus quas ipsam alias vitae 31 | neque laboriosam? 32 |

33 |

34 |

35 |

36 |

37 |

38 | 49 |

50 |

51 |

52 |

53 |

Section

54 |

Another Awesome

55 |

56 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi 57 | reiciendis totam modi repellat maxime, itaque nulla repudiandae dicta 58 | molestiae, nam aliquam consequatur a possimus quas ipsam alias vitae 59 | neque laboriosam? 60 |

61 |

62 |

63 | 64 | 65 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const menuBtn = document.querySelector(".menu-btn"); 2 | const menuItems = document.querySelector(".menu-items"); 3 | const menuItem = document.querySelectorAll(".menu-item"); 4 | 5 | // main toggle 6 | menuBtn.addEventListener("click", () => { 7 | toggle(); 8 | }); 9 | 10 | // toggle on item click if open 11 | menuItem.forEach((item) => { 12 | item.addEventListener("click", () => { 13 | if (menuBtn.classList.contains("open")) { 14 | toggle(); 15 | } 16 | }); 17 | }); 18 | 19 | function toggle() { 20 | menuBtn.classList.toggle("open"); 21 | menuItems.classList.toggle("open"); 22 | } 23 | -------------------------------------------------------------------------------- /social.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* globals */ 2 | @import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Titillium+Web:wght@400;700&display=swap"); 3 | 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | font-family: Monterrat, sans-serif; 12 | } 13 | 14 | /* header */ 15 | .header { 16 | position: fixed; 17 | top: 0; 18 | left: 0; 19 | right: 0; 20 | display: flex; 21 | justify-content: space-between; 22 | padding: 1rem 2rem; 23 | z-index: 1; 24 | backdrop-filter: blur(5px); 25 | } 26 | 27 | .header a { 28 | text-decoration: none; 29 | color: #111111; 30 | font-size: 2rem; 31 | } 32 | 33 | .menu-items { 34 | list-style: none; 35 | display: flex; 36 | align-items: center; 37 | } 38 | 39 | .menu-items li a { 40 | font-size: 1rem; 41 | padding: 0.5em 1em; 42 | transition: background 0.3s ease-in-out, color 0.3s ease-in-out; 43 | } 44 | 45 | .menu-items li a:hover { 46 | background-color: #ccc7d3; 47 | } 48 | 49 | /* nav menu button */ 50 | .menu-btn { 51 | position: relative; 52 | display: none; 53 | justify-content: center; 54 | align-items: center; 55 | width: 1.5rem; 56 | height: 1.5rem; 57 | cursor: pointer; 58 | z-index: 1; 59 | } 60 | .menu-btn__lines, 61 | .menu-btn__lines::before, 62 | .menu-btn__lines::after { 63 | width: 1.5rem; 64 | height: 0.1rem; 65 | background-color: #111111; 66 | transition: all 0.5s ease-in-out; 67 | } 68 | .menu-btn__lines::before, 69 | .menu-btn__lines::after { 70 | content: ""; 71 | position: absolute; 72 | } 73 | .menu-btn__lines::before { 74 | transform: translateY(-0.5rem); 75 | } 76 | .menu-btn__lines::after { 77 | transform: translateY(0.5rem); 78 | } 79 | /* animation */ 80 | .menu-btn.open .menu-btn__lines { 81 | transform: translateX(2rem); 82 | background-color: transparent; 83 | } 84 | .menu-btn.open .menu-btn__lines::before { 85 | transform: rotate(45deg) translate(-1.5rem, 1.5rem); 86 | background-color: #ffffff; 87 | } 88 | .menu-btn.open .menu-btn__lines::after { 89 | transform: rotate(-45deg) translate(-1.5rem, -1.5rem); 90 | background-color: #ffffff; 91 | } 92 | 93 | /* sections */ 94 | .section { 95 | position: relative; 96 | height: 100vh; 97 | display: flex; 98 | justify-content: center; 99 | align-items: center; 100 | } 101 | 102 | /* hero section */ 103 | .hero-section { 104 | background-color: #dfdbe5; 105 | background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 106 | } 107 | 108 | .hero-col { 109 | padding: clamp(1rem, 8vw, 5rem); 110 | max-width: 50%; 111 | } 112 | 113 | .section h1 { 114 | font-family: "Titillium Web", serif; 115 | font-size: clamp(60px, 8vw, 200px); 116 | font-weight: 700; 117 | line-height: 3vw; 118 | color: #ccc7d3; 119 | text-transform: uppercase; 120 | } 121 | 122 | .section h2 { 123 | font-size: clamp(18px, 2.5vw, 60px); 124 | color: #5a4d70; 125 | padding-left: 3rem; 126 | text-transform: uppercase; 127 | } 128 | 129 | .section p { 130 | color: #5a4d70; 131 | padding-right: 1rem; 132 | } 133 | 134 | .hero-section img { 135 | width: clamp(250px, 30vw, 500px); 136 | transform: scaleX(-1); 137 | } 138 | 139 | /* custom shape for hero section */ 140 | .custom-shape-divider { 141 | position: absolute; 142 | bottom: 0; 143 | left: 0; 144 | width: 100%; 145 | overflow: hidden; 146 | } 147 | 148 | .custom-shape-divider svg { 149 | position: relative; 150 | display: block; 151 | width: calc(100% + 1.3px); 152 | height: 150px; 153 | } 154 | 155 | .custom-shape-divider .shape-fill { 156 | fill: #ffffff; 157 | } 158 | 159 | /* another section */ 160 | .another-col { 161 | width: clamp(300px, 50vw, 600px); 162 | } 163 | 164 | /* media query for tablet devices */ 165 | @media (max-width: 1023px) { 166 | .custom-shape-divider svg { 167 | width: calc(200% + 1.3px); 168 | height: 150px; 169 | } 170 | .hero-col { 171 | max-width: 100%; 172 | width: clamp(300px, 50vw, 600px); 173 | padding: 0; 174 | } 175 | .hero-img { 176 | display: none; 177 | } 178 | } 179 | 180 | /* media query for mobile devices */ 181 | @media (max-width: 767px) { 182 | .custom-shape-divider svg { 183 | width: calc(250% + 1.3px); 184 | height: 150px; 185 | } 186 | .header a { 187 | font-size: 1rem; 188 | } 189 | .menu-btn { 190 | display: flex; 191 | } 192 | .menu-items { 193 | flex-direction: column; 194 | justify-content: space-around; 195 | position: absolute; 196 | top: 0; 197 | right: 0; 198 | left: 0; 199 | height: 100vh; 200 | transform: translateX(100vw); 201 | background-color: #5a4d70; 202 | transition: transform 0.3s ease-in-out; 203 | } 204 | .menu-items.open { 205 | transform: translateX(0); 206 | } 207 | .menu-items li { 208 | width: 100vw; 209 | height: 100%; 210 | } 211 | .menu-items li a { 212 | color: #ffffff; 213 | font-size: 5vh; 214 | display: flex; 215 | justify-content: center; 216 | align-items: center; 217 | width: 100%; 218 | height: 100%; 219 | } 220 | .menu-items li a:hover { 221 | color: #111111; 222 | } 223 | } 224 | --------------------------------------------------------------------------------