From 778b88eacdad0de8feba40d072f74b3b28cdac4a Mon Sep 17 00:00:00 2001 From: Chris Panican Date: Tue, 5 Sep 2017 14:45:57 -0400 Subject: [PATCH 1/3] First commit --- css/styles.css | 28 ++++++++++++++++ index.html | 89 +++++++++++++++++++++++++++++++++----------------- 2 files changed, 87 insertions(+), 30 deletions(-) diff --git a/css/styles.css b/css/styles.css index 8b13789..dc8b48c 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,29 @@ +#images_border { + border-radius: 50%; + width: 230px; +} +.img_banner { + background-image: url(../img/milkbg.jpg); + position: relative; + margin-top: -20px; + height: 450px; + width: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + color: white; +} + +#banner_txt { + +} + +#about_us { + background-color: #D3D3D3; +} + +#contact_us { + background-color: #19A0D0; + color: white; +} \ No newline at end of file diff --git a/index.html b/index.html index e2bedec..a750632 100644 --- a/index.html +++ b/index.html @@ -2,46 +2,75 @@ Cookie Store + + + + +
+ +
-

Cookie Store

- -

Buy our awesome cookies. All proceeds go to charity!

- -

The Cookies

- -

Thin Mint Cookies

-

Tasty mint chocolate cookies

- -

Peanut Butter Cookies

-

Yummy peanut buttery goodness!

- -

Short Bread Cookies

-

Santa's favorite classic.

- +
+
+

The Cookies

+
+

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!

+ +
+
+
-

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

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

Contact us

+
+ 100 Broadway Avenue,
+ New York, NY 10001
+ (212) 555-1234 +
+ From 37bd2e60e4b0c876172c0ef838b11b33c78cbb48 Mon Sep 17 00:00:00 2001 From: Chris Panican Date: Tue, 5 Sep 2017 18:04:55 -0400 Subject: [PATCH 2/3] Finished --- css/styles.css | 58 ++++++++++++++++++++++++++++++++++++++++++++++---- index.html | 7 +++--- 2 files changed, 58 insertions(+), 7 deletions(-) diff --git a/css/styles.css b/css/styles.css index dc8b48c..f33895c 100644 --- a/css/styles.css +++ b/css/styles.css @@ -7,23 +7,73 @@ background-image: url(../img/milkbg.jpg); position: relative; margin-top: -20px; - height: 450px; + height: 600px; width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; - color: white; } -#banner_txt { - +@media only screen and (min-width: 992px) { + #banner_txt { + color: white; + background-color: rgba(0, 0, 0, 0.5); + position: absolute; + top: 100px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + width: 800px; + padding: 100px 170px 100px 170px; + } + + #banner_txt h1 { + font-size: 64px; + font-weight: bold; + } + + #banner_txt p { + font-size: 24px; + } +} + +@media only screen and (min-width: 0px) and (max-width: 991px) { + #banner_txt { + color: white; + background-color: rgba(0, 0, 0, 0.5); + position: absolute; + top: 80px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + width: 500px; + padding: 100px 60px 100px 60px; + } + + #banner_txt h1 { + font-size: 64px; + font-weight: bold; + } + + #banner_txt p { + font-size: 24px; + } +} + +#cookies { + margin-top: 20px; + margin-bottom: 60px; } #about_us { background-color: #D3D3D3; + padding: 15px 10px 25px 10px; } #contact_us { background-color: #19A0D0; + padding: 15px 0px 0px 15px; color: white; } \ No newline at end of file diff --git a/index.html b/index.html index a750632..a069da9 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,9 @@ Cookie Store - + + @@ -18,11 +19,11 @@

Cookie Store

-
+

The Cookies

-

Thin Mint Cookies

+

Thin Mint Cookies New

Tasty mint chocolate cookies

From 251e1691eb03d63d54133dc7ac2aa308c75bbd47 Mon Sep 17 00:00:00 2001 From: Chris Panican Date: Tue, 5 Sep 2017 22:26:03 -0400 Subject: [PATCH 3/3] Finished 2.0 --- css/styles.css | 4 ++- index.html | 71 ++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 54 insertions(+), 21 deletions(-) diff --git a/css/styles.css b/css/styles.css index f33895c..a52d29f 100644 --- a/css/styles.css +++ b/css/styles.css @@ -18,6 +18,7 @@ #banner_txt { color: white; background-color: rgba(0, 0, 0, 0.5); + border-radius: 10px; position: absolute; top: 100px; left: 0; @@ -42,6 +43,7 @@ #banner_txt { color: white; background-color: rgba(0, 0, 0, 0.5); + border-radius: 10px; position: absolute; top: 80px; left: 0; @@ -74,6 +76,6 @@ #contact_us { background-color: #19A0D0; - padding: 15px 0px 0px 15px; + padding: 15px 0px 25px 15px; color: white; } \ No newline at end of file diff --git a/index.html b/index.html index a069da9..2f72637 100644 --- a/index.html +++ b/index.html @@ -21,26 +21,57 @@

Cookie Store

-

The Cookies

-
-

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


+ +
+
+

Thin Mint Cookies New

+

Tasty mint chocolate cookies

+
+
+ +
+

+ +
+ + + + +

+ +
+
+

Short Bread Cookies

+

Santa's favorite classic.

+
+
+ +
+

+ +
+ + +