ccp_desktop_w24/recipes.html at main · isabelladesi/ccp_desktop_w24 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!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="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Recipes</title>
</head>
<body class="recipes-body">
    <header>
        <a href = "#main" class="skip-this">Skip to Main Content</a>
        <nav>
            <ul>
                <li><a href = "index.html">Home</a></li>
                <li><a href = "pets.html">Pets</a></li>
                <li><a href = "recipes.html" class="current-page">Recipes</a></li>
                <li><a href = "travel.html">Travel</a></li>
            </ul>
        </nav>
        <!-- <h1>PawsPlatesAndPaths</h1> -->

    </header>
    <main id="main">
        <h1>Recipes</h1>
        <div>

            <h2>Double Chocolate Chip Cookies</h2>
            <div class="pet-container">
            <img src="images/double_chocolate_cookies.png" width = "400" alt="Double chocolate chip cookies" class="interactive-image main-image">

            <div class="pet-likes">
            <h3>The 3 Key Ingredients</h3>
            <ul>
                <li>Chocolate chips</li>
                <li>Unsalted Butter</li>
                <li>Cocoa Powder</li>
            </ul>
            </div>
        </div>

            <p>Indulge your sweet cravings with these delectable Double Chocolate Chip Cookies. A heavenly fusion of rich cocoa and velvety chocolate chips, these cookies are a true delight for chocolate lovers.</p>
            <P>The recipe combines the perfect balance of buttery softness and crisp edges, creating a mouthwatering texture that complements the intense chocolate flavor. Whether you're a seasoned baker or a novice in the kitchen, these cookies are a simple and irresistible treat to satisfy your sweet tooth.</P>
            <h3>Ingredients</h3>
            <div class="bacon-photos">
            <img src="images/double_chocolate_chips.png" width ="200" alt = "Chocolate Chips" class="image-fit">
            <img src="images/doublecc_butter.jpg"  width ="200" alt="Unsalted Butter" class="image-fit">
            <img src="images/doublecc_cocopowder.jpg"  width ="200" alt="Cocoa powder" class="image-fit">
            </div>


            <h3> The Recipe:</h3>

            <ol>
                <li>In a large bowl, cream together butter and sugar.</li>
                <li>Add cocoa powder, flour, and chocolate chips. Mix until combined.</li>
                <li>Scoop tablespoon-sized portions of dough, roll into balls, and place on baking sheets.</li>
                <li>Bake for 10-12 minutes until edges are set but centers are soft.</li>
            </ol>


        </div>
        <div>
            <h2>Avacado Toast</h2>
            <div class="pet-container">
            <img src="images/avacadotoast_main.jpg" width = "400" alt="Avacado Toast" class="interactive-image main-image">
            <div class="pet-likes">
            <h3>The 3 Key Ingredients</h3>
            <ul>
                <li>Avacado</li>
                <li>Bread</li>
                <li>Salt and Pepper</li>
            </ul>
        </div>
        </div>

            <p>Elevate your breakfast or snack time with this quick and nutritious Avocado Toast recipe. Creamy mashed avocado meets perfectly toasted bread in a harmonious blend of flavors and textures.</p>
            <P>Get ready to savor the rich, buttery goodness of avocado paired with your favorite toppings, creating a versatile and customizable treat that can be enjoyed any time of day.</P>
            <h3>Ingredients</h3>
            <div class="bacon-photos">
            <img src="images/avacadotoast_av.jpg" width ="200" alt = "Avacados" class="image-fit">
            <img src="images/avacadotoast_toast.jpg"  width ="200" alt="Toast on plate" class="image-fit">
            <img src="images/avacadotoast_saltnpepper.jpg"  width ="200" alt="Salt and Pepper" class="image-fit">
            </div>


            <h3> The Recipe:</h3>
            <ol>
                <li>Cut the ripe avocado in half and remove the pit.</li>
                <li>Use a fork to mash the avocado until it reaches your desired level of smoothness or chunkiness.</li>
                <li>Toast the slices of bread to your liking.</li>
                <li>Smear the mashed avacado onto the toast.</li>
                <li>Sprinkle salt and pepper to taste over the mashed avocado.</li>
            </ol>
        </div>

        <div>
            <h2>Spaghetti and Meatballs</h2>
            <div class="pet-container">
            <img src="images/spag_main.jpg" width = "400" alt="Spaghetti and meatballs on a plate" class="interactive-image main-image">

            <div class="pet-likes">
            <h3>The 4 Key Ingredients</h3>
            <ul>
                <li>Raw Spaghetti</li>
                <li>Ground Beef</li>
                <li>Marinara Sauce</li>
                <li>Salt and Pepper</li>
            </ul>
        </div>
        </div>

            <p>Savor the simplicity of a homestyle classic with this quick and easy spaghetti and meatballs recipe. Perfect for busy days or when you're craving a comforting meal without the fuss.</p>
            <P>Juicy meatballs mingle with a rich marinara sauce, creating a delightful harmony that blankets a bed of perfectly cooked spaghetti.</P>
            <h3>Ingredients</h3>
            <div class="four-photos">
            <img src="images/spag_spag.jpg" width ="200" alt = "Raw spaghetti" class="image-fit">
            <img src="images/spag_groundbeef.jpg"  width ="200" alt="Ground Beef" class="image-fit">
            <img src="images/spag_marinaraSauce.jpg"  width ="200" alt="Marinara Sauce in a jar" class="image-fit">
            <img src="images/avacadotoast_saltnpepper.jpg"  width ="200" alt="Salt and Pepper" class="image-fit">
            </div>


            <h3> The Recipe:</h3>
            <ol>
                <li>Roll small portions of ground beef into meatballs.</li>
                <li>Brown them in a skillet over medium heat until cooked through.</li>
                <li>Pour the marinara sauce into the skillet with the cooked meatballs. Heat together.</li>
                <li>Meanwhile, cook the spaghetti according to the package instructions. Drain.</li>
                <li>Toss the cooked spaghetti with the meatball and sauce mixture.</li>
                <li>Season with salt and pepper to taste.</li>
            </ol>
        </div>
        <div id="comment-form">
            <h2>Leave a Comment</h2>
            <textarea id="comment-text" placeholder="Write your comment here..." rows="4"></textarea>
            <br>
            <button onclick="addComment()">Post Comment</button>
          </div>

          <h2>Comments:</h2>
          <div id="comments-container"></div>
          <script src="js/script.js"></script>
</main>

</body>
</html>