Responsive Recipe Assignment

HTML Code

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HomeBar</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link href="recipe-style.css" rel="stylesheet" type="text/css">
</head>
<body>
   <header>
       <h1>HomeBar</h1>
   </header>
<main>
   <section id="description">
   <img src="fishbowl.jpeg" alt="blue-fishbowl-cocktail" id="fishbowl" />
       <h2>Beachside Fishbowl</h2>
       <p>Hanging out with friends and sharing an ice cold drink is what summer is all about. This refreshing punch made with Cruzan® Rum, Pinnacle® Vodka, DeKuyper® Blue Curacao and hints of lemon and pineapple will be sure to cool you off all summer long.</p>
   </section>
   <section id="ingredients">
       <h3>Ingredients</h3>
       <ul>
           <li>½ part Cruzan® Coconut Rum</li>
           <li>½ part DeKuyper® Blue Curacao Liqueur</li>
           <li>1 part Pinnacle® Original Vodka</li>
           <li>1 part Pineapple Juice</li>
           <li>1 part Lemon Juice</li>
           <li>Garnish: Lemon Wedge</li>
       </ul>
   </section>
   <section id="steps">
       <h3>Steps</h3>
       <ol>
           <li>Combine ingredients with ice into a large bowl or pitcher and stir.</li>
           <li>Garnish with a lemon wedge.</li>
           <li>Add paper straws and serve.</li>
       </ol>
       </section>
   <section id="rate">
       <h3>Rate This Recipe</h3>
       <img src="star.png" alt="gold-star" id="star6"/>
       <img src="star.png" alt="gold-star" id="star7"/>
       <img src="star.png" alt="gold-star" id="star8"/>
       <img src="star.png" alt="gold-star" id="star9"/>
       <img src="star.png" alt="gold-star" id="star10"/>
   </section>
   </main>
   <footer>
       <ul>
           <li><a href="#">About Us</a></li>
           <li><a href="#">Terms of Use</a></li>
           <li><a href="#">Privacy</a></li>
       </ul>
       <small>Recipe Credit: https://www.thecocktailproject.com/drink-recipes/summer-fish-bowl</small>
   </footer>
   </body>
</html>

CSS Code

@charset "UTF-8";
/* CSS Document by Joshua Siordia */
html {
background-color:white;
}

header {
   background-color:#68788C;
   display:flex;
   border-bottom: solid 3pt #F2CF63;
}

h1 {
   font-family:"Cubano";
   font-size:30pt;
   color:#F2CF63;
   letter-spacing: 2px;
   padding-top: 20px;
   padding-bottom: 20px;
   padding-left:50px;
   max-width: 1024px;
   margin: 0 auto;
   position:relative;
}
h2 {
   font-family:"Poleno";
   font-size:35pt;
   color:#F2865E;
   display:flex;
   letter-spacing: 1px;
   margin-left:10px;
}

p {
   font-family: "Roboto";
   font-size:12pt;
   color: #3B3B3B;
   text-align:left;
   height:auto;
   width:50%;
   margin-left:400px;
   flex:1;
   position:relative;
}

li {
   font-size: 12pt;
   font-family: "Roboto";
   color: #3B3B3B;
   padding-bottom:10px;
}

#ingredients {
   height:auto;
   width:50%;
}
#steps {
   height:auto;
   width:50%;
   margin-left:500px;
   position: absolute;
   right:50px;
   bottom:350px;
}

h3 {
   font-family: "Roboto";
   font-size: 20pt;
   color:#F2865E;
   margin-left: 25px;
}
#fishbowl {
   width:60%;
   height:auto;
   border:solid 5px #F2CF63;
   margin-left: 25px;
   margin-right:20px;
   margin-bottom:20px;
   position:static;
   float:left;
   flex-wrap: wrap;
}

body {
   background-color: #DCEEF2;
   max-width: 1024px;
   position: relative;
   margin: 0 auto;
}

footer {
   display:flex;
   flex-wrap: wrap;
   justify-content: center;
   border-top: solid 5px #F2CF63;
   background-color:#68788C;
}
footer small {
   font-family:"Roboto";
   font-size:10pt;
   color:#DCEEF2;
   position: absolute;
   bottom:10px;
   letter-spacing: .7pt;
}
footer li {
   font-family: "Roboto";
   font-size: 15px;
   display:inline-flex;
}
footer a {
   padding-right: 50px;
   color:#DCEEF2;
   padding-bottom:10px;
}

/*--------------------Breakpoint Medium--------------------*/

@media screen and (max-width:1280px) {
   h1 {
       position:static;
   }
   header {
       padding-top:5px;
       padding-left:5px;
       height:60px;
   }
   p {
   height:auto;
   width:45%;
   margin-left:400px;
}
   #fishbowl {
   width:40%;
   height:auto;
}

}
/*--------------------Breakpoint Small--------------------*/
@media screen and (max-width:735px) {
   h1 {
       position:static;
       font-size:25pt;
   }
   h2 {
       font-size:30pt;
   }
   p {
   height:auto;
   width:40%;
   position:absolute;
   margin-left:340px;
   top:200px;
   font-size:10pt;
   margin-bottom:50px;
}
li {
   font-size: 10pt;
   width: 60%;
}
#steps {
   height:auto;
   width:60%;
   margin-right:50px;
   margin-top:700px;
   position: absolute;
   right:5px;
   bottom:580px;
}
}
/*--------------------Print Page-------------------*/
@media print {
   #fishbowl {
       filter: grayscale(1);
       position:relative;
   }
}

https://www.public.asu.edu/~jgsiordi/recipe.html

Responsive Recipe Assignment

Owner

Responsive Recipe Assignment

Creative Fields