From 56a37b540d8e2b0a565bc0827370c210ea8b0fae Mon Sep 17 00:00:00 2001 From: SHUBHRAJYOTI Date: Fri, 7 Oct 2022 00:45:53 +0530 Subject: [PATCH] Issue no.13 resolved:create a contact us section --- Shubhrajyoti/contact.html | 58 ++++++++++++++ Shubhrajyoti/style.css | 161 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 219 insertions(+) create mode 100644 Shubhrajyoti/contact.html create mode 100644 Shubhrajyoti/style.css diff --git a/Shubhrajyoti/contact.html b/Shubhrajyoti/contact.html new file mode 100644 index 00000000..af6a6327 --- /dev/null +++ b/Shubhrajyoti/contact.html @@ -0,0 +1,58 @@ + + + + + + + + + + Contact + + + +
+

Contact Us

+
+
+ + + + + + + + + +
+
+
+
+

OFFICE ADDRESS

+

123 Anywhere street

+

Any city, ST 12345

+
+
+

CONTACT US

+

+ 123 456 789

+

abc321@gmail.com

+

enquiry@abc000.com

+
+
+
+

FOLLOW US

+ +
+

Made with by Shubhrajyoti

+
+ + \ No newline at end of file diff --git a/Shubhrajyoti/style.css b/Shubhrajyoti/style.css new file mode 100644 index 00000000..25590813 --- /dev/null +++ b/Shubhrajyoti/style.css @@ -0,0 +1,161 @@ +/*------ contact us ------*/ + +.contact { + width: 100%; + text-align: center; + padding: 70px 0; +} + +.contact h1 { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + color: #08393b; + font-size: 45px; + text-align: center; + margin-bottom: 2px; + margin-top: 20px; + font-weight: 600; +} + +.contact .form { + width: 100%; + height: 100%; + padding-top: 40px; + padding-bottom: 40px; +} + +.contact .form::after { + content: ""; + display: block; + clear: both; +} + +.contact .form input, +.contact .form label { + display: block; + margin: 1rem auto; + width: 50%; + font-size: 1.3rem; + font-weight: 600; + text-align: start; + border-radius: 5px; + height: 2rem; +} + +.contact .form textarea { + display: block; + margin: 1rem auto; + width: 50%; + font-size: 1.3rem; + font-weight: 600; + text-align: start; + border-radius: 5px; +} + +.contact .form .btns { + display: flex; + justify-content: center; + text-align: center; +} + +.contact .form .btns:hover { + background-color: #43bcf575; + transition: 0.5s; +} + +.address { + width: 65%; + margin-top: 50px; + margin-left: 275px; + display: flex; + flex-direction: row; + justify-content: space-between; + text-align: center; +} + +.address .detail h2 { + color: #08393b; +} + +.icon { + padding-top: 20px; +} + +.icon h2 { + color: #08393b; +} + +.icon .social-icons { + cursor: pointer; + margin: 20px; +} + +.fa-heart { + color: #ca1508; +} + + + +/*------ @media queries ------*/ + +@media(max-width: 700px) { + + /*---- contact us ----*/ + + .contact { + width: 100%; + text-align: center; + padding: 20px 0; + } + + .contact h4 { + margin-bottom: 2px; + margin-top: 40px; + font-size: 36px; + font-weight: 600; + } + + .contact .form { + width: 80%; + text-align: center; + background-color: #b9e4f5; + height: 80%; + margin: 0 auto; + } + + .contact .form::after { + content: ""; + display: block; + clear: both; + } + + .contact .form input, + .contact .form label, + .contact .form textarea { + display: block; + margin: 1rem auto; + width: 50%; + font-size: 1.3rem; + font-weight: 600; + text-align: start; + } + + .contact .form .btn { + text-align: center; + } + + .address { + width: 65%; + margin-top: 30px; + margin-left: 80px; + display: block; + text-align: center; + } + + .address .detail { + padding-top: 30px; + } + + .icon { + padding-top: 30px; + } +} \ No newline at end of file