RecipeCoursework/index.html at 200850923d2cf16ea36718f7988d581c37e485a8 · CodeYourFuture/RecipeCoursework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>foodie</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#introduction" class="nav-link">Background</a></li>
        <li><a href="#what_is_the_original_recipe" class="nav-link">How it Works</a></li>
      </ul>
    </nav>
  </header>

  <section class="hero">
    <div class="hero-inner">
      <h1>Introducing foodie</h1>
      <h2>Everywhere you go!</h2>
      <img src="https://images.unsplash.com/reserve/EnF7DhHROS8OMEp2pCkx_Dufer%20food%20overhead%20hig%20res.jpg?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1478&q=80" alt="Food Image" class="btn">
      <a href="#" class="btn">Learn More...</a>
    </div>
  </section>
  <br>
  <br>


  <article class="article">
    <section id="introduction">
      <h2>Introduction</h2>
      <p>The Caesar salad is a beloved, quintessential side option. This is probably one of the only salads that could be considered comfort food. What is it about the Caesar salad that makes it so popular? Perhaps it's the crunch of the romaine, or the creaminess of the dressing, the umami kick of Parmesan cheese, or that garlicky tang. Either way, it's one of the most delicious salads in existence, and even if you order it every time you see it on a menu, we bet there's a lot you didn't know about it.</p>
    </section>
  </article>

  <article class="article">
    <section id="who_invented_it">
      <h2>Who Invented It?</h2>
      <p>Many people think the Caesar salad was named after Julius Caesar -- it's not. The Caesar salad was invented by an Italian man named Caesar Cardini. Caesar Cardini was born in 1896. As expected, it's a little difficult tracing someone's life so long ago. However, an advertisement from Cardini's restaurant in 1919 suggests he moved to California in the 1910s.</p>
    </section>
  </article>

        <article class="article" >
            <section id="where_did_the_caesar_salad_originate">
                <h2>Where did the Caesar salad originate? </h2>
                <p>Caesar Cardini, who invented the salad at his Tijuana restaurant  That's right -- the Caesar salad was invented in Mexico. Caesar's Bar and Grill, one fateful evening in 1924.
                    As legend has it, as a July 4 party raged, the kitchen's supplies dwindled, and Cardini improvised the dish based on what he had on hand.
                    It was a success, and the restaurant's well-heeled clientele took their approximation of the recipe back with them to Los Angeles,
                    where the dish slowly caught on in popularity over the next decade. By the 1940s, it had made its way to New York City, and it's been a menu mainstay ever since.
                </p>
            </section>
        </article>
        <article class="article">
    <section id="what_is_the_original_recipe">
      <h2>What Is the Original Recipe?</h2>
      <p>Nowadays, the ingredients of a Caesar salad vary from one place to another. Here we compare the original recipe and the current one.</p>
    </section>
  </article>

  <div class="container">
    <div class="table">
      <div class="table-header">
        <div class="header__item"><a id="name" class="filter__link" href="#">Cardini's recipe</a></div>
        <div class="header__item"><a id="wins" class="filter__link filter__link--number">Caesar salad</a></div>
      </div>
      <div class="table-content">
        <div class="table-row">
          <div class="table-data">Full stalks of lettuce</div>
          <div class="table-data">200 grams of Romaine Lettuce</div>
        </div>
        <div class="table-row">
          <div class="table-data">Raw egg</div>
          <div class="table-data">1 unit of Egg</div>
        </div>
        <div class="table-row">
          <div class="table-data">Olive oil</div>
          <div class="table-data">1 clove garlic</div>
        </div>
        <div class="table-row">
          <div class="table-data">Croutons</div>
          <div class="table-data">120 milliliters of olive oil</div>
        </div>
        <div class="table-row">
          <div class="table-data">Parmesan cheese</div>
          <div class="table-data">30 grams of Anchovy</div>
        </div>
        <div class="table-row">
          <div class="table-data">Worcestershire sauce</div>
          <div class="table-data">30 grams of Parmesan cheese</div>
        </div>
      </div>
    </div>
  </div>

  <footer>@CYF London</footer>

</body>

</html>