From 68dd3f7f4a6906edf846619e71b5694673aa492d Mon Sep 17 00:00:00 2001 From: bikiris Date: Wed, 4 Sep 2024 15:49:00 -0400 Subject: [PATCH] Complete lab --- alternating.html | 60 ++++++++++++++++++++++--------- css/styles.css | 50 ++++++++++++++++++++++++++ index.html | 91 +++++++++++++++++++++++++++++++++--------------- 3 files changed, 156 insertions(+), 45 deletions(-) diff --git a/alternating.html b/alternating.html index a3f5035..66e195d 100644 --- a/alternating.html +++ b/alternating.html @@ -4,27 +4,55 @@ Cookie Store + -
+

Our Cookies

Checkout our latest and delicious cookies.

-

Mint Chocolate

-

Tasty mint chocolate cookies

- A single mint chocolate cookie - -

Peanut Butter

-

Yummy peanut buttery goodness

- A single peanut butter cookie - -

Oatmeal

-

Your fitness instructors favorite

- A single oatmeal cookie - -

Chocolate Chip

-

Gooey chocolate you'll love

- A single chocolate chip cookie +
+
+

Mint Chocolate

+

Tasty mint chocolate cookies

+ A single mint chocolate cookie +
+
+

Peanut Butter

+

Yummy peanut buttery goodness

+ A single peanut butter cookie +
+
+

Oatmeal

+

Your fitness instructors favorite

+ A single oatmeal cookie +
+
+

Chocolate Chip

+

Gooey chocolate you'll love

+ A single chocolate chip cookie +
+
+ + diff --git a/css/styles.css b/css/styles.css index 3c3f2b6..29b7839 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,51 @@ /* Add custom css styles here */ +header { + height: 400px; + background-size:cover; + background-image: url('../images/coffee-biscuits.jpg'); + background-position: center; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.title { + background-color: #000000a0; + color: #fff; + text-align: center; + padding: 2rem 4rem; + border-radius: 12px; +} + +.about-us { + display: flex; + flex-direction: column; + text-align: center; + padding: 20px 50px; + background-color: #00000010; +} + +.about-us-content { + display: flex; + justify-content: center; + align-items: center; + max-height: 400px; +} + +.about-us-content img { + width: 300px; + height: 300px; +} + +footer { + background-color: #0000ff; + color: white; + padding: 20px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + +} \ No newline at end of file diff --git a/index.html b/index.html index eae824d..ef1c371 100644 --- a/index.html +++ b/index.html @@ -4,45 +4,72 @@ Cookie Store + +
-

Cookie Store

-

Buy our awesome cookies. All proceeds go to charity!

+
+

Cookie Store

+

Buy our awesome cookies. All proceeds go to charity!

+
-
+

Our Cookies

Checkout our latest and delicious cookies.

-

Mint Chocolate

-

Tasty mint chocolate cookies

- A single mint chocolate cookie - -

Peanut Butter

-

Yummy peanut buttery goodness

- A single peanut butter cookie - -

Oatmeal

-

Your fitness instructors favorite

- A single oatmeal cookie - -

Chocolate Chip

-

Gooey chocolate you'll love

- A single chocolate chip cookie +
+
+

Mint Chocolate

+

Tasty mint chocolate cookies

+ A single mint chocolate cookie +
+
+

Peanut Butter

+

Yummy peanut buttery goodness

+ A single peanut butter cookie +
+
+

Oatmeal

+

Your fitness instructors favorite

+ A single oatmeal cookie +
+
+

Chocolate Chip

+

Gooey chocolate you'll love

+ A single chocolate chip cookie +
+
-
+ +

About us

- - illustrations of two people baking -
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. Duis aute irure dolor in reprehenderit in voluptate - velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. +
+ illustrations of two people baking +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +
@@ -53,5 +80,11 @@

Contact us

(212) 555-1234
+ +