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">

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


    <h1>Chocolate Caramel Oat Bars (Carmelitas)</h1>
    <h2>Serving 4</h2>
    <img src=""
        <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="">Tasty Youtube page</a></p>

        <hr size="1">
            <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>
        <hr size="1">
            <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
            <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>
        <hr size="1">
        <h2>Follow the video</h2>
        <iframe width="450" height="315" src="" frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <hr size="1">
                    <th id="th1">Ingredients</th>
                    <th id="th1">Calories</th>
                    <th>Brown Sugar</th>
                    <th>Semi Sweet Chocolate Chips</th>
                    <th>Heavy Cream</th>

        <hr size="1">
        <h2> <strong> Want to find more <i> tasty </i> recipies? </strong></h2>
        <a href="" target="self"><input type="submit"
                Value="Click here!"></a>

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 {

ul {
    list-style: none;

Leave a comment

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