-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
211 lines (206 loc) · 8.65 KB
/
index.html
File metadata and controls
211 lines (206 loc) · 8.65 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Kotori Bounce!</title>
<link rel="stylesheet" href="style.css">
<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=Jua&display=swap" rel="stylesheet">
<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=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
rel="stylesheet">
</head>
<body style="font-family: Jua, Comic Neue; color: #3A2007;">
<div class="bg-[url(assets/bg-top-4.svg)] bg-cover bg-no-repeat text-l">
<!-- content navbar -->
<nav>
<div class="max-w-7xl mx-auto">
<div class="flex justify-between items-center px-4 py-2">
<!-- logo in nav -->
<div>
<a href="index.html">
<img src="assets/logo.png" width="117">
</a>
</div>
<!-- primary nav -->
<div class="hidden md:flex flex space-x-11">
<a href="index.html" class="hover:text-orange-700">Home</a>
<!-- <a href="" class="hover:text-orange-700">Characters</a> -->
<a href="https://pvp.co.jp/contact-e/" class="hover:text-orange-700">Contact</a>
<a href="https://pvp.co.jp/company-e/" class="hover:text-orange-700">About PVP Inc.</a>
</div>
<!-- mobile menu button -->
<div class="md:hidden flex items-center">
<button class="mobile-menu-button">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewbox="0 0 24 24" fill="none"
stroke="#3A2007" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M4 6l16 0" />
<path d="M4 12l16 0" />
<path d="M4 18l16 0" />
</svg>
</button>
</div>
</div>
</div>
<!-- mobile menu -->
<div class="mobile-menu hidden md:hidden absolute right-0 text-center mx-4">
<a href="index.html" class="block py-2 px-4 hover:text-orange-700 bg-white rounded-xl mb-2">Home</a>
<!-- <a href="" class="block py-2 px-4 hover:text-orange-700 bg-sky-50 rounded-xl mb-2">Characters</a> -->
<a href="https://pvp.co.jp/contact-e/" class="block py-2 px-4 hover:text-orange-700 bg-sky-100 rounded-xl mb-2">Contact</a>
<a href="https://pvp.co.jp/company-e/" class="block py-2 px-4 hover:text-orange-700 bg-sky-200 rounded-xl">About
PVP
Inc.</a>
</div>
</nav>
<!-- hero section content -->
<div class="flex max-w-7xl mx-auto text-xl px-4">
<div class="flex-1">
<img src="/assets/logo.png">
<p class="max-w-xl mt-10">
Are you ready to Kotori Bounce!? Join Mama and Papa Farmer as you juggle and bop all of Mama Chicken’s babies
home after a long day of playing on the farm. With dozens of feather-filled levels and plenty of challenges,
just make sure that no chicken gets left behind!
</p>
<div class="flex mt-14">
<a href="https://play.google.com/store/apps/details?id=jp.co.pvp.kotoribounce">
<button class="mr-6">
<img src="/assets/official-play-store-button.svg">
</button>
</a>
<a href="https://apps.apple.com/jp/app/kotori-bounce/id6717580102">
<button class="mr-6">
<img src="/assets/official-app-store-button.svg">
</button>
</a>
</div>
<div>
<img src="/assets/extra-feathers-top.png">
</div>
</div>
<!-- right side of hero section -->
<div class="flex-1 hidden sm:block">
<img src="assets/top-birds.png">
</div>
</div>
</div>
<!-- in-game screen shots section -->
<div class="bg-[url(assets/bottom-gradient-bg.svg)] bg-cover bg-no-repeat mt-20">
<div class="flex max-w-7xl mx-auto flex-col-reverse sm:flex-row px-4 justify-center items-center text-xl">
<img src="assets/screenshots/screen-1.png" class="sm:w-2/3 sm:pr-10 md:pr-20">
<div class="flex-1 flex-col justify-center items-center text-center">
<img src="assets/star.png" class="w-20 h-auto mx-auto mb-8">
<p class="mb-10">Bounce your way through wave after wave!</p>
</div>
</div>
<div class="flex max-w-7xl mx-auto flex-col-reverse sm:flex-row-reverse px-4 justify-center items-center text-xl mt-20
sm:mt-32">
<img src="assets/screenshots/screen-2.png" class="sm:w-2/3 sm:pl-10 md:pl-20">
<div class="flex-1 flex-col justify-center items-center text-center">
<img src="assets/2-stars.png" class="w-40 h-auto mx-auto mb-8">
<p class="mb-10">Earn stars and progress through stages, or play for a high score with infinite mode.</p>
</div>
</div>
<div
class="flex max-w-7xl mx-auto flex-col-reverse sm:flex-row px-4 justify-center items-center text-xl mt-20 sm:mt-32">
<img src="assets/screenshots/screen-3.png" class="sm:w-2/3 sm:pr-10 md:pr-20">
<div class="flex-1 flex-col justify-center items-center text-center">
<img src="assets/3-stars.png" class="w-64 h-auto mx-auto mb-8">
<p class="mb-10">Try your luck with effect cards. Who knows? --that rare card might be just the one you need.
</p>
</div>
</div>
<div class="flex max-w-7xl mx-auto flex-col-reverse sm:flex-row-reverse px-4 justify-center items-center text-xl mt-20
sm:mt-32">
<img src="assets/friends-obstacles.png" class="sm:w-2/3 sm:pl-10 md:pl-20">
<div class="flex-1 flex-col justify-center items-center text-center">
<img src="assets/lock.png" class="w-20 h-auto mx-auto mb-8">
<p class="mb-8">And, unlock new friends and obstacles along the way!</p>
</div>
</div>
<!-- call to action on bottom before the footer -->
<div class="flex max-w-7xl mx-auto text-3xl justify-center items-center px-4 mt-12" style="color:#0063A8;">
<div>
<div class="flex flex-col sm:flex-row justify-center items-center">
<p>
Download now on Android and iOS!
</p>
</div>
<div class="mt-10 mb-16">
<a href="https://play.google.com/store/apps/details?id=jp.co.pvp.kotoribounce">
<button class="mr-5">
<img src="assets/official-play-store-button.svg">
</button>
</a>
<a href="https://apps.apple.com/jp/app/kotori-bounce/id6717580102">
<button class="mr-6">
<img src="/assets/official-app-store-button.svg">
</button>
</a>
</div>
</div>
</div>
</div>
<!-- footer -->
<div>
<footer class="bg-white mt-8 mb-4 px4">
<div class="mx-auto max-w-7xl p-4 md:flex md:items-center md:justify-between">
<div class="flex flex-row items-center">
<button class="cursor-not-allowed">
<img src="assets/insta-icon.svg" class="mr-6">
</button>
<button class="cursor-not-allowed">
<img src="assets/fb-icon.svg">
</button>
</div>
<ul class="flex flex-wrap items-center mt-5 text-sm font-medium sm:mt-0">
<!-- Privacy Policy Dropdown -->
<li class="relative">
<a href="#" onclick="toggleDropdown(event, 'privacyDropdown')"
class="hover:text-orange-700 me-4 md:me-6">Privacy Policy</a>
<ul id="privacyDropdown" class="absolute hidden top-auto bottom-full mb-2 rounded-lg">
<li class="bg-orange-200 rounded-xl mb-2 mt-2">
<a href="privacy_policy_en.html" class="block px-4 py-2 hover:bg-gray-200">English</a>
</li>
<li class="bg-orange-200 rounded-xl mb-2">
<a href="privacy_policy_jp.html" class="block px-4 py-2 hover:bg-gray-200">日本語</a>
</li>
</ul>
</li>
<!-- Terms of Service Dropdown -->
<li class="relative">
<a href="#" onclick="toggleDropdown(event, 'termsDropdown')"
class="hover:text-orange-700 me-4 md:me-6">Terms of Service</a>
<ul id="termsDropdown" class="absolute hidden top-auto bottom-full mb-2 rounded-lg">
<li class="bg-orange-200 rounded-xl mb-2 mt-2">
<a href="terms_en.html" class="block px-4 py-2 hover:bg-gray-200">English</a>
</li>
<li class="bg-orange-200 rounded-xl mb-2 mt-2">
<a href="terms_jp.html" class="block px-4 py-2 hover:bg-gray-200">日本語</a>
</li>
</ul>
</li>
<li>
<a href="https://pvp.co.jp/contact-e/" class="hover:text-orange-700 me-4 md:me-6">Contact</a>
</li>
<li>
<a href="https://pvp.co.jp/company-e/" class="hover:text-orange-700">About PVP Inc.</a>
</li>
</ul>
</div>
<div class="w-full mx-auto max-w-7xl p-4 md:flex">
<span class="text-sm sm:text-center">© 2023
<a>PVP Inc.</a>
All Rights Reserved.
</span>
</div>
</footer>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>