This repository has been archived by the owner on Mar 15, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
191 lines (169 loc) · 8.79 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
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>オフィスチェア ゲーミングチェア</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="header-wraper">
<!-- navi -->
<nav class="navbar navbar-expand-sm navbar-light bg-dark text-white">
<!-- logo -->
<a class="navbar-brand" href="./index.html"><img src="./img/logo.jpg" alt="logo" class="img-fluid"></a>
<!-- menu button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon text-wi"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link text-white text-center h5 align-middle" href="./index.html">Home <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white text-center h5" href="./brands.html">Brands</a>
</li>
<li class="nav-item">
<a class="nav-link text-white text-center h5" href="./pickups.html">Pickups</a>
</li>
<li class="nav-item">
<a class="nav-link text-white text-center h5" href="./contact.html">Contact</a>
</li>
</ul>
<a class="text-white" href="#"><i class="fab fa-twitter-square h2 px-2"></i></a>
<a class="text-white" href="#"><i class="far fa-envelope h2 px-2"></i></a>
</div>
</nav>
</div>
</header>
<main>
<div class="top text-center">
<h4>座る時間を快適に</h4>
<p>椅子に腰をかけている時間を快適とするために<br>
一日の多くを座る現代において<br>
最高の座り心地を追求しよう
</p>
</div>
<div class="fadeIn1">
<h3 class="text-center pt-4">当サイトの目的</h3>
<div class="row purpose pt-2">
<div class="col-md-6 col-12"><img src="./img/purpose1.jpg" alt="seated" class="img-fluid"></div>
<div class="col-md-6 col-12 my-auto">座る作業をするあなたが<br>
「より集中」<br>
「より楽に」<br>
「より生産的に」<br>
作業できること。<br>
それを達成するためのサイトです。
</div>
</div>
<div class="row purpose pt-2">
<div class="col-md-6 col-12 order-md-2"><img src="./img/purpose2.jpg" alt="seated" class="img-fluid"></div>
<div class="col-md-6 col-12 order-md-1 my-auto">
そもそも必要なの…<br>
椅子にお金をかけるなんて…<br>
座れればそれでいい…<br>
別にに困ってないし…<br><br>
そんなあなたに見てほしいです！
</div>
</div>
</div>
<div class="feature fadeIn2">
<h3 class="text-center pt-4">特徴</h3>
<p>まずはゲーミングチェアの特徴を知って、興味を持とう</p>
<div class="row">
<div class="col-12 col-md-6">
<img src="./img/feature1.jpg" alt="feature" class="img-fluid">
</div>
<div class="col-12 col-md-6 my-auto">
<ul class="list-unstyled">
<li>チェアシートは頭の先まで包み込む<b>ハイバックシート</b></li>
<li>首にかかる頭の重さを分散する<b>ヘッドレスト</b></li>
<li>座った時、寝てしまった骨盤を押し出し、腰への負担を軽減できるよう背骨がS字カーブを描く理想的な姿勢になるようサポートする<b>ランバーサポート</b></li>
<li>「前後」「左右」「上下」に可動する<b>アームレスト</b></li>
<li>プレイスタイルや、状況に応じてチェアシートの傾斜角度を変える事ができる<b>リクライニング</b></li>
</ul>
<p class="h4">人間工学に基づいた上質な座り心地を実現</p>
</div>
</div>
<p class="text-right feature-link"><a href="https://www.akracing.jp/premium/">AKRACING</a>ホームページより</p>
</div>
<div class="material fadeIn3">
<h3 class="text-center pt-4">素材</h3>
<p>素材の違いから最適なチェアを見極めよう</p>
<div class="row mesh">
<div class="col-5">
<img src="./img/mesh.jpg" alt="mesh" class="img-fluid material-image">
</div>
<div class="col-7 my-auto">
<h4>- メッシュ生地 -</h4>
<ul class="list-unstyled">
<li>軽量</li>
<li>通気性</li>
<li>ソフト</li>
</ul>
<p class="h5">長時間座っても蒸れない通気性を求める方に最適</p>
</div>
</div>
<div class="row leather pt-2">
<div class="col-5">
<img src="./img/leather.jpg" alt="leather" class="img-fluid material-image">
</div>
<div class="col-7 my-auto">
<h4>- レザー生地 -</h4>
<ul class="list-unstyled">
<li>耐久性</li>
<li>水に強い</li>
<li>ハード</li>
</ul>
<p class="h5">ハードな触感で安定感を求める方におすすめ</p>
</div>
</div>
</div>
<div class="message fadeIn4 mt-4">
<h4>イメージができたら商品を調べていこう</h4>
<table class="table mt-4">
<tr>
<td>
<a href="./brands.html" class="btn btn-info px-3">Brands</a>
</td>
<td>有名なブランドを紹介しています。<br>高級メーカー、高コスパメーカーを掲載しています。</td>
</tr>
<tr>
<td>
<a href="./pickups.html" class="btn btn-info px-3">Pickups</a>
</td>
<td>おすすめの商品を紹介しています。<br>よく多くの人が使用しているため安心して使えます。</td>
</tr>
<tr>
<td>
<a href="./contact.html" class="btn btn-info px-3">Contact</a>
</td>
<td>作成者に直接問い合わせてみましょう<br>相談、質問など何でも受け付けます。</td>
</tr>
</table>
</div>
</main>
<footer class="bg-dark text-white mt-4 py-4">
<div class="row mx-0">
<div class="col-md-4">
©Copyright 2020 Tsukasa INOUE<br>All Rights Reserved
</div>
<div class="col-md-4"><img src="./img/logo.jpg" alt="logo" class="img-fluid w-50"></div>
<div class="col-md-4">
For your best Chair Life
</div>
</div>
</footer>
<!-- jQuery、Popper.js、Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>