├── final ├── 404.html ├── about.html ├── assets │ ├── about.jpeg │ ├── favicon.ico │ ├── logo.svg │ ├── main.jpeg │ └── recipes │ │ ├── recipe-1.jpeg │ │ ├── recipe-2.jpeg │ │ ├── recipe-3.jpeg │ │ └── recipe-4.jpeg ├── contact.html ├── css │ ├── main.css │ └── normalize.css ├── index.html ├── js │ └── app.js ├── recipes.html ├── single-recipe.html ├── tag-template.html └── tags.html └── starter ├── 404.html ├── about.html ├── assets ├── about.jpeg ├── favicon.ico ├── logo.svg ├── main.jpeg └── recipes │ ├── recipe-1.jpeg │ ├── recipe-2.jpeg │ ├── recipe-3.jpeg │ └── recipe-4.jpeg ├── contact.html ├── css ├── main.css └── normalize.css ├── index.html ├── js └── app.js ├── recipes.html ├── single-recipe.html ├── tag-template.html └── tags.html /final/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Error || Final 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 44 | 45 |

46 |

47 |

404

48 |

page not found

49 |

50 |

51 | 52 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /final/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About || Final 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 44 | 45 |

46 |

47 |

48 |

I'm baby coloring book poke taxidermy

49 |

50 | Taxidermy forage glossier letterpress heirloom before they sold out 51 | you probably haven't heard of them banh mi biodiesel chia. 52 |

53 |

54 | Taiyaki tumblr flexitarian jean shorts brunch, aesthetic salvia 55 | retro. 56 |

57 | contact 58 |

59 | 60 | Person Pouring Salt in Bowl

65 |

66 |

67 |

Look At This Awesomesouce!

68 |

69 | 70 | 71 |

76 |

Carne Asada

77 |

Prep : 15min | Cook : 5min

78 | 79 | 80 | 81 | 82 |

87 |

Greek Ribs

88 |

Prep : 15min | Cook : 5min

89 | 90 | 91 | 92 | 93 |

98 |

Vegetable Soup

99 |

Prep : 15min | Cook : 5min

100 | 101 | 102 |

103 |

104 |

105 | 106 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /final/assets/about.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/final/assets/about.jpeg -------------------------------------------------------------------------------- /final/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/final/assets/favicon.ico -------------------------------------------------------------------------------- /final/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /final/assets/main.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/final/assets/main.jpeg -------------------------------------------------------------------------------- /final/assets/recipes/recipe-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/final/assets/recipes/recipe-1.jpeg -------------------------------------------------------------------------------- /final/assets/recipes/recipe-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/final/assets/recipes/recipe-2.jpeg -------------------------------------------------------------------------------- /final/assets/recipes/recipe-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/final/assets/recipes/recipe-3.jpeg -------------------------------------------------------------------------------- /final/assets/recipes/recipe-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/final/assets/recipes/recipe-4.jpeg -------------------------------------------------------------------------------- /final/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contact || Final 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 44 | 45 |

46 |

47 |

48 |

Want To Get In Touch?

49 |

50 | Four dollar toast biodiesel plaid salvia actually pickled banjo 51 | bespoke mlkshk intelligentsia edison bulb synth. 52 |

53 |

Cardigan prism bicycle rights put a bird on it deep v.

54 |

55 | Hashtag swag health goth air plant, raclette listicle fingerstache 56 | cold-pressed fanny pack bicycle rights cardigan poke. 57 |

58 |

59 |

60 | 77 |

78 |

79 | 80 |

81 |

Look At This Awesomesouce!

82 |

83 | 84 | 85 |

90 |

Carne Asada

91 |

Prep : 15min | Cook : 5min

92 | 93 | 94 | 95 | 96 |

101 |

Greek Ribs

102 |

Prep : 15min | Cook : 5min

103 | 104 | 105 | 106 | 107 |

112 |

Vegetable Soup

113 |

Prep : 15min | Cook : 5min

114 | 115 | 116 |

117 |

118 |

