html разметка и css стили для реализации блока «Форма для сайта»
<div class="form-bg">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<form>
<h1 class="heading">sign up</h1>
<div class="form-group">
<label class="control-label">First Name</label>
<input type="text" class="form-control" placeholder="Lorem">
<label class="control-label">Email</label>
<input type="text" class="form-control" placeholder="Example@EmailAddress.com">
<label class=" control-label">Password</label>
<input type="text" class="form-control" placeholder="8+ Character Password">
<button type="submit" class="btn btn-default">create your account <i class="fa fa-arrow-circle-right fa-2x"></i></button>
</div>
<span class="form-footer">already have an account? <a href="#">log in</a></span>
</form>
</div>
</div>
</div>
</div>
.form-bg{
background-image: url("../images/img-1.jpg");
background-size: cover;
position: relative;
}
.form-bg:before{
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(#2cd0cb,#a280c1);
opacity: 0.95;
}
form{
margin: 5% 0;
font-family: 'Roboto', sans-serif;
}
form .heading{
font-size: 35px;
font-weight: bold;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
margin-left: -20px;
}
form .form-group{
padding: 30px;
border-radius: 5px;
background: #fff;
box-shadow: 0 0 3px #bcb4b4;
position: relative;
}
form .control-label{
font-size: 18px;
color: #6e6179;
letter-spacing: 1px;
}
form .form-control{
height: 50px;
font-size: 16px;
letter-spacing: 1px;
margin-bottom: 30px;
border-bottom: 2px solid #8f8597;
border-radius: 2px;
opacity: 0.8;
}
form .btn{
font-size: 17px;
font-weight: bold;
color: #fff;
background: #00d3bf;
text-transform: uppercase;
box-shadow: 0 0 8px 0 #a2a2a2;
border: none;
border-radius: 50px;
padding: 12px 60px 12px 15px;
position: absolute;
bottom: -6%;
right: -4%;
transition: all 0.2s ease 0s;
}
form .btn:hover{
background: #fff;
color: #00d3bf;
}
form .btn .fa{
font-size: 38px;
position: absolute;
top: 5px;
right: 7px;
}
form .form-footer{
font-size: 14px;
color: #fff;
text-transform: capitalize;
margin-top: 20px;
display: inline-block;
}
form .form-footer a{
font-size: 14px;
color: #fff;
}
form .form-footer a:hover{
text-decoration: underline;
}
@media screen and (max-width: 990px){
form .heading{ margin-left: 0; }
form .btn{ right: -10px; }
form .btn .fa{
top: 7px;
font-size: 35px;
}
}
@media screen and (max-width: 480px){
form .heading{
font-size: 22px;
}
form .btn{ padding: 7px 37px 6px 15px; }
form .btn .fa{ font-size: 24px; }
}
Теги: