From 2f2011ad257c25c3f674cd03acc918b3ff1a2c71 Mon Sep 17 00:00:00 2001 From: Alex-Pro-commit <73656348+Alex-Pro-commit@users.noreply.github.com> Date: Thu, 9 Sep 2021 08:21:27 -0400 Subject: [PATCH 1/2] non final version --- .vscode/launch.json | 18 +++++++++ css/styles.css | 69 ++++++++++++++++++++++++++++++++ index.html | 97 +++++++++++++++++++++++++++++++-------------- 3 files changed, 155 insertions(+), 29 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..ca055ea --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,18 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + + + + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8000", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index 8b13789..335a433 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,70 @@ + +.header-content{ + + margin-bottom:70px; +} + +.innerbox{ + + background-color:black; + opacity:0.7; + height:30%; + width:35%; + min-height:205px; + min-width: 150px; + top:15%; + margin-left:35%; + margin-right:35%; + position:absolute; + border-radius: 5px; + padding-top:5% ; + +} +.Title{ + + text-align:center; + +} +.Buy{ + text-align:center; + + +} + +.All-cookies{ + border: 2px dotted rgb(202, 23, 53); +} + +.Mint-Cookies{ + border: 2px dotted rgb(202, 23, 142); +} + + +.Peanut-Butter-Cookies{ + border: 2px dotted rgb(169, 202, 23); +} + + +.Short-Bread-Cookies{ + border: 2px dotted rgb(26, 23, 202); +} + +.Smores-Cookies{ + border: 2px dotted rgb(202, 89, 23); +} + +.All-cookies img{ + display: block; + margin: auto; + width:120px; + height: 60px; + border-radius:50% ; + +} + +.wrapper{ + margin-left:25px; + margin-right:25px; + +} diff --git a/index.html b/index.html index e2bedec..abf5532 100644 --- a/index.html +++ b/index.html @@ -2,46 +2,85 @@ Cookie Store + + +
+ +
+
+ card image +
+

Cookie Store

+

Buy our awesome cookies. All proceeds go to charity!

+
+
+
-

Cookie Store

- -

Buy our awesome cookies. All proceeds go to charity!

+
+

The Cookies

+
+
+
+ +
+

Thin Mint Cookies

+

Tasty mint chocolate cookies

+ +
-

The Cookies

+
+

Peanut Butter Cookies

+

Yummy peanut buttery goodness!

+ +
+ +
+

Short Bread Cookies

+

Santa's favorite classic.

+ +
-

Thin Mint Cookies

-

Tasty mint chocolate cookies

- +
+

Smore's Cookies

+

Camp fire favorite!

+ +
-

Peanut Butter Cookies

-

Yummy peanut buttery goodness!

- +
+
+ From db0d52dfc4e946b11b91cf5cc19c188e9eefc60e Mon Sep 17 00:00:00 2001 From: Alex-Pro-commit <73656348+Alex-Pro-commit@users.noreply.github.com> Date: Mon, 20 Sep 2021 11:45:59 -0400 Subject: [PATCH 2/2] Edgardo Molina & Silu TA --- css/styles.css | 107 +++++++++++++++---------------- index.html | 170 +++++++++++++++++++++++++++++-------------------- 2 files changed, 154 insertions(+), 123 deletions(-) diff --git a/css/styles.css b/css/styles.css index 335a433..654e54a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,70 +1,69 @@ - - -.header-content{ - - margin-bottom:70px; +.header-content { + margin-bottom: 70px; + position:relative; } -.innerbox{ - - background-color:black; - opacity:0.7; - height:30%; - width:35%; - min-height:205px; - min-width: 150px; - top:15%; - margin-left:35%; - margin-right:35%; - position:absolute; - border-radius: 5px; - padding-top:5% ; - +.innerbox { + background-color: black; + text-align: center; + opacity: 0.7; + height: 30%; + width: 35%; + min-height: 205px; + min-width: 150px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + position: absolute; + border-radius: 5px; + padding-top: 5%; } -.Title{ - - text-align:center; - +.The-Cookies{ + text-align: center; + padding-bottom: 10px; } -.Buy{ - text-align:center; - - +.Title { + text-align: center; } - -.All-cookies{ - border: 2px dotted rgb(202, 23, 53); +.Buy { + text-align: center; } -.Mint-Cookies{ - border: 2px dotted rgb(202, 23, 142); -} + .wrapper { + max-width:2560px; + margin:0 auto; + } -.Peanut-Butter-Cookies{ - border: 2px dotted rgb(169, 202, 23); +.ContactUs{ + height:200px; + + background-color:#2596be; } - - -.Short-Bread-Cookies{ - border: 2px dotted rgb(26, 23, 202); +.ContactUsTitle{ + padding-top:20px; } - -.Smores-Cookies{ - border: 2px dotted rgb(202, 89, 23); +/* .Paragraph{ } */ +.AboutUs { + height:240px; + background-color:lightgray; } -.All-cookies img{ - display: block; - margin: auto; - width:120px; - height: 60px; - border-radius:50% ; - +.AboutUsTitle{ + padding-top:10px; } -.wrapper{ - margin-left:25px; - margin-right:25px; - +@media only screen and (max-width: 992px) { +.order { +margin: 10px; +padding: 10px; +flex-direction: row; +display: flex; +} +.item1 { +order: 2; +} +.item2 { +order: 1; +} } diff --git a/index.html b/index.html index abf5532..6b6e7dd 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,6 @@ + + @@ -6,81 +9,110 @@ -
- +
+
+
+ + card image +
+

Cookie Store

+

Buy our awesome cookies. All proceeds go to charity!

+
+
+
-
-
- card image -
-

Cookie Store

-

Buy our awesome cookies. All proceeds go to charity!

-
-
-
+
+ + + +
+

The Cookies

+ +
+ +
+
+

Thin Mint Cookies new

+

Tasty mint chocolate cookies

+
+
+ +
+
-
-

The Cookies

-
-
-
- -
-

Thin Mint Cookies

-

Tasty mint chocolate cookies

- -
+
+
+

Peanut Butter Cookies

+

Yummy peanut buttery goodness!

+
+
+ +
+
+ +
+
+

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

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