본문 바로가기

Web_Project

[CSS]로그인 접속 페이지 만들기

<!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" />
        <title>로그인</title>
        <style>
            @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
            * {
                font-family: 'Pretendard', serif;
            }
            .wrap {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                width: 300px;
                margin: 70px auto auto auto;
                padding: 80px 50px 50px 50px;

                border: 1px solid lightgray;
                border-radius: 8px;
            }
            .wrap > img {
                width: 90px;
                height: 46px;
                margin-bottom: 30px;

                margin-right: auto;
            }
            .text {
                margin-right: auto;
                font-size: 20px;
                font-weight: 700;
            }
            .wrap > button {
                width: 300px;
                height: 60px;
                font-size: 20px;
                background-color: rgb(237, 219, 18);
                border-radius: 10px;
                border: none;
                color: black;
                font-weight: 700;
                margin: center;
                cursor: pointer;
            }
            .wrap > span {
                margin-top: 30px;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="https://ddingdong.spartacodingclub.kr/images/common/logo-tb.svg" />
            <p class="text">
                매주 월요일,<br />
                내 강의실에 찾아오는<br />
                코딩 학습지
            </p>
            <button>카카오로 1초만에 시작하기</button>
            <span>이메일로 시작하기</span>
        </div>
    </body>
</html>