<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h2 style="text-align:center">Material Design Form Created By <span class="red" style="color:red">M</span>ilind <span class="red" style="color:red">K</span>amthe</h2>
<p style="text-align:center">creativemk22@gmail.com</p>
<hr>
<div class="row">
<div class="New_form_sec">
<form>
<div class="row">
<div class="col-sm-6 ">
<div class="form-group">
<input type="text" required>
<label for="input" class="control-label">First Name</label>
</div>
</div>
<div class="col-sm-6 ">
<div class="form-group">
<input type="text" required>
<label for="input" class="control-label">Last Name</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input name="email" type="email" required>
<label for="input" class="control-label">Email</label>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input name="phone" type="text" required>
<label for="input" class="control-label">Phone </label>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea required="required"></textarea>
<label for="textarea" class="control-label">Textarea</label><i class="bar"></i>
</div>
<div class="">
<input type="submit" class="btn theme-btn" value="Send Now">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div>
.form-radio, .form-group {
position: relative;
margin-top: 0;
margin-bottom: 25px;
}
.form-group input, .form-group textarea {
display: block;
background: none;
padding: 0.125rem 0.125rem 0.0625rem;
font-size: 1rem;
border-width: 0;
border-color: transparent;
line-height: 1.9;
width: 100%;
color: transparent;
-webkit-transition: all 0.28s ease;
transition: all 0.28s ease;
box-shadow: none;
}
.form-group input {
height: 1.9rem;
}
.form-group .control-label {
position: absolute;
top: 0.25rem;
pointer-events: none;
padding-left: 0.125rem;
z-index: 1;
color: #b3b3b3;
font-size: 1rem;
font-weight: normal;
-webkit-transition: all 0.28s ease;
transition: all 0.28s ease;
}
.form-group select:focus, .form-group input:focus, .form-group textarea:focus {
outline: none;
}
.form-group select, .form-group input:focus, .form-group input:valid, .form-group input.form-file, .form-group input.has-value, .form-group textarea:focus, .form-group textarea:valid, .form-group textarea.form-file, .form-group textarea.has-value {
color: #333;
}
.form-group input, .form-group textarea {
display: block;
background: none;
padding: 0.125rem 0.125rem 0.0625rem;
font-size: 1rem;
border-width: 0;
line-height: 1.9;
width: 100%;
color: transparent;
-webkit-transition: all 0.28s ease;
transition: all 0.28s ease;
box-shadow: none;
}
.form-group input {
height: 1.9rem;
}
.form-group select:focus ~ .control-label, .form-group input:focus ~ .control-label, .form-group textarea:focus ~ .control-label {
color: #337ab7;
}
/* Main Focus */
.form-group select ~ .control-label, .form-group input:focus ~ .control-label, .form-group input:valid ~ .control-label, .form-group input.form-file ~ .control-label, .form-group input.has-value ~ .control-label {
top: -14px !important;
background: #fff !important;
color: #1a73e8;
padding: 0 10px;
border-radius:5px
}
.form-group textarea:focus ~ .control-label, .form-group input:valid ~ .control-label{ top: -14px !important;
background: #fff !important;
color: #1a73e8;
padding: 0 10px;
border-radius:5px}
/* Main Focus */
.form-group .control-label {
position: absolute;
top: 10px;
pointer-events: none;
padding-left: 0.125rem;
z-index: 1;
color: #b3b3b3;
font-size: 14px;
font-weight: normal;
-webkit-transition: all 0.28s ease;
transition: all 0.28s ease;
left: 15px;
}
.form-group input {
height: 40px;
border:1px solid #ccc;
padding: 13px 15px;border-radius:5px;
}
.form-group textarea {
border:1px solid #ccc;
padding: 13px 15px;height:80px;border-radius:5px;
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #1a73e8 !important;
outline: 0;
box-shadow: none;
}
.form-group input:focus {
height: 40px;
border: 1px solid #1a73e8;
padding: 13px 15px;
}
.New_form_sec {
padding: 30px 40px 36px;
border: 1px solid #dadce0;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.New_form_sec2{border:none; padding: 30px 40px 36px;}
.New_form_sec .btn {
border-radius: 5px;
min-width: 25%;
letter-spacing: 0.8px;
font-weight: bold;background:#1a73e8;color:#fff
}
.New_form_sec .contact-page-title22{text-align:center}
.New_form_sec .contact-page-title22 {
text-align: center;
position: relative !important;
background: #fff;text-align: left;
}
form-group textarea:valid ~ .control-label, .form-group textarea.form-file ~ .control-label, .form-group textarea.has-value ~ .control-label {
font-size: 0.8rem;
color: gray;
top: -1rem;
left: 0;
}
$(document).ready(function(){
$('.form-group #a1').focus(function () {
$('.label21').addClass('show22');
});
$('.form-group #a1').focusout(function(){
var fname = $('#a1').val();
if(fname==""){
$('.label21').removeClass('show22');
}
});
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
new WOW().init();
(function($) {
var element = $('.follow-scroll'),
originalY = element.offset().top;
// Space between element and top of screen (when scrolling)
var topMargin = 600;
// Should probably be set in CSS; but here just for emphasis
element.css('position', 'absolute');
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 300
: scrollTop - originalY + topMargin
}, 500);
});
});
})($);
</script>
