diff --git a/css/faq.css b/css/faq.css
new file mode 100644
index 00000000..0bbd555f
--- /dev/null
+++ b/css/faq.css
@@ -0,0 +1,282 @@
+@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Outfit:wght@200&display=swap');
+
+/* Fonts and Colors */
+
+:root {
+ --redBrown: #A05941;
+ --greenBlack: #133032;
+ --lightGray: #EDEDEE;
+ --white: #fff;
+ --transparentWhite: rgba(247, 238, 238, 0.75);
+ /* --transparentWhite: rgba(0, 0, 0, 0.75); */
+ --font1: 'Fjalla One', sans-serif;
+ --font2: 'Outfit', sans-serif;
+}
+
+/* General */
+
+html {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+*,
+*:before,
+*:after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* Body */
+
+body {
+ font-family: var(--font1);
+ text-align: center;
+ background-color: var(--lightGray);
+
+}
+
+
+/* Header */
+
+.header {
+ grid-area: header;
+ width: 100%;
+ margin-top: 10px;
+
+}
+
+.header-search {
+ background-color: var(--white);
+ display: flex;
+
+}
+
+.header-search i {
+ color: var(--redBrown);
+ padding: 20px 0px 0px 20px;
+ font-size: 30px;
+
+}
+
+.header-search input {
+ width: 100%;
+ border: none;
+ padding-left: 20px;
+ margin-right: 200px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ font-size: 20PX;
+}
+
+
+.nav-link-search {
+
+ color: var(--redBrown);
+ margin-right: 30px;
+ padding-top: 30px;
+}
+
+.header-search img {
+ height: 80px;
+ padding: 20px 0px;
+}
+
+.header-title {
+ color: var(--redBrown);
+ display: flex;
+ justify-content: space-between;
+ padding: 20px 50px;
+ text-align: left;
+ background-color: var(--lightGray);
+}
+
+.header-title h1 {
+ font-size: 20px;
+
+}
+
+.nav-list {
+ list-style: none;
+}
+
+.nav {
+ display: flex;
+ flex-direction: column;
+}
+
+.menu {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ right: -100%;
+ z-index: 1;
+ background-color: var(--lightGray);
+ transition: 0.5s ease-in-out;
+}
+
+.open-menu,
+.close-menu {
+ position: absolute;
+ cursor: pointer;
+ font-size: 2rem;
+ display: block;
+}
+
+.open-menu {
+ top: 5.5rem;
+ right: 1.5rem;
+}
+
+.close-menu {
+ top: 5.5rem;
+ right: 2rem;
+}
+
+#check {
+ display: none;
+}
+
+#check:checked~.menu {
+ right: 0;
+}
+
+.nav-link,
+.footer-wrapper {
+ padding: 1.5rem;
+}
+
+.nav-link a {
+ display: inline-block;
+ text-decoration: none;
+ position: relative;
+ color: var(--redBrown);
+ padding: 5px 10px;
+}
+
+
+.faq {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ font-size: 40px;
+ justify-content: center;
+ padding-top: 300px;
+ padding-bottom: 50px;
+ background-color: var(--white);
+ color: var(--redBrown);
+}
+
+.list {
+ align-items: center;
+ padding-bottom: 15px;
+}
+
+.answer {
+ display: none;
+ padding-top: 60px;
+ padding-bottom: 40px;
+}
+
+.contact {
+ grid-area: contact;
+ background-color: var(--greenBlack);
+ color: var(--white);
+}
+
+.capitalX {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ padding-top: 60px;
+ padding-bottom: 30px;
+ justify-content: space-evenly;
+}
+
+.ourstore {
+ padding-right: 30px;
+}
+
+.open {
+ padding-right: 30px;
+}
+
+.email {
+ justify-content: center;
+ background-color: var(--greenBlack);
+ color: var(--white);
+}
+
+input [type="email"] {
+ width: 10%;
+ height: 50px;
+ border: var(--white);
+ padding: 15px;
+ color: var(--greenBlack);
+ background-color: var(--greenBlack);
+}
+
+.submit {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding-bottom: 5px;
+}
+
+input[type="submit"] {
+ width: 10%;
+ height: 50px;
+ text-align: center;
+ color: var(--greenBlack);
+ background-color: var(--white);
+ border: 1px solid var(--white);
+ margin-bottom: 50px;
+}
+
+.google-maps {
+ background-color: var(--greenBlack);
+ color: var(--redBrown);
+
+}
+
+.footer {
+ grid-area: footer;
+ justify-content: center;
+ display: flex;
+ flex-direction: row;
+ background-color: var(--white);
+ color: var(--white);
+}
+
+.credit {
+ grid-area: credit;
+ justify-content: center;
+ padding-top: 50px;
+ background-color: var(--white);
+ color: var(--redBrown);
+}
+
+.soc-med {
+ padding-top: 20px;
+ padding-bottom: 50px;
+}
+
+
+#chatOption :first-child {
+ background: var(--redBrown);
+ color: var(--white);
+ position: fixed;
+ padding: 20px 70px;
+ bottom: 1rem;
+ right: 1rem;
+ font-size: 17px;
+ font-weight: lighter;
+}
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index aa561706..8af7874d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,3 +1,476 @@
/* Add your CSS here */
+@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Outfit:wght@200&display=swap');
-/* Dont' forget to link this file to your HTML in the */
+/* Fonts and Colors */
+
+:root{
+ --redBrown: #A05941;
+ --greenBlack: #133032;
+ --lightGray: #EDEDEE;
+ --white: #fff;
+ --transparentWhite: rgba(247, 238, 238, 0.75);
+/* --transparentWhite: rgba(0, 0, 0, 0.75); */
+ --font1: 'Fjalla One',sans-serif;
+ --font2: 'Outfit',sans-serif;
+}
+
+/* General */
+
+html {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+*,
+*:before,
+*:after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* Body */
+
+body {
+ font-family: var(--font1);
+ text-align: center;
+ background-color: var(--lightGray);
+ display: grid;
+ padding: 40px 40px 40px 40px;
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-rows: repeat(9, auto);
+ grid-template-areas:
+ "header header header header"
+ "prod prod prod prod"
+ "products products products products"
+ "about about about1-img about2-img"
+ "buy-online buy-online buy-img buy-img"
+ "request-form request-form request-form request-form"
+ "leaf leaf leaf leaf"
+ "contact contact contact contact"
+ "footer footer footer footer"
+}
+
+
+
+/* Header */
+
+.header{
+ grid-area: header;
+ width: 100%;
+ margin-top: 10px;
+}
+
+.header-search{
+ background-color: var(--white);
+ display: flex;
+
+}
+
+.header-search i{
+ color: var(--redBrown);
+ padding: 20px 0px 0px 20px;
+ font-size: 30px;
+
+}
+
+.header-search input{
+ width: 100%;
+ border: none;
+ padding-left: 20px;
+ margin-right: 200px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ font-size: 20PX;
+}
+
+
+.nav-link-search {
+
+ color: var(--redBrown);
+ margin-right: 30px;
+ padding-top: 30px;
+}
+
+.header-search img {
+ height: 80px;
+ padding: 20px 0px;
+}
+
+.header-title{
+ color: var(--redBrown);
+ display: flex;
+ justify-content: space-between;
+ padding: 20px 50px;
+ text-align: left;
+ background-color: var(--lightGray);
+}
+
+.header-title h1{
+ font-size: 20px;
+
+}
+
+.nav-list {
+ list-style: none;
+
+}
+
+nav {
+ display: flex;
+ flex-direction: column;
+}
+
+.menu {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ right: -100%;
+ z-index: 1;
+ background-color: var(--lightGray);
+ transition: 0.5s ease-in-out;
+}
+
+.open-menu,
+.close-menu {
+ position: absolute;
+ cursor: pointer;
+ font-size: 2rem;
+ display: block;
+}
+
+.open-menu {
+ top: 5.5rem;
+ right: 1.5rem;
+}
+
+.close-menu {
+ top: 5.5rem;
+ right: 2rem;
+}
+
+#check {
+ display: none;
+}
+
+#check:checked~.menu {
+ right: 0;
+}
+
+.nav-link,
+.footer-wrapper {
+ padding: 1.5rem;
+}
+
+.nav-link a {
+ display: inline-block;
+ text-decoration: none;
+ position: relative;
+ color: var(--redBrown);
+ padding: 5px 10px;
+}
+
+.links {
+ font-size: 15px;
+ color: var(--redBrown);
+ }
+
+.prod {
+ grid-area: prod;
+ background-image: url("../img/flower-woman.jpg");
+ background-size: cover;
+ padding: 10%;
+ line-height: 100px;
+ height: auto;
+ color: var(--white);
+}
+
+.prod span{
+ text-decoration-line: underline;
+}
+
+prod img{
+ filter: invert(100%);
+}
+
+.capital{
+ text-transform: uppercase;
+ font-weight: bold;
+}
+
+.title{
+ font-size: 30px;
+ color: var(--redBrown);
+}
+
+.logospan {
+ display: flex;
+ flex-direction: row;
+ justify-self: center;
+ align-self: center;
+ color: var (-- white);
+ margin-right: 50px;
+ margin-top: -5rem;
+}
+
+.products button,
+.prod button{
+ background-color: var(--redBrown);
+ border: none;
+ padding: 15px 30px;
+ color: var(--white);
+ font-size: 15px;
+}
+
+.line{
+ width: 10px;
+ height: 5x;
+ background-color: var(--redBrown);
+ display: block;
+ position: absolute;
+}
+
+.products{
+ grid-area: products;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+
+}
+
+.frame{
+ background-size: cover;
+ background-repeat: no-repeat;
+ padding-bottom: 364px;
+ width: 100%;
+ background-color: var(--white);
+ margin: 20px 0px;
+ padding-top: 10%;
+}
+
+.cacti {
+ background-image: url("../designs/cacti.jpg");
+}
+
+.plants{
+ background-image: url("../designs/plant.jpg");
+}
+
+.succulents{
+ background-image: url("../designs/succulents.jpg");
+}
+
+.img-wrapper{
+ position: relative;
+ padding-bottom: 72%;
+ }
+
+
+.img-wrapper img{
+ position: absolute;
+ top: 0;
+ left: 0;
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+
+}
+
+.about{
+ grid-area: about;
+ color: var(--redBrown);
+ font-family: var(--font2);
+ font-size: 20px;
+ background-color: var(--white);
+ padding: 40px 30px;
+}
+
+.about1-img{
+ grid-area: about1-img;
+ object-fit: cover;
+ height: 100%;
+ width: 100%;
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+
+.about2-img {
+ grid-area: about2-img;
+ object-fit: cover;
+ height: 100%;
+ width: 100%;
+ background-repeat: no-repeat;
+ background-size: auto;
+}
+.buy-img{
+ grid-area: buy-img;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+
+.buy-online{
+ grid-area: buy-online;
+ padding: 20% 10%;
+ font-size: 65px;
+ background-color: var(--greenBlack);
+ color: var(--white);
+}
+
+.buy-online button{
+ background-color: var(--white);
+ border: none;
+ padding: 15px 30px;
+ font-size: 15px;
+}
+
+
+.request-form{
+ grid-area: request-form;
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ color: var(--transparentWhite);
+}
+
+
+.request-form p{
+ color: var(--redBrown);
+ text-align: left;
+ font-size: 40px;
+ padding: 200px 60px;
+ font-weight: normal;
+ font-family: var(--font2);
+}
+
+.form{
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ font-size: 20px;
+ width: 770px;
+ opacity: 0.7;
+}
+form input,
+form textarea{
+ width: 100%;
+ margin: 15px 0px;
+ padding: 10px;
+}
+
+form button{
+ background-color: var(--redBrown);
+ width: 100%;
+ border: none;
+ padding: 15px;
+ color: var(--white);
+ margin: 20px 0px;
+}
+
+.leaf{
+ grid-area: leaf;
+ position: fixed;
+
+ }
+
+.contact {
+ grid-area: contact;
+ background-color: var(--greenBlack);
+ color: var(--white);
+}
+
+.capitalX {
+display: flex;
+flex-direction: row;
+justify-content: center;
+padding-top: 60px;
+padding-bottom: 30px;
+justify-content: space-evenly;
+}
+
+.ourstore {
+ padding-right: 30px;
+}
+
+.open {
+ padding-right: 30px;
+}
+
+.email {
+ justify-content: center;
+ background-color: var(--greenBlack);
+ color: var(--greenBlack);
+}
+
+input [type="email"] {
+ width: 10%;
+ height: 50px;
+ border: var(--white);
+ padding: 15px;
+ color: var(--greenBlack);
+ background-color: var(--greenBlack);
+ }
+
+.submit {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding-bottom: 5px;
+}
+
+input[type="submit"] {
+ width: 10%;
+ height: 50px;
+ text-align: center;
+ color: var(--greenBlack);
+ background-color: var(--white);
+ border: 1px solid var(--white);
+ margin-bottom: 50px;
+}
+
+.google-maps {
+ background-color: var(--greenBlack);
+ color: var(--redBrown);
+
+}
+
+.footer{
+ grid-area: footer;
+ justify-content: center;
+ display: flex;
+ flex-direction: row;
+ background-color: var(--white);
+ color: var(--white);
+}
+
+.credit {
+ grid-area: credit;
+ justify-content: center;
+ padding-top: 50px;
+ background-color: var(--white);
+ color: var(--redBrown);
+}
+
+.soc-med {
+ padding-top: 20px;
+ padding-bottom: 50px;
+}
+
+
+ #chatOption :first-child {
+ background: var(--redBrown);
+ color: var(--white);
+ position: fixed;
+ padding: 20px 70px;
+ bottom: 1rem;
+ right: 1rem;
+ font-size: 17px;
+ font-weight: lighter;
+}
\ No newline at end of file
diff --git a/css/media.css b/css/media.css
new file mode 100644
index 00000000..5252d0b9
--- /dev/null
+++ b/css/media.css
@@ -0,0 +1,77 @@
+/* Media Query */
+
+
+
+@media screen and (min-width:540px) {
+
+
+ header{
+ position: fixed;
+ top:0;
+ }
+
+ .open-menu,
+ .close-menu {
+ display: none;
+
+ }
+
+
+
+ .nav-list {
+ margin: 0 2rem;
+ }
+
+ .nav-link,
+ .footer-wrapper {
+ padding: 1rem;
+ }
+
+ body{
+ grid-template-areas:
+ "header header header header"
+ "prod prod prod prod"
+ "products products products products"
+ "about about about1-img about2-img"
+ "buy-online buy-online buy-img buy-img"
+ "request-form request-form request-form request=form"
+ "leaf leaf leaf leaf"
+ "contact contact contact contact"
+ "footer footer footer footer";
+
+ }
+
+ .prod{
+ background-attachment: fixed;
+ margin-top: 180px;
+ }
+
+ .products{
+ flex-direction: row;
+
+ }
+
+ .leaf{
+ display: none;
+ }
+
+ .
+.about-img1{
+ flex-direction: row;
+
+ }
+.about-img2 {
+ flex-direction: row;
+
+}
+
+
+.chat-btn {
+ display: -moz-popup;
+}
+
+}
+
+
+
+/* Dont' forget to link this file to your HTML in the */
diff --git a/designs/background-flowers.jpg b/designs/background-flowers.jpg
new file mode 100644
index 00000000..616a351f
Binary files /dev/null and b/designs/background-flowers.jpg differ
diff --git a/designs/background-plant.jpg b/designs/background-plant.jpg
new file mode 100644
index 00000000..8eb8def1
Binary files /dev/null and b/designs/background-plant.jpg differ
diff --git a/designs/cact2.webp b/designs/cact2.webp
new file mode 100644
index 00000000..81c853a9
Binary files /dev/null and b/designs/cact2.webp differ
diff --git a/designs/cacti.jpg b/designs/cacti.jpg
new file mode 100644
index 00000000..004ad553
Binary files /dev/null and b/designs/cacti.jpg differ
diff --git a/designs/cacti0.jpg b/designs/cacti0.jpg
new file mode 100644
index 00000000..69e5b990
Binary files /dev/null and b/designs/cacti0.jpg differ
diff --git a/designs/cacti1a.webp b/designs/cacti1a.webp
new file mode 100644
index 00000000..2d81204d
Binary files /dev/null and b/designs/cacti1a.webp differ
diff --git a/designs/cacti3.webp b/designs/cacti3.webp
new file mode 100644
index 00000000..ffcfb8f4
Binary files /dev/null and b/designs/cacti3.webp differ
diff --git a/designs/cacti4.webp b/designs/cacti4.webp
new file mode 100644
index 00000000..40e6e4ab
Binary files /dev/null and b/designs/cacti4.webp differ
diff --git a/designs/cacti5.webp b/designs/cacti5.webp
new file mode 100644
index 00000000..9035a0ba
Binary files /dev/null and b/designs/cacti5.webp differ
diff --git a/designs/cacti6.webp b/designs/cacti6.webp
new file mode 100644
index 00000000..0e2042d5
Binary files /dev/null and b/designs/cacti6.webp differ
diff --git a/designs/cactus.jpg b/designs/cactus.jpg
new file mode 100644
index 00000000..004ad553
Binary files /dev/null and b/designs/cactus.jpg differ
diff --git a/designs/cactus1.jpg b/designs/cactus1.jpg
new file mode 100644
index 00000000..851852ae
Binary files /dev/null and b/designs/cactus1.jpg differ
diff --git a/designs/flower-woman.jpg b/designs/flower-woman.jpg
new file mode 100644
index 00000000..0cba725a
Binary files /dev/null and b/designs/flower-woman.jpg differ
diff --git a/designs/flowerbackground.jpg b/designs/flowerbackground.jpg
new file mode 100644
index 00000000..616a351f
Binary files /dev/null and b/designs/flowerbackground.jpg differ
diff --git a/designs/greenhouse.jpg b/designs/greenhouse.jpg
new file mode 100644
index 00000000..485b3531
Binary files /dev/null and b/designs/greenhouse.jpg differ
diff --git a/designs/houseplant.jpg b/designs/houseplant.jpg
new file mode 100644
index 00000000..b5203e70
Binary files /dev/null and b/designs/houseplant.jpg differ
diff --git a/designs/kenny-eliason-k-Aydtg8ysc-unsplash.jpg b/designs/kenny-eliason-k-Aydtg8ysc-unsplash.jpg
new file mode 100644
index 00000000..851852ae
Binary files /dev/null and b/designs/kenny-eliason-k-Aydtg8ysc-unsplash.jpg differ
diff --git a/designs/leafs.jpg b/designs/leafs.jpg
new file mode 100644
index 00000000..8baab1ae
Binary files /dev/null and b/designs/leafs.jpg differ
diff --git a/designs/logo.png b/designs/logo.png
new file mode 100644
index 00000000..00e90037
Binary files /dev/null and b/designs/logo.png differ
diff --git a/designs/plant.jpg b/designs/plant.jpg
new file mode 100644
index 00000000..8eb8def1
Binary files /dev/null and b/designs/plant.jpg differ
diff --git a/designs/plants0.jpg b/designs/plants0.jpg
new file mode 100644
index 00000000..d7cba84e
Binary files /dev/null and b/designs/plants0.jpg differ
diff --git a/designs/plants1.webp b/designs/plants1.webp
new file mode 100644
index 00000000..6a26318f
Binary files /dev/null and b/designs/plants1.webp differ
diff --git a/designs/plants2.webp b/designs/plants2.webp
new file mode 100644
index 00000000..49ef6368
Binary files /dev/null and b/designs/plants2.webp differ
diff --git a/designs/plants3.webp b/designs/plants3.webp
new file mode 100644
index 00000000..62df05ee
Binary files /dev/null and b/designs/plants3.webp differ
diff --git a/designs/plants4.webp b/designs/plants4.webp
new file mode 100644
index 00000000..c73ca04a
Binary files /dev/null and b/designs/plants4.webp differ
diff --git a/designs/plants5.webp b/designs/plants5.webp
new file mode 100644
index 00000000..b69b8889
Binary files /dev/null and b/designs/plants5.webp differ
diff --git a/designs/plants6.webp b/designs/plants6.webp
new file mode 100644
index 00000000..27460264
Binary files /dev/null and b/designs/plants6.webp differ
diff --git a/designs/shopping-cart.png b/designs/shopping-cart.png
new file mode 100644
index 00000000..b755ad91
Binary files /dev/null and b/designs/shopping-cart.png differ
diff --git a/designs/succulents.jpg b/designs/succulents.jpg
new file mode 100644
index 00000000..6f4b4098
Binary files /dev/null and b/designs/succulents.jpg differ
diff --git a/designs/succulents0.webp b/designs/succulents0.webp
new file mode 100644
index 00000000..2a89e708
Binary files /dev/null and b/designs/succulents0.webp differ
diff --git a/designs/succulents1.webp b/designs/succulents1.webp
new file mode 100644
index 00000000..d54d2fef
Binary files /dev/null and b/designs/succulents1.webp differ
diff --git a/designs/succulents2.webp b/designs/succulents2.webp
new file mode 100644
index 00000000..9cd57ea1
Binary files /dev/null and b/designs/succulents2.webp differ
diff --git a/designs/succulents3.webp b/designs/succulents3.webp
new file mode 100644
index 00000000..793a1771
Binary files /dev/null and b/designs/succulents3.webp differ
diff --git a/designs/succulents4.webp b/designs/succulents4.webp
new file mode 100644
index 00000000..c9a85fcb
Binary files /dev/null and b/designs/succulents4.webp differ
diff --git a/designs/succulents5.webp b/designs/succulents5.webp
new file mode 100644
index 00000000..824f6ce7
Binary files /dev/null and b/designs/succulents5.webp differ
diff --git a/designs/succulents6.webp b/designs/succulents6.webp
new file mode 100644
index 00000000..9cd57ea1
Binary files /dev/null and b/designs/succulents6.webp differ
diff --git a/faq.html b/faq.html
new file mode 100644
index 00000000..454ffdf6
--- /dev/null
+++ b/faq.html
@@ -0,0 +1,226 @@
+
+
+
+
+
+
+ Responsive grid project
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/img/Cacti3.webp b/img/Cacti3.webp
new file mode 100644
index 00000000..ffcfb8f4
Binary files /dev/null and b/img/Cacti3.webp differ
diff --git a/img/cact2.webp b/img/cact2.webp
new file mode 100644
index 00000000..81c853a9
Binary files /dev/null and b/img/cact2.webp differ
diff --git a/img/cacti1a.webp b/img/cacti1a.webp
new file mode 100644
index 00000000..2d81204d
Binary files /dev/null and b/img/cacti1a.webp differ
diff --git a/img/cacti3.webp b/img/cacti3.webp
new file mode 100644
index 00000000..ffcfb8f4
Binary files /dev/null and b/img/cacti3.webp differ
diff --git a/img/cacti4.webp b/img/cacti4.webp
new file mode 100644
index 00000000..40e6e4ab
Binary files /dev/null and b/img/cacti4.webp differ
diff --git a/img/cacti5.webp b/img/cacti5.webp
new file mode 100644
index 00000000..9035a0ba
Binary files /dev/null and b/img/cacti5.webp differ
diff --git a/img/flower-woman.jpg b/img/flower-woman.jpg
new file mode 100644
index 00000000..0cba725a
Binary files /dev/null and b/img/flower-woman.jpg differ
diff --git a/img/flowerhouse.jpg b/img/flowerhouse.jpg
new file mode 100644
index 00000000..46d6939d
Binary files /dev/null and b/img/flowerhouse.jpg differ
diff --git a/img/flowerhouse2.jpg b/img/flowerhouse2.jpg
new file mode 100644
index 00000000..46d6939d
Binary files /dev/null and b/img/flowerhouse2.jpg differ
diff --git a/img/greenhouse.jpg b/img/greenhouse.jpg
new file mode 100644
index 00000000..485b3531
Binary files /dev/null and b/img/greenhouse.jpg differ
diff --git a/img/leafs.jpg b/img/leafs.jpg
new file mode 100644
index 00000000..8baab1ae
Binary files /dev/null and b/img/leafs.jpg differ
diff --git a/img/nature.jpg b/img/nature.jpg
new file mode 100644
index 00000000..d7cba84e
Binary files /dev/null and b/img/nature.jpg differ
diff --git a/img/plants1.webp b/img/plants1.webp
new file mode 100644
index 00000000..6a26318f
Binary files /dev/null and b/img/plants1.webp differ
diff --git a/img/plants2.webp b/img/plants2.webp
new file mode 100644
index 00000000..49ef6368
Binary files /dev/null and b/img/plants2.webp differ
diff --git a/img/plants3.webp b/img/plants3.webp
new file mode 100644
index 00000000..62df05ee
Binary files /dev/null and b/img/plants3.webp differ
diff --git a/img/plants4.webp b/img/plants4.webp
new file mode 100644
index 00000000..c73ca04a
Binary files /dev/null and b/img/plants4.webp differ
diff --git a/img/plants5.webp b/img/plants5.webp
new file mode 100644
index 00000000..b69b8889
Binary files /dev/null and b/img/plants5.webp differ
diff --git a/img/plants6.webp b/img/plants6.webp
new file mode 100644
index 00000000..27460264
Binary files /dev/null and b/img/plants6.webp differ
diff --git a/img/pots.jpg b/img/pots.jpg
new file mode 100644
index 00000000..69e5b990
Binary files /dev/null and b/img/pots.jpg differ
diff --git a/img/shopping-cart.png b/img/shopping-cart.png
new file mode 100644
index 00000000..b755ad91
Binary files /dev/null and b/img/shopping-cart.png differ
diff --git a/img/succulents0.webp b/img/succulents0.webp
new file mode 100644
index 00000000..2a89e708
Binary files /dev/null and b/img/succulents0.webp differ
diff --git a/img/succulents1.webp b/img/succulents1.webp
new file mode 100644
index 00000000..d54d2fef
Binary files /dev/null and b/img/succulents1.webp differ
diff --git a/img/succulents2.webp b/img/succulents2.webp
new file mode 100644
index 00000000..9cd57ea1
Binary files /dev/null and b/img/succulents2.webp differ
diff --git a/img/succulents3.webp b/img/succulents3.webp
new file mode 100644
index 00000000..793a1771
Binary files /dev/null and b/img/succulents3.webp differ
diff --git a/img/succulents4.webp b/img/succulents4.webp
new file mode 100644
index 00000000..c9a85fcb
Binary files /dev/null and b/img/succulents4.webp differ
diff --git a/img/succulents5.webp b/img/succulents5.webp
new file mode 100644
index 00000000..824f6ce7
Binary files /dev/null and b/img/succulents5.webp differ
diff --git a/img/succulents6.webp b/img/succulents6.webp
new file mode 100644
index 00000000..9cd57ea1
Binary files /dev/null and b/img/succulents6.webp differ
diff --git a/img/whitefacebook.webp b/img/whitefacebook.webp
new file mode 100644
index 00000000..9b6e6e4b
Binary files /dev/null and b/img/whitefacebook.webp differ
diff --git a/img/whiteinstagram.webp b/img/whiteinstagram.webp
new file mode 100644
index 00000000..f0612ecc
Binary files /dev/null and b/img/whiteinstagram.webp differ
diff --git a/img/whitepinterest.webp b/img/whitepinterest.webp
new file mode 100644
index 00000000..0970ced8
Binary files /dev/null and b/img/whitepinterest.webp differ
diff --git a/index.html b/index.html
index cd704c69..4c9dc100 100644
--- a/index.html
+++ b/index.html
@@ -5,17 +5,300 @@
Responsive grid project
-
+
+
+
+
+
+
+ estb
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 2023
+ Prickles & co
+ bring nature indoors
+
+ Shop Now
+
+
+
+
+
+
+
+
+ about us
+ -
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique vero tenetur voluptas ab minima, ex
+ voluptatum assumenda,!
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique vero tenetur voluptas ab minima, ex
+ voluptatum assumenda,!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ buy online now & get 10% off !
+ Shop Now
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- This website design was created by Wix.com, and is used here for strictly educational purposes.
\ No newline at end of file
diff --git a/shop.css b/shop.css
new file mode 100644
index 00000000..1f35a394
--- /dev/null
+++ b/shop.css
@@ -0,0 +1,272 @@
+@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Outfit:wght@200&display=swap');
+
+/* Fonts and Colors */
+
+:root {
+ --redBrown: #A05941;
+ --greenBlack: #133032;
+ --lightGray: #EDEDEE;
+ --white: #fff;
+ --transparentWhite: rgba(247, 238, 238, 0.75);
+ /* --transparentWhite: rgba(0, 0, 0, 0.75); */
+ --font1: 'Fjalla One', sans-serif;
+ --font2: 'Outfit', sans-serif;
+}
+
+/* General */
+
+html {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+*,
+*:before,
+*:after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* Body */
+
+body {
+ font-family: var(--font1);
+ text-align: center;
+ background-color: var(--lightGray);
+
+}
+
+
+/*Header */
+.header {
+
+ width: 100%;
+ margin-top: 10px;
+}
+
+.header-search {
+ background-color: var(--white);
+ display: flex;
+}
+
+.header-search i {
+ color: var(--redBrown);
+ padding: 20px 0px 0px 20px;
+ font-size: 30px;
+}
+
+.header-search input {
+ width: 100%;
+ border: none;
+ padding-left: 20px;
+ margin-right: 200px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ font-size: 20PX;
+}
+
+
+.nav-link-search {
+ color: var(--redBrown);
+ margin-right: 30px;
+ padding-top: 30px;
+}
+
+.header-search img {
+ height: 80px;
+ padding: 20px 0px;
+}
+
+.header-title {
+ color: var(--redBrown);
+ display: flex;
+ justify-content: space-between;
+ padding: 20px 50px;
+ text-align: left;
+ background-color: var(--lightGray);
+}
+
+.header-title h1 {
+ font-size: 20px;
+}
+
+.nav-list {
+ list-style: none;
+}
+
+nav {
+ display: flex;
+ flex-direction: column;
+}
+
+.menu {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ right: -100%;
+ z-index: 1;
+ background-color: var(--lightGray);
+ transition: 0.5s ease-in-out;
+}
+
+.open-menu,
+.close-menu {
+ position: absolute;
+ cursor: pointer;
+ font-size: 2rem;
+ display: block;
+}
+
+.open-menu {
+ top: 5.5rem;
+ right: 1.5rem;
+}
+
+.close-menu {
+ top: 5.5rem;
+ right: 2rem;
+}
+
+#check {
+ display: none;
+}
+
+#check:checked~.menu {
+ right: 0;
+}
+
+.nav-link,
+.footer-wrapper {
+ padding: 1.5rem;
+}
+
+.nav-link a {
+ display: inline-block;
+ text-decoration: none;
+ position: relative;
+ color: var(--redBrown);
+ padding: 5px 10px;
+} */
+
+.shoppage {
+
+ background-image: url("../img/flowerhouse.jpg");
+ background-size: cover;
+ padding: 10%;
+ line-height: 100px;
+ height: auto;
+ color: var(--white);
+ justify-content: center;
+ align-items: center;
+}
+
+hb {
+ font-size: 60px;
+}
+
+.shoptext {
+ color: var(--white);
+ justify-content: center;
+}
+
+.shopall {
+font-size: 40px;
+color: var(--greenBlack);
+padding-top: 50px;
+padding-bottom: 50px;
+justify-items: center;
+}
+
+.contact {
+ grid-area: contact;
+ background-color: var(--greenBlack);
+ color: var(--white);
+}
+
+.capitalX {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ padding-top: 60px;
+ padding-bottom: 30px;
+ justify-content: space-evenly;
+}
+
+.email {
+ justify-content: center;
+ background-color: var(--greenBlack);
+ color: var(--white);
+}
+
+input [type="email"] {
+ width: 10%;
+ height: 50px;
+ border: var(--white);
+ padding: 15px;
+ color: var(--greenBlack);
+ background-color: var(--greenBlack);
+}
+
+.submit {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ padding-bottom: 5px;
+}
+
+input[type="submit"] {
+ width: 10%;
+ height: 50px;
+ text-align: center;
+ color: var(--greenBlack);
+ background-color: var(--white);
+ border: 1px solid var(--white);
+ margin-bottom: 50px;
+}
+
+
+.google-maps {
+ background-color: var(--greenBlack);
+ color: var(--redBrown);
+}
+
+.footer {
+ grid-area: footer;
+ justify-content: center;
+ display: flex;
+ flex-direction: row;
+ background-color: var(--white);
+ color: var(--white);
+}
+
+.credit {
+ grid-area: credit;
+ justify-content: center;
+ padding-top: 50px;
+ background-color: var(--white);
+ color: var(--redBrown);
+}
+
+.soc-med {
+ padding-top: 20px;
+ padding-bottom: 50px;
+}
+
+#chatOption :first-child {
+ background: var(--redBrown);
+ color: var(--white);
+ position: fixed;
+ padding: 20px 70px;
+ bottom: 1rem;
+ right: 1rem;
+ font-size: 17px;
+ font-weight: lighter;
+}
\ No newline at end of file
diff --git a/shop.html b/shop.html
new file mode 100644
index 00000000..a33e1dd3
--- /dev/null
+++ b/shop.html
@@ -0,0 +1,194 @@
+
+
+
+
+
+
+ Responsive grid project
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
.svg)
+
+
+ 
+ 
+ 
+ 
+