├── images ├── hero.jpeg ├── store.jpeg ├── between.jpeg ├── between2.jpeg ├── lemonade.jpeg ├── lemonade2.jpeg ├── lemonade3.jpeg └── lemonade4.jpeg ├── .editorconfig ├── scripts.js ├── index.html └── styles.css /images/hero.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/euguilhermegirardi/mobile-first-responsive-website/HEAD/images/hero.jpeg -------------------------------------------------------------------------------- /images/store.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/euguilhermegirardi/mobile-first-responsive-website/HEAD/images/store.jpeg -------------------------------------------------------------------------------- /images/between.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/euguilhermegirardi/mobile-first-responsive-website/HEAD/images/between.jpeg -------------------------------------------------------------------------------- /images/between2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/euguilhermegirardi/mobile-first-responsive-website/HEAD/images/between2.jpeg -------------------------------------------------------------------------------- /images/lemonade.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/euguilhermegirardi/mobile-first-responsive-website/HEAD/images/lemonade.jpeg -------------------------------------------------------------------------------- /images/lemonade2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/euguilhermegirardi/mobile-first-responsive-website/HEAD/images/lemonade2.jpeg -------------------------------------------------------------------------------- /images/lemonade3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/euguilhermegirardi/mobile-first-responsive-website/HEAD/images/lemonade3.jpeg -------------------------------------------------------------------------------- /images/lemonade4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/euguilhermegirardi/mobile-first-responsive-website/HEAD/images/lemonade4.jpeg -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true -------------------------------------------------------------------------------- /scripts.js: -------------------------------------------------------------------------------- 1 | $('.menu').on('click', function () { 2 | $(this).toggleClass('active'); 3 | $('.overlay').toggleClass('menu-open'); 4 | }); 5 | 6 | $('.nav a').on('click', function () { 7 | $('.menu').removeClass('active'); 8 | $('.overlay').removeClass('menu-open'); 9 | }); 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mobile First Responsive Website 9 | 10 | 11 |
12 |
13 | 14 |
15 | 16 | 27 | 28 |
29 |

Welcome

30 |

The Squeeze

31 | Explore 32 |
33 |
34 | 35 |
36 |
37 |
38 |

Discover

39 |

Our Story

40 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quasi voluptates laborum dicta facilis, labore hic nam illum! Fugit laboriosam quos necessitatibus accusantium distinctio consectetur doloribus, dignissimos eligendi adipisci porro.

41 | Learn More 42 |
43 |
44 |
45 |
46 | 47 |
48 |

Fresh

49 |

Ingredients

50 |
51 | 52 | 68 | 69 |
70 |

Citrus

71 |

Goodness

72 |
73 | 74 |
75 |
76 |
77 |

Contact

78 |

Us

79 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quasi voluptates laborum dicta facilis, labore hic nam illum! Fugit laboriosam quos necessitatibus accusantium distinctio consectetur doloribus, dignissimos eligendi adipisci porro.

