French nouns gender

body { font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f0f2f5; } .game-container { display: flex; width: 90%; max-width: 800px; height: 400px; gap: 20px; align-items: center; } .drop-zone { flex: 1; height: 100%; border: 3px dashed #ccc; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s ease; } #masculin { border-color: #3498db; color: #3498db; } #feminin { border-color: #e74c3c; color: #e74c3c; } .drop-zone.hover { background-color: rgba(0,0,0,0.05); transform: scale(1.02); } .word-area { flex: 1; display: flex; justify-content: center; align-items: center; height: 100%; } #draggable-word { padding: 20px 40px; background-color: white; border: 2px solid #333; border-radius: 10px; font-size: 24px; font-weight: bold; cursor: grab; box-shadow: 0 4px 6px rgba(0,0,0,0.1); user-select: none; } #draggable-word:active { cursor: grabbing; } .score-board { margin-bottom: 20px; font-size: 24px; font-weight: bold; } .feedback { margin-top: 20px; height: 30px; font-weight: bold; font-size: 1.2rem; } French Gender Sorter
Score: 0

MASCULIN

(Le/Un)

Chargement…

FÉMININ

(La/Une)

http://script.js 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>French Gender Sorter</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="score-board">Score: <span id="score">0</span></div>

    <div class="game-container">
        <div id="masculin" class="drop-zone">
            <h2>MASCULIN</h2>
            <p>(Le/Un)</p>
        </div>

        <div class="word-area">
            <div id="draggable-word" draggable="true">
                Chargement...
            </div>
        </div>

        <div id="feminin" class="drop-zone">
            <h2>FÉMININ</h2>
            <p>(La/Une)</p>
        </div>
    </div>

    <div id="feedback" class="feedback"></div>

    <script src="script.js"></script>
</body>
</html>