본문 바로가기
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;
}

'Front-End > Web' 카테고리의 다른 글

bootstrap css 수정  (0) 2022.08.11
메인 html  (0) 2022.08.11
그룹 선택 html  (0) 2022.08.09
로그인 html  (0) 2022.08.09
폰트  (0) 2022.08.03