Responsive Recipe Webpage
HTML for the Webpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kann Family Recipes</title>
<link href="style.css" rel="stylesheet" type="text/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=Style+Script&display=swap" rel="stylesheet">
<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=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<nav>
<h2 class="kann">Kann Family Recipes ™</h2>
<a href="#">Home</a>
<a href="#">Breakfast</a>
<a href="#">Lunch</a>
<a href="#">Dinner</a>
<a href="#">Desserts</a>
</nav>
<header>
<h1>Chewy Ginger Molasses Cookies</h1>
<div id="buttons">
<button onclick="window.print()">Print</button>
<button>Save</button>
<button>Share</button>
</div>
</header>
<main>
<section id="description-section">
<img id="cookies" src="img/cookies.png" alt="plate of ginger cookies on a table">
<div id="description">
<h2>Description</h2>
<p>These delisious and chewy ginger cookies are a fan favorite in our home. With hints of clove and cinnamon, they are a perfect holiday treat. the recipe is simple and quick to make. No matter what time of year it is, these cookies are sure to impress. </p>
</div>
<div id="prep">
<div>
<p><strong>Prep Time:</strong> 10 min.</p>
<p><strong>Ingredients:</strong> 12 items</p>
</div>
<div>
<p><strong>Bake Time:</strong> 8 - 10 min.</p>
<p><strong>Yeilds:</strong> 24 cookies</p>
</div>
</div>
<div id="push"></div>
</section>
<br>
<section id="ingredients-section">
<h2>Ingredients</h2>
<img class="dough" src="img/dough.jpg" alt="ball of dough on a wooden counter top.">
<img class="dunk" src="img/dunk.jpg" alt="cookie dunking into a cup of coffee">
<ul>
<li>2 1/4 c. All Purpose Flour</li>
<li>1 1/2 tsp. Ground Ginger</li>
<li>1 tsp. Ground Cinnamon</li>
<li>1/4 tsp. Cloves</li>
<li>1 tsp. Baking Soda</li>
<li>1/2 tsp. Kosher Salt</li>
<li>3/4 c. Unsalted Butter, Softened</li>
<li>1/2 c. Granulated Suagr</li>
<li>1/2 c. Brown Sugar</li>
<li>1 lg. Egg</li>
<li>1/4 c. Molasses</li>
<li>1 tsp. Vanilla Extract</li>
<li>Additional Sugar for Rolling & Topping</li>
</ul>
</section>
<section id="directions-section">
<h2>Directions</h2>
<ol>
<li><u>Step 1:</u> Preheat oven to 350 degrees F. Line two cookies sheets with parchment paper. In a large bowl, sift together the flour, spices, baking soda, and salt. Set aside.</li>
<li><u>Step 2:</u> Using mixer, cream butter and sugars until fluffy (about 1-2 minutes). Add egg, molasses, vanilla extract and mix until incorporated. Slowly fold in the dry ingredients.</li>
<li><u>Step 3:</u> Using a cookie scoop, place a ball of dough (about 2 tbsp.) into a bowl of sugar and roll until coated. Roll the cookie into a ball and place on cookie sheet. Slightly flatten the top with your fingers. Repeat with remaining dough, leaving at least 2 inches between each cookie.</li>
<li><u>Step 4:</u> Bake at 350 degrees for 8 - 10 minutres. Allows them to cool on the cookie sheets for an additional 1 - 2 minutes before removing them.</li>
</ol>
</section>
<section id="tips-section">
<h2>Tips</h2>
<ul>
<li>Sprinkle extra sugar on top of the cookies when they are fresh out of the oven.</li>
<li>Add extra ginger to give to cookies a little more kick.</li>
</ul>
</section>
</main>
</div>
<footer>© Victoria Auer 2021 <div id="kann">© Kann Family Recipes 2021</div></footer>
</body>
</html>
CSS for the Webpage
@charset "UTF-8";
/* CSS Document by Victoria Auer */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
/*------CSS RESET-----*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*-----GLOBAL STYLES-----*/
#wrapper {
max-width: 1080px;
margin: 0 auto;
}
nav {
background-color: #260101;
text-decoration: none;
padding: 30px;
}
nav li {
text-decoration: none;
}
a {
text-decoration: none;
color: #b0cdd9;
margin: 10px;
float: right;
}
.kann {
font-family: 'Style Script', cursive;
color: #b0cdd9
}
body {
background-color: #e3f0d3;
color: #8c603a;
padding: 20px;
font-family: 'Open Sans Condensed', sans-serif;
}
h1 {
font-size: 60px;
margin: 20px;
}
h2 {
margin: 20px;
font-size: 40px;
}
#cookies {
float: left;
width: 300px;
margin-right: 20px;
}
#description-section h2 {
visibility: hidden;
}
#description-section {
text-align: center;
}
#prep {
background-color: #a6635d;
float: right;
width: 30%;
padding: 10px;
margin-top: 20px;
color: #b0cdd9;
}
button {
color: #b0cdd9;
background-color: #a6635d;
}
#buttons {
float: right;
}
#push{
height: 80px;
}
#ingredients-section {
margin: 15px;
margin-top: 20px;
}
.dough {
width: 300px;
float: right;
margin-right: 80px;
margin-left: 10px;
}
.dunk {
height: 300px;
float: right;
margin-right: 150px;
margin-left: 10px;
margin-bottom: 30px;
}
#directions-section {
position: relative;
margin-left: 20 px;
}
#tips-section {
text-align: center;
margin-top: 50px;
}
#kann {
font-family: 'Style Script', cursive;
margin-top: 5px;
}
footer {
background-color: #260101;
color: #b0cdd9;
padding: 30px;
font-family: 'Open Sans Condensed', sans-serif;
margin-top: 20px;
text-align: center;
}
/*-----MEDIUM SCREEN-----*/
@media screen and (max-width: 1007px){
h1 {
font-size: 30px;
}
h2 {
font-size: 20px;
}
}
/*-----SMALL SCREEN-----*/
@media screen and (max-width: 640px) {
main {
grid-template-columns: 100%;
grid-template-areas:
"description-section"
"ingredients-section"
"directions-section"
"tips-section";
}
img {
float: none;
width: 100%;
}
#push {
height: 30px;
}
.dunk {
width: 100%;
float: none;
margin-bottom: 20px;
}
.dough {
width: 100%;
float: none;
margin-bottom: 20px;
}
nav {
padding-bottom: 50px;
}
a {
float: none;
}
#prep {
float: none;
}
#buttons {
float: none;
margin-bottom: 15px;
}
#prep {
padding-right: 30px;
postion: center;
}
}
@media print {
h1 {
position: static;
}
button {
display: none;
}
h1, h2, p, li {
color: #000000;
font family:
}
nav {
visibility: hidden;
}
footer{
visibility: hidden;
}
}
Link to Finished Page: https://www.public.asu.edu/~vauer/Module-4-Assignment/index.html
