codeup-web-exercises/box-model-practice.html at main · robles-jonathan/codeup-web-exercises · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Box Model Practice</title>
    <link rel="stylesheet" href="css/box-model-practice.css">
</head>
<body>
<main>
    <!--
        MINI EXERCISE: Make a PB&J Recipe.
        >>> Don't worry with the ingredient list just yet
        >>> Place each recipe instruction inside a respective element (perhaps use <p> for each)
        >>> Create a CSS class (here and in box-model: try not to inline your CSS props if not necessary) and give it a background color
        >>> Use height/width defined in the above CSS class in order to format those elements
        >>> CONSIDER: In what ways can you use height/width to ensure your content is all visible?
        -->
    <article class="container">
        <section>
            <h1 class="ingredients title">Ingredients</h1>
            <p class="ingredients">
                Peanut Butter
            </p>
            <p class="ingredients">
                Jelly
            </p>
            <p class="ingredients">
                Bread
            </p>
        </section>
        <section>
            <h1 class="steps title">Instructions</h1>
            <p class="steps">
                Gather your ingredients.
            </p>
            <p class="steps">
                Set two slices of bread on a plate.
            </p>
            <p class="steps">
                Open peanut butter jar.
            </p>
            <p class="steps">
                Scoop out peanut butter from the jar with a butter knife.
            </p>
            <p class="steps">
                Spread the peanut butter onto one side of one of the slices of bread.
            </p>
            <p class="steps">
                Open jelly jar.
            </p>
            <p class="steps">
                Scoop out jelly from the jar with a clean butter knife.
            </p>
            <p class="steps">
                Spread the jelly onto one side of the other slice of bread.
            </p>
            <p class="steps">
                Place the slice of bread with the jelly onto the slice of bread with peanut butter with the jelly side
                facing the peanut butter side.
            </p>
            <p class="steps">
                Now enjoy your peanut butter and jelly sandwich!!
            </p>
        </section>
    </article>

    <p id="content-area-1">
    </p>
    <p id="content-area-2">
    </p>
</main>
</body>
</html>