From 13e9ac265dcb9ca74f06e4d4727131f64a9f4ec8 Mon Sep 17 00:00:00 2001 From: MOHIT-IITP Date: Tue, 15 Oct 2024 14:49:39 +0530 Subject: [PATCH] Fixes: #735 --- contact.css | 139 +++++++++++++++++++++++++++++++++++++++++++++++++++ contact.html | 25 +++++++++ index.html | 2 +- 3 files changed, 165 insertions(+), 1 deletion(-) create mode 100644 contact.css create mode 100644 contact.html diff --git a/contact.css b/contact.css new file mode 100644 index 00000000..05ff4465 --- /dev/null +++ b/contact.css @@ -0,0 +1,139 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-image: linear-gradient(to bottom right , blue, violet); + backdrop-filter: blur(10px); +} + +.container { + display: flex; + width: 500px; + background: rgba(0, 0, 0, 0.6); + padding: 40px; + border-radius: 12px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + overflow: hidden; + position: relative; + height: 520px; +} + +.container form { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + border-radius: 15px; + flex-wrap: wrap; + padding: 20px; +} + +.container form h1 { + color: #fff; + font-weight: 500; + margin: 5px 0 10px; + width: 100%; + text-align: center; +} + +.container form input { + width: calc(50% - 20px); + height: 40px; + padding-left: 10px; + outline: none; + border: none; + font-size: 15px; + margin-bottom: 10px; + background: none; + border-bottom: 2px solid #fff; + color: #fff; +} + +.container form input::placeholder { + color: #ddd; +} + +.container form input#lastName, +.container form input#mobile { + margin-left: 20px; +} + +.container form h4 { + color: #ffffffd5; + font-weight: 300; + width: 100%; + margin-top: 20px; + text-align: center; +} + +.container form textarea { + background: none; + border: none; + border-bottom: 2px solid #fff; + color: #fff; + font-weight: 200; + font-size: 15px; + padding: 10px; + outline: none; + width: 100%; + height: 80px; + resize: none; +} + +textarea::-webkit-scrollbar { + width: 1em; +} + +textarea::-webkit-scrollbar-thumb { + background-color: rgba(194, 194, 0, 0.7); +} + +.container form #button { + border: none; + background: #fff; + border-radius: 5px; + margin-top: 20px; + font-weight: 600; + font-size: 20px; + color: #333; + width: 100px; + padding: 6px; + transition: opacity 0.3s; +} + +.container form #button:hover { + opacity: 0.7; +} + +/* Responsive Styles */ +@media (max-width: 768px) { + .container { + width: 70%; + padding: 20px; + height: auto; + } + + .container form input, + .container form textarea { + width: 70%; + } + + .container form input#lastName, + .container form input#mobile { + margin-left: 0; + } + + .container form { + padding: 10px; + } +} diff --git a/contact.html b/contact.html new file mode 100644 index 00000000..0bcaa9ea --- /dev/null +++ b/contact.html @@ -0,0 +1,25 @@ + + + + + + Contact Us + + + + +
+
+

Contact Us

+ + + + + +

Type Your Message Here

+ + +
+
+ + diff --git a/index.html b/index.html index 4cad1a18..64209256 100644 --- a/index.html +++ b/index.html @@ -277,7 +277,7 @@

BuddyTrail

  • About
  • Travel Itineraries
    • -
  • Contact
    • +
  • Contact
  • Reviews
  • Sign In