diff --git a/css/index.css b/css/index.css index e69de29..695cac1 100644 --- a/css/index.css +++ b/css/index.css @@ -0,0 +1,679 @@ + +/*CSS Reset*/ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + 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, +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%; + } + /*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: 4%; + } + 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; +} +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; + 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%; /* 1 rem = 10px */ +/*} +/*body{ + line-height:1.5; + font-size:1.8rem; + color:#4F4f4f; +} +h1, h2, h3{ + letter-spacing: 3px; + text-align:center; +} +h1{ + font-size:5rem; +} +h2{ + font-size:4rem; +} +h3{ + font-size:2.5rem; +} +a{ + text-decoration:none; + color:#4F4f4f; +} +section{ + padding: 4% 0; +} + +/*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; + justify-content: space-between; + width:100%; + position:fixed; + background-color:rgba(255,255,255,0.8); +} +.logo{ + width:10%; + display:flex; + justify-content: center; + align-items: center; +} +.logo img{ + width:60%; +} +.links{ + width:60%; + display:flex; + justify-content: space-evenly; + align-items: center; +} + +/*About Section Styles*/ +/*#about{ + display:flex; + 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 Section Styles*/ +/*.container{ + display:flex; + text-align:center; +} +.container p{ + text-align:justify; +} +.container div{ + width:50%; +} +.container .text{ + display:flex; + justify-content: center; + align-items: center; + padding:10% 0; +} +.bg{ + background-size:cover; + background-position:center; + background-repeat: no-repeat; +} +.succulents{ + background-image: url('../images/succulants.jpg'); +} +.cacti{ + background-image:url('../images/cacti.jpg'); +} +.tropical{ + background-image:url('../images/tropicals.jpg'); +} + +/**footer section styles **/ +/*footer{ + padding:4% 0; +} +.footer-parent{ + display:flex; +} +.left, .right{ + width:50%; + display:flex; + justify-content:center; + align-items: center; +} +.img-wrapper{ + width:50%; +} +footer h3{ + text-align:left; +} +.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{ + 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{ + 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..681a908 --- /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.

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

+ +
+
+
+
+ + +--> \ No newline at end of file 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