119 | 120 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /final/css/main.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::after, 3 | ::before { 4 | box-sizing: border-box; 5 | } 6 | /* fonts */ 7 | 8 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap'); 9 | html { 10 | font-size: 100%; 11 | } /*16px*/ 12 | 13 | :root { 14 | /* colors */ 15 | --primary-100: #e2e0ff; 16 | --primary-200: #c1beff; 17 | --primary-300: #a29dff; 18 | --primary-400: #837dff; 19 | --primary-500: #645cff; 20 | --primary-600: #504acc; 21 | --primary-700: #3c3799; 22 | --primary-800: #282566; 23 | --primary-900: #141233; 24 | 25 | /* grey */ 26 | --grey-50: #f8fafc; 27 | --grey-100: #f1f5f9; 28 | --grey-200: #e2e8f0; 29 | --grey-300: #cbd5e1; 30 | --grey-400: #94a3b8; 31 | --grey-500: #64748b; 32 | --grey-600: #475569; 33 | --grey-700: #334155; 34 | --grey-800: #1e293b; 35 | --grey-900: #0f172a; 36 | /* rest of the colors */ 37 | --black: #222; 38 | --white: #fff; 39 | --red-light: #f8d7da; 40 | --red-dark: #842029; 41 | --green-light: #d1e7dd; 42 | --green-dark: #0f5132; 43 | 44 | /* fonts */ 45 | --headingFont: 'Roboto', sans-serif; 46 | --bodyFont: 'Nunito', sans-serif; 47 | --smallText: 0.7em; 48 | /* rest of the vars */ 49 | --backgroundColor: var(--grey-50); 50 | --textColor: var(--grey-900); 51 | --borderRadius: 0.25rem; 52 | --letterSpacing: 1px; 53 | --transition: 0.3s ease-in-out all; 54 | --max-width: 1120px; 55 | --fixed-width: 600px; 56 | 57 | /* box shadow*/ 58 | --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); 59 | --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 60 | 0 2px 4px -1px rgba(0, 0, 0, 0.06); 61 | --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 62 | 0 4px 6px -2px rgba(0, 0, 0, 0.05); 63 | --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 64 | 0 10px 10px -5px rgba(0, 0, 0, 0.04); 65 | } 66 | 67 | body { 68 | background: var(--backgroundColor); 69 | font-family: var(--bodyFont); 70 | font-weight: 400; 71 | line-height: 1.75; 72 | color: var(--textColor); 73 | } 74 | 75 | p { 76 | margin-top: 0; 77 | margin-bottom: 1.5rem; 78 | max-width: 40em; 79 | } 80 | 81 | h1, 82 | h2, 83 | h3, 84 | h4, 85 | h5 { 86 | margin: 0; 87 | margin-bottom: 1.38rem; 88 | font-family: var(--headingFont); 89 | font-weight: 400; 90 | line-height: 1.3; 91 | text-transform: capitalize; 92 | letter-spacing: var(--letterSpacing); 93 | } 94 | 95 | h1 { 96 | margin-top: 0; 97 | font-size: 3.052rem; 98 | } 99 | 100 | h2 { 101 | font-size: 2.441rem; 102 | } 103 | 104 | h3 { 105 | font-size: 1.953rem; 106 | } 107 | 108 | h4 { 109 | font-size: 1.563rem; 110 | } 111 | 112 | h5 { 113 | font-size: 1.25rem; 114 | } 115 | 116 | small, 117 | .text-small { 118 | font-size: var(--smallText); 119 | } 120 | 121 | a { 122 | text-decoration: none; 123 | } 124 | ul { 125 | list-style-type: none; 126 | padding: 0; 127 | } 128 | 129 | .img { 130 | width: 100%; 131 | display: block; 132 | object-fit: cover; 133 | } 134 | /* buttons */ 135 | 136 | .btn { 137 | cursor: pointer; 138 | color: var(--white); 139 | background: var(--primary-500); 140 | border: transparent; 141 | border-radius: var(--borderRadius); 142 | letter-spacing: var(--letterSpacing); 143 | padding: 0.375rem 0.75rem; 144 | box-shadow: var(--shadow-1); 145 | transition: var(--transtion); 146 | text-transform: capitalize; 147 | display: inline-block; 148 | } 149 | .btn:hover { 150 | background: var(--primary-700); 151 | box-shadow: var(--shadow-3); 152 | } 153 | .btn-hipster { 154 | color: var(--primary-500); 155 | background: var(--primary-200); 156 | } 157 | .btn-hipster:hover { 158 | color: var(--primary-200); 159 | background: var(--primary-700); 160 | } 161 | .btn-block { 162 | width: 100%; 163 | } 164 | 165 | /* alerts */ 166 | .alert { 167 | padding: 0.375rem 0.75rem; 168 | margin-bottom: 1rem; 169 | border-color: transparent; 170 | border-radius: var(--borderRadius); 171 | } 172 | 173 | .alert-danger { 174 | color: var(--red-dark); 175 | background: var(--red-light); 176 | } 177 | .alert-success { 178 | color: var(--green-dark); 179 | background: var(--green-light); 180 | } 181 | /* form */ 182 | 183 | .form { 184 | width: 90vw; 185 | max-width: var(--fixed-width); 186 | background: var(--white); 187 | border-radius: var(--borderRadius); 188 | box-shadow: var(--shadow-2); 189 | padding: 2rem 2.5rem; 190 | margin: 3rem auto; 191 | } 192 | .form-label { 193 | display: block; 194 | font-size: var(--smallText); 195 | margin-bottom: 0.5rem; 196 | text-transform: capitalize; 197 | letter-spacing: var(--letterSpacing); 198 | } 199 | .form-input, 200 | .form-textarea { 201 | width: 100%; 202 | padding: 0.375rem 0.75rem; 203 | border-radius: var(--borderRadius); 204 | background: var(--backgroundColor); 205 | border: 1px solid var(--grey-200); 206 | } 207 | 208 | .form-row { 209 | margin-bottom: 1rem; 210 | } 211 | 212 | .form-textarea { 213 | height: 7rem; 214 | } 215 | ::placeholder { 216 | font-family: inherit; 217 | color: var(--grey-400); 218 | } 219 | .form-alert { 220 | color: var(--red-dark); 221 | letter-spacing: var(--letterSpacing); 222 | text-transform: capitalize; 223 | } 224 | /* alert */ 225 | 226 | @keyframes spinner { 227 | to { 228 | transform: rotate(360deg); 229 | } 230 | } 231 | 232 | .loading { 233 | width: 6rem; 234 | height: 6rem; 235 | border: 5px solid var(--grey-400); 236 | border-radius: 50%; 237 | border-top-color: var(--primary-500); 238 | animation: spinner 0.6s linear infinite; 239 | } 240 | .loading { 241 | margin: 0 auto; 242 | } 243 | /* title */ 244 | 245 | .title { 246 | text-align: center; 247 | } 248 | 249 | .title-underline { 250 | background: var(--primary-500); 251 | width: 7rem; 252 | height: 0.25rem; 253 | margin: 0 auto; 254 | margin-top: -1rem; 255 | } 256 | 257 | /* 258 | =============== 259 | Navbar 260 | =============== 261 | */ 262 | 263 | .navbar { 264 | display: flex; 265 | align-items: center; 266 | justify-content: center; 267 | } 268 | .nav-center { 269 | width: 90vw; 270 | max-width: var(--max-width); 271 | } 272 | .nav-header { 273 | height: 6rem; 274 | display: flex; 275 | justify-content: space-between; 276 | align-items: center; 277 | } 278 | .nav-header img { 279 | width: 200px; 280 | } 281 | .nav-logo { 282 | display: flex; 283 | align-items: flex-end; 284 | } 285 | 286 | .nav-btn { 287 | padding: 0.15rem 0.75rem; 288 | } 289 | .nav-btn i { 290 | font-size: 1.25rem; 291 | } 292 | .nav-links { 293 | height: 0; 294 | overflow: hidden; 295 | display: flex; 296 | flex-direction: column; 297 | transition: var(--transition); 298 | } 299 | .show-links { 300 | height: 23.9375rem; 301 | } 302 | 303 | .nav-link { 304 | display: block; 305 | text-align: center; 306 | font-size: 1.25rem; 307 | text-transform: capitalize; 308 | color: var(--grey-900); 309 | letter-spacing: var(--letterSpacing); 310 | padding: 1rem 0; 311 | border-top: 1px solid var(--grey-500); 312 | transition: var(--transition); 313 | } 314 | .nav-link:hover { 315 | color: var(--primary-500); 316 | } 317 | 318 | .contact-link a { 319 | padding: 0.15rem 1rem; 320 | } 321 | 322 | @media screen and (min-width: 992px) { 323 | .navbar { 324 | height: 6rem; 325 | } 326 | .nav-center { 327 | display: flex; 328 | align-items: center; 329 | } 330 | .nav-header { 331 | padding: 0; 332 | margin-right: 2rem; 333 | height: auto; 334 | } 335 | 336 | .nav-btn { 337 | display: none; 338 | } 339 | .nav-links { 340 | height: auto !important; 341 | flex-direction: row; 342 | align-items: center; 343 | width: 100%; 344 | } 345 | .nav-link { 346 | padding: 0; 347 | border-top: none; 348 | margin-right: 1rem; 349 | font-size: 1rem; 350 | } 351 | .contact-link { 352 | margin-right: 0; 353 | margin-left: auto; 354 | } 355 | } 356 | /* 357 | =============== 358 | Page 359 | =============== 360 | */ 361 | 362 | .page { 363 | width: 90vw; 364 | max-width: var(--max-width); 365 | margin: 0 auto; 366 | } 367 | .page { 368 | padding-top: 2rem; 369 | min-height: calc(100vh - (6rem + 4rem)); 370 | } 371 | /* 372 | =============== 373 | Footer 374 | =============== 375 | */ 376 | 377 | .page-footer { 378 | text-align: center; 379 | height: 4rem; 380 | display: flex; 381 | align-items: center; 382 | justify-content: center; 383 | background: var(--black); 384 | color: var(--white); 385 | } 386 | .page-footer h5 { 387 | margin-top: 0; 388 | margin-bottom: 0; 389 | } 390 | .page-footer p { 391 | margin-bottom: 0; 392 | } 393 | .page-footer .footer-logo, 394 | .page-footer a { 395 | color: var(--primary-500); 396 | } 397 | /* 398 | =============== 399 | Hero 400 | =============== 401 | */ 402 | 403 | .hero { 404 | height: 40vh; 405 | position: relative; 406 | margin-bottom: 2rem; 407 | background: url('../assets/main.jpeg') center/cover no-repeat; 408 | border-radius: var(--borderRadius); 409 | } 410 | .hero-container { 411 | position: absolute; 412 | top: 0; 413 | left: 0; 414 | width: 100%; 415 | height: 100%; 416 | display: flex; 417 | align-items: center; 418 | justify-content: center; 419 | background: rgba(0, 0, 0, 0.4); 420 | border-radius: var(--borderRadius); 421 | } 422 | .hero-text { 423 | color: var(--white); 424 | text-align: center; 425 | } 426 | 427 | @media only screen and (min-width: 768px) { 428 | .hero-text h1 { 429 | font-size: 4rem; 430 | margin-bottom: 0; 431 | } 432 | } 433 | 434 | /* 435 | =============== 436 | Recipes 437 | =============== 438 | */ 439 | 440 | .recipes-container { 441 | display: grid; 442 | gap: 2rem 1rem; 443 | } 444 | 445 | .recipes-list { 446 | display: grid; 447 | gap: 2rem 1rem; 448 | padding-bottom: 3rem; 449 | } 450 | .tags-container { 451 | order: 1; 452 | display: flex; 453 | flex-direction: column; 454 | padding-bottom: 3rem; 455 | /* background: blue; */ 456 | } 457 | .tags-container h4 { 458 | margin-bottom: 0.5rem; 459 | font-weight: 500; 460 | } 461 | .tags-list { 462 | display: grid; 463 | grid-template-columns: 1fr 1fr 1fr; 464 | } 465 | .tags-list a { 466 | text-transform: capitalize; 467 | display: block; 468 | color: var(--grey-500); 469 | transition: var(--transition); 470 | } 471 | .tags-list a:hover { 472 | color: var(--primary-500); 473 | } 474 | .recipe { 475 | display: block; 476 | } 477 | .recipe-img { 478 | height: 15rem; 479 | border-radius: var(--borderRadius); 480 | margin-bottom: 1rem; 481 | } 482 | .recipe h5 { 483 | margin-bottom: 0; 484 | margin-top: 0.25rem; 485 | line-height: 1; 486 | color: var(--grey-700); 487 | } 488 | .recipe p { 489 | margin-bottom: 0; 490 | line-height: 1; 491 | color: var(--grey-500); 492 | margin-top: 0.5rem; 493 | letter-spacing: var(--letterSpacing); 494 | } 495 | @media screen and (min-width: 576px) { 496 | .recipes-list { 497 | grid-template-columns: 1fr 1fr; 498 | } 499 | .recipe-img { 500 | height: 10rem; 501 | } 502 | } 503 | 504 | @media screen and (min-width: 992px) { 505 | .recipes-container { 506 | grid-template-columns: 200px 1fr; 507 | gap: 1rem; 508 | } 509 | .recipes-list { 510 | grid-template-columns: 1fr 1fr; 511 | } 512 | 513 | .recipe p { 514 | font-size: 0.85rem; 515 | } 516 | .tags-container { 517 | order: 0; 518 | /* background: blue; */ 519 | } 520 | .tags-list { 521 | display: grid; 522 | grid-template-columns: 1fr; 523 | } 524 | } 525 | 526 | @media screen and (min-width: 1200px) { 527 | .recipe h5 { 528 | font-size: 1.15rem; 529 | } 530 | .recipes-list { 531 | grid-template-columns: 1fr 1fr 1fr; 532 | } 533 | } 534 | /* 535 | =============== 536 | Error 537 | =============== 538 | */ 539 | .error-page { 540 | text-align: center; 541 | padding-top: 5rem; 542 | } 543 | .error-page h1 { 544 | font-size: 9rem; 545 | } 546 | /* 547 | =============== 548 | About Page 549 | =============== 550 | */ 551 | 552 | .about-page h2 { 553 | text-transform: none; 554 | font-weight: bold; 555 | } 556 | .about-page { 557 | display: grid; 558 | gap: 2rem 4rem; 559 | padding-bottom: 3rem; 560 | } 561 | .about-img { 562 | border-radius: var(--borderRadius); 563 | height: 300px; 564 | } 565 | 566 | @media screen and (min-width: 992px) { 567 | .about-page { 568 | grid-template-columns: 1fr 1fr; 569 | grid-template-rows: 400px; 570 | align-items: center; 571 | } 572 | .about-img { 573 | height: 100%; 574 | } 575 | } 576 | 577 | .featured-title { 578 | text-align: center; 579 | } 580 | /* 581 | =============== 582 | Contact Page 583 | =============== 584 | */ 585 | .contact-form { 586 | width: 100%; 587 | margin: 0; 588 | } 589 | .contact-container { 590 | display: grid; 591 | gap: 2rem 3rem; 592 | padding-bottom: 3rem; 593 | } 594 | @media screen and (min-width: 992px) { 595 | .contact-container { 596 | grid-template-columns: 1fr 450px; 597 | align-items: center; 598 | } 599 | } 600 | 601 | /* 602 | =============== 603 | Tags Page 604 | =============== 605 | */ 606 | 607 | .tags-wrapper { 608 | display: grid; 609 | gap: 2rem; 610 | padding-bottom: 3rem; 611 | } 612 | .tag { 613 | background: var(--grey-500); 614 | border-radius: var(--borderRadius); 615 | text-align: center; 616 | color: var(--white); 617 | transition: var(--transition); 618 | padding: 0.75rem 0; 619 | } 620 | .tag:hover { 621 | background: var(--primary-500); 622 | } 623 | .tag h5, 624 | .tag p { 625 | margin-bottom: 0; 626 | } 627 | .tag h5 { 628 | font-weight: 600; 629 | } 630 | @media screen and (min-width: 576px) { 631 | .tags-wrapper { 632 | grid-template-columns: 1fr 1fr; 633 | } 634 | } 635 | @media screen and (min-width: 992px) { 636 | .tags-wrapper { 637 | grid-template-columns: 1fr 1fr 1fr; 638 | } 639 | } 640 | 641 | /* 642 | =============== 643 | Recipe Template 644 | =============== 645 | */ 646 | 647 | .recipe-hero { 648 | display: grid; 649 | gap: 3rem; 650 | } 651 | 652 | .recipe-hero-img { 653 | height: 300px; 654 | border-radius: var(--borderRadius); 655 | } 656 | .recipe-info p { 657 | color: var(--grey-600); 658 | } 659 | .recipe-icons { 660 | display: grid; 661 | grid-template-columns: repeat(3, 1fr); 662 | gap: 1rem; 663 | margin: 2rem 0; 664 | text-align: center; 665 | } 666 | .recipe-icons i { 667 | font-size: 1.5rem; 668 | color: var(--primary-500); 669 | } 670 | .recipe-icons h5, 671 | .recipe-icons p { 672 | margin-bottom: 0; 673 | font-size: 0.85em; 674 | } 675 | 676 | .recipe-icons p { 677 | color: var(--grey-600); 678 | } 679 | .recipe-tags { 680 | display: flex; 681 | align-items: center; 682 | flex-wrap: wrap; 683 | font-size: 0.7em; 684 | font-weight: 600; 685 | } 686 | .recipe-tags a { 687 | background: var(--primary-500); 688 | border-radius: var(--borderRadius); 689 | color: var(--white); 690 | padding: 0.05rem 0.5rem; 691 | margin: 0 0.25rem; 692 | text-transform: capitalize; 693 | } 694 | @media screen and (min-width: 992px) { 695 | .recipe-hero { 696 | grid-template-columns: 4fr 5fr; 697 | align-items: center; 698 | } 699 | } 700 | .recipe-content { 701 | padding: 3rem 0; 702 | display: grid; 703 | gap: 2rem 5rem; 704 | } 705 | @media screen and (min-width: 992px) { 706 | .recipe-content { 707 | grid-template-columns: 2fr 1fr; 708 | } 709 | } 710 | .single-instruction header { 711 | display: grid; 712 | grid-template-columns: auto 1fr; 713 | gap: 1.5rem; 714 | align-items: center; 715 | } 716 | .single-instruction header p { 717 | text-transform: uppercase; 718 | font-weight: 600; 719 | color: var(--primary-500); 720 | margin-bottom: 0; 721 | } 722 | .single-instruction > p { 723 | color: var(--grey-700); 724 | } 725 | 726 | .single-instruction header div { 727 | height: 2px; 728 | background: var(--grey-300); 729 | } 730 | 731 | .second-column { 732 | display: grid; 733 | row-gap: 2rem; 734 | } 735 | 736 | .single-ingredient { 737 | border-bottom: 2px solid var(--grey-300); 738 | padding-bottom: 0.75rem; 739 | color: var(--grey-700); 740 | } 741 | .single-tool { 742 | border-bottom: 2px solid var(--grey-300); 743 | padding-bottom: 0.75rem; 744 | color: var(--primary-500); 745 | text-transform: capitalize; 746 | } 747 | -------------------------------------------------------------------------------- /final/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { 178 | /* 1 */ 179 | overflow: visible; 180 | } 181 | 182 | /** 183 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 184 | * 1. Remove the inheritance of text transform in Firefox. 185 | */ 186 | 187 | button, 188 | select { 189 | /* 1 */ 190 | text-transform: none; 191 | } 192 | 193 | /** 194 | * Correct the inability to style clickable types in iOS and Safari. 195 | */ 196 | 197 | button, 198 | [type='button'], 199 | [type='reset'], 200 | [type='submit'] { 201 | -webkit-appearance: button; 202 | } 203 | 204 | /** 205 | * Remove the inner border and padding in Firefox. 206 | */ 207 | 208 | button::-moz-focus-inner, 209 | [type='button']::-moz-focus-inner, 210 | [type='reset']::-moz-focus-inner, 211 | [type='submit']::-moz-focus-inner { 212 | border-style: none; 213 | padding: 0; 214 | } 215 | 216 | /** 217 | * Restore the focus styles unset by the previous rule. 218 | */ 219 | 220 | button:-moz-focusring, 221 | [type='button']:-moz-focusring, 222 | [type='reset']:-moz-focusring, 223 | [type='submit']:-moz-focusring { 224 | outline: 1px dotted ButtonText; 225 | } 226 | 227 | /** 228 | * Correct the padding in Firefox. 229 | */ 230 | 231 | fieldset { 232 | padding: 0.35em 0.75em 0.625em; 233 | } 234 | 235 | /** 236 | * 1. Correct the text wrapping in Edge and IE. 237 | * 2. Correct the color inheritance from `fieldset` elements in IE. 238 | * 3. Remove the padding so developers are not caught out when they zero out 239 | * `fieldset` elements in all browsers. 240 | */ 241 | 242 | legend { 243 | box-sizing: border-box; /* 1 */ 244 | color: inherit; /* 2 */ 245 | display: table; /* 1 */ 246 | max-width: 100%; /* 1 */ 247 | padding: 0; /* 3 */ 248 | white-space: normal; /* 1 */ 249 | } 250 | 251 | /** 252 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 253 | */ 254 | 255 | progress { 256 | vertical-align: baseline; 257 | } 258 | 259 | /** 260 | * Remove the default vertical scrollbar in IE 10+. 261 | */ 262 | 263 | textarea { 264 | overflow: auto; 265 | } 266 | 267 | /** 268 | * 1. Add the correct box sizing in IE 10. 269 | * 2. Remove the padding in IE 10. 270 | */ 271 | 272 | [type='checkbox'], 273 | [type='radio'] { 274 | box-sizing: border-box; /* 1 */ 275 | padding: 0; /* 2 */ 276 | } 277 | 278 | /** 279 | * Correct the cursor style of increment and decrement buttons in Chrome. 280 | */ 281 | 282 | [type='number']::-webkit-inner-spin-button, 283 | [type='number']::-webkit-outer-spin-button { 284 | height: auto; 285 | } 286 | 287 | /** 288 | * 1. Correct the odd appearance in Chrome and Safari. 289 | * 2. Correct the outline style in Safari. 290 | */ 291 | 292 | [type='search'] { 293 | -webkit-appearance: textfield; /* 1 */ 294 | outline-offset: -2px; /* 2 */ 295 | } 296 | 297 | /** 298 | * Remove the inner padding in Chrome and Safari on macOS. 299 | */ 300 | 301 | [type='search']::-webkit-search-decoration { 302 | -webkit-appearance: none; 303 | } 304 | 305 | /** 306 | * 1. Correct the inability to style clickable types in iOS and Safari. 307 | * 2. Change font properties to `inherit` in Safari. 308 | */ 309 | 310 | ::-webkit-file-upload-button { 311 | -webkit-appearance: button; /* 1 */ 312 | font: inherit; /* 2 */ 313 | } 314 | 315 | /* Interactive 316 | ========================================================================== */ 317 | 318 | /* 319 | * Add the correct display in Edge, IE 10+, and Firefox. 320 | */ 321 | 322 | details { 323 | display: block; 324 | } 325 | 326 | /* 327 | * Add the correct display in all browsers. 328 | */ 329 | 330 | summary { 331 | display: list-item; 332 | } 333 | 334 | /* Misc 335 | ========================================================================== */ 336 | 337 | /** 338 | * Add the correct display in IE 10+. 339 | */ 340 | 341 | template { 342 | display: none; 343 | } 344 | 345 | /** 346 | * Add the correct display in IE 10. 347 | */ 348 | 349 | [hidden] { 350 | display: none; 351 | } 352 | -------------------------------------------------------------------------------- /final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simply Recipes || Final 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 44 | 45 | 46 |

47 | 48 |

49 |

50 |

51 |

simply recipes

52 |

no fluff, just recipes

53 |

54 |

55 |

56 | 57 |

58 | 59 |

60 |

recipes

61 |

67 |

68 | 69 | 70 |

71 | 72 | 73 |

78 |

Carne Asada

79 |

Prep : 15min | Cook : 5min

80 | 81 | 82 | 83 | 84 |

89 |

Greek Ribs

90 |

Prep : 15min | Cook : 5min

91 | 92 | 93 | 94 | 95 |

100 |

Vegetable Soup

101 |

Prep : 15min | Cook : 5min

102 | 103 | 104 | 105 | 106 |

111 |

Banana Pancakes

112 |

Prep : 15min | Cook : 5min

113 | 114 | 115 |

116 | 117 |

118 |

119 | 120 | 121 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /final/js/app.js: -------------------------------------------------------------------------------- 1 | const getElement = (selector) => { 2 | const element = document.querySelector(selector) 3 | 4 | if (element) return element 5 | throw Error( 6 | `Please double check your class names, there is no ${selector} class` 7 | ) 8 | } 9 | 10 | const links = getElement('.nav-links') 11 | const navBtnDOM = getElement('.nav-btn') 12 | 13 | navBtnDOM.addEventListener('click', () => { 14 | links.classList.toggle('show-links') 15 | }) 16 | 17 | const date = getElement('#date') 18 | const currentYear = new Date().getFullYear() 19 | date.textContent = currentYear 20 | -------------------------------------------------------------------------------- /final/recipes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Recipes || Final 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 44 | 45 | 46 |