80 |
81 |
82 |
83 | 84 | 85 | 86 | 87 |
88 |
89 |
90 |
91 | 92 | 111 | 112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL STYLES */ 2 | *, 3 | *::before, 4 | *::after { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | html { 11 | font-size: 10px; 12 | font-family: 'Roboto', sans-serif; 13 | scroll-behavior: smooth; 14 | } 15 | 16 | :root { 17 | --main-font-color: #f2b632; 18 | --main-white: #fff; 19 | --main-font-dark-gray: #4d4d4d; 20 | --main-footer-bg-color: #141414; 21 | --main-font-family: 'Cheddar Jack', cursive; 22 | } 23 | 24 | section { 25 | padding: 6rem 0; 26 | } 27 | 28 | p { 29 | line-height: 1.5; 30 | font-size: 1.8rem; 31 | font-weight: 300; 32 | color: var(--main-font-dark-gray); 33 | } 34 | 35 | a { 36 | text-decoration: none; 37 | color: var(--main-white); 38 | } 39 | /* GLOBAL STYLES ENDS */ 40 | 41 | /* REUSABLE CLASSES */ 42 | .btn { 43 | display: inline-block; 44 | transition: all 650ms; 45 | border-radius: 3px; 46 | text-transform: uppercase; 47 | } 48 | 49 | .btn-info { 50 | font-size: 1.2rem; 51 | padding: 1rem; 52 | color: var(--main-font-color); 53 | border-bottom: 2px solid var(--main-font-color); 54 | margin: 2rem 0 4rem 0; 55 | } 56 | 57 | .btn-info:hover { 58 | background-color: var(--main-footer-bg-color); 59 | color: var(--main-white); 60 | } 61 | 62 | .custom-font { 63 | font-family: var(--main-font-family); 64 | color: var(--main-font-color); 65 | font-size: 6.5rem; 66 | line-height: 1; 67 | font-weight: 100; 68 | } 69 | 70 | .custom-font-secondary { 71 | text-transform: uppercase; 72 | letter-spacing: 5px; 73 | margin-right: -5px; 74 | font-size: 2.5rem; 75 | line-height: 0.2; 76 | color: var(--main-font-dark-gray); 77 | margin-bottom: 5rem; 78 | } 79 | 80 | .container { 81 | width: 90%; 82 | margin: 0 auto; 83 | text-align: center; 84 | } 85 | 86 | .between-sec { 87 | padding: 20rem 0; 88 | text-align: center; 89 | } 90 | 91 | .between-sec-color { 92 | color: var(--main-white); 93 | } 94 | /* REUSABLE CLASSES ENDS */ 95 | 96 | /* HEADER */ 97 | header { 98 | width: 100%; 99 | height: 100vh; 100 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent), 101 | url('images/hero.jpeg') bottom no-repeat; 102 | background-size: cover; 103 | display: flex; 104 | flex-direction: column; 105 | text-align: center; 106 | position: relative; 107 | } 108 | /* HEADER ENDS */ 109 | 110 | /* HEADER - NAV TOOGLE */ 111 | .menu { 112 | padding: 2rem 2.5rem; 113 | position: fixed; 114 | top: 3rem; 115 | right: 3rem; 116 | background-color: rgba(0, 0, 0, 0.5); 117 | z-index: 999; 118 | border-radius: 3px; 119 | cursor: pointer; 120 | } 121 | 122 | .menu .bar, 123 | .menu .bar::before, 124 | .menu .bar::after { 125 | content: ''; 126 | position: absolute; 127 | height: 2px; 128 | width: 4rem; 129 | background-color: var(--main-white); 130 | top: 0; 131 | left: 0; 132 | right: 0; 133 | bottom: 0; 134 | margin: auto; 135 | transition: 650ms; 136 | } 137 | 138 | .menu .bar::before { 139 | top: 2rem; 140 | } 141 | 142 | .menu .bar::after { 143 | top: -2rem; 144 | } 145 | 146 | .active .bar { 147 | background-color: transparent; 148 | } 149 | 150 | .active .bar::before { 151 | transform: rotate(45deg); 152 | } 153 | 154 | .active .bar::after { 155 | transform: rotate(-45deg); 156 | } 157 | 158 | .active .bar::before, 159 | .active .bar::after { 160 | top: 0; 161 | } 162 | /* HEADER - NAV TOOGLE ENDS */ 163 | 164 | /* HEADER - NAV */ 165 | #logo { 166 | display: none; 167 | text-transform: uppercase; 168 | font-size: 2rem; 169 | font-weight: 300; 170 | border-bottom: 1px solid #fff; 171 | margin-bottom: -5px; 172 | } 173 | 174 | .nav { 175 | width: 100%; 176 | height: 6rem; 177 | line-height: 6rem; 178 | position: relative; 179 | } 180 | 181 | .overlay { 182 | background-color: rgba(0, 0, 0, 0.95); 183 | position: fixed; 184 | right: 0; 185 | left: 0; 186 | top: 0; 187 | bottom: 0; 188 | z-index: 1; 189 | transition: opacity 650ms; 190 | transform: scale(0); 191 | opacity: 0; 192 | } 193 | 194 | .overlay.menu-open { 195 | transform: scale(1); 196 | opacity: 1; 197 | } 198 | 199 | .nav .overlay ul { 200 | position: relative; 201 | height: 100%; 202 | display: flex; 203 | flex-direction: column; 204 | justify-content: center; 205 | } 206 | 207 | .nav .overlay ul li { 208 | text-transform: uppercase; 209 | } 210 | 211 | .nav .overlay ul li a { 212 | display: block; 213 | font-size: 2rem; 214 | transition: all 650ms; 215 | } 216 | 217 | .nav .overlay ul li a:hover, 218 | .nav .overlay ul li a .active:hover { 219 | color: var(--main-font-color); 220 | border-bottom-color: var(--main-font-color); 221 | } 222 | /* HEADER - NAV ENDS */ 223 | 224 | /* HEADER - MAIN TEXT */ 225 | .main-text { 226 | line-height: 0; 227 | margin: auto; 228 | color: var(--main-white); 229 | user-select: none; 230 | } 231 | 232 | .main-text h1 { 233 | font-family: var(--main-font-family); 234 | color: var(--main-font-color); 235 | font-size: 8rem; 236 | font-weight: 100; 237 | margin-bottom: 5rem; 238 | } 239 | 240 | .main-text h2 { 241 | text-transform: uppercase; 242 | letter-spacing: 5px; 243 | margin-right: -5px; 244 | font-size: 2rem; 245 | line-height: 1; 246 | position: relative; 247 | } 248 | 249 | .main-text h2::before, 250 | .main-text h2::after { 251 | content: ''; 252 | width: 5rem; 253 | height: 3px; 254 | top: 50%; 255 | transform: translate(-50%); 256 | position: absolute; 257 | background-color: var(--main-white); 258 | border-radius: 8px; 259 | } 260 | 261 | .main-text h2::before { 262 | left: -2rem; 263 | } 264 | 265 | .main-text h2::after { 266 | right: -6rem; 267 | } 268 | 269 | .main-btn { 270 | font-size: 1.5rem; 271 | border: 2px solid var(--main-font-color); 272 | padding: 2rem 2.5rem; 273 | letter-spacing: 3px; 274 | margin-right: -3px; 275 | position: relative; 276 | margin-top: 3rem; 277 | } 278 | 279 | .main-btn:hover { 280 | transform: translateY(-3px); 281 | box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); 282 | } 283 | 284 | .main-btn:active { 285 | transform: translateY(0); 286 | box-shadow: none; 287 | } 288 | /* HEADER - MAIN TEXT ENDS */ 289 | 290 | /* SECTION - OUR STORY */ 291 | .store { 292 | width: 100%; 293 | min-height: 30rem; 294 | background: url('images/store.jpeg') center no-repeat; 295 | background-size: cover; 296 | } 297 | /* SECTION - OUR STORY ENDS */ 298 | 299 | /* SECTION - FRESH INGREDIENTS */ 300 | .fresh-ingredients { 301 | width: 100%; 302 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 303 | url('images/between.jpeg') center no-repeat; 304 | background-size: cover; 305 | } 306 | /* SECTION - FRESH INGREDIENTS ENDS */ 307 | 308 | /* SECTION - OUR MENU */ 309 | .image-group { 310 | display: grid; 311 | grid-template-columns: 1fr 1fr; 312 | grid-gap: 10px; 313 | } 314 | 315 | .image-group img { 316 | width: 100%; 317 | height: 30rem; 318 | } 319 | /* SECTION - OUR MENU ENDS */ 320 | 321 | /* SECTION - CITRUS GOODNESS */ 322 | .citrus-goodness { 323 | width: 100%; 324 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 325 | url('images/between2.jpeg') center no-repeat; 326 | background-size: cover; 327 | } 328 | /* SECTION - CITRUS GOODNESS ENDS */ 329 | 330 | /* SECTION - CONTACT US */ 331 | .contact-us form { 332 | width: 100%; 333 | min-width: 9rem; 334 | margin-top: 5rem; 335 | } 336 | 337 | .input, 338 | .text-area { 339 | width: 100%; 340 | max-width: 100%; 341 | margin: 5px 0; 342 | padding: 5px 1rem; 343 | border-radius: 3px; 344 | font-size: 1.5rem; 345 | border: 1px solid var(--main-footer-bg-color); 346 | color: #878787; 347 | } 348 | 349 | .input::placeholder, 350 | .text-area::placeholder { 351 | color: #878787; 352 | } 353 | 354 | .text-area { 355 | height: 10rem; 356 | } 357 | 358 | .btn-submit { 359 | background-color: var(--main-footer-bg-color); 360 | color: var(--main-white); 361 | width: 100%; 362 | padding: 1rem 0; 363 | cursor: pointer; 364 | } 365 | 366 | .btn-submit { 367 | background-color: #e1aa2f; 368 | } 369 | /* SECTION - CONTACT US ENDS */ 370 | 371 | /* FOOTER */ 372 | footer { 373 | width: 100%; 374 | display: grid; 375 | grid-template-columns: 1fr 1fr; 376 | text-align: center; 377 | background-color: var(--main-footer-bg-color); 378 | padding: 5rem 0; 379 | font-size: 1.8rem; 380 | color: var(--main-white); 381 | } 382 | 383 | footer h4 { 384 | font-size: 3rem; 385 | text-transform: uppercase; 386 | margin-bottom: 1.5rem; 387 | color: var(--main-footer-bg-color); 388 | font-weight: 100; 389 | font-family: 'Bebas Neue', sans-serif; 390 | } 391 | /* FOOTER ENDS */ 392 | 393 | /* MEDIA QUERIES */ 394 | @media screen and (min-width: 769px) { 395 | header, 396 | .between-sec { 397 | background-attachment: fixed; 398 | } 399 | 400 | .menu { 401 | display: none; 402 | } 403 | 404 | .nav { 405 | display: flex; 406 | padding: 2rem 10rem 0; 407 | justify-content: space-between; 408 | } 409 | 410 | #logo { 411 | display: block; 412 | } 413 | 414 | .nav .overlay { 415 | position: initial; 416 | background: none; 417 | opacity: initial; 418 | transform: initial; 419 | } 420 | 421 | .nav .overlay ul { 422 | flex-direction: row; 423 | list-style: none; 424 | margin-top: 2px; 425 | } 426 | 427 | .nav .overlay ul li a { 428 | font-size: 1.5rem; 429 | letter-spacing: 1px; 430 | margin-right: -1px; 431 | padding: 0 2rem; 432 | } 433 | 434 | .container { 435 | display: flex; 436 | flex-direction: row; 437 | align-items: center; 438 | } 439 | 440 | .center { 441 | flex: 1; 442 | } 443 | 444 | .add-flex { 445 | flex: 1; 446 | } 447 | 448 | .add-padding-right { 449 | padding-right: 10rem; 450 | } 451 | 452 | .first { 453 | order: 1; 454 | } 455 | 456 | .second { 457 | order: 2; 458 | } 459 | 460 | .store { 461 | min-height: 40rem; 462 | } 463 | 464 | .btn-info { 465 | font-size: 1.8rem; 466 | } 467 | 468 | .main-text h1 { 469 | transform: translateY(4rem); 470 | opacity: 0; 471 | animation: 0.5s fadeUp 0.5s forwards; 472 | } 473 | 474 | .main-text h2 { 475 | transform: scale(2); 476 | opacity: 0; 477 | animation: fadeIn 0.5s forwards; 478 | } 479 | 480 | .main-text .main-btn { 481 | opacity: 0; 482 | animation: 0.5s fade 1s forwards; 483 | } 484 | 485 | @keyframes fadeIn { 486 | 0% { 487 | transform: scale(2); 488 | opacity: 0; 489 | } 490 | 100% { 491 | transform: scale(1); 492 | opacity: 1; 493 | } 494 | } 495 | 496 | @keyframes fadeUp { 497 | 0% { 498 | transform: translateY(4rem); 499 | opacity: 0; 500 | } 501 | 100% { 502 | transform: translateY(0); 503 | opacity: 1; 504 | } 505 | } 506 | 507 | @keyframes fade { 508 | 0% { 509 | opacity: 0; 510 | } 511 | 100% { 512 | opacity: 1; 513 | } 514 | } 515 | } 516 | /* MEDIA QUERIES ENDS */ 517 | --------------------------------------------------------------------------------