SudokuGame/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudoku</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <style>
        body {
            height: 100vb;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }
        .content {
            width: 500px;
            height: 450px;
        }
        ul{
            padding-left: 0;
            margin: 0 0 1rem;
        }
        li{
            margin: 15px;
            list-style-type: none;
        }
        .new-game:hover{
            background-color: #115837 !important;
        }
        a{
            color: white;
            text-decoration: none;
        }
        @media (max-width:768px){
            .content {
                width: 360px;
                height: 530px;
            }
        }
    </style>
</head>

<body>
    <div class="content card text-center p-4">
        <div class="card-body">
            <h1 class="fw-semibold">Rules</h1>
            <ul class="text-start">
                <li>A 9×9 square must be filled in with numbers from 1-9 with no repeated numbers in each line,
                    horizontally
                    or
                    vertically</li>
                <li>there are 3×3 squares marked out in the grid, and each of these squares can't have any repeat
                    numbers</li>
                <li>If you missed the 10 times the game will restart! BE CAREFULL!</li>
            </ul>
            <p class="fw-semibold m-4">If You are Ready Start a New Game</p>
            <div class="btn new-game bg-success" style="color: white;"><a href="Sudoku.html">New Game</a>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>