<!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="3.css" />
<title>Document</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
* {
font-family: "Pretendard", serif;
}
body {
display: flex;
justify-content: center;
}
.main {
margin: 100px;
border: 1px solid darkgray;
border-radius: 10px;
height: 440px;
width: 320px;
padding: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.top {
width: 290px;
height: 220px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.top > img {
height: 45px;
width: auto;
margin-top: 10px;
margin-bottom: 10px;
}
.top > h3 {
font-size: 24px;
font-weight: 400;
line-height: 1.6;
}
.kakao {
border: none;
background-color: #ffe237;
height: 60px;
width: 290px;
font-size: 17px;
font-weight: 900;
border-radius: 10px;
}
.email {
border: none;
background-color: #ffffff;
height: 60px;
width: 290px;
font-size: 14px;
font-weight: 600;
border-radius: 10px;
}
p {
font-size: 13px;
color: darkgray;
}
</style>
</head>
<body>
<main class="main">
<div class="top">
<img
src="https://ddingdong.spartacodingclub.kr/images/common/logo-tb.svg"
alt=""
/>
<h3>
우리 아이 코딩 고민은 그만!<br />
쉽고 부담없는<br />온라인 코딩 학습지
</h3>
</div>
<button class="kakao">카카오로 1초만에 시작~</button>
<button class="email">이메일로 시작하기</button>
<p>*스파르타 코딩클럽 통합 회원으로 로그인 가능합니다.</p>
</main>
</body>
</html>
[항해99]로그인페이지 만들기