ugumerie/index.html

## index.html
<body>
  <!--Form-->
   <form class="awesome-form">
        <div class="input-group">
            <input type="text" />
            <label>Your Full Name</label>
        </div>

        <div class="input-group">
            <input type="email" />
            <label>Your Email Address</label>
        </div>

        <input type="submit" />
    </form>
</body>

## script
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

## script.js
$(document).ready(function () {
    $('.awesome-form .input-group input').focusout(function () {
        var text_val = $(this).val();

        //checks if the input field is empty and add class appropriately
        if (text_val === "") {
            $(this).removeClass('has-value');
        } else {
            $(this).addClass('has-value');
        }
    });
});

## style.css
body {
    padding: 100px;
    -webkit-font-smoothing:antialiased;
}
input{
    background:none;
    border:2px solid #21a1e1;
    color: #21a1e1;
    padding:15px 40px;
    font-size:18px;
    display:inline-block;
}
input:focus, input:active{
    outline:none;
}
[type="text"], [type="email"]{
    border:none;
    border-bottom:2px solid #21a1e1;
}
[type="submit"]:hover, [type="submit"]:active{
    color:white;
    background:#21a1e1;
}
.input-group{
    display:inline-block;
    margin-right: 20px;
    position:relative;
}
.input-group input{
    padding:15px 0;
}
label{
    position:absolute;
    top:50%;
    left:0px;
    font-family:Georgia;
    font-style:italic;
    font-size:18px;
    color:#999;
    transform:translateY(-50%);/*position the label in the middle*/
    pointer-events:none;
    transition-duration:0.3s;
}
input:focus + label, input.has-value + label{/*adjacent neighbor or neighbor N/B: not descendant*/
    top:-10px;
    font-size:12px;
    color:#aaa;
}
	<body>
	<!--Form-->
	<form class="awesome-form">
	<div class="input-group">
	<input type="text" />
	<label>Your Full Name</label>
	</div>

	<div class="input-group">
	<input type="email" />
	<label>Your Email Address</label>
	</div>

	<input type="submit" />
	</form>
	</body>
	$(document).ready(function () {
	$('.awesome-form .input-group input').focusout(function () {
	var text_val = $(this).val();

	//checks if the input field is empty and add class appropriately
	if (text_val === "") {
	$(this).removeClass('has-value');
	} else {
	$(this).addClass('has-value');
	}
	});
	});
	body {
	padding: 100px;
	-webkit-font-smoothing:antialiased;
	}
	input{
	background:none;
	border:2px solid #21a1e1;
	color: #21a1e1;
	padding:15px 40px;
	font-size:18px;
	display:inline-block;
	}
	input:focus, input:active{
	outline:none;
	}
	[type="text"], [type="email"]{
	border:none;
	border-bottom:2px solid #21a1e1;
	}
	[type="submit"]:hover, [type="submit"]:active{
	color:white;
	background:#21a1e1;
	}
	.input-group{
	display:inline-block;
	margin-right: 20px;
	position:relative;
	}
	.input-group input{
	padding:15px 0;
	}
	label{
	position:absolute;
	top:50%;
	left:0px;
	font-family:Georgia;
	font-style:italic;
	font-size:18px;
	color:#999;
	transform:translateY(-50%);/position the label in the middle/
	pointer-events:none;
	transition-duration:0.3s;
	}
	input:focus + label, input.has-value + label{/adjacent neighbor or neighbor N/B: not descendant/
	top:-10px;
	font-size:12px;
	color:#aaa;
	}