CodePen Embed

<html>
  
  
  <head>
    <title>Homemade Pancakes</title>
  </head>
  
  <body>
    
    <main> <!-- Main content page -->
      
      <nav>
        
          <figure>
          <img src="https://cdn-icons-png.flaticon.com/512/271/271218.png" alt="Back Arrow"
               width="30px"
               height="30px"
               class="backarrow">
        </figure>
        
        <figure>
          <img src="data:image/png;base64,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" alt="Share"
               width="20px"
               height="20px"
               align="right"
               class="sharebutton">
        </figure>
        
        <figure>
          <img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAeFBMVEX///8AAAArKytKSkr29vaBgYHb29u6uro6OjoeHh7X19cTExOwsLDExMTNzc3f39/s7Ozv7++ioqJlZWVtbW2ZmZl3d3f09PSzs7OSkpJ+fn4yMjKKiopzc3O+vr7IyMienp5RUVFbW1tfX19FRUUjIyMNDQ0YGBjXUvHLAAAFA0lEQVR4nO2daVfqMBCGWxZBRWQV3FBc8P//w3sUj9hmMs3WTsb7Ph89Ic5DS5fMJCkKAAAAAAAAAAAAAAAAAAAAAECWzC+m0zPpINpjsOiVX6wupENph1F5YrmRjqYFhuVvLq+l40nOQ1ljLh1RYq7qguW9dEiJuTQMy4l0TEkZmYJ/7CAuCcPyT90YzynDv3SaDijB8kE6rITQhkPpsBICQ/3AUD8w1A8M9QND/cBQPzDUDwz1A0P9wFA/MNQPDPUDQ/3AUD8w1A8M9QND/cBQPzDUDwz1A0P9wFA/MNQPDPUDQ/3AUD8w1A8M9QND/cBQPzDUDwxzZ964QIJqw0n/M9iXEdsoyHCzHS5XD1cJYw3h4mcK85hbBiLE8GcRhm3akP2orJTALFjib7gZn9o9Jo/bmV01Yruit+G897vhsoXYnbioh2xV9DWcfVRbSimaa13YFD0NZ0bTRUsKPFsi6Cnd1M/wmmg7aE2D4ZWKmlb0MqQEZVaYIKOmFX0MScFy1aqKBdqQVPQwNC5fR/Yty5BYDMsns6m7oUWwfGldh6BvUzQftJwNp7Y+Rc7ShS0aU9HV8MnapciVhg6bVHQ03JHNvhC5W5A3xG921ZZuhtRiUt/I3PGL4tYeUvVtysmQ+cLEHkydFV0MJzkKOis6GNqvWzLX0R/W9sB+vbk2GzL93HQuVeXZHtrpCt9oyAjeCUhVYU6vH8UmQ+Zkz2HJMwfFBkNjXcwTt0JSVRjF7/sYb3hn//xaTKoKc6E/KrKGN41fUAY0KXKGooK7URX72Daj+MwbruyfZJ62r6qBbUOXJa7/S2Y5TuaRa80Zkst+HuFGgnu1tqELhdbX5OSGtZnH5rXdcG//1I75Z8W41rgLQ17RYhgqKGPIKQ7Jv9682D/RkJCRMeReYH0hxnpyMCSWtA6kcVV6KcNUis3L7osZplF0CFfOkBktc8ZlxX1BQ/uIZ0pBUcNYxZlTZKKGUYrnboLChhGK765bQggbWtMrTfScXxGkDQMVe+5D9+KGQYpjj8jkDQMU33ySLxkYFmeegn5J3hwMLfn4NIJ5GHop+iax8zD0UPROLmVi6Kzon1zKxdBRMaD2MBtDokLNJCR7lo9hMSO2sqoSlD3LyNAopKwTlj3LybDhKAZmz7IyLObpBTMzLObkjl2fPAcGlpthrWr7RHj2rC3D4K3gaMWIWrVUhvW4wjdI3RAnasQ8ikGqs+st3Zc+eK8L8sklHuNBIrSw77HWT0ztzuC+2lfUbB9jaD20I6OOJyaqQeW305Rc4qlXb7yHdmRkBC2TDdwY9BN1ZKbfg+cNGad7ZLX15HDs5i6yHtaoiwi/7RgX+biTqyjORotJ5PEriBr68B1NjVqXd5lq5CpGVIfwvsxcmWQx6zdm7U5M+aL5XiBd7UlVC8Sc90TVoPBRJMoEo7ZOpt58eoK722+oGqq4uRhkXd1KaOv3DVlK/BHXqWUoqb/o/EDORpYauNjpNPYC5UOvQ+yjPfEbmFveXrMhfv/y0IRuR6QoBGfKuOVJM/OSKeOV5iO0OLiGdS6lOI7FKXoVE96XyZnp0hySPngwsz6kGLuWFznCFOPLkP4lZ5bXj7GVlXm2jbnAznhoa6zhOQ/Hm2Q3CYJtfRy8cy7Xbfp9Mlsw0yTaZnzb0Vvb2eh29brvd8j+ZTmcTHMY6QMAAAAAAAAAAAAAAAAAAAD/L/8ALspFeVCrOYQAAAAASUVORK5CYII= alt="Download"
               width=25px
               height=25px
               align=right
               class="download">
        </figure>
       
        <figure>
          <img src=https://www.seekpng.com/png/full/16-165961_heart-empty-font-awesome-heart-icon-transparent-background.png alt="Like Button"
               width=20px
               height=18px
               class="likebutton">
        
      </nav>
      
      
      <header> <!--This will be the header-->
        
        <h1>Homemade Pancakes</h1>
        <p>Posted by:<a href="#">@marthastewart</a> </p>
        
         <figure>
          <img src=https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F43%2F2022%2F02%2F16%2F21014-Good-old-Fashioned-Pancakes-mfs_001.jpg alt="Buttermilk Pancakes"
               width=375px
               height=250px
               align=topleft
               class="pancakes">
        </figure>
        
      </header>
          <section>
            <section id=ingredientsteps>
            <section class="ingredientsteps">
            <h2>Ingredients</h2>
          <ul style="list-style: none;">
            <li>all-purpose flour (2 cups)</li>
            <li>salt (1/2 tsp)</li>
            <li>baking powder (1/2 tsp)</li>
            <li>buttermilk (2 cups)</li>
            <li>egg (2 cups)</li>
            <li>unsalted butter, melted (3 tbs)</li>
            <li>maple syrup (3 tbs)</li>
              </ul>
          </section>
          
    
              
          <section>
            <section class="neededequipment">
          <h2>Needed Equipment</h2>
            <ul style="list-style: none;">
              <li>bowl</li>
              <li>whisk</li>
              <li>measuring cup</li>
              <li>pan</li>
              <li>oven</li>
            </ul>
          </section>
            
            
          <section>
            <section class="time">
              <ul style="list-style: none;">
            <li><strong>Prep Time:</strong> X minutes</li>
            <li><strong>Cook Time:</strong> X minutes</li>
              </ul>
          </section>
            
            <figure>
          <img src="https://www.22indiestreet.com/uploads/5/8/1/3/5813630/4-stars-00000_10_orig.png" alt="Four Star Review"
               width="80px"
               height="15px"
               class="stars">
                          
        </figure>
            
          
          <section>
            <section class="instructions">
            <h2>Instructions</h2>
            <ol>
              <li>In a bowl, add the flour, sugar, salt, baking powder, and baking soda. Whisk to combine.</li>
              <li>In a bowl or measuring cup, whisk the buttermilk, eggs, and melted butter until smooth.</li>
            </ol>
          </section>
  
              <section>
                <section class="grocerylist">
                   <h5>+ Add items to grocery list</h5>
              </section>
              
                                          
             <section>
                <section class="comments">
                  <h5>Comments</h5>
           
                                         
           </section>
           </section>
           </section>
           </section>
           </section>
           </section>
           </section>
           </section>
   </main>
   </body>
                                         
            </html>

/*---FONTS---*/
*{
  font-family:Helvetica, sans-serif;
  color: #000000;
  font-size:11px;
  line-height:25px;}
h1{
  font-size:20px;
  color:#000000;
  font-family:Helvetica, sans-serif;
  margin-left: 130px}
h2{
  font-size:12px;
  color:#000000;
  font-family:Helvetica, sans-serif;}
p{
  margin-left: 50px;}

/*---MAIN---*/
main{
  max-width: 750px;
  margin: 20px;
  background-color:white;}
ul {
   margin-left: -40px;}
ol {
   margin-left: -28px;}

/*---IMAGES---*/
.pancakes{
  border-radius: 25px;}
.sharebutton{
  position: absolute;
    left: 350px;
    top: 65px;}
.download{
position: absolute;
    left: 380px;
    top: 62px;}
.backarrow{
  position:absolute;}
.likebutton{
  position:absolute;
  left: 412px;
  top: 65px;}
.stars{
  position: absolute;
  left: 317px;
  top: 695px;}



/*---LAYOUT---*/
.ingredientsteps {
  margin-left: 35px;
  margin-top:5px;
  border-radius: 25px;
  background: #D7E8CF;
  padding: 20px;
  width:150px;
  height: 230px;}

.grocerylist {
  margin-left: 35px;
  border-radius: 25px;
  background: #D7E8CF;
  padding: 15px;
  padding-top: 0px;
  width:150px;
  height: 10px;}

.comments {
  margin-left: 35px;
  border-radius: 25px;
  background: #D7E8CF;
  padding: 15px;
  padding-top: 0px;
  width:150px;
  height: 10px;}

.neededequipment {
  position: absolute;
    left: 275px;
  top: 353px;
  margin-top:10px;
  border-radius: 25px;
  background: #D7E8CF;
  padding: 20px;
  width:125px;
  height: 180px;}

.time {
  position: absolute;
    left: 240px;
  top: 595px;
  margin-left: 35px;
  margin-top:10px;
  border-radius: 25px;
  background: #D7E8CF;
  padding-left: 15px;
  padding-top: 2px;
  width:150px;
  height: 70px;}

.instructions {
  position: absolute;
  top: 725px;
  margin-left: 35px;
  margin-top:10px;
  border-radius: 25px;
  background: #A6CA95;
  padding: 20px;
  width:335px;
  height: 150px;}

This Pen is owned by Giulia Blake on CodePen.

See more by @gblake13 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.