Adjust Home Page and add file CSS

avanich28 · Feb 28, 2023 · bd16b78 · bd16b78
1 parent 49f400a
commit bd16b78
Show file tree

Hide file tree

Showing 9 changed files with 256 additions and 225 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,9 @@
 # odin-recipes
 HTML project
-HTML Learning Topic
+HTML Learning Topic 
 1. Elements and Tags <p> "content" </p> --> element
 2. HTML Boilerplate 
+``` HTML 
 <!DOCTYPE html>
 <html lang="en">
     <head>
@@ -13,27 +14,57 @@ HTML Learning Topic
         <h1>Hello!<h1>
     </body>
 </html> 
+```
 3. Working with text
+```HTML
 <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
+<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)
+```HTML
 <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
+```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"
+```
+Example: 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)
+Having 4 mains type of image (.jpg, .png, .gif, .svg)
+
+CSS Learning Topic
+1. Add Style to HTML with CSS and CSS basic Syntax
+2. Class vs ID
+3. Add styles to specific elements using the correct selectors
+4. Understand the cascade
+5. Learn how to use Chrome dev Tools
+6. The Box Model 
+    * margin
+    * padding 
+    * borders
+    * box-sizing: border-box
+7. Block and Inline
+    * Block
+    * Inline
+    * Inline-block
+```HTML
+<div>, <h1>, <p> /*is a block-level element as default. */
+<span>, <link> /*is a inline-level element as default. */
+```
+
+
+
diff --git a/index.html b/index.html
@@ -4,75 +4,21 @@
         <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>
+        <link rel="stylesheet" href="style.css">
     <body>
         <h1>Odin Recipes</h1>
         <ul>
-            <li class="first">
+            <li>
             <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">
+            <img src="../odin-recipes/images/9078144_noodle_food_eat_meal_dinner_icon.png" width="240px" height="220px">
             </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">
+            <li><a href="./recipes/somtam.html" target="_blank">Green Papaya Salad Recipe<br><br>
+            <img src="../odin-recipes/images/salad.png" width="240px" height="220px">
             </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">
+            <li><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="240px" height="220px">
             </a></li>
         </ul>      
     </body>

diff --git a/recipes/roastturkey-style.css b/recipes/roastturkey-style.css
@@ -0,0 +1,51 @@
+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;
+}
diff --git a/recipes/roastturkey.html b/recipes/roastturkey.html
@@ -4,60 +4,8 @@
         <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">
+        <link rel="stylesheet" href="roastturkey-style.css">
     </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" 

diff --git a/recipes/somtam-style.css b/recipes/somtam-style.css
@@ -0,0 +1,51 @@
+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;
+}
diff --git a/recipes/somtam.html b/recipes/somtam.html
@@ -4,60 +4,8 @@
         <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">
+        <link rel="stylesheet" href="somtam-style.css">
     </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"