-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
241 lines (221 loc) · 8.18 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
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
239
240
241
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Story Games</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- header section -->
<header class="d-flex align-items-center justify-content-between w-100">
<div class="logo-title">
<h2>Story Games</h2>
</div>
<div>
<img class="book-close-btn" src="./images/book-close.png" alt="" />
<img class="book-open-btn" src="./images/book-open.png" alt="" />
</div>
<div class="menu-bar">
<ul class="list-unstyled">
<li><a href="#home">Home</a></li>
<li><a href="#sale">Game</a></li>
<li><a href="#company">Company</a></li>
<li><a href="#hardware">HardWare</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</header>
<!-- hero section -->
<section class="hero d-flex align-items-center vh-100" id="home">
<div class="container">
<div class="row">
<div class="title col-md-8">
<h1>Another World</h1>
<h3>~Fantasy Story~</h3>
</div>
</div>
</div>
</section>
<!-- sale section -->
<section class="sale bg-light" id="sale">
<div class="container text-dark">
<div class="row">
<div class="col-sm-7 mx-auto text-center">
<h2>ゲームラインナップ</h2>
<h3>今週の売上ベスト3</h3>
</div>
</div>
<div class="row g-4 mt-3">
<div class="col-sm-4">
<div class="game-card card-effect text-center">
<img src="./images/another-world.jpg" alt="" />
<div class="my-4">
<h5>Another World</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum, facilis.</p>
</div>
<button class="btn btn-primary mb-3 py-2 px-3">Shop</button>
</div>
</div>
<div class="col-sm-4">
<div class="game-card card-effect text-center">
<img src="./images/butterfly.jpg" alt="" />
<div class="my-4">
<h5>Butterfly Effect</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum, facilis.</p>
</div>
<button class="btn btn-primary mb-3 py-2 px-3">Shop</button>
</div>
</div>
<div class="col-sm-4">
<div class="game-card card-effect text-center">
<img src="./images/heaven-story.jpg" alt="" />
<div class="my-4">
<h5>Heaven Story</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum, facilis.</p>
</div>
<button class="btn btn-primary mb-3 py-2 px-3">Shop</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- company section -->
<section class="company vh-100" id="company">
<div class="container">
<div class="row">
<div class="company-info col-md-9 text-end ms-auto p-5">
<h2 class="mb-4">会社情報</h2>
<div>
<p>「物語がすべて」を信念に活動しているStoryGames.
</p>
<p> その作品には人を魅了する力を持っており
<br>
日本にとどまらずに世界中でプレイされているのが特徴</p>
</div>
<div class="conmpany-text-last">
<div class="mb-5">
<p>今年リリースしたAnother Worldは世界中を席巻し
<br>
さらなるStoryGamesの魅力を広げている・・・
</p>
</div>
<div class="more">
<span class="fs-2">More Detail</span>
<a href="#"><i class="bi bi-arrow-right-square"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- hardware section -->
<section class="hardware bg-light mx-auto" id="hardware">
<div class="container text-dark">
<div class="row">
<div class="col-sm-7 mx-auto text-center">
<h2>対応機種</h2>
<h3>対応機種・ハード一覧</h3>
</div>
</div>
<div class="row g-5 mt-3">
<div class="col-sm-6">
<div class="hardware-card card-effect text-center">
<img src="./images/nintendo-switch.jpg" />
<div class="overlay"></div>
<h3>Nintendo Switch</h3>
</div>
</div>
<div class="col-sm-6">
<div class="hardware-card card-effect text-center">
<img src="./images/ps4.jpg" />
<div class="overlay"></div>
<h3>PlayStation</h3>
</div>
</div>
<div class="col-sm-6">
<div class="hardware-card card-effect text-center">
<img src="./images/x-box.jpg" />
<div class="overlay"></div>
<h3>X-BOX</h3>
</div>
</div>
<div class="col-sm-6">
<div class="hardware-card card-effect text-center">
<img src="./images/pc-game.jpg" />
<div class="overlay"></div>
<h3>PC/Steam</h3>
</div>
</div>
</div>
</div>
</section>
<!-- contact section -->
<section class="contact vh-100" id="contact">
<div class="container py-5 px-0">
<div class="row">
<div class="contact-info col-lg-6">
<h2 class="mb-5">お問い合わせ</h2>
<form action="" class="pt-3 px-5">
<input type="text" class="form-control" placeholder="Full Name">
<input type="email" class="form-control" placeholder="Email">
<input type="tel" class="form-control" placeholder="TEL">
<textarea name="" id="" cols="80" rows="10" placeholder="Message"></textarea>
<br>
<button class="btn btn-primary mt-3 px-5 py-3 fs-4">送信</button>
</form>
</div>
<div class="col-lg-4 ms-auto vision-sight-logo">
<h3 class="text-end">Vision Sight</h3>
</div>
</div>
</div>
</section>
<!-- footer section -->
<footer class="bg-dark">
<div class="container">
<div class="row gy-4">
<div class="col-md-4">
<h2 class="mt-5 pe-3">Story Games</h2>
</div>
<div class="col-md-2">
<h5 class="text-white">Brand</h5>
<ul class="list-unstyled">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div>
<div class="col-md-2">
<h5 class="text-white">More</h5>
<ul class="list-unstyled">
<li><a href="#">FAQ&'s</a></li>
<li><a href="#">Privacy & Policy</a></li>
<li><a href="#">Warrantry</a></li>
<li><a href="#">Shipment</a></li>
</ul>
</div>
<div class="col-md-4">
<h5 class="text-white">Pages</h5>
<ul class="list-unstyled">
<li>Address: 2715 Ash Dr. San Jose, South Dakota 83475</li>
<li>Email: [email protected]</li>
<li>Phone: 111-222-333</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="./main.js"></script>
</body>
</html>