47 |

48 | 49 |

50 |

recipes

51 |

57 |

58 | 59 | 60 |

61 | 62 | 63 |

68 |

Carne Asada

69 |

Prep : 15min | Cook : 5min

70 | 71 | 72 | 73 | 74 |

79 |

Greek Ribs

80 |

Prep : 15min | Cook : 5min

81 | 82 | 83 | 84 | 85 |

90 |

Vegetable Soup

91 |

Prep : 15min | Cook : 5min

92 | 93 | 94 | 95 | 96 |

101 |

Banana Pancakes

102 |

Prep : 15min | Cook : 5min

103 | 104 | 105 |

106 |

107 |

108 | 109 | 110 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /final/single-recipe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Single Recipe || Final 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 44 | 45 |

46 |

47 |

48 |

52 |

53 |

Banana Pancakes

54 |

55 | Shabby chic humblebrag banh mi bushwick, banjo kale chips 56 | meggings. Cred selfies sartorial, cloud bread disrupt blue bottle 57 | seitan. Dreamcatcher tousled bitters, health goth vegan venmo 58 | whatever street art lyft shabby chic pitchfork beard. Drinking 59 | vinegar poke tbh, iPhone coloring book polaroid truffaut tousled 60 | ramps pug trust fund letterpress. Portland four loko austin 61 | chicharrones bitters single-origin coffee. Leggings letterpress 62 | occupy pour-over. 63 |

