From 582d1d8af6dc529a6e7563ccd1d8b4659118ed58 Mon Sep 17 00:00:00 2001 From: AllenL8921 Date: Thu, 5 Sep 2024 17:37:43 -0400 Subject: [PATCH 1/3] Alternating HTML Solution --- alternating.html | 82 ++++++++++++++++++++++++++++++++++-------------- 1 file changed, 59 insertions(+), 23 deletions(-) diff --git a/alternating.html b/alternating.html index a3f5035..0c13f07 100644 --- a/alternating.html +++ b/alternating.html @@ -1,30 +1,66 @@ - - - - Cookie Store - - -
-

Our Cookies

-

Checkout our latest and delicious cookies.

+ + + + Cookie Store + -

Mint Chocolate

-

Tasty mint chocolate cookies

- A single mint chocolate cookie + + +
+
-

Peanut Butter

-

Yummy peanut buttery goodness

- A single peanut butter cookie +
+

Our Cookies

+

Checkout our latest and delicious cookies.

+ +
-

Oatmeal

-

Your fitness instructors favorite

- A single oatmeal cookie +
+
+

Mint Chocolate

+

Tasty mint chocolate cookies

+
+
+ A single mint chocolate cookie +
+
-

Chocolate Chip

-

Gooey chocolate you'll love

- A single chocolate chip cookie -
- +
+
+

Peanut Butter

+

Yummy peanut buttery goodness

+
+
+ A single peanut butter cookie +
+
+ +
+
+

Oatmeal

+

Your fitness instructor's favorite

+
+
+ A single oatmeal cookie +
+
+ +
+
+

Chocolate Chip

+

Gooey chocolate you'll love

+
+
+ A single chocolate chip cookie +
+
+ +
+ + + + + From a8a1a3f133e21179cedcccc46dcf14098e15eaf8 Mon Sep 17 00:00:00 2001 From: AllenL8921 Date: Thu, 5 Sep 2024 22:01:01 -0400 Subject: [PATCH 2/3] index HTML solution --- alternating.html | 59 +++++++++++++++++----- css/styles.css | 67 ++++++++++++++++++++++++ index.html | 129 +++++++++++++++++++++++++++++++++++++---------- 3 files changed, 213 insertions(+), 42 deletions(-) diff --git a/alternating.html b/alternating.html index a3f5035..bda1bb7 100644 --- a/alternating.html +++ b/alternating.html @@ -4,27 +4,58 @@ Cookie Store + +
-

Our Cookies

-

Checkout our latest and delicious cookies.

+
+
+

Our Cookies

+

Checkout our latest and delicious cookies.

+
-

Mint Chocolate

-

Tasty mint chocolate cookies

- A single mint chocolate cookie +
+
+

Mint Chocolate

+

Tasty mint chocolate cookies

+ A single mint chocolate cookie +
+
-

Peanut Butter

-

Yummy peanut buttery goodness

- A single peanut butter cookie +

Peanut Butter

+

Yummy peanut buttery goodness

+ A single peanut butter cookie -

Oatmeal

-

Your fitness instructors favorite

- A single oatmeal cookie +

Oatmeal

+

Your fitness instructors favorite

+ A single oatmeal cookie -

Chocolate Chip

-

Gooey chocolate you'll love

- A single chocolate chip 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..13d266a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,68 @@ /* Add custom css styles here */ +*{ + padding: 0; + margin: 0; +} + +header{ + align-items: center; + justify-content: center; + padding-bottom: 5vh; + +} + +footer{ + background-color: rgb(0, 121, 213); + color: white; +} + +.hero-img{ + background-image: url('/lab-bootstrap-5.2/images/coffee-biscuits.jpg'); + background-size: cover; + background-position: center; + position: relative; + min-height: 400px; + color: white; +} + +.hero-text{ + position: absolute; + width: 100%; + height: 100%; +} + +.hero-text-bg{ + background-color: rgba(0, 0, 0, 0.6); + padding: 30px; + border-radius: 10px; +} + +.hero-text-bg h1{ + text-align: center; +} + +.hero-text-bg p{ + text-align: center; + font-size: 20px; +} + +.about-cookies h2{ + font-size: 2.5em; +} +.cookies-showcase{ + padding-bottom: 5vh; + +} +.cookies-showcase img{ + border-radius: 100vh; +} + +.about-us h2{ + text-align: center; +} + +.icon{ + height: 8rem; + border-radius: 4rem; +} + diff --git a/index.html b/index.html index eae824d..660715d 100644 --- a/index.html +++ b/index.html @@ -4,48 +4,105 @@ 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.

+
+

Our Cookies

+

Checkout our latest and delicious cookies.

+
-

Mint Chocolate

-

Tasty mint chocolate cookies

- A single mint chocolate cookie +
+
+
+

Mint Chocolate

+

Tasty mint chocolate cookies

+ A single mint chocolate cookie +
-

Peanut Butter

-

Yummy peanut buttery goodness

- A single peanut butter cookie +
+

Peanut Butter

+

Yummy peanut buttery goodness

+ A single peanut butter cookie +
-

Oatmeal

-

Your fitness instructors favorite

- A single oatmeal cookie +
+

Oatmeal

+

Your fitness instructors favorite

+ A single oatmeal cookie +
-

Chocolate Chip

-

Gooey chocolate you'll love

- A single chocolate chip 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. +
+
+ Illustration 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. +
+
-
-
+
+ +

Contact us

100 Broadway Avenue,
@@ -53,5 +110,21 @@

Contact us

(212) 555-1234
+ + + + From 84d0662882aadd3990cdb4cfab192cc6bfafc713 Mon Sep 17 00:00:00 2001 From: AllenL8921 Date: Fri, 6 Sep 2024 19:37:34 -0400 Subject: [PATCH 3/3] fixed incorrect hero-img path --- css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/styles.css b/css/styles.css index 13d266a..ddaefe0 100644 --- a/css/styles.css +++ b/css/styles.css @@ -17,7 +17,7 @@ footer{ } .hero-img{ - background-image: url('/lab-bootstrap-5.2/images/coffee-biscuits.jpg'); + background-image: url('/images/coffee-biscuits.jpg'); background-size: cover; background-position: center; position: relative;