From 7ab34ab0eb24cd26e0db895d1d01a7ff958def8a Mon Sep 17 00:00:00 2001 From: Harjit Date: Thu, 16 Sep 2021 19:58:30 -0400 Subject: [PATCH 1/2] finished lab --- css/styles.css | 90 ++++++++++++++++++++++++++++++++ index.html | 139 +++++++++++++++++++++++++++++++++++-------------- 2 files changed, 190 insertions(+), 39 deletions(-) diff --git a/css/styles.css b/css/styles.css index 8b13789..e7fd08b 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,91 @@ +.imageBorder { + border-radius: 50%; + display: block; + /* margin-left: auto; + margin-right: auto; */ +} +.milkBackground { + background-image: url("../img/milkbg.jpg"); + width: 100vw; + height: 100vh; + background-repeat: no-repeat; + background-size: cover; +} + +.headerBox { + display: flex; + width: 100vw; + height: 100vh; + justify-content: center; + align-items: center; +} + +.headerBackground { + display: flex; + flex-direction: column; + align-items: center; + height: 450px; + width: 700px; + background-color: rgba(0, 0, 0, 0.8); + border-radius: 10px; + color: white; +} + +.headerTextBox { + display: flex; + width: 100vw; + height: 100%; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.header { + color: white; + text-align: center; + font-size: 4rem; + font-weight: bold; +} + +.motto { + color: white; + text-align: center; + font-size: 1.5rem; +} + +.aboutSection { + display: flex; + flex-direction: row; + width: 100vw; + background-color: lightgray; + margin-top: 1.5rem; + padding: 2rem; +} + +.imageContainer { + display: flex; + flex-direction: row; + justify-content: center; +} + +.aboutBox { + display: flex; + flex-direction: column; + + /* width: 100vw; */ +} + +.aboutText { + /* width: 900px; */ +} + +.footer { + display: flex; + align-items: center; + flex-direction: column; + width: 100vw; + background-color: #19a0d0; + padding: 2rem; + color: white; +} diff --git a/index.html b/index.html index e2bedec..6a9285e 100644 --- a/index.html +++ b/index.html @@ -1,47 +1,108 @@ - - Cookie Store - - + + + + + Cookie Store + + +
+
+
+
+
+

Cookie Store

+

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

+
+
+
+
+
+

The Cookies

-

Cookie Store

+
+
+ +
+
+
+

+ Thin Mint Cookies New +

+

Tasty mint chocolate cookies

+
+ +
+
-

Buy our awesome cookies. All proceeds go to charity!

+ +
+
+
+

Peanut Butter Cookies

+

Yummy peanut buttery goodness!

+
+ +
+
-

The Cookies

+ +
+
+
+

Short Bread Cookies

+

Santa's favorite classic.

+
+ +
+
-

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

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 +
+
+ From f395a52f34ddc7db59fcae3d51ec0653ba5b2020 Mon Sep 17 00:00:00 2001 From: Harjit Date: Thu, 16 Sep 2021 20:18:14 -0400 Subject: [PATCH 2/2] added final google fonts --- css/styles.css | 30 ++++++++++++++++++++++++++++-- index.html | 28 +++++++++++++++++----------- 2 files changed, 45 insertions(+), 13 deletions(-) diff --git a/css/styles.css b/css/styles.css index e7fd08b..02a9152 100644 --- a/css/styles.css +++ b/css/styles.css @@ -46,12 +46,31 @@ text-align: center; font-size: 4rem; font-weight: bold; + font-family: "Poppins", sans-serif; } .motto { color: white; text-align: center; font-size: 1.5rem; + font-family: "Lato", sans-serif; +} + +.cookieName { + color: black; + text-align: center; + font-size: 2rem; + font-weight: bold; + font-family: "Poppins", sans-serif; + margin-top: 1.5rem; +} + +.cookieDescription { + color: black; + text-align: center; + font-size: 1rem; + font-weight: bold; + font-family: "Lato", sans-serif; } .aboutSection { @@ -72,16 +91,23 @@ .aboutBox { display: flex; flex-direction: column; +} - /* width: 100vw; */ +.aboutHeader { + font-family: "Poppins", sans-serif; + font-weight: bold; + text-align: center; } .aboutText { - /* width: 900px; */ + font-family: "Lato", sans-serif; + font-weight: bold; + text-align: center; } .footer { display: flex; + font-family: "Poppins", sans-serif; align-items: center; flex-direction: column; width: 100vw; diff --git a/index.html b/index.html index 6a9285e..99afb47 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,12 @@ integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" /> + + + + + + Cookie Store @@ -27,18 +33,18 @@

Cookie Store

-

The Cookies

+

The Cookies

-
+
-

+

Thin Mint Cookies New

-

Tasty mint chocolate cookies

+

Tasty mint chocolate cookies

@@ -48,8 +54,8 @@

-

Peanut Butter Cookies

-

Yummy peanut buttery goodness!

+

Peanut Butter Cookies

+

Yummy peanut buttery goodness!

@@ -59,8 +65,8 @@

Peanut Butter Cookies

-

Short Bread Cookies

-

Santa's favorite classic.

+

Short Bread Cookies

+

Santa's favorite classic.

@@ -70,8 +76,8 @@

Short Bread Cookies

-

Smore's Cookies

-

Camp fire favorite!

+

Smore's Cookies

+

Camp fire favorite!

@@ -83,7 +89,7 @@

Smore's Cookies

-

About us

+

About us

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad