you-dont-need · pranavpanmand · Oct 29, 2025 · Oct 29, 2025
diff --git a/contact-us/index.html b/contact-us/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Responsive Contact Us Form</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+        integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+
+        <div class="content">
+
+            <div class="left-side">
+
+                <div class="address details">
+                    <i class="fa-solid fa-location-dot"></i>
+                    <div class="topic">Address</div>
+                    <div class="text1">Surkhet NP12</div>
+                    <div class="text2">Birendranagar 06</div>
+                </div>
+
+                <div class="Phone details">
+                    <i class="fa-solid fa-phone"></i>
+                    <div class="topic">Phone</div>
+                    <div class="text1">+0098 9893 5647</div>
+                    <div class="text2">+0096 3434 5678</div>
+                </div>
+
+                <div class="Email details">
+                    <i class="fa-solid fa-envelope"></i>
+                    <div class="topic">Phone</div>
+                    <div class="text1">[email protected]</div>
+                    <div class="text2">[email protected]</div>
+                </div>
+
+            </div>
+
+            <div class="right-side">
+
+                <div class="topic-text">Send us a message</div>
+                <p>If you have any work from me or any types of quries related to my tutorial,
+                    you can send me message from here. It's my pleasure to help you.</p>
+
+                <form action="#">
+
+                    <div class="input-box">
+                        <input type="text" placeholder="Enter your name">
+                    </div>
+
+                    <div class="input-box">
+                        <input type="text" placeholder="Enter your email">
+                    </div>
+
+                    <div class="input-box message-box">
+                        <textarea></textarea>
+                    </div>
+
+                    <div class="button">
+                        <input type="button" value="Send Now">
+                    </div>
+
+                </form>
+
+            </div>
+
+        </div>
+
+    </div>
+</body>
+
+</html>
diff --git a/contact-us/readme.md b/contact-us/readme.md
@@ -0,0 +1,52 @@
+# 🌐 Responsive Contact Us Page
+
+## 📋 Overview
+This is a **responsive Contact Us page** built using **only HTML and CSS**.  
+It includes a clean, modern design suitable for websites like **E-Shop**, **Portfolio**, and **Company Landing Pages**, where a contact section is often essential but sometimes missing.
+
+---
+
+## ✨ Features
+- 📱 Fully responsive layout for all devices  
+- 💬 User-friendly form design  
+- 🎨 Simple and elegant UI with hover effects  
+- 🧱 Built using pure HTML and CSS (no JavaScript)
+
+---
+
+## 🧩 Sections Included
+- **Address** – Displays location details  
+- **Phone** – Contact numbers for easy access  
+- **Email** – Professional email contact  
+- **Message Form** – Allows users to send messages or queries  
+
+---
+
+## 🖼️ Preview
+![Contact Us Page Screenshot](ui.png)
+
+---
+
+## 💡 How to Use
+1. Clone or download the project files.  
+2. Open `index.html` in any web browser.  
+3. Explore and customize it as per your project.
+
+---
+
+## 🏷️ Category
+**Websites and UI**
+
+---
+
+## 🛠️ Tech Stack
+- HTML5  
+- CSS3  
+- Font Awesome Icons  
+
+---
+
+## 🎯 Contribution
+This page can be added to the **“Websites and UI”** category of the repository to enhance UI examples and improve completeness for projects like **Portfolio** or **E-Shop** websites.
+
+---
diff --git a/contact-us/style.css b/contact-us/style.css
@@ -0,0 +1,171 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+    user-select: none;
+}
+
+body {
+    min-height: 100vh;
+    width: 100%;
+    background: #cbe8e9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    width: 80%;
+    background: #fff;
+    border-radius: 6px;
+    padding: 20px 60px 40px 40px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+.container .content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.container .content .left-side {
+    width: 25%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 15px;
+    position: relative;
+}
+
+.content .left-side::before {
+    content: '';
+    position: absolute;
+    height: 70%;
+    width: 2px;
+    right: -15px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: #afafb6;
+}
+
+.content .left-side .details {
+    margin: 14px;
+    text-align: center;
+}
+
+.content .left-side .details i {
+    font-size: 30px;
+    color: #3e2093;
+}
+
+.content .left-side .details .topic {
+    font-size: 18px;
+    font-weight: 500;
+    margin-bottom: 10px;
+}
+
+.content .left-side .details .text1,
+.content .left-side .details .text2 {
+    font-size: 14px;
+    color: #afafb6;
+}
+
+.container .content .right-side {
+    width: 75%;
+    margin-left: 75px;
+}
+
+.content .right-side .topic-text {
+    font-size: 23px;
+    font-weight: 600;
+    color: #3e2093;
+}
+
+.right-side .input-box {
+    height: 50px;
+    width: 100%;
+    margin: 12px 0;
+}
+
+.right-side .input-box input,
+.right-side .input-box textarea {
+    height: 100%;
+    width: 100%;
+    border: none;
+    font-size: 16px;
+    background: #f0f1f8;
+    border-radius: 6px;
+    padding: 0 15px;
+    resize: none;
+}
+
+.right-side .input-box textarea {
+    padding-top: 10px;
+}
+
+.right-side .message-box {
+    min-height: 110px;
+}
+
+.right-side .button {
+    display: inline-block;
+    margin-top: 6px;
+}
+
+.right-side .button input[type="button"] {
+    color: #fff;
+    font-size: 18px;
+    outline: none;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 6px;
+    background: #3e2093;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.button input[type="button"]:hover {
+    background: #5029bc;
+}
+
+@media (max-width:952px) {
+    .container {
+        width: 90%;
+        padding: 30px 35px 40px 35px;
+    }
+}
+
+@media (max-width:820px) {
+    .container {
+        margin: 40px 0;
+        height: 100%;
+    }
+
+    .container .content {
+        flex-direction: column-reverse;
+    }
+
+    .container .content .left-side {
+        width: 100%;
+        flex-direction: row;
+        margin-top: 40px;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .container .content .left-side::before {
+        display: none;
+    }
+
+    .container .content .right-side {
+        width: 100%;
+        margin-left: 0;
+    }
+}
diff --git a/contact-us/ui.png b/contact-us/ui.png
diff --git a/index.html b/index.html
@@ -492,6 +492,7 @@ <h1>You Dont Need JavaScript</h1>
             <a href="./Zomato/index.html">Zomato Clone</a>
             <a href="./Weather/index.html">Weather App</a>
             <a href="./linked-login/index.html">Linked Login</a>
+            <a href="./contact-us/index.html">Contact Us Form</a>
 
 
           </td>