Add files via upload

gauravgorane · Mar 15, 2024 · 7b28544 · 7b28544
1 parent 1ca88fe
commit 7b28544
Show file tree

Hide file tree

Showing 4 changed files with 296 additions and 0 deletions.
diff --git a/Recipe_page/assets/images/favicon-32x32.png b/Recipe_page/assets/images/favicon-32x32.png
diff --git a/Recipe_page/assets/images/image-omelette.jpeg b/Recipe_page/assets/images/image-omelette.jpeg
diff --git a/Recipe_page/index.html b/Recipe_page/index.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
+
+  <title>Frontend Mentor | Recipe page</title>
+
+</head>
+
+<body>
+
+  <main>
+    <div class="container">
+
+      <div class="wrapper">
+        <img src="./assets/images/image-omelette.jpeg" alt="A Simple Omelette">
+      </div>
+
+      <div class="content">
+
+        <h1 class="heading">Simple Omelette Recipe</h1>
+
+        <p class="para">An easy and quick dish, perfect for any meal. This classic omelette combines beaten eggs cooked
+          to perfection, optionally filled with your choice of cheese, vegetables, or meats.</p>
+
+        <div class="time">
+          <h3 class="time_title">Preparation time</h3>
+          <ul>
+            <li><span>Total</span>: Approximately 10 minutes</li>
+            <li><span>Preparation</span>: 5 minutes</li>
+            <li><span>Cooking</span>: 5 minutes</li>
+          </ul>
+        </div>
+
+        <div class="ingredient">
+          <h2 class="title">Ingredients</h2>
+          <ul>
+            <li>2-3 large eggs</li>
+            <li>Salt, to taste</li>
+            <li>Pepper, to taste</li>
+            <li>1 tablespoon of butter or oil</li>
+            <li>Optional fillings: cheese, diced vegetables, cooked meats, herbs</li>
+          </ul>
+        </div>
+        <hr>
+
+        <div class="instruction ">
+          <h2 class="title">Instructions</h2>
+          <ol>
+            <li><span>Beat the eggs</span>: In a bowl, beat the eggs with a pinch of salt and pepper until they are well
+              mixed. You can add a tablespoon of water or milk for a fluffier texture.</li>
+            <li><span>Heat the pan</span>: Place a non-stick frying pan over medium heat and add butter or oil.</li>
+            <li><span>Cook the omelette</span>: Once the butter is melted and bubbling, pour in the eggs. Tilt the pan
+              to ensure the eggs evenly coat the surface.</li>
+            <li><span>Add fillings (optional)</span>: When the eggs begin to set at the edges but are still slightly
+              runny in the middle, sprinkle your chosen fillings over one half of the omelette.</li>
+            <li><span>Fold and serve</span>: As the omelette continues to cook, carefully lift one edge and fold it over
+              the fillings. Let it cook for another minute, then slide it onto a plate.</li>
+            <li><span>Enjoy</span>: Serve hot, with additional salt and pepper if needed.</li>
+          </ol>
+        </div>
+        <hr>
+
+        <div class="nutrition">
+          <h2 class="title">Nutrition</h2>
+          <p class="para">The table below shows nutritional values per serving without the additional fillings.
+          </p>
+
+          <div class="nutri_data">
+
+            <div class="nutri">
+              <p class="label">Calories</p>
+              <p class="value">277kcal</p>
+            </div>
+            <hr>
+
+            <div class="nutri">
+              <p class="label">Carbs</p>
+              <p class="value">0g</p>
+            </div>
+            <hr>
+
+            <div class="nutri">
+              <p class="label">Protein</p>
+              <p class="value">20g</p>
+            </div>
+            <hr>
+
+            <div class="nutri">
+              <p class="label">Fat</p>
+              <p class="value">22g</p>
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+  </main>
+
+  <!-- <footer>
+    <div class="attribution">
+      <p>
+        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
+        Coded by <a href="https://www.github.com/gauravgorane">Gaurav Gorane</a>.
+      </p>
+    </div>
+  </footer> -->
+
+</body>
+
+</html>
diff --git a/Recipe_page/style.css b/Recipe_page/style.css
@@ -0,0 +1,178 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Young+Serif&display=swap');
+
+:root {
+    --Nutmeg: hsl(14, 45%, 36%);
+    --Dark_Raspberry: hsl(332, 51%, 32%);
+
+    --White: hsl(0, 0%, 100%);
+    --Rose_White: hsl(330, 100%, 98%);
+    --Eggshell: hsl(30, 54%, 90%);
+    --Light_Grey: hsl(30, 18%, 87%);
+    --Wenge_Brown: hsl(30, 10%, 34%);
+    --Dark_Charcoal: hsl(24, 5%, 18%);
+
+    --fw_Young_400: 400;
+
+    --fw_Outfit_400: 400;
+    --fw_Outfit_600: 600;
+    --fw_Outfit_700: 700;
+
+    /* font-family: "Young Serif", serif; */
+    /* font-family: "Outfit", sans-serif; */
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+}
+
+hr{
+    color: var(--Light_Grey);
+}
+
+body {
+    font-size: 16px;
+    font-family: "Outfit", sans-serif;
+    color: var(--Wenge_Brown);
+}
+
+.content{
+    padding: 2.5rem 2rem;
+}
+
+.heading{
+    font-family: "Young Serif", serif;
+    font-size: 2.25rem;
+    line-height: 1;
+    font-weight: var(--fw_Young_400);
+    color: var(--Dark_Charcoal);
+}
+
+.para{
+    margin: 1.5rem 0;
+    line-height: 1.5;
+    color: var(--Wenge_Brown);
+}
+
+/* Common title */
+
+.title{
+    font-family: "Young Serif", serif;
+    font-size: 1.76rem;
+    margin-bottom: 1.3rem;
+    color: var(--Nutmeg);
+    font-weight: var(--fw_Young_400);
+}
+
+/* Common ul li */
+
+ol, ul{
+    margin-left: 1.5rem;
+}
+
+ol li::marker, ul li::marker{
+    color: var(--Nutmeg);
+    font-weight: var(--fw_Outfit_600);
+}
+
+ul li{
+    margin-bottom: 0.6rem;
+    padding-left: 1rem;
+    line-height: 1.4;
+}
+
+ol li span, ul li span{
+    font-weight: var(--fw_Outfit_600);
+    color: var(--Wenge_Brown);
+}
+
+ol li{
+    margin-bottom: 0.8rem;
+    padding-left: 1rem;
+    line-height: 1.42;
+}
+
+/* Time */
+
+.time{
+    background-color: var(--Rose_White);
+    padding: 1.4rem 1.4rem 1rem;
+    margin-top: 2rem;
+    border-radius: 1rem;
+}
+
+.time_title{
+    font-size: 1.23rem;
+    color: var(--Dark_Raspberry);
+    margin-bottom: 1rem;
+}
+
+/* Ingredient */
+
+.ingredient{
+    margin: 1.6rem 0 2rem;
+}
+
+/* Instruction */
+
+.instruction{
+    margin: 1.6rem 0 2rem;
+}
+
+/* Nutrition */
+
+.nutrition{
+    margin: 1.6rem 0 0;
+}
+
+.nutri_data{
+    display: grid;
+}
+
+.nutri{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0.5rem 2rem;
+}
+
+.value{
+    font-weight: var(--fw_Outfit_600);
+    color: var(--Nutmeg);
+}
+
+.attribution {
+    font-size: 11px;
+    text-align: center;
+}
+
+.attribution a {
+    color: hsl(228, 45%, 44%);
+}
+
+@media screen and (min-width: 800px) {
+    body{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--Eggshell);
+    }
+    .container{
+        max-width: 46rem;
+        margin: 7.6rem auto;
+        padding: 2.4rem;
+        background-color: var(--White);
+        border-radius: 1rem;
+    }
+    .content{
+        padding: 2.5rem 0 0;
+    }
+    .wrapper img{
+        border-radius: 1rem;
+    }
+}