HTML&CSS PROJECT

Portfolio
The trainer give the first project for me create portfolio website and structure.I learn in the class I will start with my project.First I take the code in written notes.Then I went to Vscode in the PC and typing the code. I was started code with HTMLand make design,layouts with help of CSS .I got the otput with an one hour.That was my first project .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- internal css -->
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing: border-box;
        }
        header{
            background-color:black;
            padding:20px;
        }

    h1{
        /*border:1px solid;*/
        text-align: center;
        /*padding: 20px*/
        color:white;
        margin-bottom: 15px;
    }
    a{
        /*border: 1px solid red;*/
        color: white;
        text-decoration: none;
        margin-right: 15px;

    }
    nav{
        border:1px solid;
        text-align:center;


    }
    section{
        border:1px solid;
        width:65%;
        margin:auto;
        margin-top: 20px;
        padding: 15px;
        background-color:gainsboro ;
        border-radius: 25px;


    }

    h2{
       /* border:1px solid blue;*/
        margin-bottom: 20px;
    }
    ul{
        /*border: 1px solid red;*/
        margin-left: 25px;
    }
   footer P{
        background-color: black;
        text-align: center;
        margin-top: 20px;
        padding:10px;
        color: white;
    }
    </style>
</head>
<body>
<header>
    <h1>Radhakrishnan</h1>
    <nav>
    <a href="">About me</a>
    <a href="">Projects</a>
    <a href="">Contact</a>
    <a href="">Login page</a>
    </nav>
</header>
<section>
    <h2>About me</h2>
    <p>I am web developer passionate  about beautiful and funtional websites</p>
</section>
<section>
    <h2>Projects</h2>
    <ul>
        <li>Portfolio Website</li>
        <li>Landing Page</li>
        <li>Blog Template</li>
    </ul>
</section>
<section>
    <h2>
        Contact
    </h2>
    <p>
        Email:[e-mail]
    </p>
</section>
<footer>
    <p>© 2025 radhakrishnan</p>
</footer>


</body>
</html>

Output: