From 4e6568f38967677bf78f9496a3d03be712d29279 Mon Sep 17 00:00:00 2001 From: Carlos Solano Date: Thu, 28 Oct 2021 12:05:18 -0500 Subject: [PATCH 1/2] made all html for web page --- index.html | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 68 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 968c2c8..306556d 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,73 @@ Document - +
+ +
+
+
+

The Watering Can

+ +
+
+
+
+

Our Story

+

Lorem Ipsum text

+
+
+
+

Our Plants

+
+
+
+
+

Succulants

+

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

+ +
+
+
+
+

Cacti

+

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

+ +
+
+
+
+
+
+

Tropicals

+

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

+ +
+
+
+
+ \ No newline at end of file From bdfc66a91811ef7884331277e920e56777403b1b Mon Sep 17 00:00:00 2001 From: Carlos Solano Date: Mon, 1 Nov 2021 12:19:32 -0500 Subject: [PATCH 2/2] made website responsive for 550 to 800 pixels --- .vscode/settings.json | 3 + css/index.css | 415 ++++++++++++++++++++++++++++++++++++++++++ index.html | 53 +++--- 3 files changed, 449 insertions(+), 22 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/css/index.css b/css/index.css index e69de29..c135604 100644 --- a/css/index.css +++ b/css/index.css @@ -0,0 +1,415 @@ +/*CSS Reset*/ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; + max-width: 100%; + /* border:1px solid grey; */ +} + +/*General Styles*/ +html { + font-size: 62.5%; +} +body { + font-size: 1.8rem; + line-height: 1.5; + color: #4f4f4f; + background-color: #fbfffb; + font-family: "Source Sans Pro", sans-serif; +} +h1 { + color: #fbfffb; + font-size: 6rem; + font-family: "Oxygen", sans-serif; +} +h2 { + font-size: 3rem; +} +h3 { + font-size: 2.2rem; +} +h2, +h3 { + color: #266035; + text-align: center; + font-family: "Oxygen", sans-serif; + margin-bottom: 5%; +} +a { + text-decoration: none; + color: #266035; + font-family: "Source Sans Pro", sans-serif; +} +button { + font-family: "Source Sans Pro", sans-serif; + font-size: 1.8rem; + padding: 2% 4%; + margin-top: 4%; +} +section, +footer { + padding: 4% 0; +} +/*helper classes*/ +.bg-img { + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +/*header section styles*/ +nav { + display: flex; + justify-content: space-between; + position: fixed; + width: 100%; + top: 0; + z-index: 999; /*everything should scroll behind this*/ + background-color: rgba(255, 255, 255, 0.8); +} +.logo { + width: 5%; +} +.links { + width: 50%; + display: flex; + justify-content: space-evenly; + align-items: center; +} + +/*top section styles*/ +#top { + height: 90vh; + background-image: url("../images/header.jpg"); + background-position: bottom; + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} +#top button { + border: 2px solid #266035; + color: #266035; + background-color: #fff; + transition: 2s; +} +#top button:hover { + color: #fff; + background-color: #266035; + border: 2px solid #fff; +} + +/*About Section Styles*/ +#about { + height: 85vh; + background-image: url("../images/about-img.jpg"); + display: flex; + justify-content: flex-end; + align-items: center; +} +#about div { + width: 20%; + margin-right: 10%; +} + +/*Shop Section Styles*/ +#shop { + padding-bottom: 0; +} +.container { + display: flex; + flex-wrap: wrap; +} + +.cacti, +.tropicals, +.succulants, +.text { + width: 50%; +} +.text { + padding: 5%; + display: flex; + justify-content: center; + text-align: center; +} +.text div { + width: 60%; +} +.text button { + background-color: #266035; + color: #fff; + border: 2px solid #266035; + transition: 2s; +} +.text button:hover { + background-color: #fff; + color: #266035; +} +.succulants { + background-image: url("../images/succulants.jpg"); +} +.cacti { + background-image: url("../images/cacti.jpg"); +} +.tropicals { + background-image: url("../images/tropicals.jpg"); +} + +/*footer section styles*/ +footer { + background-color: #266035; + display: flex; + flex-wrap: wrap; + color: #fff; +} +footer h2 { + color: #fff; + width: 100%; +} +footer a, +footer h3 { + color: #fff; + text-align: left; +} +.right, +.left { + width: 50%; + display: flex; + justify-content: center; + align-items: center; +} +.left div.info { + width: 60%; + line-height: 2.5; +} +.right img { + width: 60%; +} +.bottom { + width: 100%; + text-align: right; +} +.bottom p { + margin-right: 5%; + margin-top: 2%; +} + +/*Responsive Styles */ + +/*tablet view - 800px*/ +@media (max-width: 800px) { + /*header section styles*/ + .logo { + width: 8%; + } + /*about section styles*/ + #about div { + width: 50%; + margin-right: 3%; + margin-top: 20%; + } + /*shop section styles*/ + .text div { + width: 80%; + } + .bottom p { + margin-right: 9.5%; + } + .left div.info { + line-height: 2; + } +} /*this closes my media query for 800px*/ + +/*mobile view - 500px*/ +@media (max-width: 500px) { + nav { + flex-wrap: wrap; + justify-content: center; + padding-bottom: 1%; + } + .links { + width: 100%; + } + /*about section styles*/ + #about { + background-image: none; + background-color: lightgrey; + height: auto; + justify-content: center; + align-items: center; + } + #about div { + margin: 0%; + width: 80%; + text-align: center; + } + /*Shop Section Styles*/ + .container { + justify-content: center; + } + .cacti, + .tropicals, + .succulants, + .text { + width: 80%; + } + .text div { + width: 100%; + } + .cacti, + .tropicals, + .succulants { + height: 40vh; + } + .one { + order: 1; + } + .two { + order: 2; + } + .three { + order: 3; + } + .four { + order: 4; + } + .five { + order: 5; + } + .six { + order: 6; + } + footer { + justify-content: center; + } + footer h2, + .left, + .right, + .bottom { + width: 90%; + text-align: center; + } + footer h3 { + text-align: center; + } + .bottom p { + margin: 0; + margin-top: 5%; + } + .right { + order: -1; + margin-bottom: 5%; + } + h2 { + order: -2; + } +} diff --git a/index.html b/index.html index 306556d..73a986a 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,14 @@ + - + + + - + Document @@ -18,7 +21,7 @@
Home About - Plants + Plants Contact
@@ -32,51 +35,57 @@

The Watering Can

Our Story

-

Lorem Ipsum text

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam eius minima suscipit nihil aperiam amet, maxime possimus magnam voluptatibus vel, et modi corrupti, dicta quae sequi impedit quasi omnis vitae! Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae eaque nesciunt tempora impedit cumque porro placeat esse modi totam distinctio commodi veritatis at, doloribus numquam. Tempora ullam vero tenetur reiciendis.

Our Plants

-
-
+
+

Succulants

-

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Consectetur soluta iure iusto minima deserunt, eos voluptatem ad temporibus quae quasi accusantium similique pariatur neque autem nostrum quas dicta velit ullam!

-
-
+
+

Cacti

-

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Itaque ducimus suscipit, harum doloribus molestias quis magnam eum laborum incidunt pariatur aperiam dolorum facilis aliquam! Impedit eos delectus architecto beatae ullam.

-
-
-
-
+
+
+
+

Tropicals

-

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Tempore, hic obcaecati facilis, itaque assumenda aperiam consequuntur repudiandae, aliquam illo provident nobis maiores quis dolore. Possimus exercitationem nemo explicabo ut repudiandae.

-
+
\ No newline at end of file