diff --git a/assets/contact-us.svg b/assets/contact-us.svg
new file mode 100644
index 0000000..371da62
--- /dev/null
+++ b/assets/contact-us.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/css/home.css b/css/home.css
index 6d9330a..57ff7c7 100644
--- a/css/home.css
+++ b/css/home.css
@@ -147,6 +147,11 @@
text-align: center;
}
+.product-img img:hover {
+ transition: 0.6s ease;
+ box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
+}
+
.product-img h3 {
font-size: 20px;
color: #f5564e;
@@ -176,9 +181,10 @@
}
/* form */
-input,
-textarea {
- display: block;
+.formc {
+ text-align: center;
+ color: #e23f3f;
+ margin-bottom: 15px;
}
input[type="submit"] {
@@ -197,43 +203,177 @@ input[type="submit"]:hover {
.container {
display: block;
background-color: #f2f2f2;
+ padding: 20px 30px;
+}
+
+.container-form {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.content{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 25px 20px;
+}
+
+.content form {
+ width: 42%;
+ margin-right: 30px;
+ margin-left: 15px;
+}
+
+.content .input-box {
+ height: 50px;
+ width: 100%;
+ margin: 16px 0;
+ position: relative;
+ color: ;
+}
+
+.input-box input {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ border-radius: 6px;
+ outline: none;
+ padding-left: 16px;
+ font-size: 16px;
+ background: rgb(223, 216, 216);
+ border: 2px solid transparent;
+ color: #191c1f;
+}
+
+.input-box input:focus,
+.input-box input:valid {
+ border-color: #d43737;
+ background-color: #f2f2f2;
+}
+
+.input-box label {
+ position: absolute;
+ left: 18px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: #191c1f;
+ font-size: 15px;
+ transition: all 0.3s ease;
+}
+
+.input-box input:focus ~ label,
+.input-box input:valid ~ label {
+ top: 0;
+ left: 12px;
+ color: #e23f3f;
+ background: #f2f2f2;
+}
+
+.image-box {
+ max-width: 55%;
+}
+
+.image-box img {
+ width: 100%;
+}
+
+.msg-box {
+ min-height: 100px;
+ position: relative;
+}
+
+.msg-box textarea {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ border-radius: 6px;
+ outline: none;
+ background: rgb(223, 216, 216);
+ border: 2px solid transparent;
+ resize: none;
+ transition: all 0.3s ease;
+}
+
+.msg-box label {
+ position: absolute;
+ font-size: 16px;
+ color: #191c1f;
+ left: 18px;
+ top: 6px;
+}
+
+.msg-box textarea:focus {
+ border-color: #e23f3f;
+ background: #f2f2f2;
+ padding: 12px;
+}
+
+.msg-box textarea:focus ~ label {
+ left: 12px;
+ color: #e23f3f;
+ top: -10px;
+ font-size: 14px;
+ background: #f2f2f2;
+}
+
+.content input[type="submit"] {
+ color: #f2f2f2;
+ background: #e23f3f;
+ font-size: 18px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.content input[type="submit"]:hover {
+ background-color: #c42c2c;
}
.foot {
vertical-align: top;
vertical-align: bottom;
background-color: rgb(223, 216, 216);
+ padding-bottom: 20px;
}
-.formc {
- text-align: center;
+.foot h2{
+ margin-left: 30px;
color: #e23f3f;
}
-.for {
- display: inline;
- display: block;
+.footer {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 20px;
+ padding-bottom: 20px;
+ padding: 0px 30px;
}
-.contact-img {
- width: 100%;
- height: auto;
+.foot-heading {
+ font-weight: bold;
}
-.contact-us {
- display: flex;
- justify-content: space-between;
+.links p{
+ font-weight: bold;
}
-.contact-right {
- margin: 1em;
- flex: 0 50%;
+.links a {
+ text-decoration: none;
+ color: #191c1f;
+}
+.links {
+ text-align: center;
}
-.contact-left {
- flex: 0 50%;
+.links i {
+ font-size: 24px;
+ margin: 2.5px 5px 0;
}
+
+
+
+
/* Keyframes and media queries */
/* Always keep these at last */
@@ -301,10 +441,36 @@ input[type="submit"]:hover {
.product-img h3 {
font-size: 16px;
}
+ .content {
+ flex-direction: column;
+ }
+ .content form {
+ width: 100%;
+ }
+ .image-box {
+ opacity: 0;
+ z-index: -1;
+ }
+ .content form {
+ position: relative;
+ bottom: 180px;
+ margin-left: 45px;
+ }
+
}
@media (max-width: 790px) {
.product-img p {
font-size: 14px;
}
+ .footer {
+ text-align: center;
+ flex-direction: column;
+ }
+ .foot h2{
+ text-align: center;
+ }
+ .foot div {
+ margin-bottom: 15px;
+ }
}
diff --git a/css/products.css b/css/products.css
index 9397433..a6bb8ea 100644
--- a/css/products.css
+++ b/css/products.css
@@ -117,4 +117,59 @@
background: rgb(0, 0, 0);
}
+.foot {
+ vertical-align: top;
+ vertical-align: bottom;
+ background-color: #222;
+ padding-bottom: 20px;
+ padding-top: 15px;
+}
+
+.foot h2{
+ margin-left: 30px;
+ color: #e23f3f;
+}
+
+.footer {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 20px;
+ padding-bottom: 20px;
+ padding: 0px 30px;
+ color: #f2f2f2;
+}
+
+.foot-heading {
+ font-weight: bold;
+}
+
+.links p{
+ font-weight: bold;
+}
+
+.links a {
+ text-decoration: none;
+ color: #191c1f;
+}
+.links {
+ text-align: center;
+}
+
+.links i {
+ font-size: 24px;
+ margin: 2.5px 5px 0;
+ color: #f2f2f2;
+}
/* responsive */
+@media (max-width: 720px) {
+ .footer {
+ text-align: center;
+ flex-direction: column;
+ }
+ .foot h2{
+ text-align: center;
+ }
+ .foot div {
+ margin-bottom: 15px;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 6abed6a..cfdee18 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
Bindle Bee
+
- 
+