diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..fb6f140 --- /dev/null +++ b/index.html @@ -0,0 +1,103 @@ + + + + + + + foodie + + + +
+ +
+ +
+
+

Introducing foodie

+

Everywhere you go!

+ Food Image + Learn More... +
+
+
+
+ + +
+
+

Introduction

+

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.

+
+
+ +
+
+

Who Invented It?

+

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.

+
+
+ +
+
+

Where did the Caesar salad originate?

+

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. +

+
+
+
+
+

What Is the Original Recipe?

+

Nowadays, the ingredients of a Caesar salad vary from one place to another. Here we compare the original recipe and the current one.

+
+
+ +
+
+ +
+
+
Full stalks of lettuce
+
200 grams of Romaine Lettuce
+
+
+
Raw egg
+
1 unit of Egg
+
+
+
Olive oil
+
1 clove garlic
+
+
+
Croutons
+
120 milliliters of olive oil
+
+
+
Parmesan cheese
+
30 grams of Anchovy
+
+
+
Worcestershire sauce
+
30 grams of Parmesan cheese
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..90383fb --- /dev/null +++ b/style.css @@ -0,0 +1,173 @@ +body { + font-family: BlinkMacSystemFont, sans-serif; + font-size: 1.5rem; + line-height: 1; + text-align: left; + background-color: white; + margin: 15px; + text-align: justify; +} + +header { + background-color: white; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 60px; + display: flex; + align-items: center; + box-shadow: 0 0 25px 0 black; +} +header * { + display: inline; +} +header ul { + margin: 20px; + right: 0; +} +header li { + margin: 20px; + right: 0; +} + +header li a { + color: black; + text-decoration: none; + right: 0; +} +.hero { + /* Sizing */ + width: 100vw; + height: 90vh; + + /* Flexbox stuff */ + display: flex; + justify-content: center; + align-items: center; + + /* Text styles */ + text-align: center; + color: white; + /* ADD THIS LINE */ +} +.hero-inner img { + width: 100%; + max-width: 500px; + height: 90%; + display: block; + margin: 0 auto; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); +} + +.hero h1 { + /* Text styles */ + font-size: 4em; + color: darkred; + /* Margins */ + margin-top: 0; + margin-bottom: 0.5em; +} + +.hero .btn { + /* Positioning and sizing */ + display: block; + width: 150px; + + /* Padding and margins */ + padding: 1em; + margin-top: 50px; + margin-left: auto; + margin-right: auto; + + /* Text styles */ + color: white; + /* CHANGE THIS LINE */ + text-decoration: none; + font-size: 1.5em; + + /* Border styles */ + border: 2px solid white; + /* CHANGE THIS LINE */ + border-radius: 20px; +} +.container { + max-width: 1000px; + margin-right: auto; + margin-left: auto; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} +.table { + width: 100%; + border: 1px solid color-form-highlight; +} + +.table-header { + display: flex; + width: 100%; + background: #000; + padding: (half-spacing-unit * 1.5) 0; +} + +.table-row { + display: flex; + width: 100%; + padding: (half-spacing-unit * 1.5) 0; + + &:nth-of-type(odd) { + background: color-form-highlight; + } +} + +.table-data, +.header__item { + flex: 1 1 20%; + text-align: center; + text-align: justify; +} + +.header__item { + text-transform: uppercase; + text-align: justify; +} + +.filter__link { + color: white; + text-decoration: none; + position: relative; + display: inline-block; + padding-left: base-spacing-unit; + padding-right: base-spacing-unit; + + &::after { + content: ""; + position: absolute; + right: -(half-spacing-unit * 1.5); + color: white; + font-size: half-spacing-unit; + top: 50%; + transform: translateY(-50%); + } + + &.desc::after { + content: "(desc)"; + } + + &.asc::after { + content: "(asc)"; + } +} + +footer { + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background-color: rgba(31, 25, 25, 0.158); + color: black; + text-align: center; +}