From aae16e71e2496b4844bcad33a3d62171166cbc7b Mon Sep 17 00:00:00 2001 From: Chris Date: Sat, 31 Aug 2024 21:22:23 -0400 Subject: [PATCH 1/5] 50% Done --- HW Progress.md | 9 +++++ css/styles.css | 96 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 96 +++++++++++++++++++++++++++++++++----------------- 3 files changed, 168 insertions(+), 33 deletions(-) create mode 100644 HW Progress.md diff --git a/HW Progress.md b/HW Progress.md new file mode 100644 index 0000000..0b67d4c --- /dev/null +++ b/HW Progress.md @@ -0,0 +1,9 @@ +Delete when Finished! + +-- Progress so far + +Arranged the site to match the same layout formulation as the image. Whats left for me to do it + - Style up the Abous Us section image + - Find a way to round the colors of the cookies + +Also, I have not begun progress on alternating.html, will begin doing work on this once done with index.html \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index 3c3f2b6..500374f 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,95 @@ -/* Add custom css styles here */ +body { + font-family: Roboto; + font-size: 20px; +} + +@media (max-width: 768px) { + .about-content { + flex-direction: column; + } + + .about-content img { + width: 50%; + margin-bottom: 15px; + } +} + +/* Header Section */ + +header { + height: 400px; + background-image: url("../images/coffee-biscuits.jpg"); + background-size: cover; + background-position: center; + + /* Align text to the center */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + +.header-content { + background-color: rgba(0, 0, 0, 0.6); + padding: 20px 30px; + border-radius: 10px; + color: white; +} + +/* Cookies Section */ + +.row { + padding: 20px 30px; + text-align: center; +} + +/* About me Section */ +.about-us { + padding: 20px; + background-color: #ebedf1; +} + +.about-us h2 { + margin-bottom: 15px; + font-size: 24px; + + justify-content: center; + text-align: center; + + font-size: 25px; +} + +.about-content { + display: flex; + align-items: flex-start; + gap: 20px; +} + +.about-content img { + width: 20%; + max-width: 150px; +} + +.about-content p { + flex: 1; + margin: 0; + font-size: 14px; +} + +/* Footer Section */ + +footer { + height: 200px; + background-color: #9645f8; + background-size: cover; + background-position: center; + + /* Align text to the center */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + color: white; +} \ No newline at end of file diff --git a/index.html b/index.html index eae824d..764103b 100644 --- a/index.html +++ b/index.html @@ -3,48 +3,79 @@ + + + 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 + +
+
+

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

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

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

Contact us

@@ -53,5 +84,6 @@

Contact us

(212) 555-1234
+ From 1ecd559da7699076267bd98eb8f4765df2cdab3e Mon Sep 17 00:00:00 2001 From: Chris Date: Sun, 1 Sep 2024 21:53:54 -0400 Subject: [PATCH 2/5] Finished index.html --- HW Progress.md | 8 ++++++-- css/styles.css | 22 +++++----------------- 2 files changed, 11 insertions(+), 19 deletions(-) diff --git a/HW Progress.md b/HW Progress.md index 0b67d4c..f123d4d 100644 --- a/HW Progress.md +++ b/HW Progress.md @@ -1,9 +1,13 @@ Delete when Finished! --- Progress so far +-- (8/31) Arranged the site to match the same layout formulation as the image. Whats left for me to do it - Style up the Abous Us section image - Find a way to round the colors of the cookies -Also, I have not begun progress on alternating.html, will begin doing work on this once done with index.html \ No newline at end of file +Also, I have not begun progress on alternating.html, will begin doing work on this once done with index.html + +9/1 -- + +Finished index.html. It represents the image pretty accurately, I can go back and tweak it a bit, to add my own style. I didnt work on alternating.html today. \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index 500374f..bb66e5d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -3,17 +3,6 @@ body { font-size: 20px; } -@media (max-width: 768px) { - .about-content { - flex-direction: column; - } - - .about-content img { - width: 50%; - margin-bottom: 15px; - } -} - /* Header Section */ header { @@ -44,6 +33,10 @@ header { text-align: center; } +.cookie img { + border-radius: 50%; +} + /* About me Section */ .about-us { padding: 20px; @@ -69,12 +62,7 @@ header { .about-content img { width: 20%; max-width: 150px; -} - -.about-content p { - flex: 1; - margin: 0; - font-size: 14px; + border-radius: 50%; } /* Footer Section */ From a26c5ffd518fcb9a7151e76d49f3e4519d294a56 Mon Sep 17 00:00:00 2001 From: Chris Date: Sun, 1 Sep 2024 22:14:13 -0400 Subject: [PATCH 3/5] update 1 --- HW Progress.md | 27 ++++++++++++++++++++++++++- alternating.html | 48 ++++++++++++++++++++++++++++++++++-------------- 2 files changed, 60 insertions(+), 15 deletions(-) diff --git a/HW Progress.md b/HW Progress.md index f123d4d..990706a 100644 --- a/HW Progress.md +++ b/HW Progress.md @@ -1,5 +1,24 @@ Delete when Finished! +There are some outline templates that I need to complete + + - Set up the header | DONE + - able to use my own styling and classes + - I'll just replicate the image though + + - Round the cookie images, and do the bootstrap grid to make it scale + - Cookie section should replicate the image. + + - About me section + - try to replicate the image. was told to use a bootstrap grid. Make sure I did. + + - footer | DONE + - I have creative principles for this + + - alternating.html + - set up bootstrap grid + - set up alternating (see image for more info) + -- (8/31) Arranged the site to match the same layout formulation as the image. Whats left for me to do it @@ -10,4 +29,10 @@ Also, I have not begun progress on alternating.html, will begin doing work on th 9/1 -- -Finished index.html. It represents the image pretty accurately, I can go back and tweak it a bit, to add my own style. I didnt work on alternating.html today. \ No newline at end of file +Finished index.html. It represents the image pretty accurately, I can go back and tweak it a bit, to add my own style. I added bootstrap grid layout to alternating.html. But I need to figure out the offseting thing that was explained in the doc. After this, all of the checkboxes will be checked, and I can just edit the site how I want. + +9/2 -- + + - Check to see if the aboutme section represents a bootstrap layout + - Check the header function + - Try to figure out the alternating.html alternating thingy. \ No newline at end of file diff --git a/alternating.html b/alternating.html index a3f5035..83399e8 100644 --- a/alternating.html +++ b/alternating.html @@ -3,28 +3,48 @@ + 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 +
+
+
From 434f7d8edc435eaced294a2ef41dc7770af90ab5 Mon Sep 17 00:00:00 2001 From: Chris Date: Mon, 2 Sep 2024 19:20:53 -0400 Subject: [PATCH 4/5] 80% done --- HW Progress.md | 4 +++- alternating.html | 50 ++++++++++++++++++++++++++++++++---------------- css/styles.css | 4 +--- 3 files changed, 38 insertions(+), 20 deletions(-) diff --git a/HW Progress.md b/HW Progress.md index 990706a..c80b198 100644 --- a/HW Progress.md +++ b/HW Progress.md @@ -35,4 +35,6 @@ Finished index.html. It represents the image pretty accurately, I can go back an - Check to see if the aboutme section represents a bootstrap layout - Check the header function - - Try to figure out the alternating.html alternating thingy. \ No newline at end of file + - Try to figure out the alternating.html alternating thingy. + + I finished all the check boxes. I just need to refine some of what I learnt. Like bootgrid for html was a bit confusing, so i need to udnerstand it better. but I finished the homework! \ No newline at end of file diff --git a/alternating.html b/alternating.html index 83399e8..91657be 100644 --- a/alternating.html +++ b/alternating.html @@ -3,44 +3,62 @@ + + Cookie Store -
-
-

Our Cookies

+
+
+

Our Cookies

Checkout our latest and delicious cookies.

+
-
+
+
+

Mint Chocolate

+

Tasty mint chocolate cookies

+
+
-

Mint Chocolate

-

Tasty mint chocolate cookies

A single mint chocolate cookie
+
-
+
+
+

Peanut Butter

+

Yummy peanut buttery goodness

+
+
-

Peanut Butter

-

Yummy peanut buttery goodness

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

+
+
-

Chocolate Chip

-

Gooey chocolate you'll love

A single chocolate chip cookie
diff --git a/css/styles.css b/css/styles.css index bb66e5d..73e3546 100644 --- a/css/styles.css +++ b/css/styles.css @@ -45,12 +45,10 @@ header { .about-us h2 { margin-bottom: 15px; - font-size: 24px; + font-size: 25px; justify-content: center; text-align: center; - - font-size: 25px; } .about-content { From 64bc627d766092b23767bee15a3ab8cd669dbb31 Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 4 Sep 2024 18:24:14 -0400 Subject: [PATCH 5/5] FInalizing the project --- HW Progress.md | 40 -------------------------- alternating.html | 73 +++++++++++++++++++++++++++++++++++++----------- index.html | 66 ++++++++++++++++++++++++++++++------------- 3 files changed, 104 insertions(+), 75 deletions(-) delete mode 100644 HW Progress.md diff --git a/HW Progress.md b/HW Progress.md deleted file mode 100644 index c80b198..0000000 --- a/HW Progress.md +++ /dev/null @@ -1,40 +0,0 @@ -Delete when Finished! - -There are some outline templates that I need to complete - - - Set up the header | DONE - - able to use my own styling and classes - - I'll just replicate the image though - - - Round the cookie images, and do the bootstrap grid to make it scale - - Cookie section should replicate the image. - - - About me section - - try to replicate the image. was told to use a bootstrap grid. Make sure I did. - - - footer | DONE - - I have creative principles for this - - - alternating.html - - set up bootstrap grid - - set up alternating (see image for more info) - --- (8/31) - -Arranged the site to match the same layout formulation as the image. Whats left for me to do it - - Style up the Abous Us section image - - Find a way to round the colors of the cookies - -Also, I have not begun progress on alternating.html, will begin doing work on this once done with index.html - -9/1 -- - -Finished index.html. It represents the image pretty accurately, I can go back and tweak it a bit, to add my own style. I added bootstrap grid layout to alternating.html. But I need to figure out the offseting thing that was explained in the doc. After this, all of the checkboxes will be checked, and I can just edit the site how I want. - -9/2 -- - - - Check to see if the aboutme section represents a bootstrap layout - - Check the header function - - Try to figure out the alternating.html alternating thingy. - - I finished all the check boxes. I just need to refine some of what I learnt. Like bootgrid for html was a bit confusing, so i need to udnerstand it better. but I finished the homework! \ No newline at end of file diff --git a/alternating.html b/alternating.html index 91657be..854ecf3 100644 --- a/alternating.html +++ b/alternating.html @@ -4,11 +4,33 @@ - - + + Cookie Store + !-- Bootstrap --> + + + +

Our Cookies

@@ -16,50 +38,69 @@

Our 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

+
+

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 + A single chocolate chip cookie
diff --git a/index.html b/index.html index 764103b..ecdff72 100644 --- a/index.html +++ b/index.html @@ -3,17 +3,34 @@ - + - + Cookie Store - - - - + + + +
@@ -23,7 +40,7 @@

Cookie Store

- +

Our Cookies

@@ -32,28 +49,40 @@

Our 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 + A single chocolate chip cookie
@@ -65,13 +94,13 @@

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. + 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.
@@ -84,6 +113,5 @@

Contact us

(212) 555-1234
-