diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 31b7ee7..208bdf4 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -11,11 +11,11 @@ TITLE: Include your section in the pull request title ## What section are you in: -- [ ] Tuesday -- [ ] Wednesday -- [ ] Thursday -- [ ] Friday 3pm -- [ ] Friday 6pm +- [ ] Tuesday +- [ ] Wednesday +- [ ] Thursday +- [ ] Friday 3pm +- [X] Friday 6pm **Is the solution complete?** diff --git a/README.md b/README.md index 590cfc4..a0976d9 100644 --- a/README.md +++ b/README.md @@ -32,8 +32,7 @@ In this lab, you are given an [index.html](index.html) file that contains our we - Starting on [medium `md` screens](screenshots/index-md-screen.png), 2 cookies per row - Starting on [large `lg` screens](screenshots/index-lg-screen.png), 4 cookies per row - Read about making your [images responsive](https://getbootstrap.com/docs/5.2/content/images/) - -2. Apply styling and classes so that the title text is displayed centered within the `
` section. Below are some hints on how to do this: +2. Apply styling and classes so that the title text is displayed centered within the `
` section. Below are some hints on how to do this: - Use custom styles for this section - Give the header section a fixed height, I used 400px @@ -41,7 +40,6 @@ In this lab, you are given an [index.html](index.html) file that contains our we - Read about how to center a div block - Choose a background image of your own or use [the image provided](images/coffee-biscuits.jpg) - There are multiple ways to solve this section - 3. Style the "About us" section and the `
` section of the page to display similar to the [screenshots](screenshots/index-lg-screen.png) - Use a grid for the "About us" section @@ -51,7 +49,7 @@ In this lab, you are given an [index.html](index.html) file that contains our we 1. Open the [alternating.html](alternating.html) page in your code editor 2. Open the [alternating.html](alternating.html) page in your web browser -3. Using only bootstrap grid styles make the cookie products alternate as shown and described in the following screenshots: +3. Using only bootstrap grid styles make the cookie products alternate as shown and described in the following screenshots: - On [mobile screens](screenshots/alternating-mobile-screen.png), display 1 cookie per row - Starting on [medium `md` screens](screenshots/alternating-md-screen.png), display the cookie image and details on the same row, but alternate the order of these two on every row diff --git a/alternating.html b/alternating.html index a3f5035..a547290 100644 --- a/alternating.html +++ b/alternating.html @@ -4,27 +4,43 @@ 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 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..34fdd72 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,42 @@ /* Add custom css styles here */ +header { + height: 400px; + background-size: cover; + align-items: center; + justify-content: center; + display: flex; + background-image: url('../images/coffee-biscuits.jpg'); + +} + +.header-text { + color: white; + background: rgba(35, 35, 35, .65); + padding: 2em; + text-align: center; + border-radius: 1em; +} + +main { + margin-top: 2em; +} + +.aboutus { + align-items: center; + margin-top: 4em; + padding-top: 2em; + padding-bottom: 2em; + background-color: rgb(242, 242, 242); +} + +.aboutus h2 { + text-align: center; +} + +footer { + background-color: rgb(75, 121, 183); + text-align: center; + padding-top: 2em; + padding-bottom: 2em; +} + \ No newline at end of file diff --git a/index.html b/index.html index eae824d..73bd58e 100644 --- a/index.html +++ b/index.html @@ -4,45 +4,68 @@ 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 +
+
+

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 +
- 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. +
+
@@ -53,5 +76,7 @@

Contact us

(212) 555-1234
+ +