64 |

65 |

66 | 67 |

prep time

68 |

30 min.

69 |

70 |

71 | 72 |

cook time

73 |

15 min.

74 |

75 |

76 | 77 |

serving

78 |

6 servings

79 |

80 |

81 |

87 |

88 |

89 | 90 |

91 |

92 |

instructions

93 | 94 |

95 |

96 |

step 1

97 |

98 |

99 |

100 | I'm baby mustache man braid fingerstache small batch venmo 101 | succulents shoreditch. 102 |

103 |

104 | 105 | 106 |

107 |

108 |

step 2

109 |

110 |

111 |

112 | Pabst pitchfork you probably haven't heard of them, asymmetrical 113 | seitan tousled succulents wolf banh mi man bun bespoke selfies 114 | freegan ethical hexagon. 115 |

116 |

117 | 118 | 119 |

120 |

121 |

step 3

122 |

123 |

124 |

125 | Polaroid iPhone bitters chambray. Cornhole swag kombucha 126 | live-edge. 127 |

128 |

129 | 130 |

131 |

132 |

133 |

ingredients

134 |

1 1/2 cups dry pancake mix

135 |

1/2 cup flax seed meal

136 |

1 cup skim milk

137 |

138 |

139 |

tools

140 |

Hand Blender

141 |

