Skip to content

Commit d1a5093

Browse files
pranavpanmandpranavpanmand
committed
Add responsive Contact Us page (HTML & CSS) — Fixes you-dont-need#967 
1 parent c26d7c3 commit d1a5093

File tree

5 files changed

+301
-0
lines changed

5 files changed

+301
-0
lines changed

‎contact-us/index.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Responsive Contact Us Form</title>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
9+
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
10+
crossorigin="anonymous" referrerpolicy="no-referrer" />
11+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
14+
<body>
15+
<div class="container">
16+
17+
<div class="content">
18+
19+
<div class="left-side">
20+
21+
<div class="address details">
22+
<i class="fa-solid fa-location-dot"></i>
23+
<div class="topic">Address</div>
24+
<div class="text1">Surkhet NP12</div>
25+
<div class="text2">Birendranagar 06</div>
26+
</div>
27+
28+
<div class="Phone details">
29+
<i class="fa-solid fa-phone"></i>
30+
<div class="topic">Phone</div>
31+
<div class="text1">+0098 9893 5647</div>
32+
<div class="text2">+0096 3434 5678</div>
33+
</div>
34+
35+
<div class="Email details">
36+
<i class="fa-solid fa-envelope"></i>
37+
<div class="topic">Phone</div>
38+
<div class="text1">[email protected]</div>
39+
<div class="text2">[email protected]</div>
40+
</div>
41+
42+
</div>
43+
44+
<div class="right-side">
45+
46+
<div class="topic-text">Send us a message</div>
47+
<p>If you have any work from me or any types of quries related to my tutorial,
48+
you can send me message from here. It's my pleasure to help you.</p>
49+
50+
<form action="#">
51+
52+
<div class="input-box">
53+
<input type="text" placeholder="Enter your name">
54+
</div>
55+
56+
<div class="input-box">
57+
<input type="text" placeholder="Enter your email">
58+
</div>
59+
60+
<div class="input-box message-box">
61+
<textarea></textarea>
62+
</div>
63+
64+
<div class="button">
65+
<input type="button" value="Send Now">
66+
</div>
67+
68+
</form>
69+
70+
</div>
71+
72+
</div>
73+
74+
</div>
75+
</body>
76+
77+
</html>

‎contact-us/readme.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# 🌐 Responsive Contact Us Page
2+
3+
## 📋 Overview
4+
This is a **responsive Contact Us page** built using **only HTML and CSS**.
5+
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.
6+
7+
---
8+
9+
## ✨ Features
10+
- 📱 Fully responsive layout for all devices
11+
- 💬 User-friendly form design
12+
- 🎨 Simple and elegant UI with hover effects
13+
- 🧱 Built using pure HTML and CSS (no JavaScript)
14+
15+
---
16+
17+
## 🧩 Sections Included
18+
- **Address** – Displays location details
19+
- **Phone** – Contact numbers for easy access
20+
- **Email** – Professional email contact
21+
- **Message Form** – Allows users to send messages or queries
22+
23+
---
24+
25+
## 🖼️ Preview
26+
![Contact Us Page Screenshot](ui.png)
27+
28+
---
29+
30+
## 💡 How to Use
31+
1. Clone or download the project files.
32+
2. Open `index.html` in any web browser.
33+
3. Explore and customize it as per your project.
34+
35+
---
36+
37+
## 🏷️ Category
38+
**Websites and UI**
39+
40+
---
41+
42+
## 🛠️ Tech Stack
43+
- HTML5
44+
- CSS3
45+
- Font Awesome Icons
46+
47+
---
48+
49+
## 🎯 Contribution
50+
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.
51+
52+
---

‎contact-us/style.css‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Poppins", sans-serif;
8+
user-select: none;
9+
}
10+
11+
body {
12+
min-height: 100vh;
13+
width: 100%;
14+
background: #cbe8e9;
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
}
19+
20+
.container {
21+
width: 80%;
22+
background: #fff;
23+
border-radius: 6px;
24+
padding: 20px 60px 40px 40px;
25+
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
26+
}
27+
28+
.container .content {
29+
display: flex;
30+
align-items: center;
31+
justify-content: space-between;
32+
}
33+
34+
.container .content .left-side {
35+
width: 25%;
36+
height: 100%;
37+
display: flex;
38+
flex-direction: column;
39+
align-items: center;
40+
justify-content: center;
41+
margin-top: 15px;
42+
position: relative;
43+
}
44+
45+
.content .left-side::before {
46+
content: '';
47+
position: absolute;
48+
height: 70%;
49+
width: 2px;
50+
right: -15px;
51+
top: 50%;
52+
transform: translateY(-50%);
53+
background: #afafb6;
54+
}
55+
56+
.content .left-side .details {
57+
margin: 14px;
58+
text-align: center;
59+
}
60+
61+
.content .left-side .details i {
62+
font-size: 30px;
63+
color: #3e2093;
64+
}
65+
66+
.content .left-side .details .topic {
67+
font-size: 18px;
68+
font-weight: 500;
69+
margin-bottom: 10px;
70+
}
71+
72+
.content .left-side .details .text1,
73+
.content .left-side .details .text2 {
74+
font-size: 14px;
75+
color: #afafb6;
76+
}
77+
78+
.container .content .right-side {
79+
width: 75%;
80+
margin-left: 75px;
81+
}
82+
83+
.content .right-side .topic-text {
84+
font-size: 23px;
85+
font-weight: 600;
86+
color: #3e2093;
87+
}
88+
89+
.right-side .input-box {
90+
height: 50px;
91+
width: 100%;
92+
margin: 12px 0;
93+
}
94+
95+
.right-side .input-box input,
96+
.right-side .input-box textarea {
97+
height: 100%;
98+
width: 100%;
99+
border: none;
100+
font-size: 16px;
101+
background: #f0f1f8;
102+
border-radius: 6px;
103+
padding: 0 15px;
104+
resize: none;
105+
}
106+
107+
.right-side .input-box textarea {
108+
padding-top: 10px;
109+
}
110+
111+
.right-side .message-box {
112+
min-height: 110px;
113+
}
114+
115+
.right-side .button {
116+
display: inline-block;
117+
margin-top: 6px;
118+
}
119+
120+
.right-side .button input[type="button"] {
121+
color: #fff;
122+
font-size: 18px;
123+
outline: none;
124+
border: none;
125+
padding: 8px 16px;
126+
border-radius: 6px;
127+
background: #3e2093;
128+
cursor: pointer;
129+
transition: all 0.3s ease;
130+
outline: none;
131+
-webkit-tap-highlight-color: transparent;
132+
}
133+
134+
.button input[type="button"]:hover {
135+
background: #5029bc;
136+
}
137+
138+
@media (max-width:952px) {
139+
.container {
140+
width: 90%;
141+
padding: 30px 35px 40px 35px;
142+
}
143+
}
144+
145+
@media (max-width:820px) {
146+
.container {
147+
margin: 40px 0;
148+
height: 100%;
149+
}
150+
151+
.container .content {
152+
flex-direction: column-reverse;
153+
}
154+
155+
.container .content .left-side {
156+
width: 100%;
157+
flex-direction: row;
158+
margin-top: 40px;
159+
justify-content: center;
160+
flex-wrap: wrap;
161+
}
162+
163+
.container .content .left-side::before {
164+
display: none;
165+
}
166+
167+
.container .content .right-side {
168+
width: 100%;
169+
margin-left: 0;
170+
}
171+
}

‎contact-us/ui.png‎

75.3 KB
Loading

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -492,6 +492,7 @@ <h1>You Dont Need JavaScript</h1>
492492
<a href="./Zomato/index.html">Zomato Clone</a>
493493
<a href="./Weather/index.html">Weather App</a>
494494
<a href="./linked-login/index.html">Linked Login</a>
495+
<a href="./contact-us/index.html">Contact Us Form</a>
495496

496497

497498
</td>

0 commit comments

Comments
 (0)