HTML_Lab_Two/index.html at main · modulo-kaley/HTML_Lab_Two · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gluten Free Bars</title>
</head>
<!--Website Reference: https://www.allrecipes.com/recipe/11570/amazing-gluten-free-layer-bars/-->
<body>
<main>
    <header>
        <h1>Amazing Gluten-Free Layer Bars</h1>
        </header>

    <nav id="Top">
        <h2 hidden>Navigation</h2>
        <a href="#ing">Ingredients</a> |
        <a href="#dir">Directions</a>|
        <a href="#nur">Nutriton Facts</a>
    </nav>
    <section>
        <h2>Description</h2>
    <p>A gluten-free adaptation of the traditional Seven Layer Bar recipe.<br>All ingredients are available in ordinary
    supermarkets.<br>Be sure to check the packaging on your ingredients to make sure they are indeed gluten-free.</p>
     <table cellpadding="2" cellspacing="2">
        <tr>
                <th>Prep Time:</th>
                <th>Cook Time:</th>
                <th>Additional Time:</th>
            </tr>
            <tr>
                <td>10 mins</td>
                <td>20 mins</td>
                <td>30 mins</td>
            </tr>
            <tr>
                <th>Yield:</th>
                <th>Servings:</th>
                <th>Total Time:</th>
            </tr>
            <tr>
                <td>30 bars</td>
                <td>30</td>
                <td>1 hr</td>
            </tr>
     </table>
     <figure>
        <!-- Image 1 Reference: https://www.allrecipes.com/thmb/cFYJcTf-llhW1lPyjSn66cXtQR0=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/275654-amazing-gluten-free-layer-bars-MomTo6-4x3-1-450e975d525641ac82f486a8484d3a13.jpg-->
        <img src="./IMGS/Img1.webp" alt="A few of the scrumptious Gluten-Free Layered Bars" height="300" width="300">
        <figcaption>Scrumptious!</figcaption>
     </figure>
    </section>
    <section id="ing">
        <h2>Ingredients</h2>
        <ul type="circle">
            <li>7 ounces sweetened flaked coconut, divided</li>
            <li>1 cup butterscotch chips</li>
            <li>6 ounces semisweet chocolate chips</li>
            <li>8 ounces unsalted peanuts</li>
            <li>½ cup sliced almonds</li>
            <li>1 (14 ounce) can sweetened condensed milk</li>
        </ul>
    </section>
    <section  id="dir">
        <h2>Directions</h2>

            <section>
            <h4>Step 1</h4>
                <p>Preheat oven to 350 degrees F ( 175 degrees C ).<br>Generously grease one 13x9-inch baking pan.</p>
            <h4>Step 2</h4>
                <p>Spread 2/3 of the flaked coconut evenly on the bottom of the baking pan. Sprinkle the butterscotch morsels, chocolate
                chips, and peanuts evenly over the coconut layer.<br> Pour condensed milk evenly over the whole pan. Top with sliced almonds
                and remaining coconut.</p>
            <h4>Step 3</h4>
                <p>Bake in preheated oven for 20 minutes.
                    Cool completely before cutting into squares.</p>
                 <figure>
                    <!--Image 2 Reference:https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fimages.media-allrecipes.com%2Fuserphotos%2F7684639.jpg&q=60&c=sc&poi=auto&orient=true&h=512-->
                    <img src="./IMGS/Img2.webp" alt="A plate full of delcious Gluten Free Layered Bars" height="300" width="300">
                    <figcaption>Delicious!</figcaption>
                 </figure>
        </section>
    </section>
    <section id="nur">
        <h3>Nutrition Facts</h3>
        <table cellpadding="3" cellspacing="3">
        <tr>
            <th>185</th>
            <th>11g</th>
            <th>20g</th>
            <th>4g</th>
        </tr>
        <tr>
            <td>Calories</td>
            <td>Fat</td>
            <td>Carbs</td>
            <td>Protein</td>
        </tr>
        </table>
    </section>
    <a href="#Top">Jump to Top</a>
</main>
</body>
</html>