Html
<!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="hw2.css"/>
<title>Netflix</title>
</head>
<body>
<div class="top">
<h1 class="logo">NETFLIX</h1>
<div class="right-top">
<select class="lang">
<option>한국어</option>
<option>English</option>
</select>
<button class="login">로그인</button>
</div>
</div>
<div class="text">
<span class="text1">영화와 시리즈를 무제한으로.</span>
<span class="text2">다양한 디바이스에서 시청하세요. 언제든 해지하실 수 있습니다.</span>
<span class="text3">시청할 준비가 되셨나요? 멤버십을 등록하거나 재시작하려면 이메일 주소를 입력하세요.</span>
</div>
<div class="input-container">
<input type="text" placeholder=" 이메일주소" class="email"/>
<button class="start">시작하기 ></button>
</div>
CSS
body {
width: 100%;
height: 100vh;
background-image: url(http://cdn.ggilbo.com/news/photo/202302/959348_793007_307.png);
background-size: cover;
padding: 0;
}
.logo {
color: red;
font-size: 50px;
font-weight: 500;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin-right: auto;
margin-left: 50px;
}
.top {
width: 100%;
display: flex;
flex-direction: row;
}
.right-top {
margin-right: 50px;
margin-top: 50px;
}
.login {
background-color: red;
color: white;
padding: 9px 19px;
border-radius: 4px;
border: 1px solid red;
font-weight: 400;
font-size: 15px;
margin-left: 30px;
}
.lang {
padding: 9px 19px;
border-radius: 4px;
border: 1px solid white;
color: white;
font-weight: 400;
font-size: 15px;
background-color: transparent;
}
.text {
display: flex;
flex-direction: column;
align-items: center;
}
.text1 {
margin-top: 100px;
color: white;
font-size: 60px;
font-weight: 400;
}
.text2 {
color: white;
margin-top: 20px;
font-size: 30px;
font-weight: 350;
}
.text3 {
color: white;
margin-top: 20px;
font-size: 25px;
font-weight: 300;
}
.input-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 30px;
}
.email {
border: 1px solid black;
border-radius: 2px;
width: 500px;
font-size: 20px;
margin-right: 2px;
}
.start {
background-color: red;
color: white;
padding: 15px 30px;
border: 1px solid black;
border-radius: 2px;
font-size: 1.625rem;
font-weight: 400;
}
코린이 화이팅