Skip to content

Commit 3d18d35

Browse files
cedricmarteaucedricmarteau
committed
interface change
1 parent 5f07afe commit 3d18d35

File tree

5 files changed

+113
-10
lines changed

5 files changed

+113
-10
lines changed

‎css/style.css

+108-9
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,106 @@ table{border-collapse: collapse;border-spacing: 0;}
3434

3535
}
3636

37-
html, body {width:100%;height:100%;margin:0;}
38-
#corps{width:100%;background:url('../img/pelouse.png') repeat;}
39-
.contener{width:960px;margin:0 auto;padding:20px 0;position:relative;}
40-
.herbe{width:100%;height:22px;background:url('../img/herbe.png') repeat-x;position:absolute;bottom:0px;}
41-
.moutons{width:271px;height:70px;background:url('../img/moutons.png') repeat-x;position:absolute;top:-60px;left:200px;}
37+
html, body {
38+
width:100%;
39+
height:100%;
40+
margin:0;
41+
}
42+
43+
#corps{
44+
width:100%;
45+
background:url('../img/pelouse.png') repeat;
46+
}
47+
48+
.contener{
49+
width:960px;
50+
margin:0 auto;
51+
padding:20px 0;
52+
position:relative;
53+
}
54+
.herbe{
55+
width:100%;
56+
height:22px;
57+
background:url('../img/herbe.png') repeat-x;
58+
position:absolute;
59+
bottom:0px;
60+
}
61+
62+
.moutons{
63+
width:271px;
64+
height:70px;
65+
background:url('../img/moutons.png') repeat-x;
66+
position:absolute;
67+
top:-90px;
68+
left:200px;
69+
}
70+
71+
#header{
72+
width:100%;
73+
height:145px;
74+
background:#b8d6eb;
75+
text-align:center;
76+
overflow:hidden;
77+
position:relative;
78+
}
4279

43-
#header{width:100%;height:145px;background:#b8d6eb;text-align:center;overflow:hidden;position:relative;}
44-
#header #paysage{width:960px;height:150px;background:url('../img/paysage.png') no-repeat;margin:10px auto;}
45-
#header h1 a{display:block;width:374px;height:114px;padding-top:28px;background:url('../img/panneau.png') no-repeat;color:#fff;font-family:Grilled;font-size:30px;margin:0px auto;}
46-
#game{width:960px;height:600px;background:green;border:5px solid white}
80+
#header #paysage{
81+
width:960px;
82+
height:150px;
83+
background:url('../img/paysage.png') no-repeat;
84+
margin:10px auto;
85+
}
86+
87+
#header h1 a{
88+
display:block;
89+
width:374px;
90+
height:114px;
91+
padding-top:28px;
92+
background:url('../img/panneau.png') no-repeat;
93+
color:#fff;
94+
font-family:Grilled;
95+
font-size:30px;
96+
margin:0px auto;
97+
}
98+
99+
#game{
100+
width:960px;
101+
height:600px;
102+
background:green;
103+
border:5px solid white;
104+
position:relative;
105+
}
106+
107+
.ecran{
108+
width:760px;
109+
height:400px;
110+
padding:100px;
111+
background:url('../img/background_ecran.jpg') no-repeat;
112+
color:#66b345;
113+
line-height:150%;
114+
font-size:1.5em;
115+
font-family:Synchro;
116+
text-align:center;
117+
position:absolute;
118+
top:0px;
119+
left:0px;
120+
z-index:500;
121+
display:none;
122+
}
123+
.ecran .bouton{
124+
display:inline-block;
125+
padding:3px 70px;
126+
background:#66b345;
127+
color:#1e1e1e;
128+
font-size:1.5em;
129+
font-family:Synchro;
130+
}
131+
.ecran .bouton:hover{
132+
color:#66b345;
133+
background:#000;
134+
border:3px solid #66b345;
135+
padding:0px 67px;
136+
}
47137

48138
#content{
49139
width:960px;
@@ -169,6 +259,15 @@ html, body {width:100%;height:100%;margin:0;}
169259
top:30px;
170260
left:30px;
171261
}
262+
#bottom #bouton{
263+
width:94px;
264+
height:88px;
265+
background: url('../img/dashboard/bouton.png');
266+
z-index:100;
267+
position:absolute;
268+
top:110px;
269+
left:200px;
270+
}
172271
#bottom #compteur_hauteur{
173272
width:28px;
174273
height:159px;

‎img/background_ecran.jpg

26.1 KB
Loading

‎img/dashboard/bouton.png

6.49 KB
Loading

‎img/dashboard/bouton_actif.png

9.43 KB
Loading

‎index.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,20 @@ <h1><a href="index.html">WINTER IS COMING</a></h1>
4343
<div id="point_radar"></div>
4444
</div>
4545
</div>
46+
<div id="bouton"></div>
4647
<div id="compteur_hauteur">
4748
<div id="jauge_hauteur"></div>
4849
</div>
4950
</div>
5051
</div>
52+
<section id="intro" class="ecran">
53+
<p></p>
54+
<a href="#" class="bouton">PLAY</a>
55+
</section>
5156
<div class="moutons"></div>
5257
</section>
5358
</section>
5459
</div>
55-
</div>
5660
</body>
5761
</html>
5862

0 commit comments

Comments
 (0)