main final et ses images
This commit is contained in:
parent
4463b578a9
commit
3deff4ab6d
4 changed files with 15 additions and 32 deletions
BIN
bombe.png
BIN
bombe.png
Binary file not shown.
Before Width: | Height: | Size: 28 KiB |
33
main.css
33
main.css
|
@ -10,29 +10,9 @@ body {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
overflow:hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bomb-drop {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
top: -60px;
|
|
||||||
animation: fall 3s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fall {
|
|
||||||
0%{
|
|
||||||
top: -60px;
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
50%{
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
100%{
|
|
||||||
top:100vh;
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -58,7 +38,7 @@ header h1 {
|
||||||
|
|
||||||
.welcome-image {
|
.welcome-image {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
max-width: 400px;
|
max-width: 70px;
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
@ -66,6 +46,7 @@ header h1 {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
padding: 15px 30px;
|
padding: 15px 30px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
@ -76,9 +57,13 @@ button {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.3s, transform 0.2s;
|
/*transition: background-color 0.3s, transform 0.2s;*/
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
transform: scale(1.05);
|
button:hover {
|
||||||
|
background-color: #d3e017;
|
||||||
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
10
main.html
10
main.html
|
@ -8,6 +8,8 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<div class="emoji-background"></div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<header>
|
<header>
|
||||||
<img src="logo.png" alt="Logo du Démineur" class="logo">
|
<img src="logo.png" alt="Logo du Démineur" class="logo">
|
||||||
|
@ -15,7 +17,7 @@
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<p>Préparez-vous à une expérience de jeu inoubliable ! Cliquez sur le bouton ci-dessous pour commencer votre aventure.</p>
|
<p>Préparez-vous à une expérience de jeu inoubliable ! Cliquez sur le bouton ci-dessous pour commencer votre aventure.</p>
|
||||||
<img src="welcome-image.png" alt="Image de bienvenue" class="welcome-image">
|
<img src="smile.png" alt="Image de bienvenue" class="welcome-image">
|
||||||
<button id="play-button">JOUER</button>
|
<button id="play-button">JOUER</button>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
|
@ -23,14 +25,10 @@
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img src="bombe.png" alt="Bombe" class="bomb-drop">
|
|
||||||
|
|
||||||
<scirpt src="script.js"></scirpt>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.getElementById('play-button').addEventListener('click', () => {
|
document.getElementById('play-button').addEventListener('click', () => {
|
||||||
window.location.href = 'game.html';
|
window.location.href = 'demineur.html';});
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
BIN
smile.png
Normal file
BIN
smile.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
Loading…
Reference in a new issue