-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (137 loc) · 4.55 KB
/
index.html
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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coming Soon</title>
<!-- Pretendard 폰트 추가 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
<!-- Google Fonts에서 Roboto Mono 폰트 추가 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100..700&display=swap" rel="stylesheet">
<!-- favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
/* 기본 스타일 */
body {
font-family: 'Roboto Mono', 'Pretendard', sans-serif; /* Roboto Mono가 없으면 Pretendard로 대체 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 화면을 꽉 채움 */
margin: 0;
transition: background-color 0.3s, color 0.3s;
overflow: hidden; /* 스크롤 방지 */
}
/* 콘텐츠 박스 스타일 */
.coming-soon-box {
text-align: center;
padding: 40px;
border-radius: 30px; /* 모서리 더 둥글게 */
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
background-color: #fff;
max-width: 600px;
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
h1 {
font-weight: 700;
font-size: 3rem;
color: #ff6347; /* 주황색 */
margin-bottom: 20px;
}
p {
font-size: 1.2rem;
color: #888; /* 회색 */
margin-bottom: 10px;
}
.link-container {
display: flex;
flex-direction: column; /* 텍스트와 링크가 세로로 배치되도록 */
align-items: center;
gap: 10px;
}
a {
color: #ff6347; /* 주황색 */
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
border-bottom: 2px dotted #ff6347; /* 동그란 점선 밑줄 */
}
a:hover {
color: #ffffff;
}
/* 다크 모드 */
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
.coming-soon-box {
background-color: #333;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}
h1 {
color: #b0e0e6; /* 블루 색상 */
}
p {
color: #888;
}
a {
color: #b0e0e6;
border-bottom: 2px dotted #b0e0e6; /* 동그란 점선 밑줄 */
}
a:hover {
color: #ffffff;
}
}
/* 라이트 모드 */
@media (prefers-color-scheme: light) {
body {
background-color: #f5f5f5;
color: #333;
}
.coming-soon-box {
background-color: #ffffff;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
h1 {
color: #ff6347; /* 주황색 */
}
p {
color: #888;
}
a {
color: #ff6347;
border-bottom: 2px dotted #ff6347; /* 동그란 점선 밑줄 */
}
a:hover {
color: #ffffff;
}
}
/* 반응형 디자인 (모바일 대응) */
@media (max-width: 600px) {
.coming-soon-box {
padding: 20px;
gap: 10px;
}
h1 {
font-size: 2.5rem;
}
p {
font-size: 1rem;
}
}
</style>
</head>
<body>
<div class="coming-soon-box">
<h1>Coming soon</h1>
<p><a href="https://docs.google.com/spreadsheets/d/1_TFqzgd7CuIyqkFnlnwpYfQZGHZlj_ts0Gd_wAUORSQ/edit?usp=sharing" target="_blank">Google Docs로 이동</a>하여 더 많은 정보를 확인할 수 있습니다.</p>
</div>
</body>
</html>