design1 – Recipe with basic css (blog post)

This is the html and css make up of my recipe page below with images of my shades and tints. I couldn’t quite get how to use the coolers website so I used a different site which was more comfortable to me. It gave me a good selection of colors to use for the make up of my page. I used the website in the assignment post to find the different tints for my site. Overall creating it was slightly challenging but fun.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Remake-my-page</title>
    <style type="text/css"></style>
    <link rel="stylesheet" href="recipe.css">
</head>

<body>

    <h1>Chocolate Caramel Oat Bars (Carmelitas)</h1>
    <h2>Serving 4</h2>
    <img src="https://i.ytimg.com/vi/h1uX0xz8n4E/hqdefault.jpg?sqp=-oaymwEjCPYBEIoBSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLB_MFhS81DMaRnYUds3Fp2f6x9vww"
        alt="">
    <h3>
        <p>This is my HTML project rebuilding the recipe Chocolate Caramel Oat Bars. The reciepe video was created by
            Tasty and presented on their <a
                href="https://www.youtube.com/channel/UCJFp8uSYCjXOMnkUyb3CQ3Q/featured">Tasty Youtube page</a></p>

        <hr size="1">
        <h2>Ingredients</h2>
        <ul>
            <li>2 cups Quick Oats</li>
            <li>1 3/4 cups All Purpose Flour</li>
            <li>1 1/2 cups Brown Sugar</li>
            <li>1 tsp Baking Soda</li">
            <li>1/4 tsp Salt</li>
            <li>1 cup Melted Butter</li>
            <li>2 1/2 cups Semi Sweet Chocolate Chips</li>
            <li>50 Soft Caramels, unwrapped</li>
            <li>1/2 cup Heavy Cream</li>
        </ul>
        <hr size="1">
        <h2>preparation</h2>
        <ol>
            <li>Preheat your oven to 350˚F/ 175˚C.</li>
            <li>In a large mixing bowl, combine oats, flour, brown sugar, baking soda, salt, and melted butter. Mix
                until well combined and has a crumbly consistency.</li>
            <li>Line a 9x13 baking pan with parchment paper and lightly coat with a nonstick spray.</li>
            <li>Pour about 1/2 of the oat mixture into the pan and press with the back of a spoon or spatula until its
                nice and compact. Save the other 1/2 of the oat mixture for later!</li>
            <li>Pour 2 cups of chocolate chips over the oat mixture and spread them out evenly. Save the 1/2 cup for the
                top.</li>
            <li>In a saucepan, melt the soft caramels and the heavy cream until it becomes a smooth.</li>
            <li>Pour melted caramel over the chocolate chips & oat mixture. Carefully spread the caramel until it covers
                the chocolate.</li>
            <li>Pour the rest of the oat mixture over the caramel and spread out evenly.</li>
            <li>Add the other 1/2 cup of chocolate chips on top.</li>
            <li>Bake for 20-25 minutes, or until the crust has turned a golden brown. (Times and temperatures may vary
                from oven to oven)</li>
            <li>Allow to cool COMPLETELY before cutting into bars.</li>
        </ol>
        <hr size="1">
        <h2>Follow the video</h2>
        <iframe width="450" height="315" src="https://www.youtube.com/embed/h1uX0xz8n4E" frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <hr size="1">
        <table>
            <thead>
                <tr>
                    <th id="th1">Ingredients</th>
                    <th id="th1">Calories</th>
                </tr>
                <tr>
                    <th>Oats</th>
                    <th>389</th>
                </tr>
                <tr>
                    <th>Flour</th>
                    <th>581</th>
                </tr>
                <tr>
                    <th>Brown Sugar</th>
                    <th>17</th>
                </tr>
                <tr>
                    <th>Butter</th>
                    <th>102</th>
                </tr>
                <tr>
                    <th>Semi Sweet Chocolate Chips</th>
                    <th>70</th>
                </tr>
                <tr>
                    <th>Caramel</th>
                    <th>140</th>
                </tr>
                <tr>
                    <th>Heavy Cream</th>
                    <th>29</th>
                </tr>
            </thead>

        </table>
        <hr size="1">
        <h2> <strong> Want to find more <i> tasty </i> recipies? </strong></h2>
        <a href="https://www.youtube.com/channel/UCJFp8uSYCjXOMnkUyb3CQ3Q/featured" target="self"><input type="submit"
                Value="Click here!"></a>
</body>

</html>
h2 {
    Color: #2F1812;
}

li:nth-child(even) {
    color: #8B6048;
}

#th1 {
    background-color: #85461E;
}

tr:not(:first-child) {
    color: #8B6048;
}

tr:nth-child(even) {
    background-color: #d8ad6a;
}

body {
    background-color:
        #EDE5E2;
}

ul {
    list-style: none;
}

Leave a comment

Your email address will not be published. Required fields are marked *

css.php