DEV Community

Neelakandan R
Neelakandan R

Posted on

Portfolio page using HTML AND CSS

Tag Used:

Image description

<!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: neelakandan@example.com</p> </section> <footer> <p>&copy; 2025 Neelakandan</p> </footer> </body> </html> 
Enter fullscreen mode Exit fullscreen mode

Css:

Image description

Image description

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; } 
Enter fullscreen mode Exit fullscreen mode

Image description

Top comments (0)