Large Heavy Pot With Lid

142 |

Measuring Spoons

143 |

Measuring Cups

144 |

145 |

146 |

147 |

148 |

149 | 150 | 157 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /final/tag-template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Recipe Template || Final 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 44 | 45 |

46 |

47 |

Beef

48 | 49 |

50 | 51 | 52 |

57 |

Carne Asada

58 |

Prep : 15min | Cook : 5min

59 | 60 | 61 | 62 | 63 |

68 |

Greek Ribs

69 |

Prep : 15min | Cook : 5min

70 | 71 | 72 | 73 | 74 |

79 |

Vegetable Soup

80 |

Prep : 15min | Cook : 5min

81 | 82 | 83 | 84 | 85 |

90 |

Banana Pancakes

91 |

Prep : 15min | Cook : 5min

92 | 93 | 94 |

95 | 96 |

97 | 98 |

99 | 100 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /final/tags.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tags || Final 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 44 | 45 |

46 |

47 | 48 | 49 |

beef

50 |

1 recipe

51 | 52 | 53 | 54 | 55 |

breakfast

56 |

2 recipe

57 | 58 | 59 | 60 | 61 |

carrots

62 |

3 recipe

63 | 64 | 65 | 66 | 67 |

dinner

68 |

4 recipe

69 | 70 | 71 | 72 | 73 |

food

74 |

1 recipe

75 | 76 | 77 |

78 |

79 | 80 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /starter/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Error || Starter 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 |

Error Page

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /starter/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About || Starter 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 |

About Page

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /starter/assets/about.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/starter/assets/about.jpeg -------------------------------------------------------------------------------- /starter/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/starter/assets/favicon.ico -------------------------------------------------------------------------------- /starter/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /starter/assets/main.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/starter/assets/main.jpeg -------------------------------------------------------------------------------- /starter/assets/recipes/recipe-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/starter/assets/recipes/recipe-1.jpeg -------------------------------------------------------------------------------- /starter/assets/recipes/recipe-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/starter/assets/recipes/recipe-2.jpeg -------------------------------------------------------------------------------- /starter/assets/recipes/recipe-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/starter/assets/recipes/recipe-3.jpeg -------------------------------------------------------------------------------- /starter/assets/recipes/recipe-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/john-smilga/html-css-simply-recipes/4b017c0b3c5e9f2f7cfbc4b66ffcd57a1bb3aa4a/starter/assets/recipes/recipe-4.jpeg -------------------------------------------------------------------------------- /starter/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contact || Starter 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 |

