Skip to content
Snippets Groups Projects
Commit 75815dba authored by De Brettes Thomas's avatar De Brettes Thomas
Browse files

ajout background

parent eac3fbd6
No related branches found
No related tags found
No related merge requests found
...@@ -3,13 +3,14 @@ ...@@ -3,13 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jeu d'échecs</title> <title>Échiquier</title>
<style src="style_page_jeu.css"> <link rel="stylesheet" href="style_page_jeu.css">
</style>
</head> </head>
<body> <body>
<h1>Jeu d'échecs</h1>
<canvas id="chessboard" width="480" height="480"></canvas> <canvas id="chessboard" width="480" height="480"></canvas>
<script src="chess.js"></script> <script src="chess.js"></script>
</body> </body>
</html> </html>
/* Centrer l'échiquier dans la page avec un fond vert clair */
body { body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh; /* Prend toute la hauteur de la page */
background-color: #f0e5d8; background-color: #a8d5ba; /* Fond vert clair */
margin: 0;
} }
/* Ajouter un contour noir autour du canvas */
#chessboard { #chessboard {
display: grid; border: 5px solid black; /* Contour noir autour de l'échiquier */
grid-template-columns: repeat(8, 60px);
grid-template-rows: repeat(8, 60px);
border: 5px solid #3e2f1e;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
} }
.square {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.dark {
background-color: #8B4513; /* Marron */
}
.light {
background-color: #F5DEB3; /* Beige */
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment