From f785c0fd460103173080df196dc91566943e8128 Mon Sep 17 00:00:00 2001 From: JSriwongsa Date: Mon, 22 May 2023 18:08:15 -0500 Subject: [PATCH] added contact form --- ecommerce/flora_website/contact.html | 68 ++++++++++ ecommerce/flora_website/style_contact.css | 151 ++++++++++++++++++++++ 2 files changed, 219 insertions(+) create mode 100644 ecommerce/flora_website/contact.html create mode 100644 ecommerce/flora_website/style_contact.css diff --git a/ecommerce/flora_website/contact.html b/ecommerce/flora_website/contact.html new file mode 100644 index 0000000..699091c --- /dev/null +++ b/ecommerce/flora_website/contact.html @@ -0,0 +1,68 @@ + + + + + + Contact + + + + + + + + + +
+
+ +
+ + +
+
+ + + HOME + + + + Shop + + + + Blog + + + + About Us + + + + Contact + +
+
+
+ +
+
+
+
+

Contact Us

+ + + + + +
+
+
+ +
+

© Flora All Rights Reserved

+
+ + \ No newline at end of file diff --git a/ecommerce/flora_website/style_contact.css b/ecommerce/flora_website/style_contact.css new file mode 100644 index 0000000..9ec1b20 --- /dev/null +++ b/ecommerce/flora_website/style_contact.css @@ -0,0 +1,151 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Klee One', cursive; + list-style: none; + text-decoration: none; + scroll-behavior: smooth; +} +:root{ + --bg-color:snow; + --main-color:lightcoral; + --minor-color:rgb(49, 48, 48); + --other-color:dimgray; + --text-color:black; + --head-font:5rem; + --h2-font:3rem; + --p-font:1.5rem; +} +body{ + width: 100%; + height: 100vh; +} +.contact-container{ + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + padding: 20px 100px; +} +.contact-box{ + max-width: 850px; + margin-top: 10%; + display: grid; + grid-template-columns: repeat(2,1fr); + justify-content: center; + align-items: center; + text-align: center; + background-color: var(--bg-color); + box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.2); +} +.left{ + height: 100%; + background: url(images/bl3.jpg) no-repeat center; + background-size: cover; +}.right{ + padding: 25px 40px; +} +h2{ + padding-bottom: 10px; + margin-top: 8%; + margin-bottom: 5%; + position: relative; + font-family: 'Norican', cursive; + font-size: 2rem; +} +h2:after{ + content: ''; + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + height: 4px; + width: 50px; + border-radius: 2px; + background-color: var(--main-color); +} +.field{ + width: 100%; + padding: 0.6rem 1rem; + outline: none; + border: none; + background-color: rgba(230, 230, 230, 0.5); + font-size: 1rem; + margin-bottom: 20px; + transition: 0.3s; +} +.area{ + min-height: 150px; +} +.button-btn{ + margin-top: 5%; + margin-bottom: 8%; + width: 30%; + padding: 8px 10px; + outline: none; + border: none; + font-size: 1rem; + background-color: var(--main-color); + color: white; + font-weight: 600; + border-radius: 4rem; + cursor: pointer; +} +.button-btn:hover{ + background-color: rgb(239, 197, 197); + color: var(--text-color); +} +@media(max-width: 880px){ + .contact-box{ + grid-template-columns: 1fr; + } + .left{ + height: 200px; + } +} +@media(max-width: 500px){ + .contact-box{ + max-width: 800px; + } + h2{ + font-size: 1.5rem; + } + .field{ + padding: 0.4rem 0.8rem; + font-size: 0.8rem; + } + .area{ + min-height: 90px; + } +} +@media(max-width: 400px){ + .field{ + padding: 0.4rem 0.6rem; + font-size: 0.5rem; + } + .area{ + min-height: 80px; + } + .button-btn{ + width: 60%; + padding: 5px 8px; + outline: none; + border: none; + font-size: 0.6rem; + } +} +@media(max-width: 380px){ + h2{ + font-size: 1rem; + } + .field{ + padding: 0.4rem 0.4rem; + font-size: 0.5rem; + } + .button-btn{ + width: 50%; + } +} \ No newline at end of file