Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Website</title>
</head>
<body>
<header>
    <div class="container">
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

<section id="home" class="section">
    <div class="container">
        <h2>Home</h2>
        <p>This is the home section of my website. Welcome!</p>
        <p><a href="#">Learn more</a></p>
    </div>
</section>

<section id="about" class="section">
    <div class="container">
        <h2>About</h2>
        <p>This is the about section.</p>
        <p>Here you can Learn more about me.</p>
        <p><a href="#">Learn more</a></p>
    </div>
</section>

<section id="services" class="section">
    <div class="container">
        <h2>Services</h2>
        <ul>
            <li>Web Design</li>
            <li>Graphic Design</li>
            <li>SEO Optimization</li>
        </ul>
        <p><a href="#">Learn more</a></p>
    </div>
</section>

<section id="contact" class="section">
    <div class="container">
        <h2>Contact</h2>
        <p>You can reach out to me via email: info@example.com</p>
        <p><a href="#">Learn more</a></p>
    </div>
</section>

<footer>
    <div class="container">
        <p>&copy; 2024 My Awesome Website</p>
    </div>
</footer>

</body>
</html>

body{
text-align: center;
background-color: rgb(0, 0, 0);
}

h1{
font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;
text-align: center;
color: rgb(111, 11, 224);
font-size: 30px;
}

p{
font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;
text-align: center;
color: rgb(111, 11, 224);
}

img{
width: 500px;
border-radius: 20px;
}