diff --git a/htdocs/page_acceuil.html b/htdocs/page_acceuil.html index 970950ab170ec7ebd26ee940a3c284921662a684..fb30a0a495ecd7dc5ec77c0792ee6202f22fba8e 100644 --- a/htdocs/page_acceuil.html +++ b/htdocs/page_acceuil.html @@ -1,23 +1,32 @@ <!DOCTYPE html> <html lang="fr"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Page d'Accueil - Jeu d'Échecs</title> - <link rel="stylesheet" href="style_page_acceuil.css"> -</head> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Page d'Accueil - Jeu d'Échecs</title> + <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet"> <!-- Ajout de la police Libre Baskerville --> + <link rel="stylesheet" href="style_page_acceuil.css"> + </head> + + <body> <header> - <h1>Bienvenue sur le Jeu d'Échecs d'Adam et Thomas</h1> + <h1>Bienvenue sur le Jeu d'Échecs</h1> </header> - <section id="options"> + <section id="menu"> <h2>Choisissez une option :</h2> - <ul> - <li><a href="page_jeu.html">Jouer</a></li> - <li><a href="#rankings.html">Classement</a></li> - <li><a href="#contact.html">Contact</a></li> - </ul> + <div class="options-container"> + <div class="option"> + <a href="game.html">Jouer</a> + </div> + <div class="option"> + <a href="#rankings">Classement</a> + </div> + <div class="option"> + <a href="#contact">Contact</a> + </div> + </div> </section> <footer> diff --git a/htdocs/style_page_acceuil.css b/htdocs/style_page_acceuil.css index f2dca3c85c6021c6a16b8bc752d40e79117bb84d..b5fa5bcae1f69b244519bd4ac9126f16b526b4b2 100644 --- a/htdocs/style_page_acceuil.css +++ b/htdocs/style_page_acceuil.css @@ -1,20 +1,20 @@ /* Général */ body { - font-family: Arial, sans-serif; + font-family: 'Libre Baskerville', serif; /* Utilisation de la police de style rétro */ margin: 0; padding: 0; - background-color: #a8d5ba; - color: black; + background-color: #f4f4f4; + color: #333; } h1, h2 { - color: #a8d5ba; + color: #444; } /* Header */ header { - background-color: black; - color: #a8d5ba; + background-color: #333; + color: white; padding: 20px; text-align: center; } @@ -23,39 +23,51 @@ header h1 { margin: 0; } -nav ul { - list-style: none; - padding: 0; +/* Menu */ +#menu { + text-align: center; + margin-top: 20px; } -nav ul li { - display: inline; - margin: 0 10px; +#menu h2 { + font-size: 24px; + margin-bottom: 20px; } -nav ul li a { - color: #a8d5ba; - text-decoration: none; +.options-container { + display: flex; + justify-content: center; + gap: 40px; /* espace entre les cases */ } -nav ul li a:hover { - text-decoration: underline; +.option { + width: 250px; + height: 150px; + border: 2px solid #333; + border-radius: 10px; + background-color: #b60c0c; + display: flex; + align-items: center; + justify-content: center; } -/* Sections */ -section { - padding: 20px; - margin: 20px; +.option a { + color: white; + font-size: 18px; + text-decoration: none; + font-weight: bold; + text-align: center; } -#chessboard { - background-color: #a8d5ba; - border: 5px solid black; +.option a:hover { + text-decoration: underline; + background-color: #F5DEB3; } +/* Footer */ footer { - background-color: #a8d5ba; - color: black; + background-color: #333; + color: white; text-align: center; padding: 10px; position: fixed;