diff --git a/css/styles.css b/css/styles.css index 8b13789..003c8d4 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,59 @@ +/* index.html styles */ +*{ + text-align: center; +} + +.cookies{ + border-radius: 50%; +} + +header{ + background-image: url('../img/milkbg.jpg'); + background-size: cover; + background-position: center; + height: 400px; +} +header div { + color: white; + background-color: rgba(0, 0, 0, 0.5); + padding: 50px; + margin: auto; + width: 400px; + position: relative; + top: 20%; + border-radius: 2%; +} +h3 span{ + background-color: tomato; + color: white; + font-size: medium; + border-radius: 10%; +} + +article{ + background-color: rgb(209, 209, 209); + height: 250px; + +} +article img { + float:left; + margin-right: 40px; +} +article div{ + text-align: left; +} +footer{ + background-color:deepskyblue; + color: white; +} +.row{ + margin: 10px 0; + padding: 0 30px; +} +h2{ + padding: 20px 0; +} +p{ + font-family: 'Oswald', sans-serif; +} \ No newline at end of file diff --git a/index.html b/index.html index e2bedec..6dfd630 100644 --- a/index.html +++ b/index.html @@ -2,46 +2,76 @@ Cookie Store + + + + + +
+
+

Cookie Store

+

Buy our awesome cookies. All proceeds go to charity!

+
+ +
-

Cookie Store

+

The Cookies

-

Buy our awesome cookies. All proceeds go to charity!

+
+
+
+

Thin Mint Cookies NEW

+

Tasty mint chocolate cookies

+
+ +
+
+
+

Peanut Butter Cookies

+

Yummy peanut buttery goodness!

+
+ +
+
+
+

Short Bread Cookies

+

Santa's favorite classic.

+
+ +
+
+
+

Smore's Cookies

+

Camp fire favorite!

+
+ +
+
-

The Cookies

+
+ cartoon +
+

About us

-

Thin Mint Cookies

-

Tasty mint chocolate cookies

- - -

Peanut Butter Cookies

-

Yummy peanut buttery goodness!

- - -

Short Bread Cookies

-

Santa's favorite classic.

- - -

Smore's Cookies

-

Camp fire favorite!

- - -

About us

-
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

-
- 100 Broadway Avenue,
- New York, NY 10001
- (212) 555-1234 -
+
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.
+
+
+ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..80da101 --- /dev/null +++ b/styles.css @@ -0,0 +1,58 @@ +/* index.html styles */ +*{ + text-align: center; +} + +.cookies{ + border-radius: 50%; +} + +header{ + background-image: url('../img/milkbg.jpg'); + background-size: cover; + background-position: center; + height: 400px; +} +header div { + color: white; + background-color: rgba(0, 0, 0, 0.5); + padding: 50px; + margin: auto; + width: 400px; + position: relative; + top: 20%; + border-radius: 2%; +} +h3 span{ + background-color: tomato; + color: white; + font-size: medium; + border-radius: 10%; +} + +article{ + background-color: rgb(209, 209, 209); + height: 250px; + +} +article img { + float:left; + margin-right: 40px; +} +article div{ + text-align: left; +} +footer{ + background-color:deepskyblue; + color: white; +} +.row{ + margin: 10px 0; + padding: 0 30px; +} +h2{ + padding: 20px 0; +} +p{ + font-family: 'Oswald', sans-serif; +} \ No newline at end of file