<!DOCTYPE html>
<html>
<head>
<title>Sign up landing page</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 100vh;
background: linear-gradient(#1abc9c,#1abc9c),url('images/dg1.jpg');
background-size:100% 40%,100% 100%;
background-repeat: no-repeat, no-repeat;
background-position:bottom,center;
}
#icon{
float: right;
margin-right: 260px;
margin-top: 30px;
width: 100px;
}
.container{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.left{
flex-basis: 50%;
color: white;
max-width: 500px;
margin-top: 200px;
}
.left h1{
font-size: 50px;
text-transform: uppercase;
letter-spacing: 5px;
color: #1abc9c;
text-align:right;
}
.right{
flex-basis: 50%;
}
.form{
background:rgba(255,255,255,0.2);
width:50%;
height: 300px;
margin: auto;
margin-top: 140px;
}
form{
padding: 30px 20px;
color: white;
}
form input[type="text"]{
padding: 10px;
border:none;
margin: 10px 20px;
width: 70%;
}
input[type="checkbox"]{
padding: 10px;
border:none;
margin: 10px 20px;
}
button{
width: 50%;
padding: 10px;
border:none;
background: black;
color: white;
margin:10px 20px;
}
form a{
text-decoration: none;
color: black;
margin:10px 20px;
}
.counter{
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 50px;
}
.counter h1{
color:black;
}
.counter p{
font-weight: bold;
}
</style>
</head>
<body>
<header>
<img src="images/icon.png" id="icon">
<div class="container">
<div class="left">
<h1>Coming</h1>
<div class="counter">
<div>
<h1>03</h1>
<p>DAYS</p>
</div>
<div>
<h1>10</h1>
<p>HOURS</p>
</div>
<div>
<h1>20</h1>
<p>MINUTES</p>
</div>
<div>
<h1>40</h1>
<p>SECONDS</p>
</div>
</div>
</div>
<div class="right">
<div class="form">
<form>
<input type="text" name="" placeholder="E-mail">
<input type="text" name="" placeholder="Password">
<br>
<input type="checkbox" name=""> Remember me
<br>
<button>Login</button>
<br>
<a href="#">Lost your Password?</a>
</form>
</div>
</div>
</div>
</header>
</body>
</html>
Click here to download the Code:
2 Comments
Nice post!I have a got some idea about bootstrap html please update more topic and you can also update about IIT Foundation
ReplyDeleteExcellent information about School Website Design
ReplyDelete