MODERN WEB APPLICATIONS
DIGITAL ASSIGNMENT - 1
22BBS0200
NITIN D
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background: #f4f6f8;
color: #333;
line-height: 1.8;
}
header {
background: linear-gradient(135deg, #001f3f, #003366);
color: white;
text-align: center;
padding: 60px 0;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}
.header-content {
max-width: 900px;
margin: 0 auto;
}
nav {
background: #333;
color: white;
position: sticky;
top: 0;
z-index: 1000;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
padding: 10px 0;
margin: 0;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 1rem;
transition: color 0.3s ease-in-out;
}
nav ul li a:hover {
color: #1E90FF;
}
main {
max-width: 1000px;
margin: 30px auto;
padding: 30px;
background: white;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
h2 {
color: #003366;
border-bottom: 2px solid #003366;
padding-bottom: 8px;
margin-bottom: 25px;
font-size: 1.8rem;
}
ul {
list-style-type: none;
padding-left: 0;
}
ul li {
margin: 10px 0;
font-size: 1rem;
position: relative;
padding-left: 20px;
}
ul li::before {
content: "•";
color: #1E90FF;
position: absolute;
left: 0;
font-size: 1.2rem;
}
.certificates {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
}
.certificates a {
text-decoration: none;
color: #333;
padding: 10px;
background: #f4f6f8;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.certificates a:hover {
transform: scale(1.05);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
}
footer {
text-align: center;
padding: 20px 0;
background: #001f3f;
color: white;
margin-top: 30px;
font-size: 0.9rem;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My first website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-content">
<h1>Welcome to my website</h1>
<h1>I'm Nitin</h1>
<p>Web Developer | Software Engineer | Tech Enthusiast</p>
</div>
</header>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#education">Education</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#certifications">Certifications</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>About Me</h2>
<p>Hello! I'm Nitin D. I'm a passionate web developer and software engineer currently
pursuing my B.Tech in Computer Science and Engineering at VIT Vellore. I enjoy creating user-
friendly websites, exploring modern web technologies, and solving real-world problems with
code.</p>
</section>
<section id="education">
<h2>Education</h2>
<ul>
<li><strong>B.Tech in Computer Science and Engineering</strong> - VIT Vellore (2022-
2026) - CGPA: 8.6/10</li>
<li><strong>Higher Secondary Education</strong> - Delhi Public School - 90.4% (2020-
2022)</li>
</ul>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li>Web Development: HTML, CSS, JavaScript, React</li>
<li>Programming: Python, Java, C++</li>
<li>Database Management: MySQL, MongoDB</li>
<li>Version Control: Git, GitHub</li>
<li>Problem Solving and Team Collaboration</li>
</ul>
</section>
<section id="projects">
<h2>Projects</h2>
<ul>
<li><strong>Portfolio Website:</strong> A personal portfolio showcasing my skills and
projects.</li>
<li><strong>E-Commerce Website:</strong> Designed and developed a responsive e-commerce
platform.</li>
<li><strong>Chat Application:</strong> A real-time chat application using React and
Firebase.</li>
<li><strong>Data Visualization:</strong> Created a dashboard using Power BI for
analyzing sales data.</li>
</ul>
</section>
<section id="certifications">
<h2>Certifications</h2>
<div class="certificates">
<a href="#" target="_blank">Web Development Bootcamp - Udemy</a>
<a href="#" target="_blank">Python for Data Science - Coursera</a>
<a href="#" target="_blank">Azure Fundamentals - Microsoft</a>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Phone: <a href="tel:+919876543210">+91 9876543210</a></p>
<p>LinkedIn: <a href="https://www.linkedin.com/in/nitin-
d">https://www.linkedin.com/in/nitin-d</a></p>
<p>GitHub: <a href="https://github.com/nitind">https://github.com/nitind</a></p>
<p>Location: Vellore, Tamil Nadu</p>
</section>
</main>
<footer>
<p>© 2024 Nitin D. All Rights Reserved.</p>
</footer>
</body>
</html>
Screenshots:
