diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 31b7ee7..891a7ee 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -15,7 +15,7 @@ TITLE: Include your section in the pull request title - [ ] Wednesday - [ ] Thursday - [ ] Friday 3pm -- [ ] Friday 6pm +- [X] Friday 6pm **Is the solution complete?** diff --git a/alternating.html b/alternating.html index a3f5035..be70e73 100644 --- a/alternating.html +++ b/alternating.html @@ -1,4 +1,71 @@ + + + + + Cookie Store - Alternating Layout + + + + +
+

Our Cookies

+

Checkout our latest and delicious cookies.

+ + +
+
+ A single mint chocolate cookie +
+
+

Mint Chocolate

+

Tasty mint chocolate cookies

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

Peanut Butter

+

Yummy peanut buttery goodness

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

Oatmeal

+

Your fitness instructors favorite

+
+
+ + +
+
+ A single chocolate chip cookie +
+
+

Chocolate Chip

+

Gooey chocolate you'll love

+
+
+ +
+ + + + + + + + + diff --git a/css/styles.css b/css/styles.css index 3c3f2b6..14c9e86 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,346 @@ -/* Add custom css styles here */ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; +} + +header { + background-image: url('../images/coffee-biscuits.jpg'); + background-size: cover; + background-position: center; + height: 300px; + display: flex; + justify-content: center; + align-items: center; +} + +header .text-white { + background-color: rgba(0, 0, 0, 0.75); + border-radius: 15px; +} + +header h1 { + font-size: 2.5rem; + margin: 0; +} + +header p { + margin-top: 10px; +} + +main .row h2 { + font-size: 2rem; +} + +main .row p { + font-size: 1.2rem; + margin-bottom: 20px; +} + +main .col-md-6.col-lg-3 h3 { + font-size: 1.5rem; + margin-top: 10px; +} + +main .col-md-6.col-lg-3 img { + width: 150px; + height: 150px; + object-fit: cover; + margin-top: 10px; +} + +.bg-light { + padding-top: 50px; + padding-bottom: 50px; +} + +.bg-light h2 { + font-size: 2rem; + margin-bottom: 20px; +} + +.bg-light img { + width: 80px; + height: 80px; + margin-right: 15px; +} + +.bg-light .col-9 { + font-size: 1rem; + line-height: 1.6; +} + +footer { + background-color: #007bff; + color: white; + text-align: center; + padding: 30px 0; +} + +footer h2 { + margin-bottom: 20px; +} + +footer div { + font-size: 1.2rem; +} + +@media (max-width: 992px) { + header { + height: 250px; + } + + header h1 { + font-size: 2rem; + } + + main .row h2 { + font-size: 1.75rem; + } + + main .col-md-6.col-lg-3 img { + width: 120px; + height: 120px; + } + + .bg-light img { + width: 60px; + height: 60px; + } + + footer div { + font-size: 1rem; + } +} + +@media (max-width: 768px) { + header { + height: 200px; + } + + header h1 { + font-size: 1.75rem; + } + + header p { + font-size: 1rem; + } + + main .row h2 { + font-size: 1.5rem; + } + + main .col-md-6.col-lg-3 img { + min-width: 50px; + width: 100px; + height: 100px; + } + + .bg-light img { + width: 50px; + height: 50px; + } + + .bg-light .col-9 { + font-size: 0.9rem; + } + + footer div { + font-size: 0.9rem; + } +} + + + + + + + +/* +* { + text-align: center; +} + +body { + font-family: Arial, sans-serif; +} + + +.header-container { + max-width: 1000px; + width: 100%; + height: auto; + background-image: url("images/coffee-biscuits.jpg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + position: relative; +} + +.header-text-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: rgba(0, 0, 0, 0.7); + color: white; + padding: 30px; + border-radius: 10px; + width: 80%; + max-width: 500px; +} +.coffee-image{ + z-index: 0; + max-width: 150px; + margin: 20px 0; +} +.item1 h1 { + font-size: 2.5rem; +} + +.item2 p { + font-size: 1.2rem; +} + +main { + height: 400px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.cookie-container { + margin: 20px 0; + border-radius: 50%; +} + +.cookie-img { + max-width: 100px; + border: 5px solid transparent; + border-radius: 50%; +} + +.row .col-6 { + margin-bottom: 20px; + justify-content: center; + display: flex; +} + +@media (min-width: 768px) { + .cookie-img { + max-width: 150px; + } +} + +.about-us { + padding: 40px 0; +} + +.about-img { + max-width: 150px; + margin: 20px 0; + max-width: 600px; + +} + + +.footer { + background-color: #007bff; + color: white; + padding: 30px 0; + max-width: 600px; + +} + +.footer h2 { + margin-bottom: 20px; + max-width: 600px; + +} + + +@media (max-width: 767px) { + + + .coffee-image{ + max-width: 600px; + min-with: 52px; + } + .header-container{ + height: 600px; + } + + .item1 h1 { + font-size: 2rem; + } + + .item2 p { + font-size: 1rem; + } + + .col-6 { + max-width: 80px; + } + + .col-md-3{ + max-width: 80px; + } + + + + .about-img { + max-width: 100px; + } +} + + + + +/* *{ + text-align: center; +} + +.header-container { + width: 100%; + height: 1100px; + border: solid 5px red; + background-image: url("images/coffee-biscuits.jpg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + position: relative; +} + +.header-text-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: grid; + width: 500px; + height: 200px; + margin: 0 auto; + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + background-color: black; + opacity: 0.4; + border-radius: 25px; + z-index: 2; +} + +.item1, .item2 { + color: white; + font-weight: 300; + text-align: center; + margin: 0 auto; + box-sizing: border-box; +} + +.item1 { + padding-top: 10%; +} + +.item2 { + padding-bottom: 20%; +} */ diff --git a/index.html b/index.html index eae824d..af872c1 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,224 @@ + + + + + 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

+ Mint chololate cookie +
+ +
+

Peanut Butter

+

Yummy peanut buttery goodness

+ Peanut butter cookie +
+ +
+

Oatmeal

+

Your fitness instructor's favorite

+ Oatmeal cookie +
+ +
+

Chocolate Chip

+

Gooey chocolate you'll love

+ Chocolate chip cookie +
+
+
+
+
+
+
+

About us

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