From 867702b6fe01ae85a5284014395a514548744ae5 Mon Sep 17 00:00:00 2001 From: Edward Paez Date: Thu, 16 Sep 2021 10:02:30 -0400 Subject: [PATCH 1/2] 90% done --- css/styles.css | 65 ++++++++++++++++++++++++++++++ index.html | 107 ++++++++++++++++++++++++++++++------------------- 2 files changed, 131 insertions(+), 41 deletions(-) diff --git a/css/styles.css b/css/styles.css index 8b13789..bc64a76 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,66 @@ +.cookie-img { + display: block; + border-radius: 50%; + margin: 0 auto; +} +.center-text { + text-align: center; +} + +.hero-wrapper { + background-image: url('../img/milkbg.jpg'); + background-repeat: no-repeat; + background-size: cover; + height: 100vh; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + /* background-position: center; */ +} + +.hero-content { + color: white; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + background: rgba(0, 0, 0, 0.8); + height: 350px; + width: 600px; +} + +.hero-content p { + font-size: 1.1rem; + font-weight: bold; +} + +.hero-content h1 { + font-size: 5rem; +} + +.about-us-section { + /* display: flex; */ + background: lightgray; + padding: 1rem; + /* align-items: center; */ + /* justify-content: center; */ +} + +.about-us-text { + /* display: flex; + flex-direction: column; + align-items: center; */ + display: inline-block; +} + +/* .about-us-text div { + width: 80%; +} */ + +.contact-us-section { + background: #028ccb; + color: white; + padding: 1rem; +} diff --git a/index.html b/index.html index e2bedec..bcfcaf6 100644 --- a/index.html +++ b/index.html @@ -1,47 +1,72 @@ - - Cookie Store - - + + Cookie Store + + + + +
+
+

Cookie Store

+

+ Buy our awesome cookies. All proceeds go to charity! +

+
+
-

Cookie Store

+

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!

+ +
+
+
+ cookie monster +
+

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

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.

- - -

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

Contact us

+
+ 100 Broadway Avenue,
+ New York, NY 10001
+ (212) 555-1234 +
+
+ From 462ab09fd47945c903fbf6dca03ce59f6b6b949e Mon Sep 17 00:00:00 2001 From: Edward Paez Date: Thu, 16 Sep 2021 20:38:13 -0400 Subject: [PATCH 2/2] Lab complete --- css/styles.css | 6 ++++- index.html | 70 +++++++++++++++++++++++++++++++++++--------------- 2 files changed, 55 insertions(+), 21 deletions(-) diff --git a/css/styles.css b/css/styles.css index bc64a76..079022e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,3 +1,7 @@ +* { + font-family: 'Montserrat', sans-serif; +} + .cookie-img { display: block; border-radius: 50%; @@ -41,7 +45,7 @@ } .about-us-section { - /* display: flex; */ + display: flex; background: lightgray; padding: 1rem; /* align-items: center; */ diff --git a/index.html b/index.html index bcfcaf6..291849a 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,9 @@ integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" /> + + +
@@ -21,28 +24,55 @@

Cookie Store

+

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!

- -
+
+
+
+
+

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!

+
+ +
+
+
cookie monster