Skip to content

Project: Recipe Site

Make your own page for a chocolate chip cookie recipe

  • Project
  • 0 hints
  • 8 of 8 in this chapter

Links1

For this project, you'll be making a web page for a chocolate chip cookie recipe. Here's what the page should look like:

recipe project page

  • the hex values for the colors used for this page are #E4BB97 and #6d6875
  • the font used for this page is Pacifico, found on Google Fonts
  • the cookies image is linked above
  • the paragraph text is just filler text, you can copy and paste this text for that:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est leo, convallis id metus nec, interdum elementum leo. Aenean a urna ultrices, ornare metus id, auctor mauris. Morbi eu augue at quam lobortis lobortis. Curabitur ac dui vitae erat ullamcorper commodo. Nulla eget risus mollis arcu auctor scelerisque. Quisque facilisis odio ut mauris pharetra, sed mollis neque pretium. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nunc nisl, iaculis a pellentesque vel, cursus at felis. Sed eu urna pharetra urna sollicitudin lacinia at hendrerit ex. Etiam faucibus augue vehicula, dictum massa in, venenatis diam. In id risus malesuada, commodo nisl quis, lacinia metus. Duis eu sapien vel purus porttitor interdum ut a dui. Duis scelerisque blandit erat, id lobortis justo blandit in. Aliquam maximus nibh mauris, nec dictum enim tempor sit amet. Vestibulum in mauris dui. Sed vel orci at justo vestibulum suscipit.

Solution

The HTML file:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cookies Recipe</title>
    <link rel="stylesheet" href="project1.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
    <h1>Chocolate Chip Cookies</h1>
    <p id="time">Time: 20 minutes | Amount: 24 cookies</p>
    <hr>
    <img src="cookies.jpg" alt="chocolate chip cookies in a tray">
    <h2>About these cookies</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est leo, convallis id metus nec, interdum elementum leo. Aenean a urna ultrices, ornare metus id, auctor mauris. Morbi eu augue at quam lobortis lobortis. Curabitur ac dui vitae erat ullamcorper commodo. Nulla eget risus mollis arcu auctor scelerisque. Quisque facilisis odio ut mauris pharetra, sed mollis neque pretium. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nunc nisl, iaculis a pellentesque vel, cursus at felis. Sed eu urna pharetra urna sollicitudin lacinia at hendrerit ex. Etiam faucibus augue vehicula, dictum massa in, venenatis diam. In id risus malesuada, commodo nisl quis, lacinia metus. Duis eu sapien vel purus porttitor interdum ut a dui. Duis scelerisque blandit erat, id lobortis justo blandit in. Aliquam maximus nibh mauris, nec dictum enim tempor sit amet. Vestibulum in mauris dui. Sed vel orci at justo vestibulum suscipit.</p>
    <h2>Ingredients</h2>
    <ul>
        <li>1/2 cup butter</li>
        <li>1/2 cup sugar</li>
        <li>1/4 cup brown sugar</li>
        <li>1 egg</li>
        <li>1 3/4 cups flour</li>
        <li>1/2 teaspoon baking soda</li>
        <li>1/2 teaspoon salt</li>
        <li>1 cup chocolate chips</li>
    </ul>
    <h2>Instructions</h2>
    <ol>
        <li>Preheat oven to 350F</li>
        <li>Mix all the ingredients</li>
        <li>Place cookie dough on baking sheet</li>
        <li>Bake for 10 minutes</li>
    </ol>
</body>
</html>

styles.css file:

CSS
body {
    background-color: #E4BB97;
}

h1, h2, p, ul, ol {
    color: #6d6875;
}

h1, h2 {
    font-family: 'Pacifico', cursive;
}

h1 {
    text-align: center;
    text-decoration: underline;
}

p {
    text-align: justify;
}

ol, ul {
    font-size: 1.5em;
}

#time {
    text-align: center;
    font-weight: bold;
}

Give the project a try first.