<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 ---------->
<section id="quick-support" class="site-quick-support section-white">
<div class="container">
<div class="contact-box blue-purple-gredient">
<div class="col-xs-12">
<div class="box">
<!-- INFO -->
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
<div class="site-info">
<h5> Contact Info</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting indus orem Ipsum has been the industrys.
</p>
<!-- BOX -->
<a href="tel:+911234567890" class="site-box-row">
<!-- ICON -->
<h6><i class="fa fa-phone"></i> Call us </h6>
<!-- PARAGRAPH -->
<p>+91 123 456 7890</p>
</a>
<!-- BOX -->
<a href="mailto:support@gmail.com" class="site-box-row last">
<!-- ICON -->
<h6><i class="fa fa-envelope"></i> Email us</h6>
<!-- Mail -->
<p>support@gmail.com</p>
</a>
<!-- BOX -->
<a target="_blank" href="http://maps.google.com/?q=Location,125BusinessEvenue,Huston,USA" class="site-box-row">
<!-- ICON -->
<h6><i class="fa fa-map-marker"></i> Location</h6>
<!-- ADDRESS -->
<address>Location, 125 Business Evenue, Huston, USA</address>
</a>
</div>
</div>
<!-- CONTACT FORM -->
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
<div class="site-info form">
<h5> Send us message! </h5>
<form action="php/form.php" method="post" class="site-contact-form" id="myForm">
<label>
<input class="app-btn value-clear" type="text" name="app_name" placeholder="Name" required="required">
</label>
<label>
<input class="app-btn value-clear" type="email" name="app_email" placeholder="Email" required="required">
</label>
<label>
<input class="app-btn value-clear" type="tel" name="app_phone" placeholder="Phone" required="required">
</label>
<label>
<input class="app-btn value-clear" type="url" name="app_website" placeholder="Website">
</label>
<label class="last">
<textarea class="app-btn value-clear" name="app_message" placeholder="Message" required=""></textarea>
</label>
<label class="move">
<button id="form-submit-btn" class="app-btn" type="submit">Submit <i class="fa fa-spin fa-spinner"></i></button>
</label>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
* {
outline: none !important;
}
.site-quick-support {
padding-bottom: 0;
overflow: hidden;
}
.section-white, .section-blue {
margin: 0;
padding: 80px 0;
display: block;
width: 100%;
clear: both;
background: white;
text-align: center;
overflow: hidden;
}
.site-quick-support .contact-box {
float: left;
width: 100%;
border-radius: 12px;
height: 640px;
}
.blue-purple-gredient {
background: #836aeb;
background: rgba(50,187,241,1);
background: -moz-linear-gradient(-45deg, rgba(50,187,241,1) 0%, rgba(166,73,233,1) 68%, rgba(166,73,233,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(50,187,241,1)), color-stop(68%, rgba(166,73,233,1)), color-stop(100%, rgba(166,73,233,1)));
background: -webkit-linear-gradient(-45deg, rgba(50,187,241,1) 0%, rgba(166,73,233,1) 68%, rgba(166,73,233,1) 100%);
background: -o-linear-gradient(-45deg, rgba(50,187,241,1) 0%, rgba(166,73,233,1) 68%, rgba(166,73,233,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(50,187,241,1) 0%, rgba(166,73,233,1) 68%, rgba(166,73,233,1) 100%);
background: linear-gradient(135deg, rgba(50,187,241,1) 0%, rgba(166,73,233,1) 68%, rgba(166,73,233,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32bbf1', endColorstr='#a649e9', GradientType=1 );
}
.site-quick-support .site-info {
float: left;
width: 100%;
text-align: left;
font-size: 0;
border-right: rgba(255,255,255,0.4) solid 1px;
padding: 80px 40px;
}
.site-quick-support h5 {
font-size: 25px;
font-weight: 600;
color: #FFFFFF;
}
.site-quick-support .site-info p {
float: left;
width: 100%;
font-size: 15px;
font-weight: normal;
color: #FFFFFF;
line-height: 1.7;
padding: 40px 0 40px 0;
}
.site-quick-support p, .site-quick-support address {
float: left;
color: #FFFFFF;
font-family: inherit;
font-size: 14px;
font-weight: normal;
padding: 1.125rem 0;
width: 100%;
font-style: normal;
margin: 0;
padding: 0 0 0 52px;
transition: 300ms linear;
transition-property: color;
line-height: 1.5;
}
a:hover, a:active, a:focus, a:visited {
text-decoration: none;
color: #a549e9;
}
a {
text-decoration: none;
color: #2b8dd9;
transition: 300ms linear;
transition-property: color;
display: inline-block;
}
.site-quick-support .site-box-row h6 {
float: left;
font-size: 21px;
color: #FFFFFF;
font-weight: normal;
line-height: 1;
padding: 0;
margin: 0;
}
.site-quick-support .site-box-row {
float: left;
width: 100%;
padding-bottom: 50px;
}
.site-quick-support p, .site-quick-support address {
float: left;
color: #FFFFFF;
font-family: inherit;
font-size: 14px;
font-weight: normal;
padding: 1.125rem 0;
width: 100%;
font-style: normal;
margin: 0;
padding: 0 0 0 52px;
transition: 300ms linear;
transition-property: color;
line-height: 1.5;
}
.site-quick-support .site-info.form {
border: none;
}
.site-quick-support .site-info {
float: left;
width: 100%;
text-align: left;
font-size: 0;
border-right: rgba(255,255,255,0.4) solid 1px;
padding: 80px 40px;
}
.site-quick-support h5 {
font-size: 25px;
font-weight: 600;
color: #FFFFFF;
}
.site-contact-form {
padding: 40px 0 0 0;
display: block;
width: 100%;
clear: both;
margin: 0;
}
.site-contact-form label {
margin-bottom: 0.875rem;
display: block;
margin-right: 0;
color: #FFFFFF !important;
}
.site-contact-form input, .site-contact-form textarea {
width: 100%;
height: 45px;
background-color: inherit;
padding: 0;
color: #FFFFFF !important;
font-family: inherit;
font-size: 14px;
font-weight: normal;
line-height: 1.5;
border-bottom: #FFFFFF solid 1px;
box-sizing: border-box;
transition: 300ms linear;
transition-property: border-color;
display: block;
margin: 0;
border-top: none;
border-left: none;
border-right: none;
}
