Skip to content

Instantly share code, notes, and snippets.

@pierrealexaline

pierrealexaline/index.html

Created October 12, 2018 15:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pierrealexaline/0a7207143253db70246c4709ddbb484e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pierrealexaline/0a7207143253db70246c4709ddbb484e to your computer and use it in GitHub Desktop.
Download ZIP
page index findthe precious
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>FindThePrecious</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<link rel="manifest" href="img/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<header>
<h1>FindThePrecious.com</h1>
<nav>
<ul>
<li><a href="fellows.html">Fellows</a></li>
<li><a href="reward.html">Get My reward</a></li>
<li><a href="thering.html">The ring</a></li>
<li><a href="join.html">Join the army</a></li>
<li><a href="best.html">Best hunter</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</nav
<div class="fix">&nbsp;</div>
<img src="https://via.placeholder.com/960x210" alt="Most wanted" />
</header>
<div class="fix">&nbsp;</div>
<main>
<section>
<h2>Fellows wanted dead <span class="smallTitle">(or alive if you want to eat them later)</span></h2>
<div class="nav">
<ul class="menuWanted">
<li><a class="current" href="most_wanted.html">Most wanted</a></li>
<li><a href="most_dangerous.html">Most dangerous</a></li>
<li><a href="captured.html">Already captured</a></li>
</ul>
<div class="fix">&nbsp;</div>
</div>
<div class="fix">&nbsp;</div>
<div class="col1_3">
<div class="box">
<figure>
<img src="https://via.placeholder.com/280x210" alt="Most wanted">
<figcaption class="reward">Reward 1000 Gold Coin</figcaption>
</figure>
<h3>The Wizard</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla volutpat lorem vitae arcu feugiat,ut vulputate tortor congue.
Etiam dignissim elit et tempus hendrerit.
</p><div class="fix">&nbsp;</div>
</div>
</div>
<div class="col1_3">
<div class="box">
<figure>
<img src="https://via.placeholder.com/280x210" alt="Dead">
<figcaption class="dead">DEAD</figcaption>
</figure>
<h3>Hobbit #3</h3>
<p>
Donec ut augue ut arcu viverra pulvinar et non justo.
Duis tempor nibh a velit condimentum, semper porta diam cursus.
Praesent at enim sed turpis lacinia dictum.
</p><div class="fix">&nbsp;</div>
</div>
</div>
<div class="col1_3">
<div class="box">
<figure class="col_1_3">
<img src="https://via.placeholder.com/280x210" alt="sub-Wanted">
<figcaption class="reward">Reward 250 Gold Coin</figcaption>
</figure>
<h3>Yummy Dwarf</h3>
<p class="figure">
Curabitur molestie tortor ac dolor sagittis facilisis. Proin convallis leo est,
vel dapibus eros posuere eget. Morbi blandit sem at eleifend vehicula.
</p><div class="fix">&nbsp;</div>
</div>
</div>
<div class="fix">&nbsp;</div>
</section>
<section>
<div class="col1_10">
<hr/>
<h2>I have captured one of them, how to get my reward</h2>
<p>
Suspendisse iaculis arcu eget risus pulvinar,
at volutpat risus consectetur. Nunc arcu mi, pellentesque id bibendum vitae,
hendrerit et eros. Maecenas mollis sem vel nisl vehicula ornare.
Nulla ac laoreet lectus, non ultrices urna. Vivamus consectetur velit sed neque
vehicula gravida.
</p>
<figure>
<img src="https://via.placeholder.com/140x140" alt="Reward 250">
<figcaption class="captured">Reward 250 Gold Coin</figcaption>
</figure><div class="fix">&nbsp;</div>
<form action="index.html" method="post" class="contact">
<button type="submit" name="contact_us">Contact us</button>
</form>
</div>
</section>
<section>
<hr/>
<h2>Best hunters</h2>
<article class="col1_2">
<figure>
<img src="https://via.placeholder.com/70x70" alt="profile">
</figure>
<h3>ElvesKiller22</h3>
<p>
<span class="capture_nber">Capture</span>
<span class="profile">Profile</span>
<span class="like">Like</span>
</p>
</article>
<article class="col1_2">
<figure>
<img src="https://via.placeholder.com/70x70" alt="profile">
</figure>
<h3>Goblin45</h3>
<p>
<span class="capture_nber">Capture -</span>
<span class="profile">Profile</span>
<span class="like">Like</span>
</p>
</article>
</section><div class="fix">&nbsp;</div>
<section>
<h2>About the ring</h2>
<article class="col1_10 colored">
<h3>Ring Capabilities</h3>
<p>What can our master Sauron do with the ring ?</p>
<div class="fix">&nbsp;</div>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Main</td>
<td>One ring to rules them all</td>
</tr>
<tr>
<td style="background:#fff">Invisibility</td>
<td style="background:#fff">You can't see me</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Power</td>
<td>Destroy the world</td>
</tr>
</tfoot>
</table>
</article><div class="fix">&nbsp;</div>
<article class="col1_10 colored">
<h3>Why the ring is awesome ?</h3>
<div class="fix">&nbsp;</div>
<p>
Nulla in porta magna. Ut a purus lectus. Etiam eu laoreet nisi.
In quis placerat magna, nec ultrices odio. Suspendisse placerat consectetur ipsum, et vestibulum leo rutrum ac. Vivamus tempus quis elit eu vestibulum.
Suspendisse feugiat laoreet nisl,
mattis varius arcu hendrerit in. Duis convallis erat ex, eget cursus tortor
semperut.
<a href="golium.html">Golium</a>
</p>
<figure>
<img class="circle" src="https://via.placeholder.com/110x110" alt="profile">
</figure>
</article>
</section>
<div class="fix">&nbsp;</div>
<section class="col1_10">
<h2>Join Mordor Army, we need you</h2>
<figure>
<img src="https://via.placeholder.com/140x140" alt="profile">
</figure>
<p class="left">
Nulla in porta magna. Ut a purus lectus. Etiam eu laoreet nisi.
In quis placerat magna, nec ultrices odio. Suspendisse placerat consectetur ipsum, et
vestibulum leo rutrum ac. Vivamus tempus quis elit eu vestibulum.
Suspendisse feugiat laoreet nisl,
mattis varius arcu hendrerit in. Duis convallis erat ex, eget cursus tortor semper ut.
</p><div class="fix">&nbsp;</div>
<form class="left" action="index.html" method="post">
<button class="left"type="submit" name="More info on SauronRulesThemAll.com">More info on
SauronRulesThemAll.com</button>
</form>
</section>
<section>
<h2>Contact us</h2>
<div class="fix">&nbsp;</div>
<form action="index.html" method="post" class="contact">
<input type="email" name="mail" placeholder="e-mail">
<input type="url" name="homepage" placeholder="http://mysite/homepage.html">
<select name="wanted">
<option selected disabled hidden>I have seen one of them</option>
<option>John Walker Smith</option>
<option>Adam Blackstone Parrot</option>
<option>Bille Kraken Monster Fallow</option>
</select>
<textarea name="message">Your Message</textarea>
</form>
</section>
</main>
<footer>
<ul>
<li>About us</li>
<li>Fellows</li>
<li>Join our Army</li>
</ul>
<ul>
<li>FAQ</li>
<li>Reward conditions</li>
<li>Legales mentions</li>
</ul>
<div class="fix">&nbsp;</div>
<p>
<a href="sauron4ever.com">Sauron4Ever.com</a>
<a href="twitter.com">follow him also on twitter</a>
</p>
</footer>
</body>
</html>
Raw
style.css
*{box-sizing: border-box;}
body{
margin: 0;
font-family: helvetica,arial,sans-serif
}
/***** NAV *****/
nav{
display:block;
width:764px;
position:relative;
float:left;
margin: 0;
padding:0;
background:#555
}
nav ul{
width:100%;
display:block;
position:relative;
margin:0px;
padding:0 0 0 14px
}
nav li{
font-size:0.9em;
list-style:none;
padding:0;
margin:0px;
float:left
}
nav ul li a{
text-decoration:none;
text-align:center;
color:#fff;
display:block;
width:114px;
background:#555;
padding:13px 5px;
font-size:0.8em
}
nav ul li a:hover{
color:#555;
display:block;
background:#ccc
}
/***** LAYOUT *****/
header{
display:block;
position:relative;
width:960px;
height:210px;
margin:0 auto 10px;
background:#ccc
}
main{
display:block;
width:900px;
margin:0 auto
}
footer{
display:block;
color:#fff;
width:960px;
margin:0 auto;
background:#222
}
/***** SITE STYLE *****/
.col1_3{
width:300px;
display:inline-block;
float:left;
}
.col1_2 p{
width:250px;
display:block;
float:left;
margin-left:15px
}
.col1_2{
width:450px;
display:block;
float:left;
}
.col1_2 p{
display:block;
width:250px;
font-size:0.8em;
float:left;
}
.col1_2 img, .col1_2 figure{
width:70px;
height:70px;
margin:0;
display:block;
float:left;
}
.col1_2 .like{
display:block;
float:none;
clear:both;
font-size:0.8em;
}
.col1_2 .capture_nber,
.col1_2 .profile{
display:block;
float:left;
font-size:0.8em;
}
.col1_2 h3,{
width:250px;
display:block;
margin:0;
float:left;
}
.col1_10{
width:900px;
display:inline-block;
}
.box{
padding:2px;
border:1px solid #ccc;
width:290px;display:block;
margin:0 auto 20px;
}
.fix{
width:100%;
display:block;
clear:both;
float:none;
}
.col1_3 p,h3,figure{
display:block;
width:280px;
margin:0 auto;
}
.col1_3 img{
display:block;
width:280px;
margin:0 auto;
border-radius:5px;
}
.col1_3 p{
font-size:0.8em;
}
.col1_3 h3{
font-weigth:bold;
font-size:1.2em;
padding:10px 0;
}
.col1_10 figure,img{
display:block;
width:140px;
border-radius:5px;
float:left;
margin:0 0 0 20px
}
figcaption.captured{
display:none;
}
.col1_10 p{
display:block;
width:690px;
float:left;
}
h1{
display:block;
font-style:none;
font-weight:200;
margin: 0;
float:left;
width:195px;
font-size:1.2em;
color:#fff;
background:#555;
padding:7px 5px 9px 5px
}
figcaption.reward{
display:block;
font-weight:bold;
position:absolute;
margin:15px 20px 0 30px;
padding:10px;
color:#fff;
background:#999;
width:220px
}
figcaption.dead{
display:block;
position:absolute;
margin:90px 0 0 100px;
font-size:1.8em;
}
h2{
font-size:1.4em;
padding:20px 0
}
h2.small{
font-weight:200;
font-style:none;
font-size:1.2em
}
.contact{
width:100%;
display:block;
margin-bottom:20px;
}
.contact button{
display:block;
margin:0 auto;
padding:10px 20px;
border-radius:5px;
-webkit-box-shadow: -1px 0px 10px -1px rgba(0,0,0,0.44);
-moz-box-shadow: -1px 0px 10px -1px rgba(0,0,0,0.44);
box-shadow: -1px 0px 10px -1px rgba(0,0,0,0.44);
}
.nav{
width:100%;
display:block;
clear:both;
float:none;
margin:0
}
ul.menuWanted{
width:63%;
display:block;
margin:0 auto;
padding:0
}
ul.menuWanted li{
display:block;
float:left
}
ul.menuWanted li a{
width:180px;
text-align:center;
display:block;
padding:10px;
color:#333;
background:fff;
text-decoration:none;
border-radius:5px;
margin:0 2px
}
ul.menuWanted li a:hover{
color:#333;
background:#ccc;
}
ul.menuWanted li a.current{
color:#fff;
background:#333;
}
table{
width:95%;
margin: 10px auto;
}
thead{
background:#555;
color:#fff;
font-weight:200
}
tr{
color:#222;
}
th{
padding:10px;
color:#222;
background:#888
}
td{
padding:10px;
color:#222;
background:#CCC
}
.colored{
background:#fff;
border:1px solid #ccc;
border-radius:5px;
}
.colored h3{
background: #f5f5f5;
width:100%;padding:10px;
}
.colored p{
padding:10px;
}
.circle{
display:block;
border-radius:50%;
margin-top:-20px;
padding:10px
}
.left{
margin-left:40px
}
.left button{
width:50%;
background:#fff;
display:block;
margin:0 auto;
padding:10px;
border-radius:10px
}
.contact input,.contact select, .contact button,.contact textarea{
display:block;width:100%;margin-bottom:5px;
}
.contact textarea{min-height:100px;}
.contact{
display:block;
width : 70%;
margin:0 auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment