recipe-book/index.html at main · html-mastery/recipe-book · 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
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recipe Book</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            /* margin: 20px; */
        }

        header {
            text-align: center;
            padding: 20px;
            background-color: #f2f2f2;
        }

        h1 {
            color: #333;
        }

        section {
            margin-top: 20px;
        }

        .recipe {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 20px;
            background-color: #fff;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        .image {
            width: 280px;
            height: auto;
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }

        .contents {
            max-width: 600px;
        }

        h2 {
            color: #555;
        }

        p {
            color: #777;
        }
        footer {
            text-align: center;
            padding: 20px;
            background-color: #1f1d1d;
        }
    </style>
</head>

<body>

    <header>
        <h1>Recipe Book</h1>
    </header>

    <section>
        <div class="recipe">
            <div class="image">
                <img src="https://source.unsplash.com/1600x900/?food=caesar salad" alt="Caesar Salad" />
            </div>
            <div class="contents">
                <h2>Caesar Salad</h2>
                <p><strong>Ingredients:</strong> Romaine lettuce, Croutons, Parmesan cheese, Caesar dressing.</p>
                <p><strong>Instructions:</strong> Toss romaine lettuce, croutons, and parmesan cheese in caesar
                    dressing. Serve
                    cold.</p>
            </div>
        </div>

        <div class="recipe">

            <div class="contents">
                <h2>Spaghetti Bolognese</h2>
                <p><strong>Ingredients:</strong> Pasta, Ground beef, Tomato sauce, Onion, Garlic, Olive oil, Salt,
                    Pepper.
                </p>
                <p><strong>Instructions:</strong> Boil the pasta. In a pan, cook ground beef, onion, and garlic. Add
                    tomato
                    sauce,
                    olive oil, salt, and pepper. Mix with cooked pasta. Serve hot.</p>
            </div>
            <div class="image">
                <img src="https://source.unsplash.com/1600x900/?food=spaghetti bolognese" alt="Spaghetti Bolognese" />
            </div>
        </div>

        <div class="recipe">
            <div class="image">
                <img src="https://source.unsplash.com/1600x900/?food=chocolate chip cookies" alt="Chocolate Chip Cookies" />
            </div>
            <div class="contents">
                <h2>Chocolate Chip Cookies</h2>
            <p><strong>Ingredients:</strong> Flour, Butter, Sugar, Eggs, Vanilla extract, Baking soda, Salt, Chocolate
                chips.</p>
            <p><strong>Instructions:</strong> Cream together butter and sugar. Add eggs and vanilla extract. In a
                separate
                bowl, mix flour, baking soda, and salt. Combine wet and dry ingredients. Add chocolate chips. Bake at
                350°F
                for 10-12 minutes.</p>
            </div>
        </div>

        <div class="recipe">
            <div class="contents">
                <h2>Chicken Noodle Soup</h2>
            <p><strong>Ingredients:</strong> Chicken, Carrots, Celery, Onion, Garlic, Chicken broth, Egg noodles, Salt,
                Pepper.</p>
            <p><strong>Instructions:</strong> Boil chicken, carrots, celery, onion, and garlic in chicken broth. Remove
                chicken and shred. Add egg noodles. Season with salt and pepper. Serve hot.</p>
            </div>
            <div class="image">
                <img src="https://source.unsplash.com/1600x900/?food=chicken noodle soup" alt="Chicken Noodle Soup" />
            </div>
        </div>

        <div class="recipe">
            <div class="image">
                <img src="https://source.unsplash.com/1600x900/?food=chapati" alt="Chapati" />
            </div>
            <div class="contents">
                <h2>Chapati</h2>
            <p><strong>Ingredients:</strong> Flour, Water, Salt, Oil.</p>
            <p><strong>Instructions:</strong> Mix flour, water, and salt. Knead dough. Roll out dough. Cook in a pan
                with
                oil. Serve hot.</p>
            </div>
        </div>
    </section>

    <footer>
        <p>Recipe Book &copy; 2023</p>
    </footer>

</body>

</html>