Skip to content

Instantly share code, notes, and snippets.

@pierrealexaline

pierrealexaline/index.html

Created October 14, 2018 23:36
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save pierrealexaline/1109f65b80e731b5889d441f4a33875e to your computer and use it in GitHub Desktop.
Download ZIP
Exercice - css
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">
</head>
<body>
<header></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="http://images.innoveduc.fr/integration_gandalf.png" alt="Most wanted">
<figcaption class="reward"><p class="gandalf">Gandalf</p><p class="gandalf_reward">reward <span>1000</span> golden coins</p></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="http://images.innoveduc.fr/integration_gandalf.png" 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="http://images.innoveduc.fr/integration_gandalf.png" 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>
</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
}
/***** 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;
}
/*
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
opacity: 0;
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
*/
.col1_3 figure .gandalf{
display:block;
font-weight:300;
font-size:3em;
text-align:center;
position:absolute;
margin:140px 20px 0 30px;
padding:10px;
color:#fff;
width:220px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.col1_3 figure:hover .gandalf{
display:block;
font-weight:300;
font-size:1.6em;
text-align:center;
position:absolute;
margin:260px 20px 0 30px;
padding:10px;
color:#fff;
width:220px;
}
.col1_3 figure .gandalf_reward{
display:block;
font-weight:200;
font-size:1.8em;
text-align:center;
position:absolute;
margin:15px 0 0 20px;
padding:10px;
color:#fff;
background:#999;
width:240px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.col1_3 figure .gandalf_reward span{
color:orange;
}
.col1_3 figure:hover .gandalf_reward{
display:none;
}
.col1_3 figure img{
display:block;
width:280px;
margin:0 auto;
border-radius:5px;
opacity: 0.5;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.col1_3 figure:hover img{
opacity: 1;
}
.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.dead{
display:block;
position:absolute;
margin:90px 0 0 100px;
font-size:1.8em;
}
.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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment