<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" href="styles.css">
</head>
<style>
body {
margin: 0;
padding: 0;
}
.Frame1 {
width: 1440px;
height: 1024px;
position: relative;
background: #ABDCFF;
margin-left: 15%;
}
.Frame2 {
width: 560px;
height: 710px;
left: 440px;
top: 157px;
position: absolute;
background: white;
border-radius: 25px;
overflow: hidden;
}
.login-title {
width: 281px;
height: 57px;
left: 148px;
top: 63px;
position: absolute;
text-align: center;
color: black;
font-size: 25px;
font-family: Inter, sans-serif;
font-weight: 665;
word-wrap: break-word;
}
.email-label {
left: 105px;
top: 211px;
position: absolute;
opacity: 0.70;
text-align: center;
color: #665D5D;
font-size: 25px;
font-family: Inter, sans-serif;
font-style: italic;
font-weight: 100;
word-wrap: break-word;
}
.password-label {
left: 104px;
top: 360px;
position: absolute;
opacity: 0.70;
text-align: center;
color: #665D5D;
font-size: 25px;
font-family: Inter, sans-serif;
font-weight: 100;
word-wrap: break-word;
}
.email-input {
width: 350px;
height: 40px;
left: 105px;
top: 248px;
position: absolute;
background: #F4F4F4;
}
.password-input {
width: 350px;
height: 40px;
left: 105px;
top: 397px;
position: absolute;
background: #F4F4F4;
}
.submit-button {
width: 192px;
height: 58px;
left: 184px;
top: 557px;
position: absolute;
background: #43ABF5;
border-radius: 20px;
text-align: center;
color: white;
font-size: 25px;
font-family: Inter, sans-serif;
font-weight: 665;
word-wrap: break-word;
}
</style>
<body>
<div class="Frame1">
<div class="Frame2">
<div class="login-title">로그인</div>
<div class="email-label">이메일</div>
<div class="password-label">비밀번호</div>
<input type="email" class="email-input" name="userEmail">
<input type="password" class="password-input" name="userPassword">
<input type="submit" class="submit-button" onclick="window.location.href='study.html'" value="로그인">
</div>
</div>
</body>
</html>학교에서 배운 것과 최근에 강의를 들으면서 배운 내용을 합쳐서 페이지를 만들어보았다.
Node.js_6기