From 899383a3604671ef4553042fde7841f441cbd40f Mon Sep 17 00:00:00 2001 From: Britt Dalby <91482954+brittney-dalby@users.noreply.github.com> Date: Mon, 1 Nov 2021 09:46:39 -0600 Subject: [PATCH 1/2] updated html and css to look like brits code --- css/index.css | 214 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 79 ++++++++++++++++++- 2 files changed, 292 insertions(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index e69de29..8157daf 100644 --- a/css/index.css +++ b/css/index.css @@ -0,0 +1,214 @@ +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%; +} \ No newline at end of file diff --git a/index.html b/index.html index 968c2c8..e6cf40f 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,92 @@ + + Document + - +
+ +
+
+
+

The Watering Can

+ +
+
+
+
+

Our Story

+

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 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 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 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 From c55e6fae5d47c2ffc615f27a953e4836d14813c5 Mon Sep 17 00:00:00 2001 From: Britt Dalby <91482954+brittney-dalby@users.noreply.github.com> Date: Mon, 1 Nov 2021 11:19:47 -0600 Subject: [PATCH 2/2] made website responsive for 500 and 800 px --- css/index.css | 96 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 12 +++---- 2 files changed, 102 insertions(+), 6 deletions(-) diff --git a/css/index.css b/css/index.css index 8157daf..095d467 100644 --- a/css/index.css +++ b/css/index.css @@ -211,4 +211,100 @@ footer a, footer h3{ .bottom p{ margin-right:5%; margin-top:2%; +} + + +@media (max-width: 800px){ + .logo{ + width:8%; + } + #about div{ + width: 50%; + margin-right: 3%; + margin-top: 20%; + } + .text div{ + width:80%; + } + .bottom p{ + margin-right: 9.5%; + } + .left div.info{ + line-height:2; + } +} + +@media (max-width: 500px){ + nav{ + flex-wrap:wrap; + justify-content:center; + padding-bottom:1%; + + } + .links{ + width:100%; + } + #about{ + background-image:none; + background-color:lightgray; + height:auto; + justify-content:center; + align-items:center; + } + #about div{ + width:80%; + margin:0; + text-align:center; + } + .container{ + justify-content: center; + } + .cacti, .tropicals, .succulants, .text{ + width:80%; + } + .cacti, .tropicals, .succulants{ + height:40vh; + } + .text div{ + width: 100%; + } + .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-right:0; + margin-top:5%; + } + .right{ + order:-1; + margin-bottom:5%; + } + h2{ + order:-2; + } } \ No newline at end of file diff --git a/index.html b/index.html index e6cf40f..49d9422 100644 --- a/index.html +++ b/index.html @@ -41,24 +41,24 @@

Our Story

Our Plants

-
-
+
+

Succulants

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 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 adipisicing elit. Tempore, hic obcaecati facilis, itaque assumenda aperiam consequuntur repudiandae, aliquam illo provident nobis maiores quis dolore. Possimus exercitationem nemo explicabo ut repudiandae.