Front-End/Web
첫 페이지 html
by Jyeoni
2022. 8. 9.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>firstPage</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main>
<form class="form-firstPage">
<img class="img-logo" src="img/logo.png">
<h2>투게더, 함께하는 즐거움</h2>
<div class="btn-bundle">
<div class="btn-center">
<button class="btn-login" name="btn-login" type="submit" hei>로그인</button>
</div>
<div class="btn-center">
<button class="btn-register" name="btn-register" type="submit">회원가입</button>
</div>
</div>
</form>
</main>
</body>
</html>
@font-face {
font-family: 'GangwonEdu_OTFBoldA';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html,
body {
height: 100%;
}
body {
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
font-family: 'GangwonEdu_OTFBoldA';
background-color: #363062;
}
/* 로고 이미지 */
.img-logo {
position: relative;
top: -80px;
}
.img-logo-login {
object-fit: fill;
width: 250px;
height: 200px;
position: relative;
top: -130px;
margin-left: 140px;
}
.img-group,
.img-invite {
object-fit: fill;
width: 500px;
height: 500px;
position: relative;
top: -30px;
}
/* ---------- 버튼 ----------- */
.btn-center {
margin-top: 30px;
height: 2em;
text-align: center;
position: relative;
top: -50px;
}
.btn-login {
height: 3em;
width: 20em;
font-size: 15px;
font-family: 'GangwonEdu_OTFBoldA';
background-color: white;
border-radius: 15px;
}
.btn-login-1 {
height: 3em;
width: 10em;
font-size: 15px;
margin-left: 25em;
font-family: 'GangwonEdu_OTFBoldA';
background-color: white;
border-radius: 15px;
position: relative;
top: -100px;
}
/* 마우스 오버 */
.btn-login:hover {
background-color: #E9D5DA;
}
.btn-login-1:hover {
background-color: #E9D5DA;
}
.btn-register {
height: 3em;
width: 20em;
font-size: 15px;
position: relative;
border-radius: 15px;
font-family: 'GangwonEdu_OTFBoldA';
background-color: white;
}
/* 마우스 오버 */
.btn-register:hover {
background-color: #E9D5DA;
}
/* --------- 글 --------- */
h2 {
text-align: center;
color: white;
position: relative;
top: -50px;
}
/* ---------- input 태그 ---------- */
.input-control {
width: 500px;
height: 50px;
border-radius: 15px;
font-size: 20px;
padding-left: 15px;
margin: 5px;
background-color: white;
position: relative;
top: -120px;
}
input::placeholder {
font-family: 'GangwonEdu_OTFBoldA';
}
.input-control:focus {
background-color: #E9D5DA;
}
.checkbox {
color: white;
margin-bottom: 1em;
margin-left: 25em;
position: relative;
top: -100px;
}
