screens

Author: cedricmarteau

css/style.css

@@ -134,6 +134,54 @@ html, body {
 	border:3px solid #66b345;
 	padding:0px 67px;
 }
+#home ul li{
+	margin-bottom:90px;
+}
+#home ul{
+	margin-top:40px;
+}
+
+#intro .bouton{
+	position:absolute;
+	bottom:100px;
+	left:230px;
+}
+
+#scores ul{
+	width:300px;
+	text-align:left;
+	margin:30px auto 0 auto;
+}
+
+#scores li{
+	display:inline-block;
+	width:300px;
+	position:relative;
+}
+
+#scores span{
+	position:absolute;
+	right:0px;
+}
+
+#scores .bouton{
+	position:absolute;
+	bottom:100px;
+	left:230px;
+}
+
+#touches div{
+	width:350px;
+	padding-left:400px;
+	height:376px;
+	background:url('../img/touches.png') no-repeat;
+	margin-left:50px;
+	text-align:left;
+}
+
+#touches p{
+	margin-bottom:85px;
+}
 
 #content{
 	width:960px;

img/touches.png

@@ -48,9 +48,38 @@ <h1><a href="index.html">WINTER IS COMING</a></h1>
 						</div>
 					</div>
 				</div>
-				<section id="intro" class="ecran">
+				<section id="home" class="ecran">
 					<p></p>
-					<a href="#" class="bouton">PLAY</a>
+					<ul>
+						<li><a href="#" class="bouton">JOUER</a></li>
+						<li><a href="#" class="bouton">RÈGLES DU JEU</a></li>
+						<li><a href="#" class="bouton">TOP SCORE</a></li>
+					</ul>
+				</section>
+				<section id="intro" class="ecran">
+					<p>
+					LES CONDITIONS DE VIE PLUTONIENNES DEVIENNENT DE PLUS EN PLUS DIFFICILES POUR SES HABITANTS. AVEC L’HIVER QUI APPROCHE, LES PLUTONIENS N’ONT PLUS LE CHOIX : POUR SURVIVRE, ILS PARTENT EN EXPÉDITION VERS LA TERRE POUR RAMENER LE PLUS DE MOUTONS ET SE COUVRIR DE LAINE POUR SE RÉCHAUFFER. ATTENTION, LE TEMPS EST LIMITÉ ET LES HUMAINS NE VOUS LAISSERONT PAS FAIRE SI FACILEMENT. AU COMMANDE DE LA SOUCOUPE VOLANTE, VOUS ÊTES EN CHARGE DE CETTE IMPORTANTE MISSION.
+					</p>
+					<a href="#" class="bouton">LANCER LA MISSION</a>
+				</section>
+				<section id="scores" class="ecran">
+					<p>TOP SCORES</p>
+					<ul>
+						<li>GEORGE <span>856345 PTS<span></li>
+						<li>GEORGE <span>856345 PTS<span></li>
+						<li>GEORGE <span>856345 PTS<span></li>
+						<li>GEORGE <span>856345 PTS<span></li>
+						<li>GEORGE <span>856345 PTS<span></li>
+					</ul>
+					<a href="#" class="bouton">LANCER LA MISSION</a>
+				</section>
+				<section id="touches" class="ecran">
+					<div>
+						<p>A : MONTER<br/>Z : DESCENDRE</p>
+						<p>SE DÉPLACER</p>
+						<p>CAPTURER UN MOUTON</p>
+					</div>
+					<a href="#" class="bouton">MENU</a>
 				</section>
 				<div class="moutons"></div>
 			</section>