Drag and Drop.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frontend and Backend Technology Identification</title>
<link rel="stylesheet" href="Drag and Drop.css">
</head>
<body>
<div class="container">
    <div class="skills">
        <div class="frontend-skills">
            <h2>Frontend Skills</h2>
            <div class="skill" draggable="true">HTML5</div>
            <div class="skill" draggable="true">CSS3</div>
            <div class="skill" draggable="true">JavaScript</div>
        </div>
        <div class="backend-skills">
            <h2>Backend Skills</h2>
            <div class="skill" draggable="true">Node.js</div>
            <div class="skill" draggable="true">Python</div>
            <div class="skill" draggable="true">Java</div>
        </div>
    </div>
    <div class="main-content">
        <header>
            <h1>Can you identify the frontend and backend technologies?</h1>
        </header>
        <div class="dropzones">
            <div class="frontend-dropzone dropzone">
                <h2>Frontend Technologies</h2>
            </div>
            <div class="backend-dropzone dropzone">
                <h2>Backend Technologies</h2>
            </div>
        </div>
        <button id="checkButton" class="check-button">Check Your Score</button>
        <p id="scoreText"></p>
    </div>
</div>
<script src="Drag and Drop.js"></script>
</body>
</html>