diff --git a/apple-pie/index.html b/apple-pie/index.html index a019c8262..813c2aa4b 100644 --- a/apple-pie/index.html +++ b/apple-pie/index.html @@ -4,36 +4,68 @@ Apple Pie Recipe - + - Apple Pie +
+

Apple Pie

+
+
+

+ 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! +

+
+
+ recipe info +
+
+
+

Ingredients

- 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! - - Ingredients - - 1 recipe pastry for a 9 inch double crust pie - 1/2 cup unsalted butter - 3 tablespoons all-purpose flour - 1/4 cup water - 3 tablespoons all-purpose flour - 1/4 cup water 1/2 cup white sugar - 1/2 cup packed brown sugar - 8 Granny Smith apples - peeled, cored and sliced + +
+
+ cooking information +
+
- Directions + diff --git a/apple-pie/styles/style.css b/apple-pie/styles/style.css index 7a55b4df4..276e3c5d4 100644 --- a/apple-pie/styles/style.css +++ b/apple-pie/styles/style.css @@ -5,11 +5,22 @@ html { font-size: 16px; } -*, *:before, *:after { +*, +*:before, +*:after { box-sizing: inherit; } -body, h1, h2, h3, h4, h5, h6, p, ol, ul { +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ol, +ul { margin: 0; padding: 0; font-weight: lighter; @@ -21,4 +32,73 @@ body { } /* STYLES */ -/* Write your CSS below */ \ No newline at end of file +/* Write your CSS below */ + +/* Header Section */ +.header { + background-image: url(../images/apple-pie.jpg); + background-size: 100%; + height: 600px; + margin-bottom: 2rem; +} + +h1 { + text-align: center; + font-size: 5em; + color: white; + padding-top: 250px; +} + +/* Hero Section */ +.main { + padding: 20px; + font-size: 1.3em; + width: 900px; + margin: 0 auto; +} + +/* Main Section */ + +h2 { + font-size: 2em; + font-weight: 300; + margin-bottom: 2rem; +} + +.ingredients { + padding: 20px; + font-size: 1.3em; + width: 900px; + margin: 0 auto; +} + +.images { + text-align: center; +} + +ul { + list-style-type: "- "; +} + +/* Footer Section */ +h3 { + font-size: 2em; + font-weight: 300; + margin-bottom: 2rem; +} + +.directions { + padding: 20px; + font-size: 1.3em; + width: 900px; + margin: 0 auto; +} + +ol > li { + list-style: none; +} + +ol > li:before { + content: counter(list) ") "; + counter-increment: list; +}