-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhome.html
More file actions
192 lines (178 loc) · 8.47 KB
/
home.html
File metadata and controls
192 lines (178 loc) · 8.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FindThePrecious</title>
</head>
<body>
<!-- menu -->
<header>
<h1>FindThePrecious.com</h1>
<nav>
<ul>
<li><a href="#">Fellows</a></li>
<li><a href="#">The Ring</a></li>
<li><a href="#">Get my reward</a></li>
<li><a href="#">Best hunters</a></li>
<li><a href="#">Join the army</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>
<main>
<!-- Slideshow-->
<div id="slideshow">
<h2>Dangerous fellows try to destroy the ring</h2>
<p>Orcs, Goblins, Blarogs, protect your master Sauron !</p>
<img src="http://via.placeholder.com/350x150" width="620" height="320" alt="Dangerous_slider" />
<span class="arrow previous"></span>
<span class="arrow next"></span>
</div>
<!-- Fellows section -->
<section>
<header>
<h2>Fellows wanted dead<span>(or alive if you want eat them later)</span></h2>
</header>
<div>
<button type="button">Most wanted</button>
<button type="button">Most dangerous</button>
<button type="button">Already captured</button>
</div>
<div>
<img src="http://via.placeholder.com/140x140" alt="The wiz" width="140" height="140">
<div>
<p>Reward 1000 gold coins</p>
</div>
<h3>The Wizard</h3>
<p>Small description</p>
</div>
<div>
<img src="http://via.placeholder.com/140x140" alt="Hobbit#3" width="140" height="140">
<h3>Hobbit#3</h3>
<p>Small description</p>
</div>
<div>
<img src="http://via.placeholder.com/140x140" alt="Yummy Dwarf" width="140" height="140">
<div>
<p>Reward 250 gold coins</p>
</div>
<h3>Yummy Dwarf</h3>
<p>Small description</p>
</div>
</section>
<hr> <!-- Separate line / I have -->
<section>
<header>
<h2>I have captured one of them, how to get my reward?</h2>
</header>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet consectetur debitis deserunt ducimus earum enim eveniet id impedit, ipsa ipsam quaerat reiciendis repudiandae, sit suscipit totam vel voluptas voluptatum.</span><span>Alias animi aperiam aut autem cupiditate debitis dicta eligendi excepturi expedita, hic, in laboriosam nisi odit pariatur qui quisquam quos voluptatem. Blanditiis dolore exercitationem laboriosam nihil nobis omnis ullam veritatis?</span></p>
<img src="http://via.placeholder.com/140x140" alt="img" width="140" height="140">
<button type="button">Contact us</button>
</section>
<hr> <!-- Separate line / Best hunters-->
<section>
<header>
<h2>Best hunters</h2>
</header>
<img src="http://via.placeholder.com/70x70" alt="profile" width="70" height="70">
<aside>
<h3>ElvesKiller22</h3>
<p>2 captures - <a href="">Profile</a> </p>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
</aside>
<img src="http://via.placeholder.com/70x70" alt="profile" width="70" height="70">
<aside>
<h3>Goblin45</h3>
<p>1 capture - <a href="">Profile</a> </p>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-size="small" data-show-faces="true" data-share="false"></div>
</aside>
</section>
<hr> <!-- Separate line / About the ring-->
<section>
<header>
<h2>About the ring</h2>
</header>
<article>
<div>
<h3>Ring Capabilities</h3>
<table>
<caption>What can our master Sauron do with the ring?</caption>
<tr>
<th>Feature</th>
<th>Description</th>
</tr>
<tr>
<td>Main</td>
<td>One ring to rules them all</td>
</tr>
<tr>
<td>Invisibility</td>
<td>You can't see me</td>
</tr>
<tr>
<td>Power</td>
<td>Destroy the world</td>
</tr>
</table>
</div>
</article>
<article>
<h3>Why the ring is awesome</h3>
<div>
<blockquote>My Precioooooussss ! Hrk Hrk, we want our Precioooooussss !!</blockquote>
<cite>Gollum</cite>
<img src="http://via.placeholder.com/110x110" alt="Gollum" width="110" height="110">
</div>
</article>
</section>
<hr> <!-- Separate line / About the ring-->
<section>
<header>
<h2>Join Mordor Army, we need you !</h2>
</header>
<img src="http://via.placeholder.com/140x140" alt="Army" width="140" height="140">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda commodi dicta error ipsa magnam molestias nostrum? Consectetur, culpa laboriosam maxime omnis optio quos sapiente. Molestiae, praesentium tenetur! Officiis reiciendis, reprehenderit?</span><span>Aliquid doloribus, iusto numquam quibusdam reiciendis rem repudiandae tenetur? Dolorem dolorum expedita ipsam maiores molestias nam quaerat? Animi cumque esse laudantium magnam mollitia nisi porro praesentium sequi? Alias, modi, reiciendis.</span><span>Aut ducimus enim minus sit tempora ullam unde voluptatum. Dicta doloremque earum ipsa molestias nihil obcaecati officiis quia? Aut autem fuga nulla optio sapiente. Delectus ipsum labore nisi quo voluptate!</span><span>Ad, alias aut facilis fugiat minima nostrum possimus repellat vero! Ad aperiam architecto aspernatur consequatur cum distinctio illum in ipsa neque nobis quia suscipit, tenetur. Dicta eveniet quae voluptas voluptates!</span><span>Alias commodi est ex impedit labore, maiores minus nostrum omnis optio pariatur perferendis perspiciatis quidem quisquam reiciendis rem sapiente sunt vel voluptate? Aliquid debitis dolores explicabo ipsam, repellendus repudiandae voluptate.</span></p>
<button type="button">More info on SauronRulesThemAll.com</button>
</section>
<hr> <!-- Separate line / About the ring-->
<section>
<header>
<h2>Contact us</h2>
</header>
<form>
<input type="email" name="email" placeholder="@"><br>
<input type="text" name="adresse">
<select name="seen">
<option value="seen">I have seen one of them</option>
<option value="saab">Maxime</option>
<option value="fiat">Victor</option>
</select>
<textarea name="message" placeholder="Your message" rows="10" cols="40"></textarea>
</form>
</section>
</main>
<!-- Footer -->
<footer>
<nav>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">fellows</a></li>
<li><a href="#">Join our army</a></li>
</ul>
</nav>
<nav>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Reward conditions</a></li>
<li><a href="#">legal mentions</a></li>
</ul>
</nav>
<nav>
<ul>
<li><a href="#">Fellows</a></li>
<li><a href="#">The Ring</a></li>
</ul>
</nav>
</footer>
</body>
</html>