<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'); }; }); });