musique + css

This commit is contained in:
NohamR 2023-06-07 16:13:47 +02:00
parent accf561b4b
commit 9b69a0d767
4 changed files with 63 additions and 56 deletions

View File

@ -2,10 +2,11 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<link rel="stylesheet" href="src/style.css"> <link rel="stylesheet" href="src/style.css">
<link rel="shortcut icon" href="src/balle.png" type="image/x-icon">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Projet-foot</title>
</head> </head>
<body> <body>
<h1>Accueil</h1> <h1>Accueil</h1>
@ -21,7 +22,7 @@
<a href="V7.zip" class="play-button"><h2>Jouer !</h2></a> <a href="V7.zip" class="play-button"><h2>Jouer !</h2></a>
</div> </div>
<audio controls autoplay style="display: none;"> <audio controls autoplay style="display: none;">
<source src="src/musique.mp3" type="audio/mp3"> <source src="src/extrait.mp3" type="audio/mp3">
Votre navigateur ne prend pas en charge l'élément audio. Votre navigateur ne prend pas en charge l'élément audio.
</audio> </audio>
</body> </body>

BIN
src/balle.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

BIN
src/extrait.mp3 Normal file

Binary file not shown.

View File

@ -1,58 +1,64 @@
:root {
-webkit-touch-callout: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
}
body{ body{
background-image:url('Arriereplan.jpg'); background-image:url('Arriereplan.jpg');
background-size: cover; background-size: cover;
} }
h1 { h1 {
font-family: Noto Sans, sans-serif; font-family: Noto Sans, sans-serif;
text-align: center; text-align: center;
font-size: 80px; font-size: 80px;
color: white; color: white;
margin-top: 50px; margin-top: 50px;
} }
h2 { h2 {
font-family: Comic Sans MS, Comic Sans, cursive; font-family: Comic Sans MS, Comic Sans, cursive;
text-align: center; text-align: center;
font-size: 22px; font-size: 22px;
color: white; color: white;
margin-bottom: 20px; margin-bottom: 20px;
} }
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 50px; margin-top: 50px;
} }
.quote { .quote {
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.image-container { .image-container {
text-align: center; text-align: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
img { img {
width: 525px; width: 525px;
height: 350px; height: 350px;
border-radius: 20px; border-radius: 20px;
border-style: solid; border-style: solid;
border-width: 3px; border-width: 3px;
} }
.play-button { .play-button {
display: inline-block; display: inline-block;
padding: 10px 20px; padding: 10px 20px;
background-color: #007bff; background-color: #007bff;
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
border-radius: 4px; border-radius: 4px;
font-size: 18px; font-size: 18px;
margin-top: 20px; margin-top: 20px;
} }