<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 ---------->
<div class="container" >
<div style="" class="inquiry outer-section">
<div class="row ">
<div class="col-sm-7">
<div class="form-style">
<form action="" method="post" enctype="multipart/form-data">
<center> <h3 style="color:#ed1c24;margin-top: 30px;">Post Your Requiremnt</h3></center>
<div class="row padd">
<div class="col-sm-6">
<label>
<p class="label-txt">Name <span class="red">*</span><span class="red" id="name_error"></span></p>
<input type="text" class="input" name="name" id="name" placeholder="Enetr Name">
<div class="line-box">
<div class="line"></div>
</div>
</label>
</div>
<div class="col-sm-6">
<label>
<p class="label-txt">Email ID<span class="red">*</span><span class="red" id="email_error"></span></p>
<input type="email" class="input" name="email" id="email" placeholder="Enter Email ID">
<div class="line-box">
<div class="line"></div>
</div>
</label>
</div>
<div class="col-sm-6">
<label>
<p class="label-txt">Mobile No<span class="red">*</span><span class="red" id="mobile_no_error"></span></p>
<input type="text" class="input" name="mobile_no" id="mobile_no" maxlength="10" placeholder="Enter Mobile Number">
<div class="line-box">
<div class="line"></div>
</div>
</label>
</div>
<div class="col-sm-6">
<label>
<p class="label-txt">Plot No</p>
<input type="text" class="input" name="plot_no" id="plot_no" placeholder="Enter Plot No">
<div class="line-box">
<div class="line"></div>
</div>
</label>
</div>
<div class="col-sm-6">
<label>
<p class="label-txt">Street No/Landmark</p>
<input type="text" class="input" name="street" id="street" placeholder="Enter Street">
<div class="line-box">
<div class="line"></div>
</div>
</label>
</div>
<div class="col-sm-6">
<label>
<p class="label-txt">State <span class="red">*</span><span class="red" id="state_error"></span></p>
<select name="state_id" class="input" id="state" onchange="get_city(this.value)">
<option value="0">--Select State--</option>
<option value="">Maharashtra</option>
<option value="">Gujrat</option>
</select>
<div class="line-box">
<div class="line"></div>
</div>
</label>
</div>
<div class="col-sm-6">
<label>
<p class="label-txt">City<span class="red">*</span><span class="red" id=""></span></p>
<select name="city_id" class="input" id="">
<option value="">Nagpur</option>
<option value="">Ahmadabad</option>
</select>
<div class="line-box">
<div class="line"></div>
</div>
</label>
</div>
<div class="col-sm-6">
<label>
<p class="label-txt">Pincode<span class="red">*</span><span class="red" id="pincode_error"></span></p>
<input type="text" class="input" name="pincode" id="pincode" placeholder="Enter Pincode">
<div class="line-box">
<div class="line"></div>
</div>
</label>
</div>
<div class="col-sm-6">
<label>
<p class="label-txt">Website Name(optional)</p>
<input type="text" class="input" name="website" id="website" placeholder="Enter Website URL">
<div class="line-box">
<div class="line"></div>
</div>
</label>
</div>
</div>
<div class="action-button" style="margin-bottom:30px;">
<div class="row">
<div class="col-sm-10">
<button type="submit" onclick="return check_error();">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-5 ">
<div class="img" >
<div class="zoomin">
<img src="https://northernsky.in/wp-content/uploads/2019/01/Palmstreak-1024x1024-1.jpg" style="height: 800px;width:100% ">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
label {
display: block;
position: relative;
margin: 40px 0px;
}
.label-txt {
position: absolute;
top: -1.6em;
padding: 10px;
font-family: sans-serif;
font-size: .8em;
letter-spacing: 1px;
color: rgb(120,120,120);
transition: ease .3s;
}
.input {
width: 100%;
padding: 10px;
background: transparent;
border: none;
outline: none;
}
.line-box {
position: relative;
width: 100%;
height: 2px;
background: #BCBCBC;
}
.line {
position: absolute;
width: 0%;
height: 2px;
top: 0px;
left: 50%;
transform: translateX(-50%);
background: #8BC34A;
transition: ease .6s;
}
.input:focus + .line-box .line {
width: 100%;
}
.label-active {
top: -3em;
}
.red{
color:red;
}
button {
display: inline-block;
padding: 12px 24px;
background: rgb(220,220,220);
font-weight: bold;
color: rgb(120,120,120);
border: none;
outline: none;
border-radius: 3px;
cursor: pointer;
transition: ease .3s;
}
button:hover {
background: #8BC34A;
color: #ffffff;
}
.zoomin{
overflow: hidden;
}
.zoomin img{
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
vertical-align: middle;
}
.zoomin img:hover {
-webkit-transform:scale(1.2); /* Safari and Chrome */
-moz-transform:scale(1.2); /* Firefox */
-ms-transform:scale(1.2); /* IE 9 */
-o-transform:scale(1.2); /* Opera */
transform:scale(1.2);
}
.outer-section{
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}
.property-category .main-category {
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
}
{
.outer-section{
padding:20px;
}
button {
display: inline-block;
padding: 12px 24px;
background: rgb(220,220,220);
font-weight: bold;
color: rgb(120,120,120);
border: none;
outline: none;
border-radius: 3px;
cursor: pointer;
transition: ease .3s;
}
button:hover {
background: #8BC34A;
color: #ffffff;
}
@media (min-width: 1200px)
{
.inquiry {
margin-right: 60px;
margin-left: 60px;
}
.inquiry{
margin-top: 60px;
margin-bottom: 30px;
}
}
@media (max-width: 600px)
{
.inquiry {
margin-top: 60px;
margin-bottom: 30px;
}
.action-button .button2 button{
margin-top: 10px;
}
}
.action-button button{
background-color: green;
color: white;
}
.action-button .button2 button{
background-color: #ed1c24;
color: white;
}
$(document).ready(function(){
$('.input').focus(function(){
$(this).parent().find(".label-txt").addClass('label-active');
});
$(".input").focusout(function(){
if ($(this).val() == '') {
$(this).parent().find(".label-txt").removeClass('label-active');
};
});
});
