war.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Movie Genres</title>
</head>
<body>
    <header>
        <h1>War/Drama Genre</h1>
    </header>
    <main>
        <section class="genre">
            <h2>War Movies</h2>
            <div class="movie-list">
                <div class="movie">
                    <img src="all.jpg" alt="War Movie 1" usemap="#aqwf">
                    <map name="aqwf">
                        <area shape="rect" coords="8,9,680,1014" href="https://en.wikipedia.org/wiki/All_Quiet_on_the_Western_Front_(2022_film)" alt="AQOTWF movie poster">
                    </map>
                    <h3>All Quiet on the Western Front</h3>
                    <p>Set during World War I, it follows the life of an idealistic young German soldier named Paul Bäumer. After enlisting in the German Army with his friends, Bäumer finds himself exposed to the realities of war, shattering his early hopes of becoming a hero as he does his best to survive. The film adds a parallel storyline not found in the book, which follows the armistice negotiations to end the war.</p>
                </div>
                <div class="movie">
                    <img src="1917.jpg" alt="War Movie 2" usemap="#19">
                    <map name="19">
                        <area shape="rect" coords="9,7,420,620" href="https://en.wikipedia.org/wiki/1917_(2019_film)" alt="1917 movie">
                    </map>
                    <h3>1917</h3>
                    <p>the film takes place after the German retreat to the Hindenburg Line during Operation Alberich, and follows two British soldiers, Will Schofield and Tom Blake, in their mission to deliver an important message to call off a doomed offensive attack.</p>
                </div>
                
            </div>
        </section>
    </main>
   
</body>
</html>