From de672a75d757adfb641ab86dac6cf951b8575737 Mon Sep 17 00:00:00 2001 From: Arkyb Date: Thu, 28 Oct 2021 14:01:10 -0400 Subject: [PATCH 1/6] need to find my error --- ... at warmup for flexbox and site build.html | 88 ++++++++ css/index.css | 211 ++++++++++++++++++ index.html | 15 -- 3 files changed, 299 insertions(+), 15 deletions(-) create mode 100644 My attempt at warmup for flexbox and site build.html delete mode 100644 index.html diff --git a/My attempt at warmup for flexbox and site build.html b/My attempt at warmup for flexbox and site build.html new file mode 100644 index 0000000..ebae3b9 --- /dev/null +++ b/My attempt at warmup for flexbox and site build.html @@ -0,0 +1,88 @@ + + + + + + + + + + + + Document + + + +
+ +
+
+
+

The Watering Can

+ +
+
+
+
+

Our Story

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum eos consectetur, aperiam minunisi laboriosam et suscipit, rem consequatur, officiis voluptates sequi. Assumenda corrupti quia, veniam at animi dolor aliquid.

+
+
+

Our Plants

+
+
+
+
+

Succulants

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat incidunt laborum laboriosam! Nemo dolor quaerat vel? Quia ducimus consequuntur tempora! Perferendis officia tempore asperiores doloremque ipsum quisquam esse dolor in.

+ +
+
+
+
Cacti
+

Cacti

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi corporis ex repellendus, sit illum architecto iure ipsa culpa modi eos, eveniet numquam eum velit, vero itaque autem soluta. Unde.

+ +
+
+
+
+
+

Tropicals

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut consequuntur deserunt suscipit enim modi eos id ratione laudantium eaque facere ullam laboriosam, sit iusto labore dicta excepturi. Id, dolorem optio.

