xmas 편지

[스파르타코딩클럽] 나홀로 코딩 패키지를 수강하고 정리한 내용입니다.
출처:https://spartacodingclub.kr/

구글 웹폰트

https://fonts.google.com/?subset=korean

순서

봉투 HTML 만들기
편지 HTML 만들기
그 후에, 모바일 버전 처리를 하고,
봉투를 누르면 편지가 나오도록, javascript 처리
눈 송이 떨어뜨리기
르탄이를 누르면 나오는 hidden 메시지까지 작업
공유를 위한 이미지, 텍스트 작업

코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2020년을 보내며</title>

    <link rel="shortcut icon" href="https://cdn2.iconfinder.com/data/icons/christmas-46/64/christmas-icon-tree-512.png">

    <meta property="og:image" content="https://www.kenelec.com.au/wp-content/uploads/2019/12/banner-christmas-2019.jpg">
    <meta property="og:title" content="쥬린이의 카드">
    <meta property="og:description" content="2020을 추억하며">

    <script src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/snow.js"></script>


    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Poor Story', cursive;
        }

        body {
            background-color: #9b070f;
        }

        .envelope {

            width: 200px;
            height: 200px;

            background-image: url('https://pngimg.com/uploads/envelope/envelope_PNG18366.png');
            background-size: cover;
            background-position: center;

            margin: 200px auto 0px auto;

            cursor: pointer;

        }

        .envelope-msg {
            color: white;
            text-align: center;
        }

        .letter-close {
            display: block;
        }

        .letter-open {
            display: none;
        }

        .rtan {
            background-color: white;

            width: 200px;
            height: 200px;

            background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/Webp.net-gifmaker+(2).gif');
            background-size: cover;
            background-position: center;

            margin: 100px auto 0px auto;

            border-radius: 100px;

            border: 5px solid white;
            box-shadow: 0px 0px 10px 1px white;
        }

        h1 {
            color: white;
            text-align: center;

            margin-top: 30px;
            margin-bottom: 30px;
        }

        .msgbox {
            background-color: ivory;

            width: 400px;
            margin: auto;

            color: brown;

            padding: 30px;

            font-size: 20px;
            line-height: 30px;

            box-shadow: 0px 0px 10px 2px white;
        }

        .from {
            text-align: right;
            margin-bottom: 0px;
        }

        @media screen and (max-width: 760px) {
            .msgbox {
                width: 300px;
                padding: 20px;
            }

            .rtan {
                width: 150px;
                height: 150px;
                margin: 70px auto 0px auto;
            }

            h1 {
                font-size: 28px;
            }

            .envelope {
                margin: 150px auto 0px auto;
            }
        }
    </style>

    <script>

        function open_letter() {
            document.getElementsByClassName("letter-close")[0].style.display = 'none'
            document.getElementsByClassName("letter-open")[0].style.display = 'block'
        }
    </script>
</head>

<body>
    <div class="letter-close">
        <div class="envelope" onclick="open_letter()"></div>
        <h2 class="envelope-msg">봉투를 열어봐!</h2>
    </div>

    <div class="letter-open">
        <div class="rtan"></div>
        <h1>2020년 수고 많았어!</h1>
        <div class="msgbox">
            친구들에게. <br />
            잘 지내니? <br />
            올해 이런저런 일이 많았는데 <br />
            너희 덕분에 하나도 힘들지 않았어 <br />
            연말에 다 같이 못 봐서 아쉽다 <br />
            <p class="from">2020.12.23 쥬린이가</p>
        </div>
    </div>
</body>

</html>

Author And Source

이 문제에 관하여(xmas 편지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jusung-c/xmas-편지

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

xmas 편지

구글 웹폰트

순서

코드

Author And Source

좋은 웹페이지 즐겨찾기