diff --git a/images/background.jpg b/images/background.jpg new file mode 100644 index 0000000..c43cd28 Binary files /dev/null and b/images/background.jpg differ diff --git a/images/cake1.jpg b/images/cake1.jpg new file mode 100644 index 0000000..ae3a3c3 Binary files /dev/null and b/images/cake1.jpg differ diff --git a/images/cake2.jpg b/images/cake2.jpg new file mode 100644 index 0000000..ca4375e Binary files /dev/null and b/images/cake2.jpg differ diff --git a/images/cake3.jpg b/images/cake3.jpg new file mode 100644 index 0000000..ef837bf Binary files /dev/null and b/images/cake3.jpg differ diff --git a/images/cake4.jpg b/images/cake4.jpg new file mode 100644 index 0000000..6f08c6e Binary files /dev/null and b/images/cake4.jpg differ diff --git a/images/cake5.jpg b/images/cake5.jpg new file mode 100644 index 0000000..88c7ee3 Binary files /dev/null and b/images/cake5.jpg differ diff --git a/images/cake6.jpg b/images/cake6.jpg new file mode 100644 index 0000000..017d406 Binary files /dev/null and b/images/cake6.jpg differ diff --git a/images/cake7.jpg b/images/cake7.jpg new file mode 100644 index 0000000..545294c Binary files /dev/null and b/images/cake7.jpg differ diff --git a/images/magic-cake.jpg b/images/magic-cake.jpg new file mode 100644 index 0000000..3f1d05b Binary files /dev/null and b/images/magic-cake.jpg differ diff --git a/images/main-background.jpg b/images/main-background.jpg new file mode 100644 index 0000000..709b8a9 Binary files /dev/null and b/images/main-background.jpg differ diff --git a/images/recipes-background.png b/images/recipes-background.png new file mode 100644 index 0000000..c0e361a Binary files /dev/null and b/images/recipes-background.png differ diff --git a/index.html b/index.html index 807f4e8..75dc983 100644 --- a/index.html +++ b/index.html @@ -11,35 +11,61 @@ -

Recipe World

- -

Magic Cake

-

Magic cake is one of the tastiest cakes the world ahs ever known. Few have tried and lived to tell about it, and these - are their stores.

-

We also need to stress that whatever happens to you as a result of consuming Magic Cake is your responsibility. You've - been warned, and you can view our legal page for more - information. -

-

Ingredients

- -

Directions

-
    -
  1. Mix eggs, sugar, and butter in a large bowl
    2. -
  2. Spread into a non-stick dish
    3. -
  3. Bake at 350 degrees for 1 hour
    4. -
  4. Let sit at room temp for 20 minutes
    5. -
  5. Eat and enjoy!
    6. -
+

Directions

+
    +
  1. Mix eggs, sugar, and butter in a large bowl
    2. +
  2. Spread into a non-stick dish
    3. +
  3. Bake at 350 degrees for 1 hour
    4. +
  4. Let sit at room temp for 20 minutes
    5. +
  5. Eat and enjoy!
    6. +
+

Your Photos

+ + + + + \ No newline at end of file diff --git a/recipes.html b/recipes.html index e01fb9d..d281360 100644 --- a/recipes.html +++ b/recipes.html @@ -11,35 +11,45 @@ -

Recipe World

- - -

Recipes

- +
+

Recipe World

+ +
+
+

Recipes

+ +
+ \ No newline at end of file diff --git a/styles.css b/styles.css index 95d2db9..f22a996 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,7 @@ +/* * { + box-sizing: border-box; +} */ + html, body, h1, @@ -11,10 +15,12 @@ a { padding: 0; margin: 0; border: 0; + font-size: 100%; + font: inherit; } body { - padding: 20px; + font-family: Helvetica, Arial, "Times New Roman", sans-serif; } h1 { @@ -22,7 +28,11 @@ h1 { } h2 { + color: #7facaa; margin: 10px 0 20px 0; + text-align: center; + font-size: 26px; + font-weight: bold; } h3 { @@ -48,3 +58,150 @@ nav a { nav li { display: inline; } + +.recipes { + list-style-type: none; + padding: 0; +} + +.recipes li { + border: 1px solid #b56663; + padding-left: 15px; +} + +.recipes h3 { + border-bottom: 0; +} + +.recipes a { + color: #7facaa; + text-decoration: none; +} + +header { + padding: 10px; + background-color: #b56663; +} + +header a, +header h1 { + color: #fff; +} + +header h1, +header nav { + text-align: center; +} + +main { + padding: 20px; + border: 1px solid #ddd; + margin: 30px auto 0 auto; + width: 500px; +} + +main p { + line-height: 26px; +} + +.photos { + list-style-type: none; + padding: 0; +} + +.photos img { + width: 100%; +} + +/* Float and percentage-based layout */ +/* .photos li { + float: left; + width: 33.3%; +} + + .group:after { + content: ""; + display: table; + clear: both; +} */ + +/* Flex-based layout */ +/* .photos { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} */ + +/* .photos li:last-child { + flex-grow: 0; +} */ + +/* Grid-based layout */ +.photos { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +} + +/* .featured-image { + width: 500px; + height: 300px; + background: #fff url(images/magic-cake.jpg) top left no-repeat; +} */ + +.featured-image { + position: relative; +} + +.featured-image h3 { + margin: 0; + position: absolute; + border: 0; + top: 0; + right: 0; + background-color: rgba(25, 25, 25, 0.7); + color: #fff; + padding: 10px; + text-transform: uppercase; + font-size: 2em; +} + +/* Suggest Page Styles */ + +label, +input { + display: block; +} + +label { + margin-bottom: 10px; +} + +input[type="text"] { + width: 100%; + margin-bottom: 25px; +} + +input[type=submit] { + width: 240px; + font-size: 30px; +} + +input[type=text] { + border: 2px solid #7facaa; + font-size: 24px; + padding: 7px; +} + +textarea { + width: 100%; + height: 400px; + padding: 7px; + border: 2px solid #7facaa; + margin-bottom: 25px; + font-size: 24px; +} + +input[type=checkbox], +label[for=newsletter] { + display: inline; +} diff --git a/suggest.html b/suggest.html index 60b8de1..599d1a0 100644 --- a/suggest.html +++ b/suggest.html @@ -11,14 +11,52 @@ -

Recipe World

- +
+

Recipe World

+ +
+
+ +
+ + + + + + + + + + + + + + + +
+ + +
\ No newline at end of file