From 87011d28146c2afc72646ff301ffff1d90e4323a Mon Sep 17 00:00:00 2001 From: Moustafa Date: Fri, 8 Sep 2017 18:42:37 -0400 Subject: [PATCH 1/2] completed --- README.md | 5 +- css/styles.css | 61 ++++++++++++++++++++++ index.html | 134 +++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 169 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 66b4d47..bb01b18 100644 --- a/README.md +++ b/README.md @@ -16,10 +16,7 @@ - ![smaller screens](screenshots/cookie-store-mobile-screen.png) 4. Using only bootstrap styles, and not moving any html tags, make the cookie products alternate as follows on larger screens: - ![larger screens](screenshots/cookie-store-large-screen-alt.png) - - _Hint:_ Look into the push and pull classes - - *Clarifications* - + _Don't_ change the order of the 3 main cookie html tags, the `h3`, followed by the `p`, and then the `img` tags. _Remember, we want to keep semantic order._ - + You can add `div`'s and bootstrap classes as needed, you can wrap any tags in divs as needed, as long as you don't change the order. + - _Hint:_ Look into the push and pull classes ## Project 2: Build a personal (professional) web page for yourself diff --git a/css/styles.css b/css/styles.css index 8b13789..f006133 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,62 @@ + +.col-centered{ + float: none; + margin: 0 auto; +} + + +.banner { + background: url("../img/milkbg.jpg") no-repeat center; + background-size: cover; + margin: 0; +} + +.title{ + color: white; + background-color: rgba(0, 0, 0, 0.6); + margin: 10% 25%; + padding: 50px 20px 50px 20px ; + /*float: none;*/ + } + +.about{ + background-color: rgb(195, 198, 204); + margin-top: 20px; +} + +.contact{ + background-color: rgb(64, 156, 206); + color: white; +} + + +.cookie{ + border-radius: 100%; + height : auto; + margin: auto; +} + +.about, .contact{ + font-size: 1.4em; + padding: 20px; + padding-bottom: 40px; +} + +.title h1{ + font-size: 80px; +} + +.title p { + font-size: 27px; +} + + .btn{ + font-weight: 600; + padding:1% 2%; +} + +.btn-h3{ + display: inline-block; + margin:0; +} diff --git a/index.html b/index.html index e2bedec..c1762f2 100644 --- a/index.html +++ b/index.html @@ -1,47 +1,127 @@ + Cookie Store + + + +
+ + + +
+
+
+

The Cookies

+
+
+
+ +
+ +
+ +
+

 Thin Mint Cookies 

+ +

Tasty mint chocolate cookies

+ -

Cookie Store

+
-

Buy our awesome cookies. All proceeds go to charity!

+
+

Peanut Butter Cookies

+

Yummy peanut buttery goodness!

+ +
-

The Cookies

+
-

Thin Mint Cookies

-

Tasty mint chocolate cookies

- +

Short Bread Cookies

+

Santa's favorite classic.

+ -

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

Contact us

-
- 100 Broadway Avenue,
- New York, NY 10001
- (212) 555-1234 +
+ +
+
+
+

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.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 +
+
+
+
+ From e9be3eac4f85765a15a4c9a781689198f9dd180b Mon Sep 17 00:00:00 2001 From: Moustafa Date: Fri, 8 Sep 2017 19:09:22 -0400 Subject: [PATCH 2/2] completed --- css/styles.css | 9 +++ index.html | 186 ++++++++++++++++++++++++++++--------------------- 2 files changed, 115 insertions(+), 80 deletions(-) diff --git a/css/styles.css b/css/styles.css index f006133..f3eaf23 100644 --- a/css/styles.css +++ b/css/styles.css @@ -60,3 +60,12 @@ display: inline-block; margin:0; } + +.cookies{ + margin-top: 25px; +} + +.my-nav-bar{ + color: white; + background-color: rgba(0, 0, 0, 0.6); +} diff --git a/index.html b/index.html index c1762f2..54648b9 100644 --- a/index.html +++ b/index.html @@ -2,126 +2,152 @@ + Cookie Store -
+
-