code:
<!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: 0px;
margin: 0px;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
main{
height: 90vh;
display: grid;
grid-template-columns: 1fr 2fr;
}
body{
background: black;
color: white;
}
h1{
font-size: 100px;
width: 20%;
/* border: 1px solid aliceblue; */
margin-left: 200px;
padding-top: 9px;
}
button{
border-radius: 25px;
display: flex;
grid-template-columns: column;
justify-content: center;
padding: 20px;
margin: 50px;
width: 60%;
margin-left: 200px;
font-size: larger;
cursor: pointer;
}
input{
border-radius: 10px;
display: flex;
margin: 15px;
padding: 20px;
width: 60%;
margin-left: 200px;
font-size: larger;
}
hr{
display: flex;
align-items: center;
margin-left: 200px;
width: 60%;
}
p{
margin-left: 200px;
width: 60%;
}
img{
padding: 10px;
margin-left: 200px;
}
footer{
/* border: 1px solid white; */
padding: 10px;
display: flex;
grid-template-rows: rows;
justify-content: center;
}
a{
padding-left: 10px;
}
</style>
</head>
<body>
<main>
<div class="left">
<h1>Happening now.</h1>
<button>Continue with phone</button>
<button> kumarvinoth11971@gmail.com</button>
<button>Continue With Apple</button>
<hr>
<input type="text" placeholder="E-mail or UserName">
<button>Continue</button>
<p>By continuing, you agree to our Terms of Service,Privacy Policy and Cookie Use</p>
</div>
<div class="right">
<img src="x1.png" alt="">
</div>
</main>
<footer>
<a href="">About ·</a>
<a href="">Get App ·</a>
<a href="">Grok ·</a>
<a href="">Help ·</a>
<a href="">Terms ·</a>
<a href="">Privacy ·</a>
<a href="">Cookies ·</a>
<a href="">Ads & Business ·</a>
<a href="">Developers ·</a>
<a href="">News ·</a>
<a href="">Accessibility ·</a>
<a href="">© 2026 X Corp .</a>
</footer>
</body>
</html>
OUTPUT:
Top comments (0)