No.0: add project recipes

avanich28 · Feb 24, 2023 · 49f400a · 49f400a
1 parent 1dc2e72
commit 49f400a
Show file tree

Hide file tree

Showing 11 changed files with 445 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,39 @@
 # odin-recipes
 HTML project
+HTML Learning Topic
+1. Elements and Tags <p> "content" </p> --> element
+2. HTML Boilerplate 
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>My webpage</title>
+    </head>
+    <body>
+        <h1>Hello!<h1>
+    </body>
+</html> 
+3. Working with text
+<body></body>
+<p></p> --> separate as paragraph
+<h1></h1> --> <h6></h6>
+<strong></strong> or <b></b> --> Bold text
+<em></em> or <i></i> --> Italic text
+Nesting and Indentation
+<!--HTML comment -->
+Lorem
+4. Links (unordered list ex. dot and order list ex. 1,A,I)
+<ul>
+    <li>1</li>
+</ul>
+<ol>
+    <li>1</li>
+</ol>
+5. Links and Images
+    - Relative Link - Link from website which contains the protocol and domain. 
+    - Absolute Link - Link to other web page ex. about.html
+<a href="http link, html link, #link, images link" alt="link">Link</a>
+<img src="#">
+ex. src="../images/dog.jpg" href="./pages/about.html"
+./ --> same file (odin-links-and-images) vs ../ --> go out from (pages) file
+Having 4 mains type of image (.jpg, .png, .gif, .svg)
diff --git a/...reamy-Bay-Scallop-Spaghetti-ddmfs-3X4-5110-4d53f3cb66424bcba3e68ac09b4c7d1f.jpg b/...reamy-Bay-Scallop-Spaghetti-ddmfs-3X4-5110-4d53f3cb66424bcba3e68ac09b4c7d1f.jpg
diff --git a/images/9078144_noodle_food_eat_meal_dinner_icon.png b/images/9078144_noodle_food_eat_meal_dinner_icon.png
diff --git a/images/9922306_thanksgiving_turkey_chicken_food_icon.png b/images/9922306_thanksgiving_turkey_chicken_food_icon.png
diff --git a/images/RFO-1400x919-Turkey-23c727e2-8533-44fa-9084-34e4b4038cdd-0-1400x919.jpeg b/images/RFO-1400x919-Turkey-23c727e2-8533-44fa-9084-34e4b4038cdd-0-1400x919.jpeg
diff --git a/images/Som_tam_thai.jpeg b/images/Som_tam_thai.jpeg
diff --git a/images/salad.png b/images/salad.png
diff --git a/index.html b/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="en">
+        <title>Odin recipes</title>
+        <link href="https://fonts.googleapis.com/css2?family=Delius+Unicase&family=Mynerve&family=Paytone+One&family=Roboto&display=swap" rel="stylesheet">
+    <style>
+
+        body {
+            background-color: whitesmoke;
+
+        }
+
+        h1 {
+            font-family:'Delius Unicase', cursive;
+            font-size: 50px;
+            text-align: center;
+            color: rgb(39, 39, 39)
+
+        }
+
+        ul {
+            margin: 0px;
+            text-align: center;
+            padding: 0px;
+        }
+
+        ul li {
+            display: inline-block;
+
+            margin-left: 5px;
+            margin-right:5px;
+        }
+
+        ul li a { 
+            display: inline-block;
+
+            width: 360px;
+            height: 450px;
+            list-style-type: none;
+            text-decoration: none;
+            color:rgb(39, 39, 39);
+            font-family: 'Mynerve', cursive;
+            font-weight: bold; 
+            font-size: 35px;
+            padding-top: 80px;
+            padding-bottom: -60px;
+        }
+
+        li:hover, a:hover {
+            background-color: rgb(240, 195, 73);
+            color:whitesmoke;
+            border-radius: 20%;
+            box-shadow: 3px 3px grey;
+        }
+
+        a:active {
+            color:rgb(244, 117, 142);
+        }
+
+    </style>
+    <body>
+        <h1>Odin Recipes</h1>
+        <ul>
+            <li class="first">
+            <a href="./recipes/spaghetti.html" target="_blank">Creamy Bay Scallop Spaghetti Recipe<br><br>
+            <img src="../odin-recipes/images/9078144_noodle_food_eat_meal_dinner_icon.png" width="250px" height="230px">
+            </a></li>
+
+            <li class="second"><a href="./recipes/somtam.html" target="_blank">Green Papaya Salad Recipe<br><br>
+            <img src="../odin-recipes/images/salad.png" width="250px" height="230px">
+            </a></li>
+
+            <li class="third"><a href="./recipes/roastturkey.html" target="_blank">Christmas Roast Turkey Recipe<br><br>
+            <img src="../odin-recipes/images/9922306_thanksgiving_turkey_chicken_food_icon.png" width="250px" height="230px">
+            </a></li>
+        </ul>      
+    </body>
+</html>
+
+<!-- 'Roboto', sans-serif;-->
+<!--"border: 1px solid;" in blank line for looking the box size.-->
diff --git a/recipes/roastturkey.html b/recipes/roastturkey.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Christmas Roast Turkey Recipe</title>
+        <link href="https://fonts.googleapis.com/css2?family=Delius+Unicase&family=Mynerve&family=Paytone+One&family=Roboto&display=swap" rel="stylesheet">
+    </head>
+    <style>
+        body {
+            background-color: rgb(209, 220, 224);
+        }
+
+        img {
+            border-radius: 3%;
+        }
+
+        h1 a:link {
+            font-family:'Delius Unicase', cursive;
+            font-size: 40px;
+            font-weight: bold;
+            text-decoration: none;
+            color: rgb(5, 64, 107);
+        }
+
+        h1 a:visited {
+            color: rgb(5, 64, 107);
+        }
+
+        h1 a:hover {
+            color: rgb(241, 190, 81);
+        }
+
+        h2 {
+            font-family: 'Delius Unicase', cursive;
+            font-size: 23px;
+            font-weight: bold;
+        }
+
+        h3 {
+            font-family: 'Delius Unicase', cursive;
+            font-size: 18px;
+            font-weight: bold;
+        }
+
+        .main {
+            color:rgb(75, 105, 31);
+        }
+
+        p {
+            font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+            font-size: 16px;
+            line-height: 25px;
+        }
+
+        li {
+            font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+            font-size: 14px;
+            line-height: 20px;
+        }
+    </style>
+    <body>
+        <h1><a href="../index.html">Christmas Roast Turkey XD</a></h1>
+        <img src="../images/RFO-1400x919-Turkey-23c727e2-8533-44fa-9084-34e4b4038cdd-0-1400x919.jpeg" 
+        title="Roast Turkey" width="340" height="220">
+
+        <h2 class="main">Description</h2>
+        <p>
+            This Scallop Spaghetti with a cream sauce by <em>Chef John</em> is easy to cook and prepare.
+            Cooking scallops a bit longer gives the texture more tender and moist.
+            After putting with the sherry sauce the dish is more fragrant and looks delicious. 
+        </p>
+
+        <h2 class="main">Ingredients</h2>
+        <ul>
+            <li>2 tablespoons dried parsley</li>
+            <li>2 tablespoons ground dried rosemary</li>
+            <li>2 tablespoons rubbed dried sage</li>
+            <li>2 tablespoons dried thyme leaves</li>
+            <li>1 tablespoon lemon-pepper seasoning</li>
+            <li>1 tablespoon salt</li>
+            <li>1 (15 pound) whole turkey, neck and giblets removed</li>
+            <li>1 medium orange, cut into 8 wedges</li>
+            <li>1 medium onion, chopped into large pieces</li>
+            <li>1 medium carrot, cut into 1/2-inch slices</li>
+            <li>2 stalks celery, cut into 1/2-inch slices</li>
+            <li>1 (750 milliliter) bottle champagne</li>
+            <li>1 (14.5 ounce) can chicken broth</li>
+        </ul>
+
+        <h2 class="main">Steps</h2>
+        <ol>
+            <li>Preheat the oven to 350 degrees F (175 degrees C). Line a roaster with sheets of aluminum foil long enough to wrap around turkey.</li>
+            <br>
+            <li>Stir together parsley, rosemary, sage, thyme, lemon-pepper seasoning, and salt in a small bowl.</li>
+            <br>
+            <li>Rub herb mixture into the turkey cavity, then stuff with orange wedges, onion, carrot and celery. Tie the legs together with kitchen string, then tuck the wings under the body. Place turkey on the foil in the roasting pan.</li>
+            <br>
+            <li>Pour champagne and chicken broth over turkey, making sure to get some liquid in the cavity. Bring aluminum foil up and over the top of turkey and seal; try to keep the foil from touching the turkey.</li>
+            <br>
+            <li>Roast turkey in the preheated oven until juices run clear, 2 1/2 to 3 hours. Uncover turkey and continue baking until the skin turns golden brown, 30 to 60 more minutes. An instant-read thermometer inserted into the thickest part of thigh, near the bone, should read 180 degrees F (82 degrees C).</li>
+            <br>
+            <li>Remove turkey from the oven, cover with two sheets of aluminum foil, and allow to rest in a warm area before slicing, 10 to 15 minutes.</li>
+        </ol>
+
+        <h3 class="main">Reference</h3>
+        <ul>
+            <li>https://www.allrecipes.com/recipe/166160/juicy-thanksgiving-turkey/</li>
+    </body>
+</html>
diff --git a/recipes/somtam.html b/recipes/somtam.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Green Papaya Salad Recipe(Somtam Thai)</title>
+        <link href="https://fonts.googleapis.com/css2?family=Delius+Unicase&family=Mynerve&family=Paytone+One&family=Roboto&display=swap" rel="stylesheet">
+    </head>
+    <style>
+        body {
+            background-color: rgb(206, 221, 199);
+        }
+
+        img {
+            border-radius: 3%;
+        }
+
+        h1 a:link {
+            font-family:'Delius Unicase', cursive;
+            font-size: 40px;
+            font-weight: bold;
+            text-decoration: none;
+            color: rgb(91, 53, 27);
+        }
+
+        h1 a:visited {
+            color:rgb(91, 53, 27);
+        }
+
+        h1 a:hover {
+            color: rgb(194, 87, 160);
+        }
+
+        h2 {
+            font-family: 'Delius Unicase', cursive;
+            font-size: 23px;
+            font-weight: bold;
+        }
+
+        h3 {
+            font-family: 'Delius Unicase', cursive;
+            font-size: 18px;
+            font-weight: bold;
+        }
+
+        .main {
+            color:rgb(182, 38, 6);
+        }
+
+        p {
+            font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+            font-size: 16px;
+            line-height: 25px;
+        }
+
+        li {
+            font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+            font-size: 14px;
+            line-height: 20px;
+        }
+    </style>
+    <body>
+        <h1><a href="../index.html">Green Papaya Salad (Somtam Thai) : D</a></h1>
+        <img src="../images/Som_tam_thai.jpeg"
+        title="Green Papaya Salad (Somtam Thai)" width="300" height="220">
+
+        <h2 class="main">Description</h2>
+        <p>
+            The taste of papaya salad dish by <em>Ms Tea</em> is sweet and sour at the same time.
+            You cannot stop eating! And as an extra, this salad is also healthy to your body.  
+        </p>
+
+        <h2 class="main">Ingredients</h2>
+        <ul>
+            <li>¼ cup peanuts</li>
+            <li>2 Thai chiles, chopped</li>
+            <li>3 cloves garlic</li>
+            <li>1 tablespoon dried shrimp</li>
+            <li>1 tablespoon white sugar</li>
+            <li>2 medium limes, juiced</li>
+            <li>2 tablespoons fish sauce</li>
+            <li>1 medium papaya - peeled, seeded, and sliced</li>
+            <li>1 cup cherry tomatoes, halved</li>
+            <li>¼ cup fresh green beans, cut into 1-inch pieces</li>
+            <li>½ medium carrot, peeled and shredded</li>
+            <li>salt and ground black pepper to taste</li>
+        </ul>
+
+        <h2 class="main">Steps</h2>
+        <ol>
+            <li>Preheat the oven to 350 degrees F (175 degrees C). Place peanuts on a baking sheet.</li>
+            <br>
+            <li>Toast in the preheated oven until fragrant and browned, 7 to 8 minutes. Let cool for 5 minutes.</li>
+            <br>
+            <li>Grind roasted peanuts, Thai chilies, garlic, dried shrimp, and sugar in a mortar and pestle or food processor. Stir in lime juice and fish sauce to make dressing.</li>
+            <br>
+            <li>Toss papaya, tomatoes, green beans, and carrot with dressing. Season with salt and pepper.</li>
+            <br>
+        </ol>
+
+        <h3 class="main">Reference</h3>
+        <ul>
+            <li>https://www.allrecipes.com/recipe/283411/green-papaya-salad-som-tam-malakor/</li>
+        </ul>
+    </body>
+</html>