Portfolio page using HTML AND CSS

#webdev #html #css #payilagam

Tag Used:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- stand alone tag -->
    <style>
header{
    background-color: rgb(45, 44, 44);
    color: white;
    text-align: center;
    padding: 10px;
}

header ol{
    list-style-type: none;
    display: flex;
    justify-content: center;
    gap: 20px;
}

header ol li a{
    color: white;
    text-decoration: none;
}

section{
    background-color: rgb(231, 229, 229);
    width: 60%;
    margin: auto;
    padding: 20px 15px;
   /* border: 1px solid; */
   margin-top: 20px;
   border-radius: 10px;
}

footer{
    background-color: rgb(45, 44, 44);
    color: white;
    padding: 5px;
    text-align: center;
    margin-top: 20px;
}

    </style>
</head>

<body>
    <header>
        <h1>Neelakandan</h1>
        <nav>
            <ol>
                <li><a href="">About Me</a></li>
                <li><a href="">Projects</a></li>
                <li><a href="">contact</a></li>
                <li><a href="/indexcopy.html">login page</a></li>
            </ol>
        </nav>
    </header>

    <section id="about">
        <h1>About Me</h1>
        <p>I am a web developer passionate about building beautiful and functional websites.</p>
     </section>

    <section id="projects">
        <h1>Projects</h1>
        <ul>
            <li>Portfolio Website</li>
            <li>Landing Page</li>
            <li>Blog Template</li>
        </ul>
    </section>

    <section id="contact">
        <h1>Contact</h1>
        <p>Email: [email protected]</p>
    </section>


    <footer>
        <p>&copy; 2025 Neelakandan</p>
    </footer>
</body>

</html>

Css:

header{
    background-color: rgb(45, 44, 44);
    color: white;
    text-align: center;
    padding: 10px;
}

header ol{
    list-style-type: none;
    display: flex;
    justify-content: center;
    gap: 20px;
}

header ol li a{
    color: white;
    text-decoration: none;
}

section{
    background-color: rgb(231, 229, 229);
    width: 60%;
    margin: auto;
    padding: 20px 15px;
   /* border: 1px solid; */
   margin-top: 20px;
   border-radius: 10px;
}

footer{
    background-color: rgb(45, 44, 44);
    color: white;
    padding: 5px;
    text-align: center;
    margin-top: 20px;
}

DEV Community

Portfolio page using HTML AND CSS

Top comments (0)