Contact Page

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /starter/css/main.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::after, 3 | ::before { 4 | box-sizing: border-box; 5 | } 6 | /* fonts */ 7 | 8 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Montserrat&display=swap'); 9 | html { 10 | font-size: 100%; 11 | } /*16px*/ 12 | 13 | :root { 14 | /* colors */ 15 | --primary-100: #e2e0ff; 16 | --primary-200: #c1beff; 17 | --primary-300: #a29dff; 18 | --primary-400: #837dff; 19 | --primary-500: #645cff; 20 | --primary-600: #504acc; 21 | --primary-700: #3c3799; 22 | --primary-800: #282566; 23 | --primary-900: #141233; 24 | 25 | /* grey */ 26 | --grey-50: #f8fafc; 27 | --grey-100: #f1f5f9; 28 | --grey-200: #e2e8f0; 29 | --grey-300: #cbd5e1; 30 | --grey-400: #94a3b8; 31 | --grey-500: #64748b; 32 | --grey-600: #475569; 33 | --grey-700: #334155; 34 | --grey-800: #1e293b; 35 | --grey-900: #0f172a; 36 | /* rest of the colors */ 37 | --black: #222; 38 | --white: #fff; 39 | --red-light: #f8d7da; 40 | --red-dark: #842029; 41 | --green-light: #d1e7dd; 42 | --green-dark: #0f5132; 43 | 44 | /* fonts */ 45 | --headingFont: 'Roboto', sans-serif; 46 | --bodyFont: 'Nunito', sans-serif; 47 | --smallText: 0.7em; 48 | /* rest of the vars */ 49 | --backgroundColor: var(--grey-50); 50 | --textColor: var(--grey-900); 51 | --borderRadius: 0.25rem; 52 | --letterSpacing: 1px; 53 | --transition: 0.3s ease-in-out all; 54 | --max-width: 1120px; 55 | --fixed-width: 600px; 56 | 57 | /* box shadow*/ 58 | --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); 59 | --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 60 | 0 2px 4px -1px rgba(0, 0, 0, 0.06); 61 | --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 62 | 0 4px 6px -2px rgba(0, 0, 0, 0.05); 63 | --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 64 | 0 10px 10px -5px rgba(0, 0, 0, 0.04); 65 | } 66 | 67 | body { 68 | background: var(--backgroundColor); 69 | font-family: var(--bodyFont); 70 | font-weight: 400; 71 | line-height: 1.75; 72 | color: var(--textColor); 73 | } 74 | 75 | p { 76 | margin-top: 0; 77 | margin-bottom: 1.5rem; 78 | max-width: 40em; 79 | } 80 | 81 | h1, 82 | h2, 83 | h3, 84 | h4, 85 | h5 { 86 | margin: 0; 87 | margin-bottom: 1.38rem; 88 | font-family: var(--headingFont); 89 | font-weight: 400; 90 | line-height: 1.3; 91 | text-transform: capitalize; 92 | letter-spacing: var(--letterSpacing); 93 | } 94 | 95 | h1 { 96 | margin-top: 0; 97 | font-size: 3.052rem; 98 | } 99 | 100 | h2 { 101 | font-size: 2.441rem; 102 | } 103 | 104 | h3 { 105 | font-size: 1.953rem; 106 | } 107 | 108 | h4 { 109 | font-size: 1.563rem; 110 | } 111 | 112 | h5 { 113 | font-size: 1.25rem; 114 | } 115 | 116 | small, 117 | .text-small { 118 | font-size: var(--smallText); 119 | } 120 | 121 | a { 122 | text-decoration: none; 123 | } 124 | ul { 125 | list-style-type: none; 126 | padding: 0; 127 | } 128 | 129 | .img { 130 | width: 100%; 131 | display: block; 132 | object-fit: cover; 133 | } 134 | /* buttons */ 135 | 136 | .btn { 137 | cursor: pointer; 138 | color: var(--white); 139 | background: var(--primary-500); 140 | border: transparent; 141 | border-radius: var(--borderRadius); 142 | letter-spacing: var(--letterSpacing); 143 | padding: 0.375rem 0.75rem; 144 | box-shadow: var(--shadow-1); 145 | transition: var(--transtion); 146 | text-transform: capitalize; 147 | display: inline-block; 148 | } 149 | .btn:hover { 150 | background: var(--primary-700); 151 | box-shadow: var(--shadow-3); 152 | } 153 | .btn-hipster { 154 | color: var(--primary-500); 155 | background: var(--primary-200); 156 | } 157 | .btn-hipster:hover { 158 | color: var(--primary-200); 159 | background: var(--primary-700); 160 | } 161 | .btn-block { 162 | width: 100%; 163 | } 164 | 165 | /* alerts */ 166 | .alert { 167 | padding: 0.375rem 0.75rem; 168 | margin-bottom: 1rem; 169 | border-color: transparent; 170 | border-radius: var(--borderRadius); 171 | } 172 | 173 | .alert-danger { 174 | color: var(--red-dark); 175 | background: var(--red-light); 176 | } 177 | .alert-success { 178 | color: var(--green-dark); 179 | background: var(--green-light); 180 | } 181 | /* form */ 182 | 183 | .form { 184 | width: 90vw; 185 | max-width: var(--fixed-width); 186 | background: var(--white); 187 | border-radius: var(--borderRadius); 188 | box-shadow: var(--shadow-2); 189 | padding: 2rem 2.5rem; 190 | margin: 3rem auto; 191 | } 192 | .form-label { 193 | display: block; 194 | font-size: var(--smallText); 195 | margin-bottom: 0.5rem; 196 | text-transform: capitalize; 197 | letter-spacing: var(--letterSpacing); 198 | } 199 | .form-input, 200 | .form-textarea { 201 | width: 100%; 202 | padding: 0.375rem 0.75rem; 203 | border-radius: var(--borderRadius); 204 | background: var(--backgroundColor); 205 | border: 1px solid var(--grey-200); 206 | } 207 | 208 | .form-row { 209 | margin-bottom: 1rem; 210 | } 211 | 212 | .form-textarea { 213 | height: 7rem; 214 | } 215 | ::placeholder { 216 | font-family: inherit; 217 | color: var(--grey-400); 218 | } 219 | .form-alert { 220 | color: var(--red-dark); 221 | letter-spacing: var(--letterSpacing); 222 | text-transform: capitalize; 223 | } 224 | /* alert */ 225 | 226 | @keyframes spinner { 227 | to { 228 | transform: rotate(360deg); 229 | } 230 | } 231 | 232 | .loading { 233 | width: 6rem; 234 | height: 6rem; 235 | border: 5px solid var(--grey-400); 236 | border-radius: 50%; 237 | border-top-color: var(--primary-500); 238 | animation: spinner 0.6s linear infinite; 239 | } 240 | .loading { 241 | margin: 0 auto; 242 | } 243 | /* title */ 244 | 245 | .title { 246 | text-align: center; 247 | } 248 | 249 | .title-underline { 250 | background: var(--primary-500); 251 | width: 7rem; 252 | height: 0.25rem; 253 | margin: 0 auto; 254 | margin-top: -1rem; 255 | } 256 | 257 | /* 258 | =============== 259 | Navbar 260 | =============== 261 | */ 262 | 263 | -------------------------------------------------------------------------------- /starter/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { 178 | /* 1 */ 179 | overflow: visible; 180 | } 181 | 182 | /** 183 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 184 | * 1. Remove the inheritance of text transform in Firefox. 185 | */ 186 | 187 | button, 188 | select { 189 | /* 1 */ 190 | text-transform: none; 191 | } 192 | 193 | /** 194 | * Correct the inability to style clickable types in iOS and Safari. 195 | */ 196 | 197 | button, 198 | [type='button'], 199 | [type='reset'], 200 | [type='submit'] { 201 | -webkit-appearance: button; 202 | } 203 | 204 | /** 205 | * Remove the inner border and padding in Firefox. 206 | */ 207 | 208 | button::-moz-focus-inner, 209 | [type='button']::-moz-focus-inner, 210 | [type='reset']::-moz-focus-inner, 211 | [type='submit']::-moz-focus-inner { 212 | border-style: none; 213 | padding: 0; 214 | } 215 | 216 | /** 217 | * Restore the focus styles unset by the previous rule. 218 | */ 219 | 220 | button:-moz-focusring, 221 | [type='button']:-moz-focusring, 222 | [type='reset']:-moz-focusring, 223 | [type='submit']:-moz-focusring { 224 | outline: 1px dotted ButtonText; 225 | } 226 | 227 | /** 228 | * Correct the padding in Firefox. 229 | */ 230 | 231 | fieldset { 232 | padding: 0.35em 0.75em 0.625em; 233 | } 234 | 235 | /** 236 | * 1. Correct the text wrapping in Edge and IE. 237 | * 2. Correct the color inheritance from `fieldset` elements in IE. 238 | * 3. Remove the padding so developers are not caught out when they zero out 239 | * `fieldset` elements in all browsers. 240 | */ 241 | 242 | legend { 243 | box-sizing: border-box; /* 1 */ 244 | color: inherit; /* 2 */ 245 | display: table; /* 1 */ 246 | max-width: 100%; /* 1 */ 247 | padding: 0; /* 3 */ 248 | white-space: normal; /* 1 */ 249 | } 250 | 251 | /** 252 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 253 | */ 254 | 255 | progress { 256 | vertical-align: baseline; 257 | } 258 | 259 | /** 260 | * Remove the default vertical scrollbar in IE 10+. 261 | */ 262 | 263 | textarea { 264 | overflow: auto; 265 | } 266 | 267 | /** 268 | * 1. Add the correct box sizing in IE 10. 269 | * 2. Remove the padding in IE 10. 270 | */ 271 | 272 | [type='checkbox'], 273 | [type='radio'] { 274 | box-sizing: border-box; /* 1 */ 275 | padding: 0; /* 2 */ 276 | } 277 | 278 | /** 279 | * Correct the cursor style of increment and decrement buttons in Chrome. 280 | */ 281 | 282 | [type='number']::-webkit-inner-spin-button, 283 | [type='number']::-webkit-outer-spin-button { 284 | height: auto; 285 | } 286 | 287 | /** 288 | * 1. Correct the odd appearance in Chrome and Safari. 289 | * 2. Correct the outline style in Safari. 290 | */ 291 | 292 | [type='search'] { 293 | -webkit-appearance: textfield; /* 1 */ 294 | outline-offset: -2px; /* 2 */ 295 | } 296 | 297 | /** 298 | * Remove the inner padding in Chrome and Safari on macOS. 299 | */ 300 | 301 | [type='search']::-webkit-search-decoration { 302 | -webkit-appearance: none; 303 | } 304 | 305 | /** 306 | * 1. Correct the inability to style clickable types in iOS and Safari. 307 | * 2. Change font properties to `inherit` in Safari. 308 | */ 309 | 310 | ::-webkit-file-upload-button { 311 | -webkit-appearance: button; /* 1 */ 312 | font: inherit; /* 2 */ 313 | } 314 | 315 | /* Interactive 316 | ========================================================================== */ 317 | 318 | /* 319 | * Add the correct display in Edge, IE 10+, and Firefox. 320 | */ 321 | 322 | details { 323 | display: block; 324 | } 325 | 326 | /* 327 | * Add the correct display in all browsers. 328 | */ 329 | 330 | summary { 331 | display: list-item; 332 | } 333 | 334 | /* Misc 335 | ========================================================================== */ 336 | 337 | /** 338 | * Add the correct display in IE 10+. 339 | */ 340 | 341 | template { 342 | display: none; 343 | } 344 | 345 | /** 346 | * Add the correct display in IE 10. 347 | */ 348 | 349 | [hidden] { 350 | display: none; 351 | } 352 | -------------------------------------------------------------------------------- /starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simply Recipes || Starter 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 |

Home Page

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /starter/js/app.js: -------------------------------------------------------------------------------- 1 | const getElement = (selector) => { 2 | const element = document.querySelector(selector) 3 | 4 | if (element) return element 5 | throw Error( 6 | `Please double check your class names, there is no ${selector} class` 7 | ) 8 | } 9 | 10 | const links = getElement('.nav-links') 11 | const navBtnDOM = getElement('.nav-btn') 12 | 13 | navBtnDOM.addEventListener('click', () => { 14 | links.classList.toggle('show-links') 15 | }) 16 | 17 | const date = getElement('#date') 18 | const currentYear = new Date().getFullYear() 19 | date.textContent = currentYear 20 | -------------------------------------------------------------------------------- /starter/recipes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Recipes || Starter 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 |

Recipes Page

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /starter/single-recipe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Single Recipe || Starter 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 |

Single Recipe Page

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /starter/tag-template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Beef|| Starter 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 |

Tag Template Page

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /starter/tags.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tags || Starter 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 |

Tags Page

22 | 23 | 24 | 25 | --------------------------------------------------------------------------------