BASIC CODE:-
<!doctype html>
<html lang="en">
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Kaushal Kumar | Web Developer</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="favicon.png"> <style type="text/css">
/* --- 1. GLOBAL SETTINGS --- */
* {
margin: 0;padding: 0;box-sizing: border-box;
}
body {
background-color: #000;
color: white;
font-family: 'Poppins', sans-serif;
/* Professional Dark Background with Glow */
background-image: radial-gradient(circle at center, rgba(17, 85, 153, 0.2) 0%, #000 70%);
background-attachment: fixed;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden; /* Phone par side scroll rokne ke liye */
}
/* --- 2. NAVIGATION BAR (Glassmorphism) --- */
.bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 5%;
background: rgba(255, 255, 255, 0.05); /* Glass Effect */
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(17, 153, 153, 0.3);
}
.logo-text {
color: #199;
font-size: 32px;
font-family: 'Orbitron', sans-serif;
text-transform: capitalize;
text-decoration: none;
font-weight: bold;
text-shadow: 0 0 10px rgba(17, 153, 153, 0.6);
}
.nav-links {
display: flex;
gap: 30px;
}
.menu a {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
letter-spacing: 1px;
transition: 0.3s;
position: relative;
}
.menu a:hover {
color: #199;
text-shadow: 0 0 8px #199;
}
/* Underline Animation for Menu */
.menu a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: #199;
transition: width 0.3s;
}
.menu a:hover::after {
width: 100%;
}
/* --- 3. MAIN HERO SECTION --- */
.hero-section {
flex: 1; /* Center vertically */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 80px 20px;
}
.meta {
font-size: 6vw; /* Responsive font size */
font-family: 'Poppins', sans-serif;
color: whitesmoke;
font-weight: 800;
margin-bottom: 10px;
animation: slideDown 1s ease-out;
}
.fit {
font-size: 4vw; /* Responsive font size */
color: #199;
font-family: 'Orbitron', sans-serif; /* Tech Font */
text-transform: uppercase;
text-shadow: 0px 0px 15px rgba(17, 153, 153, 0.8);
margin-bottom: 25px;
letter-spacing: 2px;
animation: fadeIn 1.5s ease-out;
}
.description {
color: #ccc;
font-size: 18px;
max-width: 700px;
line-height: 1.6;
margin-bottom: 40px;
background: rgba(255, 255, 255, 0.03);
padding: 20px;
border-radius: 15px;
border-left: 3px solid #159;
}
/* --- 4. BUTTONS (Neon Glow) --- */
.button-group {
display: flex;
gap: 20px;
margin-bottom: 50px;
}
button {
font-size: 18px;
padding: 15px 40px;
text-transform: capitalize;
border-radius: 50px;
font-family: 'Poppins', serif;
font-weight: bold;
cursor: pointer;
transition: all 0.4s ease;
border: 2px solid transparent;
}
.call {
background: linear-gradient(45deg, #159, #199);
color: white;
box-shadow: 0 0 20px rgba(17, 85, 153, 0.4);
border: none;
}
.call:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 0 30px rgba(17, 153, 153, 0.8);
}
.talk {
background: transparent;
color: #199;
border: 2px solid #199;
}
.talk:hover {
background: #199;
color: black;
box-shadow: 0 0 20px #199;
}
/* --- 5. SOCIAL ICONS (Floating) --- */
.tool-container {
display: flex;
gap: 25px;
}
.tool {
font-size: 30px;
color: #159;
border: 2px solid #159;
width: 60px;
height: 60px;
text-align: center;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.4s;
cursor: pointer;
background: rgba(0,0,0,0.5);
}
.tool:hover {
color: white;
background-color: #159;
border-color: #199;
box-shadow: 0 0 15px #199;
transform: rotate(360deg);
}
/* --- 6. RESPONSIVE DESIGN (Mobile/Tablet) --- */
@media (max-width: 768px) {
.bar {
flex-direction: column;
padding: 15px;
}
.nav-links {
margin-top: 15px;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.meta { font-size: 40px; } /* Mobile font size */
.fit { font-size: 24px; }
.description { font-size: 15px; padding: 15px; width: 90%; }
.button-group { flex-direction: column; width: 80%; }
button { width: 100%; }
}
/* --- 7. ANIMATIONS --- */
@keyframes slideDown {
from { transform: translateY(-50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0;
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="bar">
<a href="" class="logo-text">Skill Bazaar<span style="font-size:16px; vertical-align:top; color:white;">®</span></a>
<ul class="nav-links" style="list-style: none;">
<li class="menu"><a href="">Home</a></li>
<li class="menu"><a href="">About Us</a></li>
<li class="menu"><a href="">Service</a></li>
<li class="menu"><a href="">Portfolio</a></li>
<li class="menu"><a href="">Contact</a></li>
</ul>
</div>
<div class="hero-section">
<div class="meta">Hi, i'm kaushal kumar</div>
<div class="fit">website developer</div>
<div class="description">
web design is a specialisalics of the design stream .They also use Html ,<br>css. editing software .mark up valicatore etc. <br>to create degine elemant
</div>
<div class="button-group">
<button class="call">call now</button>
<button class="talk">let's talk</button>
</div>
<div class="tool-container">
<div class="tool">𝐟</div>
<div class="tool">𝕏</div>
<div class="tool">⌲</div>
</div>
</div>
</body>
</html>