Skip to content

Commit ca3e26b

Browse files
NamanMehta818NamanMehta818
committed
contact us
1 parent fea7a28 commit ca3e26b

3 files changed

Lines changed: 315 additions & 110 deletions

File tree

‎contact.html‎

Lines changed: 70 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -93,34 +93,42 @@
9393

9494
<section class="contact_section layout_padding">
9595
<div class="container">
96-
<div class="heading_container">
96+
<div class="heading_container contact-heading">
9797
<h2>
9898
Contact Us
9999
</h2>
100+
<p>We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
100101
</div>
101-
<div class="row">
102-
<div class="col-md-6">
103-
<form action="">
104-
<div>
105-
<input type="text" placeholder="Name" />
106-
</div>
107-
<div>
108-
<input type="text" placeholder="Phone Number" />
109-
</div>
110-
<div>
111-
<input type="email" placeholder="Email" />
112-
</div>
113-
<div>
114-
<input type="text" class="message-box" placeholder="Message" />
115-
</div>
116-
<div class="d-flex ">
117-
<button>
118-
SEND
119-
</button>
120-
</div>
121-
</form>
102+
<div class="row g-4">
103+
<div class="col-lg-6">
104+
<div class="contact-form-wrapper">
105+
<form action="">
106+
<div class="form-group">
107+
<label for="name">Full Name</label>
108+
<input type="text" id="name" placeholder="Enter your name" />
109+
</div>
110+
<div class="form-group">
111+
<label for="phone">Phone Number</label>
112+
<input type="tel" id="phone" placeholder="Enter your phone number" />
113+
</div>
114+
<div class="form-group">
115+
<label for="email">Email Address</label>
116+
<input type="email" id="email" placeholder="Enter your email" />
117+
</div>
118+
<div class="form-group">
119+
<label for="message">Message</label>
120+
<textarea id="message" class="message-box" placeholder="Write your message here..."></textarea>
121+
</div>
122+
<div class="form-action">
123+
<button type="submit" class="btn-send">
124+
<span>Send Message</span>
125+
<i class="fa fa-paper-plane-o"></i>
126+
</button>
127+
</div>
128+
</form>
129+
</div>
122130
</div>
123-
<div class="col-md-6">
131+
<div class="col-lg-6">
124132
<div class="map_container">
125133
<div class="map">
126134
<div id="googleMap" style="width:100%;height:100%;"></div>
@@ -137,69 +145,70 @@ <h2>
137145
<!-- info section -->
138146
<section class="info_section ">
139147
<div class="container">
140-
<h4>
141-
Get In Touch
142-
</h4>
148+
<div class="info-header">
149+
<h2>
150+
Get In Touch
151+
</h2>
152+
<p>Multiple ways to connect with us</p>
153+
</div>
143154
<div class="row">
144155
<div class="col-lg-10 mx-auto">
145156
<div class="info_items">
146-
<div class="row">
157+
<div class="row g-4">
147158
<div class="col-md-4">
148-
<a href="">
149-
<div class="item ">
150-
<div class="img-box ">
151-
<i class="fa fa-map-marker" aria-hidden="true"></i>
152-
</div>
153-
<p>
154-
Lorem Ipsum is simply dummy text
155-
</p>
159+
<div class="contact-card">
160+
<div class="icon-wrapper">
161+
<i class="fa fa-map-marker" aria-hidden="true"></i>
156162
</div>
157-
</a>
163+
<h3>Address</h3>
164+
<p>
165+
Lorem Ipsum is simply dummy text of the printing industry
166+
</p>
167+
</div>
158168
</div>
159169
<div class="col-md-4">
160-
<a href="">
161-
<div class="item ">
162-
<div class="img-box ">
163-
<i class="fa fa-phone" aria-hidden="true"></i>
164-
</div>
165-
<p>
166-
+02 1234567890
167-
</p>
170+
<div class="contact-card">
171+
<div class="icon-wrapper">
172+
<i class="fa fa-phone" aria-hidden="true"></i>
168173
</div>
169-
</a>
174+
<h3>Phone</h3>
175+
<p>
176+
<a href="tel:+021234567890">+02 1234567890</a>
177+
</p>
178+
</div>
170179
</div>
171180
<div class="col-md-4">
172-
<a href="">
173-
<div class="item ">
174-
<div class="img-box">
175-
<i class="fa fa-envelope" aria-hidden="true"></i>
176-
</div>
177-
<p>
178-
demo@gmail.com
179-
</p>
181+
<div class="contact-card">
182+
<div class="icon-wrapper">
183+
<i class="fa fa-envelope" aria-hidden="true"></i>
180184
</div>
181-
</a>
185+
<h3>Email</h3>
186+
<p>
187+
<a href="mailto:demo@gmail.com">demo@gmail.com</a>
188+
</p>
189+
</div>
182190
</div>
183191
</div>
184192
</div>
185193
</div>
186194
</div>
187195
</div>
188196
<div class="social-box">
189-
<h4>
197+
<h3>
190198
Follow Us
191-
</h4>
192-
<div class="box">
193-
<a href="">
199+
</h3>
200+
<p>Stay connected on social media</p>
201+
<div class="social-links">
202+
<a href="" class="social-link">
194203
<i class="fa fa-facebook" aria-hidden="true"></i>
195204
</a>
196-
<a href="">
205+
<a href="" class="social-link">
197206
<i class="fa fa-twitter" aria-hidden="true"></i>
198207
</a>
199-
<a href="">
208+
<a href="" class="social-link">
200209
<i class="fa fa-youtube" aria-hidden="true"></i>
201210
</a>
202-
<a href="https://www.instagram.com/rise.robotics/">
211+
<a href="https://www.instagram.com/rise.robotics/" class="social-link">
203212
<i class="fa fa-instagram" aria-hidden="true"></i>
204213
</a>
205214
</div>

‎css/responsive.css‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@
7070
margin-bottom: 45px;
7171
}
7272

73-
7473
.professional_section .img-box {
7574
display: none;
7675
}
@@ -79,6 +78,35 @@
7978
margin-bottom: 45px;
8079
}
8180

81+
.contact-form-wrapper {
82+
padding: 30px 20px;
83+
}
84+
85+
.contact_section .contact-heading h2 {
86+
font-size: 2rem;
87+
}
88+
89+
.contact_section .map_container {
90+
height: 300px;
91+
margin-top: 20px;
92+
}
93+
94+
.info_section {
95+
padding: 60px 0;
96+
}
97+
98+
.info_section .info-header h2 {
99+
font-size: 1.8rem;
100+
}
101+
102+
.contact-card {
103+
padding: 30px 20px;
104+
}
105+
106+
.social-links {
107+
gap: 15px;
108+
}
109+
82110
.info_section .info_items::before {
83111
width: 1px;
84112
height: 90%;

0 commit comments

Comments
 (0)