Technigo · hgaeh · Sep 24, 2023 · Oct 9, 2023 · Oct 24, 2023
diff --git a/code/details.html b/code/details.html
@@ -0,0 +1,90 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Details</title>
+    <link rel="stylesheet" media="screen" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <div class="header">
+      <h1 class="top-header">Rice Noodle Soup</h1>
+    </div>
+    <div class="description" style="width: 100%">
+      <p>
+        One of our favourite dishes is noodle soup. All you need is a few simple
+        ingredients and a little bit of time. Depending on what you have at
+        home, you can customize the soup with vegatable, poached egg, meat or
+        fish balls
+      </p>
+    </div>
+    <div class="pictures">
+      <img src="./images/ricenoodle.jpg" />
+    </div>
+    <div class="recipeview">
+      <div class="splitview-inner">
+        <div class="splitview-first">
+          <h2 class="detail-header">Ingredients</h2>
+          <table aria-label="Zutaten" class="ingredientTitle">
+            <tr itemprop="recipeIngredient" class="ingredientsList">
+              <td class="ingredientAmount">1</td>
+              <th id="row" class="ingredientText">garlic</th>
+            </tr>
+            <tr itemprop="recipeIngredient" class="ingredientsList">
+              <td class="ingredientAmount">1</td>
+              <th scope="row" class="ingredientText">onion</th>
+            </tr>
+            <tr itemprop="recipeIngredient" class="ingredientsList">
+              <td class="ingredientAmount">1</td>
+              <th scope="row" class="ingredientText">carrot</th>
+            </tr>
+            <tr itemprop="recipeIngredient" class="ingredientsList">
+              <td class="ingredientAmount">1</td>
+              <th scope="row" class="ingredientText">vegetable stock</th>
+            </tr>
+            <tr itemprop="recipeIngredient" class="ingredientsList">
+              <td class="ingredientAmount">1 pack</td>
+              <th scope="row" class="ingredientText">rice noodles</th>
+            </tr>
+            <tr itemprop="recipeIngredient" class="ingredientsList">
+              <td class="ingredientAmount">1 spoon</td>
+              <th scope="row" class="ingredientText">fish or soya sauce</th>
+            </tr>
+          </table>
+        </div>
+        <div class="splitview-second">
+          <h2 class="detail-header">Preparation</h2>
+          <ol class="preparationList">
+            <li itemprop="recipeIntructions" class="preparationStep">
+              <span
+                >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+                diam nonumy eirmod tempor invidunt ut labore et dolore magna
+                aliquyam erat, sed diam voluptua. At vero eos et accusam et
+                justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+                takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
+                dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+                eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+                sed diam voluptua. At vero eos et accusam et justo duo dolores
+                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
+                est Lorem ipsum dolor sit amet.</span
+              >
+            </li>
+            <li itemprop="recipeIntructions" class="preparationStep">
+              <span
+                >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+                diam nonumy eirmod tempor invidunt ut labore et dolore magna
+                aliquyam erat, sed diam voluptua. At vero eos et accusam et
+                justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+                takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
+                dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+                eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+                sed diam voluptua. At vero eos et accusam et justo duo dolores
+                et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
+                est Lorem ipsum dolor sit amet.</span
+              >
+            </li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/code/images/aboutme.jpeg b/code/images/aboutme.jpeg
diff --git a/code/images/banhmi.jpg b/code/images/banhmi.jpg
diff --git a/code/images/dumpling.jpg b/code/images/dumpling.jpg
diff --git a/code/images/eggnoodle.jpg b/code/images/eggnoodle.jpg
diff --git a/code/images/food.jpeg b/code/images/food.jpeg
diff --git a/code/images/friedrice.jpg b/code/images/friedrice.jpg
diff --git a/code/images/me.jpg b/code/images/me.jpg
diff --git a/code/images/reisfeld.jpeg b/code/images/reisfeld.jpeg
diff --git a/code/images/reisfeldnah.jpeg b/code/images/reisfeldnah.jpeg
diff --git a/code/images/ricenoodle.jpg b/code/images/ricenoodle.jpg
diff --git a/code/images/vegi.jpg b/code/images/vegi.jpg
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,43 @@
 <!DOCTYPE html>
 <html>