+ +
+
+ + + + \ No newline at end of file diff --git a/css/index.css b/css/index.css index e69de29..c21ad5b 100644 --- a/css/index.css +++ b/css/index.css @@ -0,0 +1,211 @@ +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; + border: 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; +} +html{ + font-size:62.5%; +} +body{ + font-size:1.8rem; +line-height:1.55; +color:#4f4f4f; +background-color:#FBFFFB; +} +h1{ + color:#FBFFFB; + font-size:6rem; +} +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; +} +/*header*/ +button{ + font-family: 'Source Sans Pro', sans-serif; + font-size: 1.8rem; + padding: 2% 4%; + margin-top:4%; +} +section, footer{ + padding: 4% 0; +} + +.bg-img{ + background-repeat: no repeat + background-size: cover; + background-position: center; +} + +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{ + 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:5px solid #266035; + color:#266035; + background-color:#FFF; +transition:2s; +} +#top button:hover{ + color:#fff; + background-color:#266035; + border:2px solid #fff; +} + +/*about section*/ +#about{ + height:85vh; + background-image:url('../images/about-img.jbg'); + display:flex; + justify-content:flex-end; + align-item:center +} +#about div{ + width:20%; + margin-right:10%; +} + +#shop{ + padding-bottom:0; +} +.container{ + display:flex; + flex-wrap:wrap; + +} + +.cacti, .tropical, .succulants, .text{ + width:50%; +} +.text{ + padding: 5%; + display:flex; + justify-content:center; +} +.text div{ + width:60%; +} + +.text button{ + background-color:#266035; + color:#fff; + border: 1px 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-images:url('../images/tropicals.jpg'); +} + +/*footer*/ +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 a{ + margin-right:5%; + margin-top:2%; +} diff --git a/index.html b/index.html deleted file mode 100644 index 968c2c8..0000000 --- a/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - Document - - - - - \ No newline at end of file From 337696712f13d78365d33d46a2892fb6c8272520 Mon Sep 17 00:00:00 2001 From: Arkyb Date: Tue, 2 Nov 2021 01:21:59 -0400 Subject: [PATCH 2/6] had to copy/paste, missed a lot of class due to family things, will attempt as much stretch as i can, just figured out how to make new branch. --- ... at warmup for flexbox and site build.html | 88 ----- css/index.css | 355 ++++++++++++------ ...m github, will do as much stretch as i can | 195 ++++++++++ 3 files changed, 427 insertions(+), 211 deletions(-) delete mode 100644 My attempt at warmup for flexbox and site build.html create mode 100644 day 2{apologize ahead of time, i had something really important (familial) to do during class, so i had to copy and paste this code from github, will do as much stretch as i can diff --git a/My attempt at warmup for flexbox and site build.html b/My attempt at warmup for flexbox and site build.html deleted file mode 100644 index ebae3b9..0000000 --- a/My attempt at warmup for flexbox and site build.html +++ /dev/null @@ -1,88 +0,0 @@ - - - - - - - - - - - - Document - - - -
- -
-
-
-

The Watering Can

- -
-
-
-
-

Our Story

-

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum eos consectetur, aperiam minunisi laboriosam et suscipit, rem consequatur, officiis voluptates sequi. Assumenda corrupti quia, veniam at animi dolor aliquid.

-
-
-

Our Plants

-
-
-
-
-

Succulants

-

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat incidunt laborum laboriosam! Nemo dolor quaerat vel? Quia ducimus consequuntur tempora! Perferendis officia tempore asperiores doloremque ipsum quisquam esse dolor in.

- -
-
-
-
Cacti
-

Cacti

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi corporis ex repellendus, sit illum architecto iure ipsa culpa modi eos, eveniet numquam eum velit, vero itaque autem soluta. Unde.

- -
-
-
-
-
-

Tropicals

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut consequuntur deserunt suscipit enim modi eos id ratione laudantium eaque facere ullam laboriosam, sit iusto labore dicta excepturi. Id, dolorem optio.

- -
-
- -
-

Get in Touch!

-
-
-

Find us Here!

-
123 Plant Lane
- BLoomfield Ontario
- Canada L2g 0X7
- 1-613-978-8282
- info@thewateringcan.ca -

@thewateringcan on the socials

-
-
-
- inside of the front room of the watering can shop -
-
-

© copyright Brit Hemming 2021

-
-
- - \ No newline at end of file diff --git a/css/index.css b/css/index.css index c21ad5b..f237b87 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,8 @@ +/* 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, @@ -13,7 +18,6 @@ menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; - border: 0; font-size: 100%; font: inherit; vertical-align: baseline; @@ -23,189 +27,294 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } - +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} *{ - box-sizing: border-box; - padding: 0; - margin: 0; - max-width: 100%; - border: 1px solid grey; + box-sizing:border-box; + max-width:100%; /*you can never be bigger than your parent - this is going to stop that dreaded horizontal scroll bar*/ + border:1px solid grey; } +/*general styles*/ html{ - font-size:62.5%; + font-size:62.5%; /* 1 rem = 10px */ } body{ + line-height:1.5; font-size:1.8rem; -line-height:1.55; -color:#4f4f4f; -background-color:#FBFFFB; + color:#4F4f4f; +} +h1, h2, h3{ + letter-spacing: 3px; + text-align:center; } h1{ - color:#FBFFFB; - font-size:6rem; + font-size:5rem; } h2{ - font-size:3rem; + font-size:4rem; } h3{ - font-size:2.2rem; + font-size:2.5rem; } -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; -} -/*header*/ -button{ - font-family: 'Source Sans Pro', sans-serif; - font-size: 1.8rem; - padding: 2% 4%; - margin-top:4%; -} -section, footer{ + text-decoration:none; + color:#4F4f4f; +} +section{ padding: 4% 0; } -.bg-img{ - background-repeat: no repeat - background-size: cover; - background-position: center; +/*Header Section Styles*/ +header{ + height:80vh; + display:flex; + flex-wrap: wrap; + justify-content: center; + align-items:center; + background-image: url('../images/header.jpg'); + background-size:cover; + background-repeat: no-repeat; + background-position: bottom; + text-align:center; } - nav{ - display: flex; + 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); + width:100%; + position:fixed; + background-color:rgba(255,255,255,0.8); } .logo{ - width:5%; -} -.links{ - width:50%; + width:10%; display:flex; - justify-content: space-evenly; - align-items: center; -} -#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:5px solid #266035; - color:#266035; - background-color:#FFF; -transition:2s; +.logo img{ + width:60%; } -#top button:hover{ - color:#fff; - background-color:#266035; - border:2px solid #fff; +.links{ + width:60%; + display:flex; + justify-content: space-evenly; + align-items: center; } -/*about section*/ +/*About Section Styles*/ #about{ - height:85vh; - background-image:url('../images/about-img.jbg'); display:flex; - justify-content:flex-end; - align-item:center + justify-content: flex-end; + padding:20% 0; + background-image: url('../images/about-img.jpg'); + background-size:cover; + background-repeat: no-repeat; + } #about div{ width:20%; margin-right:10%; } -#shop{ - padding-bottom:0; -} +/*Shop Section Styles*/ .container{ display:flex; - flex-wrap:wrap; - + text-align:center; } - -.cacti, .tropical, .succulants, .text{ +.container p{ + text-align:justify; +} +.container div{ width:50%; } -.text{ - padding: 5%; +.container .text{ display:flex; - justify-content:center; -} -.text div{ - width:60%; -} - -.text button{ - background-color:#266035; - color:#fff; - border: 1px solid #266035; - transition:2s; + justify-content: center; + align-items: center; + padding:10% 0; } -.text button:hover{ - background-color:#fff; - color:#266035; +.bg{ + background-size:cover; + background-position:center; + background-repeat: no-repeat; } -.succulants{ - background-image:url('../images/succulants.jpg'); +.succulents{ + background-image: url('../images/succulants.jpg'); } .cacti{ background-image:url('../images/cacti.jpg'); } -.tropicals{ - background-images:url('../images/tropicals.jpg'); +.tropical{ + background-image:url('../images/tropicals.jpg'); } -/*footer*/ +/**footer section styles **/ footer{ - background: color #266035; - display: flex; - flex-wrap:wrap; - color:#fff; + padding:4% 0; } -footer h2{ - color:#fff; - width:100%; - +.footer-parent{ + display:flex; +} +.left, .right{ + width:50%; + display:flex; + justify-content:center; + align-items: center; +} +.img-wrapper{ + width:50%; } -footer a, footer h3{ - color:#fff; +footer h3{ text-align:left; } -.right, .left{ -width: 50%; -display:flex; -justify-content: center; -align-items: center; +.text-container{ + line-height:2; +} +.copyright{ + text-align:right; + margin-right:10%; +} + +/*Media Queries*/ +@media(max-width:800px){ + #about{ + background-position: left top; + } + #about div{ + margin-top:5%; + width:35%; + } + .container .text div{ + width:70%; + } + .img-wrapper{ + width:70%; + } + .container p{ + text-align:left; + } + .bottom p{ + margin-right: 9.5%; + } + .left div.info{ + line-height:2; + } +}/*this closes the 800px media query*/ + +/*phone*/ +@media(max-width:500px){ + nav{ + flex-direction:column; + align-items:center; + } + .logo{ + width:20%; + } + .links{ + width:100%; + } + #about{ + justify-content:flex-start; + } + #about div{ + margin-left:10%; + width:40%; + } + .container{ + flex-direction:column; + align-items:center; + } + .mobile{ + flex-direction:column-reverse; + } + .container div{ + width:80%; + } + .bg{ + height:60vh; + } + .footer-parent{ + flex-direction:column-reverse; + align-items: center; + } + .left, .right{ + width:80%; + margin:2% 0; + } + .copyright{ + text-align:center; + margin-right:0; + margin-top:1%; + } + +} + +/*responsive styles*/ + +/*tablet view: 800px +mobile: 500px*/ + +@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{ - width: 60%; - line-height:2.5; + line-height:2; } -.right img{ - width:60%; } -.bottom{ + +@media(max-width:500px){ +nav{ + flex-wrap: wrap; + justify-content: center; + padding-bottom: 1%; +} +.links{ width:100%; -text-align:right; } -.bottom a{ - margin-right:5%; - margin-top:2%; +#about{ + background-image:none; + background-color:lightgray; + height: auto; + justify-content: center; + align-items: center; +} +#about div{ + margin:0; + width: 80%; +} +.container{ + justify-content: center; + width: 80%; +} +.cacti, .tropicals, .succulants{ + height:40vh; } +} \ No newline at end of file diff --git a/day 2{apologize ahead of time, i had something really important (familial) to do during class, so i had to copy and paste this code from github, will do as much stretch as i can b/day 2{apologize ahead of time, i had something really important (familial) to do during class, so i had to copy and paste this code from github, will do as much stretch as i can new file mode 100644 index 0000000..821256c --- /dev/null +++ b/day 2{apologize ahead of time, i had something really important (familial) to do during class, so i had to copy and paste this code from github, will do as much stretch as i can @@ -0,0 +1,195 @@ + + + + + + + + + + + + + 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.

+ +
+
+
+
+
+

Get In Touch!

+
+
+

Find Us Here:

+
123 Plant Lane
+ Bloomfield Ontario
+ Canada L2G 0X7
+ 613-978-8282
+ info@thewateringcan.ca +

@thewateringcan on the socials

+
+
+
+ inside of the front room of the watering can shop +
+
+

© copyright Brit Hemming 2021

+
+
+ + + + + + + + + + + + + + Document + + + +
+
+

The Watering Can

+ +
+
+
+
+

Our Story

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam placeat facilis dolorum harum quam eum accusantium amet aut delectus. Perferendis ipsam autem maxime modi quia quidem animi necessitatibus porro. Assumenda.

+
+
+
+

Our Plants

+
+
+ +
+
+
+

Succulents

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates excepturi consectetur est cumque quaerat quas suscipit itaque, impedit similique. Itaque enim id voluptates vitae culpa aliquid vel perferendis quas earum!

+ +
+
+
+
+
+
+

Cacti

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis totam deserunt perferendis eius sint beatae expedita, qui dolore ut similique labore eum eveniet commodi. Autem excepturi ipsam soluta accusantium incidunt?

+ +
+
+
+ +
+
+
+
+ +
+
+
+

Tropicals

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus earum impedit autem porro illo, corporis eligendi, atque unde cupiditate facere ea consectetur rerum quaerat quod inventore. Temporibus nam non deserunt.

+ +
+
+
+
+
+

Get In Touch!

+
+
+
+

Find Us Here:

+
123 Plant Lane
+ Bloomfield Ontario
+ Canada, L2G 0X7
+ +1 613-978-8282
+ info@thewateringcan.ca +

@thewateringcan on the socials

+
+
+
+
+ plants on display inside of the shop +
+
+
+

Copyright 2020

+
+ +--> \ No newline at end of file From a2c780512495dfa57f5e9d0b74ceee73bed4eac8 Mon Sep 17 00:00:00 2001 From: Arkyb Date: Tue, 2 Nov 2021 01:32:19 -0400 Subject: [PATCH 3/6] every time i try to go live, it just shows my directory, i literally cant do anything because i cant see the changes i would make and i cant size things correctly because of it, totally dropped the ball on this one --- css/index.css | 376 ++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 363 insertions(+), 13 deletions(-) diff --git a/css/index.css b/css/index.css index f237b87..c16b170 100644 --- a/css/index.css +++ b/css/index.css @@ -1,3 +1,5 @@ + +/*CSS Reset*/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) @@ -27,6 +29,354 @@ 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%; + } + /*footer section styles*/ + .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-right:0; + margin-top:5%; + } + .right{ + order:-1; + margin-bottom:5%; + } + h2{ + order:-2; + } +}/*this closes my media query for mobile*/ + + + + + + + + + + + + + + + + + + + + + + + + + +/* 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; +} body { line-height: 1; } @@ -49,13 +399,13 @@ table { *{ box-sizing:border-box; max-width:100%; /*you can never be bigger than your parent - this is going to stop that dreaded horizontal scroll bar*/ - border:1px solid grey; -} + /*border:1px solid grey;*/ +/*} /*general styles*/ -html{ +/*html{ font-size:62.5%; /* 1 rem = 10px */ -} -body{ +/*} +/*body{ line-height:1.5; font-size:1.8rem; color:#4F4f4f; @@ -82,7 +432,7 @@ section{ } /*Header Section Styles*/ -header{ +/*header{ height:80vh; display:flex; flex-wrap: wrap; @@ -118,7 +468,7 @@ nav{ } /*About Section Styles*/ -#about{ +/*#about{ display:flex; justify-content: flex-end; padding:20% 0; @@ -133,7 +483,7 @@ nav{ } /*Shop Section Styles*/ -.container{ +/*.container{ display:flex; text-align:center; } @@ -165,7 +515,7 @@ nav{ } /**footer section styles **/ -footer{ +/*footer{ padding:4% 0; } .footer-parent{ @@ -192,7 +542,7 @@ footer h3{ } /*Media Queries*/ -@media(max-width:800px){ +/*@media(max-width:800px){ #about{ background-position: left top; } @@ -218,7 +568,7 @@ footer h3{ }/*this closes the 800px media query*/ /*phone*/ -@media(max-width:500px){ +/*@media(max-width:500px){ nav{ flex-direction:column; align-items:center; @@ -270,7 +620,7 @@ footer h3{ /*tablet view: 800px mobile: 500px*/ -@media(max-width: 800px){ +/*@media(max-width: 800px){ .logo{ width:8%; } @@ -317,4 +667,4 @@ nav{ .cacti, .tropicals, .succulants{ height:40vh; } -} \ No newline at end of file +}*/ \ No newline at end of file From db27d623cd2d9a0907335476b1728b48c9f0ff55 Mon Sep 17 00:00:00 2001 From: Arkyb Date: Tue, 2 Nov 2021 01:33:50 -0400 Subject: [PATCH 4/6] every time i try to go live, it just shows my directory, i literally cant do anything because i cant see the changes i would make and i cant size things correctly because of it, totally dropped the ball on this one --- css/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index c16b170..fa954a3 100644 --- a/css/index.css +++ b/css/index.css @@ -324,7 +324,7 @@ footer a, footer h3{ } }/*this closes my media query for mobile*/ - +/*note on what happened in my commit*/ From ec6b5b55f0f482c259609fbc19c47b4585eb4f2d Mon Sep 17 00:00:00 2001 From: Arkyb Date: Tue, 2 Nov 2021 01:36:15 -0400 Subject: [PATCH 5/6] see previous commit OR note at top of CSS --- css/index.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index fa954a3..961b7ac 100644 --- a/css/index.css +++ b/css/index.css @@ -5,6 +5,15 @@ License: none (public domain) */ + +/* IF MY COMMIT DOESNT SHOW IT, I WILL PASTE IT HERE (the reason for the copy/paste and why nothings done)*/ + +/* "every time i try to go live, it just shows my directory, i literally cant do anything because +i cant see the changes i would make and i cant size +things correctly because of it, totally dropped the ball on this one"*/ + + + html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -324,7 +333,7 @@ footer a, footer h3{ } }/*this closes my media query for mobile*/ -/*note on what happened in my commit*/ + From de211a72034af9684b67a001ceda8ab14d53a94c Mon Sep 17 00:00:00 2001 From: Arkyb Date: Tue, 2 Nov 2021 01:38:33 -0400 Subject: [PATCH 6/6] last attempt to actually push, should work --- css/index.css | 2 +- ...aste this code from github, will do as much stretch as i can | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 961b7ac..695cac1 100644 --- a/css/index.css +++ b/css/index.css @@ -326,7 +326,7 @@ footer a, footer h3{ } .right{ order:-1; - margin-bottom:5%; + margin-bottom: 4%; } h2{ order:-2; diff --git a/day 2{apologize ahead of time, i had something really important (familial) to do during class, so i had to copy and paste this code from github, will do as much stretch as i can b/day 2{apologize ahead of time, i had something really important (familial) to do during class, so i had to copy and paste this code from github, will do as much stretch as i can index 821256c..681a908 100644 --- a/day 2{apologize ahead of time, i had something really important (familial) to do during class, so i had to copy and paste this code from github, will do as much stretch as i can +++ b/day 2{apologize ahead of time, i had something really important (familial) to do during class, so i had to copy and paste this code from github, will do as much stretch as i can @@ -107,7 +107,7 @@ Document -