-
Notifications
You must be signed in to change notification settings - Fork 0
/
pc.html
239 lines (196 loc) · 6.83 KB
/
pc.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
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">
<body style="margin: 0;">
<!-- pc -->
<header class="header-button">
<img class="logo" src="pc/Logo.svg" alt="로고 이미지">
<button class="downloadButton" onclick="downloadFile()">앱 다운로드</button>
</header>
<div class="pc title">
<div class="inner-container">
<div class="img-container" style="margin-top: 80;">
<img class="img" alt="PDF를 Numbers로 손쉽게, iWaver" src="pc/00_header.png">
</div>
<div class="img-container">
<img class="img title" alt="나만의 학습지가 필요한 순간" src="pc/01_main.png">
</div>
<div class="img-container">
<img class="img" alt="간편해진 작업 바쁜 당신에게 최적의 편집 경험" src="pc/02_body.png">
<img class="gif gif_01" src="/gif/231127_iWaver_gif_04-min.gif">
</div>
<div class="img-container">
<img class="img" alt="과정 자동화 클릭 몇 번으로 나의 그림을 펼치다" src="pc/03_body.png">
<img class="gif gif_02 shadow" src="/gif/231127_iWaver_gif_01-min.gif">
</div>
<div class="img-container">
<img class="img" alt="작업 환경이 변해도 익숙함은 그대로" src="pc/04_body.png">
<img class="gif gif_03 shadow" src="/gif/231127_iWaver_gif_02-min.gif">
</div>
<div class="img-container">
<img class="img" alt="한번 경험해보면 재사용률 100%" src="pc/05_body.png">
<img class="gif gif_03 shadow" src="/gif/231127_iWaver_gif_03-min.gif">
</div>
<div class="img-container">
<img class="img" alt="모든 이미지를 한번에 편집할 수 있어요" src="pc/06_body.png">
<img class="gif gif_04 shadow" src="/gif/231127_iWaver_gif_05-min.gif">
</div>
<div class="img-container">
<img class="img" alt="한번 경험해보면 재사용률 100%" src="pc/07_body.png">
<img class="img" alt="당신이 원하는 자료를 무한의 캔버스에 한 번에" src="pc/08_body.png">
</div>
<div class="img-container">
<div class = "footer-image-text">
<img class="img" alt="footer" src="pc/09_end.png">
<div class="footer_text">
<a href="https://mail.google.com/mail/?view=cm&to=honeybadger.ada@gmail.com" target="_blank">이메일: honeybadger.ada@gmail.com</a>
<a href="https://github.com/HoneyBadger-HB/iWaverTermsOfUse.git" target="_blank">서비스 이용약관</a>
<a href="https://github.com/HoneyBadger-HB/iWaverPrivacyPolicy.git" target="_blank">개인정보 처리방침</a>
<a href="https://github.com/HoneyBadger-HB/iWaverUpdateHistory.git" target="_blank">업데이트 내용</a>
</div>
</div>
</div>
</div>
</div>
<script>
function downloadFile() {
var downloadLink = document.createElement("a");
downloadLink.href = "./App/iWaver(Beta) v1.1.1.dmg"; // 다운로드할 파일의 경로와 이름
downloadLink.download = "iWaver(Beta) v1.1.1.dmg"; // 다운로드될 파일의 이름
downloadLink.click();
}
</script>
</body>
<style>
.header-button {
position: sticky;
top: 0px; /* 도달했을때 고정시킬 위치 */
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: white;
text-align: center;
height: 68px;
z-index: 10;
padding: 0 21.8%;
border-bottom: solid 1px rgba(242, 243, 245, 1.0);
}
.logo {
width: 120px;
height: 60px;
}
.downloadButton {
font-family: "Pretendard-SemiBold";
font-size: 17px;
background-color: rgba(90, 129, 250, 1.0);
color: white;
border: none;
padding: 8px 20px;
width: 118px;
height: 36px;
border-radius: 6px;
white-space: nowrap; /* 텍스트 줄바꿈 방지 */
cursor : pointer;
}
.downloadButton:active {
background-color: rgba(62, 89, 173, 1);
}
@font-face {
font-family: 'Pretendard-SemiBold';
src: url('./font/Pretendard-SemiBold.ttf') format('truetype');
}
@font-face {
font-family: 'Pretendard-Regular';
src: url('./font/Pretendard-Regular.ttf') format('truetype');
}
.pc .title {
font-size: 16px;
}
.pc .img-container {
font-size: 0px;
position: relative;
}
.pc .inner-container {
position: relative;
max-width: 1920px;
margin: 0 auto;
font-size: 0px;
}
.pc .img {
width: 100%;
}
.pc .gif {
position: absolute;
border-radius: 11px;
}
.pc .shadow {
box-shadow: 0px 20px 40px 0px rgba(3, 18, 63, 0.15);
}
.pc .gif_01 {
top: 33.5%;
left: 47.5%;
width: 25%;
}
.pc .gif_02 {
top: 66%;
left: 50%;
transform: translate(-50%, -50%);
width: 49%;
}
.pc .gif_03 {
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
width: 49%;
}
.pc .gif_04 {
top: 57%;
left: 50%;
transform: translate(-50%, -50%);
width: 49%;
}
.footer-image-text {
position: relative;
}
.footer_text {
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
color: white;
opacity: 0.8;
text-align: center;
font-family: "Pretendard-Regular";
font-size: 13px;
font-weight: 400;
white-space: nowrap; /* 텍스트 줄바꿈 방지 */
gap: 100px;
}
/* .footer_text p, .footer_text a { } */
.footer_text a {
text-decoration: none; /* 링크의 밑줄을 삭제합니다 */
color: white; /* 링크의 텍스트 색상을 흰색으로 변경합니다 */
}
/* PC (해상도 1024px)*/
@media all and(min-width: 1024px){
.footer_text {
font-size: 13px;
}
}
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
.footer_text {
font-size: 11px;
}
}
/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
.footer_text {
font-size: 9px;
}
}
</style>
</html>