-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (162 loc) · 6.59 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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FlexBoxを理解したい!</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<header class="l-header">
<div class="c-hamburger">
<span></span>
</div>
<div class="c-logo">
<span class="c-logo__text c-logo__text--blue">G</span>
<span class="c-logo__text c-logo__text--red">o</span>
<span class="c-logo__text c-logo__text--yellow">o</span>
<span class="c-logo__text c-logo__text--blue">g</span>
<span class="c-logo__text c-logo__text--green">l</span>
<span class="c-logo__text c-logo__text--red">e</span>
</div>
</header>
<div class="c-search-box">
<div class="c-search-query">
<form class="c-search-query__input">
<input type="text" title="検索" name="q">
</form>
<div class="c-search-query__submit">
<i class="fa fa-search"></i>
</div>
</div>
<div class="c-search-type">
<div class="c-search-type__item --active">すべて</div>
<div class="c-search-type__item">動画</div>
<div class="c-search-type__item">ニュース</div>
<div class="c-search-type__item">画像</div>
<div class="c-search-type__item">地図</div>
<div class="c-search-type__item">ショッピング</div>
<div class="c-search-type__item">書籍</div>
<div class="c-search-type__item">フライト</div>
<button class="c-search-type__tool">検索ツール</button>
</div>
<div class="c-option">
<div class="c-option__text">こちらを検索しますか?</div>
<a class="c-option-item">
<div class="c-option-item__image"></div>
<div class="c-option-item__content">
<div class="c-option-item__title">STEINS;GATE</div>
<div class="c-option-item__category">テレビ番組</div>
</div>
</a>
</div>
<div class="c-knowledge-panel">
<div class="c-knowledge-panel__header">
<div class="c-knowledge-about">
<div class="c-knowledge-about__title">STEINS;GATE</div>
<div class="c-knowledge-about__sub">シュタインズ・ゲート</div>
<div class="c-knowledge-about__sub">テレビ ゲーム</div>
</div>
<div class="c-knowledge-share">
<i class="fa fa-share-alt"></i>
</div>
</div>
<div class="c-knowledge-panel__body">
<div class="c-image-viewer">
<div class="c-image-viewer__item"></div>
<div class="c-image-viewer__item"></div>
<div class="c-image-viewer__item"></div>
<div class="c-image-viewer__item"></div>
</div>
</div>
<div class="c-knowledge-panel__body">
<div class="c-query-description">
<span>
『STEINS;GATE』は、5pb. より発売されているテレビゲームソフト。ファースト
バージョンは Xbox 360 にて 2009 年 10 月 15 日に発売された。
本項ではゲーム原典、他これを原作としたメディアミックスの結果生まれた下記
作品についても記載する。
ゲーム版スピンオフ作品 → スピンオフ作品
</span>
<span><a href="">ウィキペディア</a></span>
</div>
<div class="c-query-description">
<div class="c-query-description__category">
<span>シリーズ: </span>
<span><a href="">科学アドベンチャーシリーズ</a></span>
</div>
<div class="c-query-description__category">
<span>作者: </span>
<span><a href="">阿保剛</a></span>
</div>
</div>
</div>
<div class="c-knowledge-panel__body">
<div class="c-query-ad">
<div class="c-query-ad__header">
<div>
<span class="c-query-ad__badge">広告</span>
<span>以下から利用できます</span>
</div>
<div class="c-query-ad__info">
<i class="fa fa-info-circle"></i>
</div>
</div>
<div>
<div class="c-query-ad__item">
<div>
<div><a href="">ヨドバシカメラ</a></div>
<div>送料無料</div>
</div>
<div class="c-query-ad__item-value">¥13,180</div>
</div>
<div class="c-query-ad__item">
<div>
<div><a href="">Yahoo!ショッピング</a></div>
</div>
<div class="c-query-ad__item-value">¥13,758</div>
</div>
</div>
</div>
</div>
<div class="c-knowledge-panel__footer">
<div class="c-knowledge-panel__more-button"></div>
<div class="c-knowledge-panel__more-text">STEINS;GATE の詳細</div>
</div>
</div>
<article class="c-article">
<a href="" class="c-article__header">
<div class="c-article__title">想定科学 ADV『STEINS;GATE(シュタインズゲート)』
公式 Web サイト</div>
<div class="c-article__url">
<span>steinsgate.jp</span>
</div>
</a>
<div class="c-article__separator"></div>
<div class="c-article__body">
<div class="c-article__description">ゲ ー ム・ア ニ メ・コ ミ ッ ク・小
説 STEINS;GATE World Line 2017-2018 プロジェクト始動! </div>
<ul class="c-article-related">
<li class="c-article-related__item"><a href="">Gate ELITE</a></li>
<li class="c-article-related__item"><a href="">Steins;gate 線 形 拘 束
の ...</a></li>
<li class="c-article-related__item"><a href="">製品情報</a></li>
<li class="c-article-related__item"><a href="">ニュース</a></li>
<li class="c-article-related__item"><a href="">グッズ</a></li>
<li class="c-article-related__item"><a href="">ムービー</a></li>
<li class="c-article-related__item"><a href="">ス ペ シ ャ
ル Special</a></li>
</ul>
</div>
</article>
<div class="c-more-load">
<button class="c-more-load__button">
<i class="c-more-load__icon"></i>
<span class="c-more-load__text">もっと見る</span>
</button>
</div>
<script src="src/js/app.js"></script>
</body>
</html>