1travelintexan/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Apple Pie Recipe</title>
    <!-- Remember to link your styles -->
    <link rel="stylesheet" href="styles/style.css"
  </head>
  <body>
    <header>
      <h1>Apple Pie</h1>
    </header>
    <div id="container-div">
      <p>
        This was my grandmother's apple pie recipe. I have never seen another
        one quite like it. It will always be my favorite and has won me several
        first place prizes in local competitions. I hope it becomes one of your
        favorites as well!
      </p>
      <img src="images/cooking-info.png" alt="cooking info" />
      <hr />
      <section>
        <h2>Ingredients</h2>
        <ul>
          <li>1 recipe pastry for a 9 inch double crust pie</li>
          <li>1/2 cup unsalted butter</li>
          <li>3 tablespoons all-purpose flour</li>
          <li>1/4 cup water</li>
          <li>3 tablespoons all-purpose flour</li>
          <li>1/4 cup water</li>
          <li>1/2 cup white sugar</li>
          <li>1/2 cup packed brown sugar</li>
          <li>8 Granny Smith apples</li>
        </ul>
      </section>
      <img src="images/recipe-info.png" alt="recipe info" />
      <hr />
      <section>
        <h2>Directions</h2>
        <ol>
          <li>
            Preheat oven to 425 degrees F (220 degrees C).Melt the butter in a
            saucepan. Stir in flour to form a paste. Add water, white sugar and
            brown sugar, and bring to a boil. Reduce temperature and let simmer.
          </li>
          <li>
            Place the bottom crust in your pan. Fill with apples, mounded
            slightly. Cover with a lattice work crust. Gently pour the sugar and
            butter liquid over the crust. Pour slowly so that it does not run
            off.
          </li>
          <li>
            Pour slowly so that it does not run off. Bake 15 minutes in the
            preheated oven. Reduce the temperature to 350 degrees F (175 degrees
            C). Continue baking for 35 to 45 minutes, until apples are soft.
          </li>
        </ol>
      </section>
    </div>
  </body>
</html>

## style.css
/* CSS RESET - do not remove */
/* Reset default browser styles and provide a consistent starting point */
html {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: lighter;
}

/*  Set the font */
body {
  font-family: "Helvetica", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* STYLES */
/* Write your CSS below */

header {
  background-image: url("../images/apple-pie.jpg");
  background-position: center;
  width: 100%;
  height: 600px;
  background-size: cover;
  color: aliceblue;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Togara solution
  width: 100%;
  height: auto; */
}
#container-div {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
p {
  font-size: 20px;
  margin: 50px 0;
  color: gray;
}
h2 {
  margin: 20px;
}
img {
  width: 500px;
  margin: 30px;
}
hr {
  width: 100%;
}
section {
  width: 100%;
}

ul li {
  list-style-type: "- ";
}
ol li::marker {
  content: counter(list-item) ") ";
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Apple Pie Recipe</title>
	<!-- Remember to link your styles -->
	<link rel="stylesheet" href="styles/style.css"
	</head>
	<body>
	<header>
	<h1>Apple Pie</h1>
	</header>
	<div id="container-div">
	<p>
	This was my grandmother's apple pie recipe. I have never seen another
	one quite like it. It will always be my favorite and has won me several
	first place prizes in local competitions. I hope it becomes one of your
	favorites as well!
	</p>
	<img src="images/cooking-info.png" alt="cooking info" />
	<hr />
	<section>
	<h2>Ingredients</h2>
	<ul>
	<li>1 recipe pastry for a 9 inch double crust pie</li>
	<li>1/2 cup unsalted butter</li>
	<li>3 tablespoons all-purpose flour</li>
	<li>1/4 cup water</li>
	<li>3 tablespoons all-purpose flour</li>
	<li>1/4 cup water</li>
	<li>1/2 cup white sugar</li>
	<li>1/2 cup packed brown sugar</li>
	<li>8 Granny Smith apples</li>
	</ul>
	</section>
	<img src="images/recipe-info.png" alt="recipe info" />
	<hr />
	<section>
	<h2>Directions</h2>
	<ol>
	<li>
	Preheat oven to 425 degrees F (220 degrees C).Melt the butter in a
	saucepan. Stir in flour to form a paste. Add water, white sugar and
	brown sugar, and bring to a boil. Reduce temperature and let simmer.
	</li>
	<li>
	Place the bottom crust in your pan. Fill with apples, mounded
	slightly. Cover with a lattice work crust. Gently pour the sugar and
	butter liquid over the crust. Pour slowly so that it does not run
	off.
	</li>
	<li>
	Pour slowly so that it does not run off. Bake 15 minutes in the
	preheated oven. Reduce the temperature to 350 degrees F (175 degrees
	C). Continue baking for 35 to 45 minutes, until apples are soft.
	</li>
	</ol>
	</section>
	</div>
	</body>
	</html>
	/* CSS RESET - do not remove */
	/* Reset default browser styles and provide a consistent starting point */
	html {
	box-sizing: border-box;
	font-size: 16px;
	}

	*,
	*:before,
	*:after {
	box-sizing: inherit;
	}

	body,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	ol,
	ul {
	margin: 0;
	padding: 0;
	font-weight: lighter;
	}

	/* Set the font */
	body {
	font-family: "Helvetica", sans-serif;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

	/* STYLES */
	/* Write your CSS below */

	header {
	background-image: url("../images/apple-pie.jpg");
	background-position: center;
	width: 100%;
	height: 600px;
	background-size: cover;
	color: aliceblue;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Togara solution
	width: 100%;
	height: auto; */
	}
	#container-div {
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: center;
	}
	p {
	font-size: 20px;
	margin: 50px 0;
	color: gray;
	}
	h2 {
	margin: 20px;
	}
	img {
	width: 500px;
	margin: 30px;
	}
	hr {
	width: 100%;
	}
	section {
	width: 100%;
	}

	ul li {
	list-style-type: "- ";
	}
	ol li::marker {
	content: counter(list-item) ") ";
	}