<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; font-size:20px;}
        header { background-color: #8569ff; padding: 20px;}
        nav{ background-color: #a08bff; padding: 20px;}
        nav ul { list-style-type: none; padding: 0; text-align:center; }
        a{color:black; font-size: 20px; text-decoration: none; }
        nav li a{ text-transform: uppercase; padding: 0 10px;}
        nav li { display: inline; margin-right: 10px; }
        main { background-color: #b6ade0; padding:35px;}
        section{background-color: #b2a0ff; padding: 20px;}
        article{background-color: #a18cff; margin-top:20px; padding: 20px;}
        aside { background-color: #645b8e; padding: 20px;}
        footer { background-color: #795bff; text-align: center; font-size: 20px; padding: 20px;}
    </style>
</head>
<body>
    <header>
        <nav>
           <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Home</h2>
            <p>Welcome to our website!</p>
        </section>
        <article>
            <h2>Latest News</h2>
            <p>This is a news article example.</p>
        </article>
    </main>
    <aside>
        <h2>Related Links</h2>
        <ul>
            <li><a href="#link1">Link 1</a></li>
            <li><a href="#link2">Link 2</a></li>
        </ul>
    </aside>
    <footer>
        <p>&copy; 2024 Your Website. All rights reserved.</p>
    </footer>
</body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.