*I have created the FACEBOOK login page *
HTML CODE
<body>
<section class="part1" >
<div>
<img class="AK47" src="./PHOTO/download.png" alt=" logo" border:radius:50px;>
</div>
</section>
<hr>
<section class="part2">
<div class="login"> <b>Log In to Facebook</b></div>
<div>
<br>
<input placeholder="Email address or mobile number">
<br>
<input type="password" placeholder="Password">
<br>
<button class="lg"> Log in</button>
<br>
<p> <b>Forgotten password? </b></p>
<br>
</div>
<br>
</section>
<section class="AK">
<button>Create new account</button>
<br>
<div class="meta">
<img src="./PHOTO/Meta_Platforms_Inc._logo_(cropped).svg.png" alt="meta logo" width="1%" >
<p1>Meta</p1>
</div>
</section>
</body>
</html>
From The Above Code
- Placeholder .
this is a attribute specifies a short hint that discribe the expected value of an input field .
The placeholder attribute works with the following input types: (text, search, url, number, tel, email, and password.)
- br -
tag inserts a single line break,
This is use for writing address or poem,
this tag is a empty tag which means that it has no end tag.
3.input
this tag specifies an input field where the user can enter data
The different input types are as follows:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (default value)
<input type="time">
<input type="url">
CSS CODE
<style>
*{
padding: 0;
margin:0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 20px;
}
.part1{
display: flex;
justify-content: center;
margin-bottom: 50px;
}
.part1 img {
width: 100px;
border-radius: 50%;
}
.part2{
text-align: center;
margin-top: 80px;
display: flex;
flex-direction: column;
}
.login{
margin-right : 200px;
}
.lg {
background-color: #3776ff;
text-align: center;
color: white;
margin-top: 15px;
}
input{
width: 350px;
padding: 15px;
margin: 10px;
border: 1px solid gray;
font-size: 16px;
border-radius: 15px;
}
p{
text-align: center;
}
button{
width: 350px;
height: 50px;
border-radius: 50px;
border: 1px solid blue;
color: #3776ff;
background-color: white;
cursor: pointer;
display: block;
margin: auto;
margin-top: 40px;
}
.meta{
display: flex;
justify-content: center;
}
</style>
NEW CSS Porperties
1.Cursor - property sets the mouse cursor
CODE & FINAL OUTPUT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 20px;
}
.part1{
display: flex;
justify-content: center;
margin-bottom: 50px;
}
.part1 img {
width: 100px;
border-radius: 50%;
}
.part2{
text-align: center;
margin-top: 80px;
display: flex;
flex-direction: column;
}
.login{
margin-right : 200px;
}
.lg {
background-color: #3776ff;
text-align: center;
color: white;
margin-top: 15px;
}
input{
width: 350px;
padding: 15px;
margin: 10px;
border: 1px solid gray;
font-size: 16px;
border-radius: 15px;
}
p{
text-align: center;
}
button{
width: 350px;
height: 50px;
border-radius: 50px;
border: 1px solid blue;
color: #3776ff;
background-color: white;
cursor: pointer;
display: block;
margin: auto;
margin-top: 40px;
}
.meta{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<section class="part1" >
<div>
<img class="AK47" src="./PHOTO/download.png" alt=" logo" border:radius:50px;>
</div>
</section>
<hr>
<section class="part2">
<div class="login"> <b>Log In to Facebook</b></div>
<div>
<br>
<input placeholder="Email address or mobile number">
<br>
<input type="password" placeholder="Password">
<br>
<button class="lg"> Log in</button>
<br>
<p> <b>Forgotten password? </b></p>
<br>
</div>
<br>
</section>
<section class="AK">
<button>Create new account</button>
<br>
<div class="meta">
<img src="./PHOTO/Meta_Platforms_Inc._logo_(cropped).svg.png" alt="meta logo" width="1%" >
<p1>Meta</p1>
</div>
</section>
</body>
</html>
Top comments (0)