index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to Word Scramble Game</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <div class="container">
        <div class="welcome-content">
            <div class="welcome-text">
                <h1>Welcome to Word Scramble Game</h1>
                <p class="welcome-note">Get ready to unscramble words and test your vocabulary!</p>
                <div class="rules-container">
                    <h2>Rules:</h2>
                    <ol class="rules-list">
                        <li>Unscramble the letters to form a valid word.</li>
                        <li>You have a limited number of lives.</li>
                        <li>Each correct word earns you points.</li>
                        <li>Try to achieve the highest score!</li>
                    </ol>
                </div>
            </div>
            <div class="welcome-gif-container">
                <img src="assets/giphy.gif" class="welcome-gif" alt="Welcome GIF">
            </div>
        </div>
        <button id="play-now-button">Play Now</button>
    </div>

    <audio id="gameStartSound" src="assets/game-start.mp3"></audio>
    <img src="assets/background.jpg" class="background" alt="background">
    <div class="logo-container">
        <img src="assets/logo.png" class="logo" alt="Logo">
    </div>
    <script src="./script.js" defer></script>
</body>
</html>