"Contact Us"
Bootstrap 4.1.1 Snippet by karimsharf12252

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d112061.09262729759!2d77.208022!3d28.632485!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x644e33bc3def0667!2sIndior+Tours+Pvt+Ltd.!5e0!3m2!1sen!2sus!4v1527779731123" width="100%" height="650px" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="contact-form">
<h1 class="title">Contact Us</h1>
<h2 class="subtitle">We are here assist you.</h2>
<form action="">
<input type="text" name="name" placeholder="Your Name" />
<input type="email" name="e-mail" placeholder="Your E-mail Adress" />
<input type="tel" name="phone" placeholder="Your Phone Number"/>
<textarea name="text" id="" rows="8" placeholder="Your Message"></textarea>
<button class="btn-send">Get a Call Back</button>
</form>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
font-family: 'Roboto', sans-serif;
body {
background: #D9B280;
font-family: "Roboto", sans-serif;
}
.container {
background: #FFFFFF;
width: 900px;
height: 650px;
margin: 5% auto;
position: relative;
}
.container .map {
width: 45%;
float: left;
}
.container .contact-form {
width: 53%;
margin-left: 2%;
float: left;
}
.container .contact-form .title {
font-size: 2.5em;
font-family: "Roboto", sans-serif;
font-weight: 700;
color: #242424;
margin: 5% 8%;
}
.container .contact-form .subtitle {
font-size: 1.2em;
font-weight: 400;
margin: 0 4% 5% 8%;
}
.container .contact-form input,
.container .contact-form textarea {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: