FINAL PROJECT: Complete Portfolio Website

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Professional Portfolio</title>
7
8<style>
9  body {
10    margin: 0;
11    font-family: Arial, sans-serif;
12    background: #f4f6f9;
13  }
14
15  header {
16    background: #111827;
17    color: white;
18    padding: 20px;
19    text-align: center;
20  }
21
22  nav {
23    display: flex;
24    justify-content: center;
25    gap: 20px;
26    background: #1f2937;
27    padding: 10px;
28  }
29
30  nav a {
31    color: white;
32    text-decoration: none;
33    font-weight: bold;
34  }
35
36  nav a:hover {
37    color: #38bdf8;
38  }
39
40  .hero {
41    text-align: center;
42    padding: 60px 20px;
43    background: white;
44  }
45
46  .hero h1 {
47    font-size: 40px;
48    margin-bottom: 10px;
49  }
50
51  .hero p {
52    color: #555;
53  }
54
55  section {
56    padding: 40px 20px;
57    max-width: 900px;
58    margin: auto;
59  }
60
61  .card {
62    background: white;
63    padding: 20px;
64    margin-top: 20px;
65    border-radius: 10px;
66    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
67  }
68
69  footer {
70    text-align: center;
71    background: #111827;
72    color: white;
73    padding: 15px;
74    margin-top: 30px;
75  }
76
77  .btn {
78    display: inline-block;
79    background: #38bdf8;
80    color: white;
81    padding: 10px 20px;
82    margin-top: 10px;
83    border-radius: 5px;
84    text-decoration: none;
85  }
86
87  .btn:hover {
88    background: #0ea5e9;
89  }
90</style>
91
92</head>
93<body>
94
95<header>
96  <h1>Deepak Verma</h1>
97  <p>Professional Web Developer</p>
98</header>
99
100<nav>
101  <a href="#about">About</a>
102  <a href="#skills">Skills</a>
103  <a href="#projects">Projects</a>
104  <a href="#contact">Contact</a>
105</nav>
106
107<div class="hero">
108  <h1>Build Modern Websites</h1>
109  <p>I create responsive and professional web applications.</p>
110  <a href="#contact" class="btn">Hire Me</a>
111</div>
112
113<section id="about">
114  <div class="card">
115    <h2>About Me</h2>
116    <p>I am a passionate web developer skilled in HTML, CSS, and JavaScript. I love building clean and modern websites.</p>
117  </div>
118</section>
119
120<section id="skills">
121  <div class="card">
122    <h2>Skills</h2>
123    <p>HTML, CSS, JavaScript, Responsive Design, UI Development</p>
124  </div>
125</section>
126
127<section id="projects">
128  <div class="card">
129    <h2>Projects</h2>
130    <p>✔ Portfolio Website</p>
131    <p>✔ Landing Page Design</p>
132    <p>✔ Blog UI Template</p>
133  </div>
134</section>
135
136<section id="contact">
137  <div class="card">
138    <h2>Contact</h2>
139    <p>Email: example@gmail.com</p>
140    <a href="#" class="btn">Send Message</a>
141  </div>
142</section>
143
144<footer>
145  <p>© 2026 Deepak Verma | All Rights Reserved</p>
146</footer>
147
148</body>
149</html>
HTML PROJECT

FINAL PROJECT: Complete Portfolio Website
