<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="row">
<div class="inner contact">
<!-- Form Area -->
<!-- Form -->
<form id="contact-us" method="post" action="#">
<!-- Left Inputs -->
<div class="col-sm-6 col-xs-12 big-gutter" data-wow-delay=".5s">
<!-- Business Name -->
<div class="form-group">
<div class="text-effect"> <span>Business Name</span>
<input type="text" autocomplete="off" class="form-control focus-text field-input" />
</div>
</div>
<div class="form-group">
<div class="text-effect"> <span>Address</span>
<input type="text" autocomplete="off" class="form-control focus-text field-input" />
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<!-- City -->
<div class="form-group">
<div class="text-effect"> <span>City</span>
<input type="text" autocomplete="off" class="form-control focus-text field-input" />
</div>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="form-group">
<select class="field-select form-control">
<option value="" disabled selected>State</option>
<option value="Ahmedabad">Gujarat</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<!-- City -->
<div class="form-group">
<div class="text-effect"> <span>Zip</span>
<input autocomplete="off" type="text" class="form-control focus-text field-input" />
</div>
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="form-group">
<select class="form-control field-select">
<option disabled="" selected="">Country</option>
<option value="Afghanistan"> India </option>
<option value="...">...</option>
</select>
</div>
</div>
</div>
</div>
<!-- End Left Inputs -->
<!-- Right Inputs -->
<div class="col-sm-6 col-xs-12 big-gutter" data-wow-delay=".5s">
<!-- Web URL -->
<div class="form-group">
<div class="text-effect"> <span>Web URL</span>
<input autocomplete="off" type="text" class="form-control focus-text field-input" />
</div>
</div>
<!-- Phone -->
<div class="form-group">
<div class="text-effect"> <span>Phone</span>
<input autocomplete="off" type="text" class="form-control focus-text field-input" />
</div>
</div>
<!-- Contact Name -->
<div class="form-group">
<div class="text-effect"> <span>Contact Name</span>
<input autocomplete="off" type="text" class="form-control focus-text field-input" />
</div>
</div>
<!-- Contact Email -->
<div class="form-group">
<div class="text-effect"> <span>Contact Email</span>
<input autocomplete="off" type="text" class="form-control focus-text field-input" />
</div>
</div>
</div>
<!-- End Right Inputs -->
<!-- Captcha start -->
<div class="relative fullwidth col-xs-12 col-md-12 text-center">
<!-- Captcha -->
<img class="mt-20 mb-40" src="capcha.png"> </div>
<!-- Captcha end -->
<div class="relative fullwidth col-xs-12 col-md-12">
<!-- Send Button -->
<button type="submit" id="submit" name="submit" class="form-btn semibold">Get My Competitors</button>
</div>
<!-- End Bottom Submit -->
<!-- Clear -->
<div class="clear"></div>
</form>
<!-- End Contact Form Area -->
</div>
<br/>
<br/>
<br/>
<div class="container">
<div class="row"><a href="#" data-toggle="modal" data-target="#myModal" class="btn-compitetor pull-right"><i class="fa fa-plus" aria-hidden="true"></i> Add Competitor</a></div>
<div class="row">
<div class="list-group list-group-flex">
<div class="left-side">
<label>
<input type="checkbox" value="">
<span class="checkmark"> </span> </label>
</div>
<div class="right-side">
<h4 class="listing-title">Hotel Nikko</h4>
<div class="listing-detials">
<ul class="list-inline">
<li><i class="fa fa-map-marker" aria-hidden="true"></i> <span>222, Mason St, san Francisco, CA 94102</span></li>
<li><i class="fa fa-phone" aria-hidden="true"></i> <span>+01 1245 2541</span></li>
<li> <span>www.hotelnikko.com</span></li>
</ul>
</div>
</div>
</div>
<div class="list-group list-group-flex">
<div class="left-side">
<label>
<input type="checkbox" value="">
<span class="checkmark"> </span> </label>
</div>
<div class="right-side">
<h4 class="listing-title">Hotel Nikko</h4>
<div class="listing-detials">
<ul class="list-inline">
<li><i class="fa fa-map-marker" aria-hidden="true"></i> <span>222, Mason St, san Francisco, CA 94102</span></li>
<li><i class="fa fa-phone" aria-hidden="true"></i> <span>+01 1245 2541</span></li>
<li> <span>www.hotelnikko.com</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="relative fullwidth col-xs-12 col-md-12 mt-40 mb-40">
<!-- Send Button -->
<a href="#" class="form-btn semibold">Generate Report</a> </div>
</div>
<!-- Modal -->
<div class="modal fade competitor-popup" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header border-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title text-center" id="myModalLabel">Add Competitor</h3>
</div>
<div class="modal-body">
<!-- Form -->
<div class="row">
<div class="inner contact">
<!-- Form Area -->
<div class="contact-form">
<!-- Form -->
<form id="contact-us" method="post" action="#">
<!-- Left Inputs -->
<div class="col-xs-12 wow animated slideInLeft" data-wow-delay=".5s">
<!-- Business Name -->
<input type="text" name="name" id="name" required="required" class="field-input" placeholder="Business Name" />
<!-- Address -->
<input type="text" name="address" id="address" required="required" class="field-input" placeholder="Address" />
<!-- Subject -->
<div class="row">
<div class="col-xs-6">
<!-- City -->
<input type="text" name="City" id="city" required="required" class="field-input" placeholder="City" />
</div>
<div class="col-xs-6">
<select class="field-select form-control">
<option value="" disabled selected>State</option>
<option value="Ahmedabad">Ahmedabad</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<!-- City -->
<input type="text" name="Zip" id="zip" required="required" class="field-input" placeholder="Zip" />
</div>
<div class="col-xs-6">
<select class="field-select form-control">
<option value="" disabled selected>Country</option>
<option value="India">India</option>
</select>
</div>
</div>
</div>
<!-- End Left Inputs -->
<!-- Right Inputs -->
<div class="col-xs-12 wow animated slideInRight" data-wow-delay=".5s">
<!-- Web URL -->
<input type="text" name="name" id="name" required="required" class="field-input" placeholder="Web URL" />
<!-- Phone -->
<input type="text" name="Phone" id="mail" required="required" class="field-input" placeholder="Phone" />
</div>
<!-- End Right Inputs -->
<div class="relative fullwidth col-xs-12 mt-40 mb-40">
<!-- Send Button -->
<button type="submit" id="submit" name="submit" class="form-btn semibold">Send Message</button>
</div>
<!-- End Bottom Submit -->
<!-- Clear -->
<div class="clear"></div>
</form>
</div>
<!-- End Contact Form Area -->
</div>
<!-- End Inner -->
</div>
<!-- End Contact Form Area -->
</div>
</div>
</div>
</div>
<!-- End Inner -->
</div>
</div>
/*---------------Listing start--------------------*/
.list-group-flex{
display: flex;
align-items: center;
justify-content:flex-start;
background: #f0f0f0;
font-weight:600;
font-family: 'Roboto', sans-serif;
margin-bottom:0;
border-bottom:1px solid #fff;
}
.btn-compitetor{color:#111;padding:14px 0;font-family: 'Roboto', sans-serif;font-size: 15px;}
.list-group-flex .left-side{padding:30px 32px;background:#e5e5e5;position:relative;}
.list-group-flex .right-side{padding-left:30px;}
.list-group-flex .listing-title{font-weight:600;}
.listing-detials ul li{padding-right:60px;font-weight: 400;font-size: 1.65rem;}
.listing-detials ul li i{color: #0265c0;font-size: 1.6rem;margin-right: 5px;}
input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: relative;
top: 0;
left: 0;
height: 22px;
width: 22px;
background-color: #fff;
border: 2px solid #111;
padding: 0 7px;
}
input:checked ~ .checkmark {
background-color: #0265c0;
border:2px solid #0265c0;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
input:checked ~ .checkmark:after {
display: block;
}
.checkmark:after {
left: 6px;
top: 1px;
width: 7px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.border-0{border:none;}
.competitor-popup .modal-content{padding:50px;border-radius:0;}
.competitor-popup .modal-header .close {
margin-top: 0;
position: absolute;
right: -10px;
top: -10px;
background: #000;
color: #fff;
opacity: 1;
width: 30px;
height: 30px;
line-height: normal;
border-radius: 100%;
padding-bottom: 6px;
border: 1px solid #fff;
}
.competitor-popup .modal-header .close span{position: relative;top: -1px;}
/*---------------Listing end--------------------*/
/*---------------Inpput Animate start--------------------*/
.focus-t span {
bottom: 30px !important;
color: #000;
font-size: 11px;
transition: all 0.8s ease 0s;
z-index:1;
}
.focus-t span:-webkit-autofill ~ label {
bottom: 30px !important;
color: #000;
font-size: 11px;
transition: all 0.8s ease 0s;
z-index:1;
}
input.field-input, .field-select {
box-shadow: none !important;
z-index:2;
background: no-repeat bottom,50% calc(100% - 1px);
background-size: 0 100%,100% 100%;
border: 0;
-webkit-transition: background 0s ease-out;
transition: background 0s ease-out;
background-image: -webkit-linear-gradient(bottom,#3f51b5 2px,rgba(63,81,181,0) 0),-webkit-linear-gradient(bottom,rgba(0,0,0,.26) 1px,transparent 0);
background-image: linear-gradient(0deg,#3f51b5 2px,rgba(63,81,181,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0);
}
.focus-t input{
border-color:rgba(0,0,0,0.26);
background-size:100% 100%, 100% 100%;
-webkit-transition-duration:.3s;
transition-duration:.3s;
}
.text-effect {
position: relative;
height:55px;
}
.text-effect span {
bottom:15px;
position: absolute;
z-index:1;
pointer-events: none;
}
.focus-text{
}
/*---------------Input Animate end--------------------*/
.contact .big-gutter {
padding-left:35px;
padding-right:35px;
}
.contact-text {
margin:45px auto;
}
.mt-40{margin-top:40px;}
.mb-40{margin-bottom:40px;}
.mt-20{margin-top:20px;}
.mb-20{margin-bottom:20px;}
/* Input Styles */
.field-input, .field-select {
width: 100%;
padding:25px 15px 5px 0;
background-color:transparent;
margin-bottom: 25px;
border-radius:0;
color:#151515 !important;
font-size: 14px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
border: none;
height:auto;
box-shadow:none !important;
}
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
}
*:focus {
outline: 0;
box-shadow: none;
}
/* Generic Button Styles */
.form-btn {
max-width:290px;
width:100%;
display: block;
height: auto;
padding:18px 15px;
color:#fff;
background:#111;
border:none;
border-radius:0;
outline: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin:auto;
text-align:center;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.10);
-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.10);
-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.10);
}
.form-btn:hover, .form-btn:focus {background:#333;color:white;border:none;}
.form-btn:active{opacity: 0.9;}
@media only screen and (max-width : 768px) {
.listing-detials ul li {padding-right:10px;}
}
@media screen and (max-width: 767px) {
.list-group-flex .right-side {padding-left: 15px;}
.contact .big-gutter{padding-left:15px;padding-right:15px;}
.field-input, .field-select{margin-bottom:5px;}
.mtb-40{margin-bottom:20px;margin-top:20px;}
}
$(document).ready(function () {
$('.focus-text').focus(function(){
$(this).closest('div').addClass('focus-t');
})
$('.focus-text').blur(function(){
if($('.focus-text').length > 0 && $('.focus-text').val() != '1'){
$(this).closest('div').addClass('focus-t');
}
else{
$(this).closest('div').removeClass('focus-t');
}
})
});
