<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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="space-medium">
<div class="container">
<div class="row">
<div class="col-xl-5 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="feature-description">
<h2>Contact us and we'll get back to you within 24 hours.</h3>
</h2>
<hr>
<!-- feature-left -->
<div class="feature-left">
<div class="feature-icon"><h4><span class="glyphicon glyphicon-map-marker"></span></div>
<div class="feature-content">
<h3> 1+310 ● 926 ● 8628</h3> <!--smaller dot ·-->
<h3> Anticoh, California, USA</h4> </div>
</div>
<!-- /.feature-left -->
<!-- feature-left -->
<div class="feature-left">
<div class="feature-icon"><i class="far fa-compass"></i></div>
<div class="feature-content">
<a href="mailto:llglsgo@gmail.com ">llglasgo@gmail.com</a></span></h3>
</div>
</div>
<!-- /.feature-left -->
<!-- feature-left -->
<div class="feature-left">
<div class="feature-icon"><i class="far fa-question-circle"></i></div>
<div class="feature-content">
<p>Vivamus eu nunc id dolor auctor eleifend mauris ante ligula vestibulum.</p>
</div>
</div>
<!-- /.feature-left -->
<hr>
<p>Our projects typically take 4 - 6 weeks to complete, and can extend to as long as 12 weeks depending on the scope of the project. Rush Options are available.</p>
</p>
<hr>
<p>Provide details of what your website will consist of. ie. The purpose of the website (provide information, sell a product online, be able to manage the website content by yourself, how many pages you need, functionality that you need programmed (image galleries, blog, contact form...) The more details you provide the better.</p>
<p>Great project descriptions include a little bit about yourself, details of what you are trying to achieve, and any decisions that you have already made about your project. Please lete us know of any concerns you have If there are things you are unsure we will be able to help you fill in the blanks. What's your project title</p> </div>
<p>understand the Types of Webservice provided Basic Website CMS</p> </div>
<!-- /.feature-sections -->
<div class="offset-xl-1 col-xl-6 offset-lg-1 col-lg-10 offset-md-1 col-md-10 col-sm-12 col-12 mt30">
<form>
<!-- service-form -->
<div class="service-form">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb10 ">
<h3>Get Affordable & Best SEO Services</h3>
<h2>Check all that apply</h2>
<div class="checkbox">
<label><input type="checkbox" value=""> Web Development</label>
<label><input type="checkbox" value=""> Web Design</label>
<label><input type="checkbox" value=""> Build My Website</label>
<label><input type="checkbox" value="">Update My Website</label>
<label><input type="checkbox" value=""> Simple Logo Design</label>
<label><input type="checkbox" value=""> Virtual Assistant</label>
<label><input type="checkbox" value=""> Blogging </label>
<label><input type="checkbox" value="" disabled> Other</label>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 ">
<div class="form-group service-form-group">
<label class="control-label sr-only" for="name"></label>
<input id="name" type="text" placeholder="First Name" class="form-control" required>
<div class="form-icon"><i class="fa fa-user"></i></div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 ">
<div class="form-group service-form-group">
<label class="control-label sr-only" for="name"></label>
<input id="name" type="text" placeholder="Last Name" class="form-control" required>
<div class="form-icon"><i class="fa fa-user"></i></div>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
<div class="form-group service-form-group">
<label class="control-label sr-only" for="email"></label>
<input id="email" type="email" placeholder="Email" class="form-control" required>
<div class="form-icon"><i class="fa fa-envelope"></i></div>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
<div class="form-group service-form-group">
<label class="control-label sr-only" for="company"></label>
<input id="phone" type="text" placeholder="Company" class="form-control" required>
<div class="form-icon"><i class="fa fa-building"></i></div>
</div>
</div>
<div> <p>Do you already have a domain name?
<label class="radio-inline">
<input type="radio" name="optradio"> Yes
</label><label class="radio-inline">
<input type="radio" name="optradio"> No
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
<div class="form-group service-form-group">
<label class="control-label sr-only" for="domain name"></label>
<input id="website" type="text" placeholder="Domain Name" class="form-control" required>
<div class="form-icon"><i class="#"></i></div>
</div>
</div>
<div> <p>Do you already have a website?
<label class="radio-inline">
<input type="radio" name="optradio"> Yes
</label><label class="radio-inline">
<input type="radio" name="optradio"> No
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
<div class="form-group service-form-group">
<label class="control-label sr-only" for="website"></label>
<input id="website" type="text" placeholder="Website URL" class="form-control" required>
<div class="form-icon"><i class="fa fa-link"></i></div>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
<div class="form-group">
<label class="control-label sr-only" for="select"></label>
<div class="select">
<select id="select" name="select" class="form-control">
<option value="">What's Your Budget</option>
<option value="">less than $2K</option>
<option value="">$2K - $5K</option>
<option value="">$5K - $8K</option>
<option value="">more than 8K</option>
<option value="">Hourly @ $40 per hour<</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label sr-only" for="select"></label>
<div class="select">
<select id="select" name="select" class="form-control">
<option
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="Logo Design">What's your project timeline</option>
<option value="Logo Design">4 to 6 weeks</option>
<option value="Website Design">6 - 8 weeks</option>
<option value="Business Card Design">8 to 12 weeks</option>
<option value="SEO Service">Ongoing</option>
<option value="*Other">*Other</option>
</select>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder=" Website Details
" rows="5"></textarea><br>
<textarea class="form-control" id="comments" name="comments" placeholder=" Tell us more about your project" rows="5"></textarea><br>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
<div class="form-group">
<label class="control-label sr-only" for="textarea"></label>
<textarea class="form-control" id="textarea" name="textarea" rows="3" placeholder="Messages"></textarea>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
<button type="submit" name="singlebutton" class="btn btn-default btn-block mb10">send message</button>
<p><small>Confidentiality is most important - we maintain the privacy of your email address .. </small></p>
</div>
</div>
</div>
</form>
<!-- /.service-form -->
</div>
</div>
</div>
</div><script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script>
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: 'Barlow Semi Condensed', sans-serif;
letter-spacing: 0px;
font-size: 18px;
color: #50595e;
font-weight: 400;
line-height: 28px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
color: #06131a;
margin: 0px 0px 15px 0px;
font-family: 'Barlow Semi Condensed', sans-serif;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
line-height: 38px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 14px;
}
p {
margin: 0 0 20px;
line-height: 1.7;
}
p:last-child {
margin: 0px;
}
ul,
ol {}
a {
text-decoration: none;
color: #50595e;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
a:focus,
a:hover {
text-decoration: none;
color: #ce0058;
}
sub {
bottom: 0em;
}
.lead {
font-size: 20px;
font-weight: 500;
line-height: 1.7;
font-family: 'Barlow Semi Condensed', sans-serif;
color: #06131a;
margin-bottom: 20px;
}
.feature-left {
margin-bottom: 40px;
}
.feature-left .feature-icon {
font-size: 50px;
color: #4cbec5;
display: inline-block;
float: left;
padding-right: 40px;
padding-top: 7px;
}
.feature-left .feature-content {
font-size: 20px;
}
.feature-left:last-child {}
textarea.form-control {
height: 90px;
}
.required {}
.form-group {
margin-bottom: 5px;
}
select.form-control:not([size]):not([multiple]) {
height: 56px;
color: #50595e;
}
.hero-section .form-control {
border: 1px solid #8c897d;
height: 58px;
}
.form-control {
border-radius: 0px;
font-size: 14px;
font-weight: 500;
width: 100%;
height: 56px;
padding: 14px 18px;
line-height: 1.42857143;
border: 1px solid #d2d8db;
background-color: #fff;
text-transform: capitalize;
letter-spacing: 0px;
margin-bottom: 14px;
-webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 1);
box-shadow: inset 0 0px 0px rgba(0, 0, 0, 1);
-webkit-appearance: none;
}
.form-control:focus {
color: #06131a !important;
outline: 0;
box-shadow: 0 0 0 0.1rem rgb(234, 231, 222);
border-color: #06131a;
}
input::-webkit-input-placeholder {
color: #50595e !important;
}
textarea::-webkit-input-placeholder {
color: #50595e !important;
}
.input-group-addon {
background-color: transparent;
border: 1px solid #eee;
border-radius: 0px;
position: absolute;
right: 16px;
top: 16px;
font-size: 12px;
}
.focus {
border: 1px solid #d2d8db;
}
.focus:focus {
border: 1px solid #06131a;
}
.input-group-addon i {
color: #63480f;
}
.btn-select {
font-size: 14px;
}
select option {
margin: 40px;
background: rgba(255, 255, 255, 1);
color: #50595e;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
position: relative;
}
select.form-control {
position: relative;
}
select {
-moz-appearance: none;
border-radius: 0px;
font-size: 14px;
font-weight: 700;
width: 100%;
padding: 14px;
line-height: 1.42857143;
border: 1px solid #e0e5e9;
background-color: #fff;
text-transform: capitalize;
-webkit-appearance: none;
-webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
}
.select {
position: relative;
display: block;
line-height: 2.2;
overflow: hidden;
}
select {
width: 100%;
height: 100%;
margin: 0;
padding: 0 0 0 .5em;
cursor: pointer;
color: #50595e;
font-size: 16px;
}
.select::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
padding: 10px 17px 0px 0px;
background: transparent;
pointer-events: none;
font-family: 'FontAwesome';
content: "\f107";
font-size: 16px;
}
.select:hover::after {
color: #50595e;
}
.select::after {
-webkit-transition: .25s all ease;
-o-transition: .25s all ease;
transition: .25s all ease;
}
select option {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
padding: 10px;
width: 100%;
background-color: #fff;
font-family: 'Barlow Semi Condensed', sans-serif;
}
.input-group>.custom-select:not(:last-child),
.input-group>.form-control:not(:last-child) {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.service-form {
background-color: #fafbfb;
border: 1px solid #e4e8ea;
padding: 40px 40px 20px 40px;
}
.service-form-group {
position: relative;
}
.form-icon {
position: absolute;
right: 14px;
bottom: 15px;
font-size: 13px;
}
.btn {
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
padding: 10px 26px;
letter-spacing: 0px;
border-radius: 0px;
line-height: 2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
word-wrap: break-word;
white-space: normal !important;
}
.btn-default {
background-color: #000;
color: #fff;
border: 2px solid #000;
}
.btn-default:hover {
background-color: transparent;
color: #f4511e;
border: 2px solid #000;
}
.btn-default.focus,
.btn-default:focus {
background-color: transparent;
color: #ce0058;
border: 2px solid #ce0058;
box-shadow: 0 0 0 0.2rem rgb(206, 0, 88);
}
.space-medium{padding-top:80px; padding-bottom:80px;}
<h3>Contact us and we'll get back to you within 24 hours.</h3>
<h4><span class="glyphicon glyphicon-map-marker"></span> Anticoh, California, USA</h4>
<h3><span class="glyphicon glyphicon-phone"></span> 1+310 ● 926 ● 8628</h3> <!--smaller dot ·-->
<h3><span class="glyphicon glyphicon-envelope"> <a href="mailto:llglsgo@gmail.com ">llglasgo@gmail.com</a></span></h3>
</
