vscode/xmas.html at master · cherimlee/vscode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>귀요미 채림이가</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.buckinghamtahoerentals.com/wp-content/uploads/2018/12/christmas-800x400.jpg"
    <meta property="og:title" content="채림이의 크리스마스">
    <meta property="og:description" content="코로나마스를 추억하며">

    <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: 200px;
            border: 5px solid white;
            box-shadow: 0px 0px 10px 0px white;
        }

        h1 {
            color: white;
            text-align: center;
            margin-top: 30px;
            margin-bottom: 30px;
        }

        .messagebox {
            background-color: ivory;

            width: 400px;
            margin: auto;

            color: brown;
            padding: 30px;

            font-size: 20px;
            line-height: 30px;
            box-shadow: 0px 0px 10px 0px white;

        }

        .from {

            text-align: right;
            margin-bottom: 0;
        }

        @media screen and (max-width: 760px) {
            .messagebox {
                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'
        }

        function go_rtan() {
            alert('앗, 어떻게 찾았지?!');
            window.location.href='https://online.spartacodingclub.kr/rcmds'


        }
    </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" onclick="go_rtan()"></div>
            <h1>2020년 수고 많았어!</h1>
            <div class="messagebox">
                친구들에게 <br />
                올해 다들 코로나때문에 고생많았지? <br />
                하지만 꿋꿋이 잘 아겨낸 너희가 자랑스러워 <br />
                연말에 다 같이 못 봐서 아쉽당 <br />
                하지만 채림이 사진을 보며 힘내 ! <br />
                내년에도 우리 우정 변치말자^ㅇ^ <br />


                <p class="from"> 2020.12.23 핑크공주가</p>

            </div>
        </div>

</body>

</html>