Untitled

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            background-color: rgb(77, 68, 77);
        }

        .article {
            background-color: aquamarine;
            margin: 15px;
            padding: 5px;
            border-radius: 5px;
        }

        .barber {
            background-color: bisque;
            color: darkblue;
        }

        #scientist {
            color: darkgreen;
            grid-area: scientist;
        }

        #scientist:hover{
            background-color: red;
        }

        #container{
            display: grid;
            gap: 5px;
            grid-template-areas: "windows terrorist scientist"
                                 "mutant terrorist x"
                                 "chimney terrorist x"

        }


        #window{
            grid-area: windows;
        }
        #mutant{
            grid-area: mutant;
        }
        #chimney{
            grid-area: chimney;
        }
        #terrorist{
            grid-area: terrorist;
        }


    /* css selectors */

    </style>
    <title>Document</title>
</head>

<body>
    <div id="container">
        <div class="article" id="chimney">
            <h1>Man falls into chimney!</h1>
            <p>Recently, a 24 year old man named Maka Kaka fell into a chimney.</p>
        </div>

        <div class="article" id="window">
            <h1>Windowcleaner breaks 100 year old window!</h1>
            <p>On the 16th of Januray, a senior cleaner that cleaned windows for a long time, got into a tragic window
                cleaning accident where he broke a 100 year old window passed down from generations.</p>
        </div>
        <div class="article" id="mutant">
            <h1>Mutant lion developed by Russian Military</h1>
            <p>Russia has recently acknowledged the claims that they are developing a mutant lion. They said that these
                claims were true.</p>
        </div>
        <div class="article" id="scientist">
            <h1>Scientists discover new element!</h1>
            <p>On 21th October 2021, an element known as Nixionide was discovered. It is known to have elements that can
                link to explosions. Government officials may use this to their advantage.</p>
        </div>
        <div id="terrorist">
            <div class="article barber">
                <h1>MAN BLOWS UP BARBER SHOP!</h1>
                <p>Today, on 17th November 2021, a man used Nixionide to blow up a barber shop after given a haircut that he
                    claimed: "was what he wanted, but there was one hair missing.</p>
            </div>
            <div class="article barber">
                <h1>MAN BLOWS UP ANOTHER BARBER SHOP!</h1>
                <p>After thinking he could get that one hair back, 19 year old Matthew Thomas thought it was a good idea to
                    ask a barber shop to get one hair off the floor and glue it onto his head. After being rejected, he
                    found out that scientists dont known that Nixionide mixed with Hydrogen Oxygen could create a "water
                    bomb" He then blew up the barber shop using the Water Bomb.</p>
            </div>
            <div class="article barber">
                <h1>BARBER SHOP TERRORIST DEAD!</h1>
                <p>The man that commited Terrorism on two barber shops has been shot dead when he was attempting to blow up
                    a wig shop for not having a single hair. Police found out that he was obsessed with his hair, according
                    to his family, he will be buried bald.</p>
            </div>
        </div>
    </div>
</body>

</html>