From 553e2e664963ac91e872465f76a836ef9bb7f510 Mon Sep 17 00:00:00 2001 From: jpntc Date: Fri, 6 Sep 2024 00:57:55 -0400 Subject: [PATCH 1/3] finished all the requested tasks for this assignment. --- alternating.html | 71 +++++++++++++++++++++++---------- css/styles.css | 78 ++++++++++++++++++++++++++++++++++++ index.html | 102 ++++++++++++++++++++++++++++------------------- 3 files changed, 188 insertions(+), 63 deletions(-) diff --git a/alternating.html b/alternating.html index a3f5035..f899808 100644 --- a/alternating.html +++ b/alternating.html @@ -1,30 +1,57 @@ - - - - Cookie Store - - -
+ + + + + + Cookie Store + + + +
+

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 instructor's 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 -
- - + \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index 3c3f2b6..da32f35 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,79 @@ /* Add custom css styles here */ +* { + padding: 0; + margin: 0; +} + +@media screen and (min-width: 1200px) { + .center-img { + position: relative; + top: 40px; + } +} + +header { + background-image: url("../images/coffee-biscuits.jpg"); + background-size: contain; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; + height: 500px; + color: white; +} + +.cookies-intro { + margin: 50px 0px 50px 0px; + align-self: center; + text-align: center; +} + +.container { + margin-bottom: 40px; +} + + +.col { + justify-content: center; + text-align: center; +} + +.about { + align-items: center; + align-content: center; +} + +main img { + border-radius: 100%; + +} + +.about-img { + border-radius: 100%; + height: 150px; +} + +.about div { + align-items: center; +} + +.about-content { + background-color: aliceblue; + justify-content: center; +} + +footer { + background-color: rgb(5, 109, 206); + display: flex; + flex-direction: column; + justify-content: center; + height: 200px; + align-items: center; + align-content: center; + color: white; + text-align: center; +} \ No newline at end of file diff --git a/index.html b/index.html index eae824d..427be70 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,77 @@ - - - - Cookie Store - - -
-

Cookie Store

-

Buy our awesome cookies. All proceeds go to charity!

-
+ + + + + + Cookie Store + -
+ +
+

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 - + A single mint chocolate cookie +
+

Peanut Butter

Yummy peanut buttery goodness

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

Oatmeal

Your fitness instructors favorite

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

Contact us

-
- 100 Broadway Avenue,
- New York, NY 10001
- (212) 555-1234 +
+
+
+

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

+ +
+
+
+ + + + + \ No newline at end of file From c57698046f7d500a8e07b8f13978b0486e54c4a2 Mon Sep 17 00:00:00 2001 From: jpntc Date: Fri, 6 Sep 2024 11:33:57 -0400 Subject: [PATCH 2/3] finished assignment --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index 427be70..b4da739 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,7 @@ + + + From 1468e68e6c85d71d635e8896ab46f3f1a65bfe9f Mon Sep 17 00:00:00 2001 From: jpntc Date: Fri, 6 Sep 2024 11:54:56 -0400 Subject: [PATCH 3/3] fixed detail with about header position --- css/styles.css | 14 ++++++-------- index.html | 6 ++++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/css/styles.css b/css/styles.css index da32f35..606196d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,4 +1,3 @@ -/* Add custom css styles here */ * { padding: 0; margin: 0; @@ -25,26 +24,26 @@ header { height: 500px; color: white; } - .cookies-intro { margin: 50px 0px 50px 0px; align-self: center; text-align: center; } - .container { margin-bottom: 40px; } - .col { justify-content: center; text-align: center; } -.about { - align-items: center; - align-content: center; +.about-container{ + background-color: aliceblue; + align-items: center; + align-content: center; + padding: 60px; + margin-top: 100px; } main img { @@ -62,7 +61,6 @@ main img { } .about-content { - background-color: aliceblue; justify-content: center; } diff --git a/index.html b/index.html index b4da739..096e90a 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@

Cookie Store

Buy our awesome cookies. All proceeds go to charity!

-
+

Our Cookies

Checkout our latest and delicious cookies.

@@ -47,7 +47,8 @@

Chocolate Chip

-
+
+

About us

@@ -67,6 +68,7 @@

About us

+