From 18563ed1b269975b416df8e69da254871659ba09 Mon Sep 17 00:00:00 2001 From: Kayla Sade Date: Tue, 22 Feb 2022 14:17:25 -0500 Subject: [PATCH] mvp --- .vscode/settings.json | 3 + css/index.css | 304 ++++++++++++++++++++++++++++++++++++++++++ index.html | 81 ++++++++++- 3 files changed, 385 insertions(+), 3 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/index.css b/css/index.css index e69de29..6e0d9bc 100644 --- a/css/index.css +++ b/css/index.css @@ -0,0 +1,304 @@ +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){ + .logo{ + width:8%; + } + #about div{ + width:50%; + margin-right:3%; + margin-top:20%; + } + text div{ + width:80%; + } +} + +/* mobile view 500px */ +@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; + } + .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: +} +.right{ + order:-1; +} +h2{ + order:-2; +} \ No newline at end of file diff --git a/index.html b/index.html index 968c2c8..91aba7d 100644 --- a/index.html +++ b/index.html @@ -4,12 +4,87 @@ - + + + - + 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