-
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Project Name</title>
-    <!-- dont forget to add a css file and link it here! -->
-    <!-- If you're using google fonts, that should be added here -->
+    <title>FoodBlog</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
-    <!-- 
-      Write your code here inside the body to make it appear in the browser. 
-      Below is an example on how to use an image tag. Copy it and add it in the body, but outside the comment tag if you want to see how it looks like on the website. Then you can change the size and other styling for it in the css file.
-
-      <img src="example-recipe-background.png" alt="Banana Bread">
-
-    -->
-    <h1>Hello there! 👋🏼</h1>
+    <div class="header">
+      <h1 class="top-header">Food Blog</h1>
+    </div>
+    <div class="menu">
+      <a href="overview.html">Noodles</a>
+      <a href="overview.html">Rice</a>
+      <a href="overview.html">Meat</a>
+      <a href="overview.html">Vegi</a>
+    </div>
+    <div class="welcome">
+      <img src="./images/reisfeld.jpeg" alt="reisfeld" style="width: 100%" />
+      <div class="welcome-title">
+        <a href="overview.html">Welcome</a>
+      </div>
+    </div>
+    <div class="footer">
+      <a href="#aboutme">About Me</a>
+      <a href="#contact">Contact</a>
+    </div>
+    <h2 class="aboutme" id="aboutme">
+      <img src="./images/me.jpg" alt="me" style="width: 100%" />
+      <p>
+        I am from vietnam and a food lover. In our cuture, we love to have meal
+        with family and share all what we have on the table. I always looking
+        for good recipes to suprise my family. During my trip in 2016, I could
+        have a look in other kitchen around the world and could take a lot of
+        inspriration with me.
+      </p>
+    </div>
+    <div class="contact" id="contact">
+      <p>HGAET, Flowerstreet 10, 9999 Churchmountain</p>
+    </div>
   </body>
-</html>
+</html>
diff --git a/code/overview.html b/code/overview.html
@@ -0,0 +1,90 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Recipes</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <div class="header">
+      <h1 class="top-header">Recipes</h1>
+    </div>
+    <div class="category">
+      <div class="category-row">
+        <div class="recipe">
+          <a href="details.html">
+            <img
+              src="./images/ricenoodle.jpg"
+              width="350"
+              height="500"
+              alt="fried rice"
+            />
+            <h2 class="recipes-title">
+              <span class="link">RICE NOODLE SOUP</span>
+            </h2></a
+          >
+        </div>
+        <div class="recipe">
+          <a href="details.html">
+            <img
+              src="./images/friedrice.jpg"
+              width="350"
+              height="500"
+              alt="fried rice"
+            />
+            <h2 class="recipes-title">
+              <span class="link">FRIED RICE</span>
+            </h2></a
+          >
+        </div>
+        <div class="recipe">
+          <a href="details.html">
+            <img src="./images/vegi.jpg" width="350" height="500" alt="vegi" />
+            <h2 class="recipes-title">
+              <span class="link">VEGETABLES</span>
+            </h2></a
+          >
+        </div>
+        <div class="recipe">
+          <a href="details.html">
+            <img
+              src="./images/dumpling.jpg"
+              width="350"
+              height="500"
+              alt="dumpling"
+            />
+            <h2 class="recipes-title">
+              <span class="link">DUMPLING</span>
+            </h2></a
+          >
+        </div>
+        <div class="recipe">
+          <a href="details.html">
+            <img
+              src="./images/banhmi.jpg"
+              width="350"
+              height="500"
+              alt="banhmi"
+            />
+            <h2 class="recipes-title">
+              <span class="link">BANH MI</span>
+            </h2></a
+          >
+        </div>
+        <div class="recipe">
+          <a href="details.html">
+            <img
+              src="./images/eggnoodle.jpg"
+              width="350"
+              height="500"
+              alt="eggnoodle"
+            />
+            <h2 class="recipes-title">
+              <span class="link">EGG NOODLE</span>
+            </h2></a
+          >
+        </div>
+      </div>
+    </div>
+  </body>
+</html>