diff --git a/css/styles.css b/css/styles.css index 3c3f2b6..4f87f87 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,49 @@ -/* Add custom css styles here */ +.header { + position: relative; + height: 400px; + color: white; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + .header-img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: -1; + } + .header-content{ + background-color: rgba(22, 18, 18, 0.383); + border-radius: 10%; + } + + .header-content { + text-align: center; + } + + .img-fluid{ + border-radius: 50%; + } + + + .about-us { + margin-top: 40px; + background-color: #babdcf; + } + + .about-us img { + max-width: 50%; + height: auto; + } + + .footer h2 { + background-color: #1931a7; + color: white; + padding: 20px 0; + text-align: center; + } + \ No newline at end of file diff --git a/index.html b/index.html index eae824d..5656ab9 100644 --- a/index.html +++ b/index.html @@ -1,52 +1,62 @@ + + Cookie Store -
-

Cookie Store

-

Buy our awesome cookies. All proceeds go to charity!

+
+ Coffee biscuits +
+

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

+ Tasty mint chocolate cookies +
+
+

Peanut Butter

+

Yummy peanut buttery goodness

+ Yummy peanut buttery goodness +
+
+

Oatmeal

+

Your fitness instructor's favorite

+ Your fitness instructor's favorite +
+
+

Chocolate Chip

+

Gooey chocolate you'll love

+ Gooey chocolate you'll love +
+
-
-

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.

+
-
-