<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Fly makes you faster</title>
<style>
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
body{
background-image: linear-gradient(to top left, rgb(108, 206, 245), rgb(19, 139, 237));
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color: white;
}
header{
display: flex;
justify-content: space-between;
font-size: 13px;
}
.logo p{
margin: 40px 0 0 200px;
font-size: 20px;
}
.top-nav{
margin: 40px 200px 0 0;
}
.top-nav a{
text-decoration: none;
color: white;
padding: 20px;
}
#top-link{
border: 1px solid white;
border-radius: 4px;
padding: 10px;
}
/*main section*/
main{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 150px;
}
.main-left{
width: 40%;
margin: 40px 0 0 200px;
}
.main-left h1{
letter-spacing: 3px;
}
.main-left p{
line-height: 1.5;
margin: 10px 0 20px 0;
}
#main-link{
text-decoration: none;
color: white;
background-color: lime;
border-radius: 50px;
padding: 10px;
text-transform: uppercase;
}
/*form section*/
.form{
background-color: white;
border-radius: 4px;
box-shadow: 3px 3px 25px rgb(2, 95, 172);
width: 300px;
height: 350px;
padding: 20px;
color: black;
margin: 40px 200px 0 0;
text-align: center;
}
.form form input{
margin-bottom: 15px;
height: 30px;
width: 250px;
padding: 8px;
background-color: #f8fafa;
border: none;
border-radius: 4px;
}
#type{
width: 263px;
height: 30px;
margin-bottom: 15px;
background-color: #f8fafa;
border: none;
border-radius: 4px;
}
#register-button{
width: 263px;
background-color: dodgerblue;
color: white;
border-radius: 50px;
font-weight: bold;
text-align: center;
box-shadow: 0 5px 10px rgb(184, 182, 182);
}
.form form h3{
font-size: 30px;
}
</style>
</head>
<body>
<header>
<div class="logo">
<p>Landing</p>
</div>
<nav class="top-nav">
<a href="#">Home</a>
<a href="#">Features</a>
<a href="#">Reviews</a>
<a href="#">Pricing</a>
<a href="#">FAQ</a>
<a href="#" id="top-link">Get started</a>
</nav>
</header>
<!--main section-->
<main>
<div class="main-left">
<h1>Fly makes you <br>faster</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat culpa, aliquam laborum, tenetur quos non eligendi ex atque rerum voluptatum illo ratione libero similique sapiente saepe modi quidem, quod fugiat ipsam aperiam molestias nihil velit! Inventore, mollitia. Necessitatibus, voluptas ut.</p>
<a href="#" id="main-link">See Pricing</a>
</div>
<div class="form">
<form action="#">
<h3>Sign Up for Free</h3><br>
<label for="fname"></label>
<input type="text" name="full-name" id="fname" placeholder="Full name" required><br>
<label for="email"></label>
<input type="email" name="Email" id="email" placeholder="Email" required><br>
<label for="password"></label>
<input type="password" name="Password" id="password" placeholder="Password" required><br>
<select name="Type" id="type">
<option value="type">Type</option>
<option value="Teacher">Teacher</option>
<option value="Studnet">Studnet</option>
<option value="Doctor">Doctor</option>
<option value="Unemployed">Unemployed</option>
</select><br>
<label for="register-button"></label>
<input type="submit" name="register" id="register-button" value="Register">
</form>
</div>
</main>
</body>
</html>
Comments
Post a Comment