|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Dr. Ratul Roy - Elite Dental Surgeon</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); |
|
|
--accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); |
|
|
--dark-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); |
|
|
--glass-bg: rgba(255, 255, 255, 0.1); |
|
|
--glass-border: rgba(255, 255, 255, 0.2); |
|
|
--text-primary: #2c3e50; |
|
|
--text-secondary: #7f8c8d; |
|
|
--bg-light: #f8fafc; |
|
|
--shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.1); |
|
|
--shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
line-height: 1.7; |
|
|
color: var(--text-primary); |
|
|
overflow-x: hidden; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: linear-gradient(135deg, #667eea, #764ba2); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
.navbar { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
width: 100%; |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
backdrop-filter: blur(20px); |
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2); |
|
|
z-index: 1000; |
|
|
transition: all 0.3s ease; |
|
|
padding: 15px 0; |
|
|
} |
|
|
|
|
|
.navbar.scrolled { |
|
|
padding: 10px 0; |
|
|
box-shadow: var(--shadow-soft); |
|
|
} |
|
|
|
|
|
.nav-container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 0 20px; |
|
|
} |
|
|
|
|
|
.nav-logo { |
|
|
font-family: 'Playfair Display', serif; |
|
|
font-size: 1.8rem; |
|
|
font-weight: 700; |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.nav-menu { |
|
|
display: flex; |
|
|
list-style: none; |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
text-decoration: none; |
|
|
color: var(--text-primary); |
|
|
font-weight: 500; |
|
|
position: relative; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: var(--primary-gradient); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.nav-toggle { |
|
|
display: none; |
|
|
flex-direction: column; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.nav-toggle span { |
|
|
width: 25px; |
|
|
height: 3px; |
|
|
background: var(--text-primary); |
|
|
margin: 3px 0; |
|
|
transition: 0.3s; |
|
|
} |
|
|
|
|
|
|
|
|
.hero { |
|
|
min-height: 100vh; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.hero::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="300" fill="url(%23a)"/><circle cx="800" cy="800" r="400" fill="url(%23a)"/></svg>'); |
|
|
animation: float 20s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-20px); } |
|
|
} |
|
|
|
|
|
.hero-container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 0 20px; |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 60px; |
|
|
align-items: center; |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
.hero-content { |
|
|
animation: slideInLeft 1s ease-out; |
|
|
} |
|
|
|
|
|
.hero-title { |
|
|
font-family: 'Playfair Display', serif; |
|
|
font-size: 3.5rem; |
|
|
font-weight: 700; |
|
|
color: white; |
|
|
margin-bottom: 20px; |
|
|
line-height: 1.2; |
|
|
} |
|
|
|
|
|
.hero-subtitle { |
|
|
font-size: 1.5rem; |
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
margin-bottom: 15px; |
|
|
font-weight: 300; |
|
|
} |
|
|
|
|
|
.hero-description { |
|
|
font-size: 1.1rem; |
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
margin-bottom: 40px; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.hero-buttons { |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
padding: 15px 30px; |
|
|
border: none; |
|
|
border-radius: 50px; |
|
|
font-weight: 600; |
|
|
text-decoration: none; |
|
|
transition: all 0.3s ease; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
color: white; |
|
|
border: 2px solid rgba(255, 255, 255, 0.3); |
|
|
backdrop-filter: blur(20px); |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background: white; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.btn-secondary:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.hero-image { |
|
|
position: relative; |
|
|
animation: slideInRight 1s ease-out; |
|
|
} |
|
|
|
|
|
.hero-photo { |
|
|
width: 400px; |
|
|
height: 400px; |
|
|
border-radius: 50%; |
|
|
object-fit: cover; |
|
|
border: 8px solid rgba(255, 255, 255, 0.2); |
|
|
box-shadow: var(--shadow-strong); |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
animation: pulse 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
} |
|
|
|
|
|
.floating-elements { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.floating-element { |
|
|
position: absolute; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 50%; |
|
|
animation: floatRandom 15s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.floating-element:nth-child(1) { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
top: 20%; |
|
|
right: 10%; |
|
|
animation-delay: -2s; |
|
|
} |
|
|
|
|
|
.floating-element:nth-child(2) { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
top: 60%; |
|
|
right: 20%; |
|
|
animation-delay: -5s; |
|
|
} |
|
|
|
|
|
.floating-element:nth-child(3) { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
top: 80%; |
|
|
right: 30%; |
|
|
animation-delay: -8s; |
|
|
} |
|
|
|
|
|
@keyframes floatRandom { |
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); } |
|
|
33% { transform: translateY(-30px) rotate(120deg); } |
|
|
66% { transform: translateY(30px) rotate(240deg); } |
|
|
} |
|
|
|
|
|
|
|
|
.section { |
|
|
padding: 100px 0; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 0 20px; |
|
|
} |
|
|
|
|
|
.section-header { |
|
|
text-align: center; |
|
|
margin-bottom: 80px; |
|
|
animation: fadeInUp 1s ease-out; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-family: 'Playfair Display', serif; |
|
|
font-size: 3rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 20px; |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.contact-title { |
|
|
font-family: 'Playfair Display', serif; |
|
|
font-size: 3rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 20px; |
|
|
background: aliceblue; |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
|
|
|
} |
|
|
|
|
|
.section-subtitle { |
|
|
font-size: 1.2rem; |
|
|
color: var(--text-secondary); |
|
|
max-width: 600px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
|
|
|
.about { |
|
|
background: var(--bg-light); |
|
|
} |
|
|
|
|
|
.about-content { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 60px; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.about-text { |
|
|
font-size: 1.1rem; |
|
|
line-height: 1.8; |
|
|
} |
|
|
|
|
|
.about-text p { |
|
|
margin-bottom: 25px; |
|
|
} |
|
|
|
|
|
.about-stats { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
background: white; |
|
|
padding: 30px; |
|
|
border-radius: 20px; |
|
|
box-shadow: var(--shadow-soft); |
|
|
text-align: center; |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.stat-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 4px; |
|
|
background: var(--primary-gradient); |
|
|
} |
|
|
|
|
|
.stat-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: var(--shadow-strong); |
|
|
} |
|
|
|
|
|
.stat-number { |
|
|
font-size: 2.5rem; |
|
|
font-weight: 800; |
|
|
background: var(--primary-gradient); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
.stat-label { |
|
|
color: var(--text-secondary); |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
|
|
|
.timeline { |
|
|
position: relative; |
|
|
padding-left: 30px; |
|
|
} |
|
|
|
|
|
.timeline::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
bottom: 0; |
|
|
width: 2px; |
|
|
background: var(--primary-gradient); |
|
|
} |
|
|
|
|
|
.timeline-item { |
|
|
position: relative; |
|
|
margin-bottom: 40px; |
|
|
padding-left: 40px; |
|
|
} |
|
|
|
|
|
.timeline-item::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: -35px; |
|
|
top: 0; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
background: var(--primary-gradient); |
|
|
} |
|
|
|
|
|
.timeline-card { |
|
|
background: white; |
|
|
padding: 30px; |
|
|
border-radius: 15px; |
|
|
box-shadow: var(--shadow-soft); |
|
|
transition: all 0.3s ease; |
|
|
border-left: 4px solid transparent; |
|
|
background-clip: padding-box; |
|
|
} |
|
|
|
|
|
.timeline-card:hover { |
|
|
transform: translateX(10px); |
|
|
border-left: 4px solid #667eea; |
|
|
box-shadow: var(--shadow-strong); |
|
|
} |
|
|
|
|
|
.timeline-title { |
|
|
font-size: 1.3rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 10px; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.timeline-subtitle { |
|
|
color: var(--text-secondary); |
|
|
margin-bottom: 15px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.timeline-description { |
|
|
color: var(--text-secondary); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
|
|
|
.skills { |
|
|
background: var(--bg-light); |
|
|
} |
|
|
|
|
|
.skills-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(3, 1fr); |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.skill-card { |
|
|
background: white; |
|
|
padding: 40px 30px; |
|
|
border-radius: 20px; |
|
|
box-shadow: var(--shadow-soft); |
|
|
text-align: center; |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.skill-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: var(--shadow-strong); |
|
|
} |
|
|
|
|
|
.skill-icon { |
|
|
width: 80px; |
|
|
height: 80px; |
|
|
margin: 0 auto 20px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 2rem; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.skill-title { |
|
|
font-size: 1.2rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 15px; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.skill-description { |
|
|
color: var(--text-secondary); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
|
|
|
.contact { |
|
|
background: var(--primary-gradient); |
|
|
color: white; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.contact::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="b" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.05"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="100" cy="100" r="200" fill="url(%23b)"/><circle cx="900" cy="900" r="300" fill="url(%23b)"/></svg>'); |
|
|
} |
|
|
|
|
|
.contact-content { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 60px; |
|
|
align-items: start; |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
.contact-info h3 { |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 30px; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.contact-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
margin-bottom: 25px; |
|
|
padding: 20px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 15px; |
|
|
backdrop-filter: blur(20px); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.contact-item:hover { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
transform: translateX(10px); |
|
|
} |
|
|
|
|
|
.contact-item i { |
|
|
font-size: 1.5rem; |
|
|
margin-right: 20px; |
|
|
color: rgba(255, 255, 255, 0.8); |
|
|
} |
|
|
|
|
|
.contact-form { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
padding: 40px; |
|
|
border-radius: 20px; |
|
|
backdrop-filter: blur(20px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 25px; |
|
|
} |
|
|
|
|
|
.form-group label { |
|
|
display: block; |
|
|
margin-bottom: 8px; |
|
|
font-weight: 500; |
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
} |
|
|
|
|
|
.form-control { |
|
|
width: 100%; |
|
|
padding: 15px 20px; |
|
|
border: 2px solid rgba(255, 255, 255, 0.2); |
|
|
border-radius: 10px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
color: white; |
|
|
font-size: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
backdrop-filter: blur(20px); |
|
|
} |
|
|
|
|
|
.form-control::placeholder { |
|
|
color: rgba(255, 255, 255, 0.6); |
|
|
} |
|
|
|
|
|
.form-control:focus { |
|
|
outline: none; |
|
|
border-color: rgba(255, 255, 255, 0.5); |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
.btn-submit { |
|
|
width: 100%; |
|
|
padding: 18px; |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
color: white; |
|
|
border: 2px solid rgba(255, 255, 255, 0.3); |
|
|
border-radius: 10px; |
|
|
font-size: 1.1rem; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
backdrop-filter: blur(20px); |
|
|
} |
|
|
|
|
|
.btn-submit:hover { |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
|
|
|
.footer { |
|
|
background: #1a1a1a; |
|
|
color: white; |
|
|
padding: 40px 0; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.footer p { |
|
|
margin-bottom: 20px; |
|
|
color: rgba(255, 255, 255, 0.7); |
|
|
} |
|
|
|
|
|
.social-links { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.social-link { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
background: var(--primary-gradient); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.social-link:hover { |
|
|
transform: translateY(-5px) scale(1.1); |
|
|
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4); |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes slideInLeft { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateX(-50px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes slideInRight { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateX(50px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes fadeInUp { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(30px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.animate-on-scroll { |
|
|
opacity: 0; |
|
|
transform: translateY(30px); |
|
|
transition: all 0.8s ease; |
|
|
} |
|
|
|
|
|
.animate-on-scroll.animated { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 1024px) { |
|
|
.hero-container { |
|
|
grid-template-columns: 1fr; |
|
|
text-align: center; |
|
|
gap: 40px; |
|
|
} |
|
|
|
|
|
.hero-title { |
|
|
font-size: 3rem; |
|
|
} |
|
|
|
|
|
.about-content, |
|
|
.contact-content { |
|
|
grid-template-columns: 1fr; |
|
|
gap: 40px; |
|
|
} |
|
|
|
|
|
.hero-photo { |
|
|
width: 300px; |
|
|
height: 300px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.nav-menu { |
|
|
position: fixed; |
|
|
top: 80px; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: calc(100vh - 80px); |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
backdrop-filter: blur(20px); |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
transition: left 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-menu.active { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.nav-toggle { |
|
|
display: flex; |
|
|
} |
|
|
|
|
|
.hero-title { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.hero-buttons { |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.about-stats { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.skills-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.hero-photo { |
|
|
width: 250px; |
|
|
height: 250px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 480px) { |
|
|
.section { |
|
|
padding: 60px 0; |
|
|
} |
|
|
|
|
|
.hero-title { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.contact-form { |
|
|
padding: 30px 20px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="navbar"> |
|
|
<div class="nav-container"> |
|
|
<div class="nav-logo">Dr. Ratul Roy</div> |
|
|
<ul class="nav-menu"> |
|
|
<li><a href="#hero" class="nav-link">Home</a></li> |
|
|
<li><a href="#about" class="nav-link">About</a></li> |
|
|
<li><a href="#education" class="nav-link">Education</a></li> |
|
|
<li><a href="#experience" class="nav-link">Experience</a></li> |
|
|
<li><a href="#skills" class="nav-link">Skills</a></li> |
|
|
<li><a href="#contact" class="nav-link">Contact</a></li> |
|
|
</ul> |
|
|
<div class="nav-toggle"> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="hero" class="hero"> |
|
|
<div class="floating-elements"> |
|
|
<div class="floating-element"></div> |
|
|
<div class="floating-element"></div> |
|
|
<div class="floating-element"></div> |
|
|
</div> |
|
|
<div class="hero-container"> |
|
|
<div class="hero-content"> |
|
|
<h1 class="hero-title">Dr. Ratul Roy</h1> |
|
|
<p class="hero-subtitle">Elite Dental Surgeon</p> |
|
|
<p class="hero-description">Transforming smiles with precision, care, and cutting-edge dental technology. Your journey to optimal oral health begins here.</p> |
|
|
<div class="hero-buttons"> |
|
|
<a href="#about" class="btn btn-primary"> |
|
|
<i class="fas fa-user-md"></i> |
|
|
Discover My Story |
|
|
</a> |
|
|
<a href="#contact" class="btn btn-secondary"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
Book Consultation |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hero-image"> |
|
|
<img src="1.jpg" alt="Dr. Ratul Roy" class="hero-photo"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="section about"> |
|
|
<div class="container"> |
|
|
<div class="section-header animate-on-scroll"> |
|
|
<h2 class="section-title">About Dr. Ratul Roy</h2> |
|
|
<p class="section-subtitle">Committed to excellence in dental care with a passion for transforming lives through advanced dentistry</p> |
|
|
</div> |
|
|
<div class="about-content"> |
|
|
<div class="about-text animate-on-scroll"> |
|
|
<p>Dr. Ratul Roy is a distinguished dental surgeon with an unwavering commitment to providing exceptional dental care. With extensive training and years of dedicated practice, he has established himself as a trusted professional in the field of dentistry.</p> |
|
|
<p>His approach combines state-of-the-art technology with compassionate care, ensuring each patient receives personalized treatment tailored to their unique needs. Dr. Roy's expertise spans across various dental specialties, with a particular focus on prosthodontics and advanced dental procedures.</p> |
|
|
<p><strong>Mission:</strong> To build a career as a renowned dental surgeon and educator, practicing with the highest ethical standards while contributing to the advancement of dental medicine and mentoring the next generation of dental professionals.</p> |
|
|
</div> |
|
|
<div class="about-stats animate-on-scroll"> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-number">10+</div> |
|
|
<div class="stat-label">Years Experience</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-number">1000+</div> |
|
|
<div class="stat-label">Happy Patients</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-number">5+</div> |
|
|
<div class="stat-label">Specializations</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<div class="stat-number">100%</div> |
|
|
<div class="stat-label">Satisfaction Rate</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="education" class="section"> |
|
|
<div class="container"> |
|
|
<div class="section-header animate-on-scroll"> |
|
|
<h2 class="section-title">Educational Excellence</h2> |
|
|
<p class="section-subtitle">A foundation built on rigorous academic achievement and continuous learning</p> |
|
|
</div> |
|
|
<div class="timeline animate-on-scroll"> |
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-card"> |
|
|
<h3 class="timeline-title">M.S. in Prosthodontics</h3> |
|
|
<p class="timeline-subtitle">Bangabandhu Sheikh Mujib Medical University (BSMMU) • 2023</p> |
|
|
<p class="timeline-description">Advanced specialization in prosthodontics, focusing on the restoration and replacement of teeth to improve oral function and aesthetics.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-card"> |
|
|
<h3 class="timeline-title">Bachelor of Dental Surgery (B.D.S.)</h3> |
|
|
<p class="timeline-subtitle">Dhaka Dental College • 2013</p> |
|
|
<p class="timeline-description">Comprehensive dental education covering all aspects of oral health, diagnosis, and treatment planning.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-card"> |
|
|
<h3 class="timeline-title">Higher Secondary Certificate (H.S.C.)</h3> |
|
|
<p class="timeline-subtitle">Shaheed Sayed Nazrul Islam College, Mymensingh • GPA 5.00</p> |
|
|
<p class="timeline-description">Achieved perfect academic performance in science stream, laying the foundation for medical studies.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-card"> |
|
|
<h3 class="timeline-title">Secondary School Certificate (S.S.C.)</h3> |
|
|
<p class="timeline-subtitle">Mymensingh Zilla School, Dhaka Board • GPA 5.00</p> |
|
|
<p class="timeline-description">Excellent academic achievement demonstrating early commitment to educational excellence.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="experience" class="section"> |
|
|
<div class="container"> |
|
|
<div class="section-header animate-on-scroll"> |
|
|
<h2 class="section-title">Professional Journey</h2> |
|
|
<p class="section-subtitle">A diverse career spanning clinical practice, research, and specialized dental care</p> |
|
|
</div> |
|
|
<div class="timeline animate-on-scroll"> |
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-card"> |
|
|
<h3 class="timeline-title">Consultant Dental Surgeon</h3> |
|
|
<p class="timeline-subtitle">Crescent Dental Center, Shamoli, Dhaka • Current</p> |
|
|
<p class="timeline-description">Providing comprehensive dental care with focus on prosthodontics and advanced restorative procedures.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-card"> |
|
|
<h3 class="timeline-title">Consultant Surgeon</h3> |
|
|
<p class="timeline-subtitle">Podma Diagnostic Center, Netrakona • Current</p> |
|
|
<p class="timeline-description">Delivering specialized dental services to the community with emphasis on preventive and therapeutic care.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-card"> |
|
|
<h3 class="timeline-title">Resident Doctor of Prosthodontics</h3> |
|
|
<p class="timeline-subtitle">BSMMU • March 2018 - March 2023</p> |
|
|
<p class="timeline-description">Intensive training in prosthodontics, gaining expertise in complex dental reconstructions and prosthetic rehabilitation.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-card"> |
|
|
<h3 class="timeline-title">Consultant Dental Surgeon</h3> |
|
|
<p class="timeline-subtitle">Crescent Dental Center • 6 months</p> |
|
|
<p class="timeline-description">Provided comprehensive dental care services and built strong patient relationships.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-card"> |
|
|
<h3 class="timeline-title">Consultant Surgeon</h3> |
|
|
<p class="timeline-subtitle">Hitech Dental Surgery • 2 months</p> |
|
|
<p class="timeline-description">Gained experience in advanced dental surgical procedures and modern dental technologies.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-card"> |
|
|
<h3 class="timeline-title">Consultant Surgeon</h3> |
|
|
<p class="timeline-subtitle">Ratan's Dental • 2 months</p> |
|
|
<p class="timeline-description">Early career experience in general dental practice and patient care management.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="timeline-item"> |
|
|
<div class="timeline-card"> |
|
|
<h3 class="timeline-title">Internship</h3> |
|
|
<p class="timeline-subtitle">Dhaka Dental College Hospital • July 2013 - July 2014</p> |
|
|
<p class="timeline-description">Comprehensive hands-on training across all dental specialties, building foundational clinical skills.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="section skills"> |
|
|
<div class="container"> |
|
|
<div class="section-header animate-on-scroll"> |
|
|
<h2 class="section-title">Professional Excellence</h2> |
|
|
<p class="section-subtitle">Combining technical expertise with compassionate care and modern technology</p> |
|
|
</div> |
|
|
<div class="skills-grid"> |
|
|
<div class="skill-card animate-on-scroll"> |
|
|
<div class="skill-icon"> |
|
|
<i class="fas fa-tooth"></i> |
|
|
</div> |
|
|
<h3 class="skill-title">Prosthodontics</h3> |
|
|
<p class="skill-description">Specialized expertise in dental prosthetics, crowns, bridges, and complete oral rehabilitation.</p> |
|
|
</div> |
|
|
<div class="skill-card animate-on-scroll"> |
|
|
<div class="skill-icon"> |
|
|
<i class="fas fa-user-md"></i> |
|
|
</div> |
|
|
<h3 class="skill-title">Patient Care</h3> |
|
|
<p class="skill-description">Compassionate approach to patient care with focus on comfort and comprehensive treatment planning.</p> |
|
|
</div> |
|
|
<div class="skill-card animate-on-scroll"> |
|
|
<div class="skill-icon"> |
|
|
<i class="fas fa-laptop-medical"></i> |
|
|
</div> |
|
|
<h3 class="skill-title">Digital Dentistry</h3> |
|
|
<p class="skill-description">Proficient in modern dental software and digital imaging technologies for precise diagnostics.</p> |
|
|
</div> |
|
|
<div class="skill-card animate-on-scroll"> |
|
|
<div class="skill-icon"> |
|
|
<i class="fas fa-microscope"></i> |
|
|
</div> |
|
|
<h3 class="skill-title">Research & Innovation</h3> |
|
|
<p class="skill-description">Committed to staying current with latest dental research and implementing innovative treatment methods.</p> |
|
|
</div> |
|
|
<div class="skill-card animate-on-scroll"> |
|
|
<div class="skill-icon"> |
|
|
<i class="fas fa-users"></i> |
|
|
</div> |
|
|
<h3 class="skill-title">Team Leadership</h3> |
|
|
<p class="skill-description">Excellent collaborative skills and experience in leading dental teams for optimal patient outcomes.</p> |
|
|
</div> |
|
|
<div class="skill-card animate-on-scroll"> |
|
|
<div class="skill-icon"> |
|
|
<i class="fas fa-graduation-cap"></i> |
|
|
</div> |
|
|
<h3 class="skill-title">Continuous Learning</h3> |
|
|
<p class="skill-description">Dedicated to professional development through seminars, workshops, and advanced training programs.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="section contact"> |
|
|
<div class="container"> |
|
|
<div class="section-header animate-on-scroll"> |
|
|
<h2 class="contact-title" style="color: white;">Get In Touch</h2> |
|
|
<p class="section-subtitle" style="color: rgba(255, 255, 255, 0.8);">Ready to transform your smile? Let's discuss your dental care needs</p> |
|
|
</div> |
|
|
<div class="contact-content"> |
|
|
<div class="contact-info animate-on-scroll"> |
|
|
<h3>Contact Information</h3> |
|
|
<div class="contact-item"> |
|
|
<i class="fas fa-phone"></i> |
|
|
<div> |
|
|
<strong>Phone</strong><br> |
|
|
+88-01735760941 |
|
|
</div> |
|
|
</div> |
|
|
<div class="contact-item"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
<div> |
|
|
<strong>Email</strong><br> |
|
|
[email protected] |
|
|
</div> |
|
|
</div> |
|
|
<div class="contact-item"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
<div> |
|
|
<strong>Address</strong><br> |
|
|
Village: Rambhodropur, Post: Harulia<br> |
|
|
Thana: Barhatta, Dist: Netrokona |
|
|
</div> |
|
|
</div> |
|
|
<div class="contact-item"> |
|
|
<i class="fas fa-clinic-medical"></i> |
|
|
<div> |
|
|
<strong>Clinics</strong><br> |
|
|
Crescent Dental Center, Shamoli, Dhaka<br> |
|
|
Podma Diagnostic Center, Netrakona |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<form class="contact-form animate-on-scroll" action="https://formspree.io/f/mzzgrbzp" method="POST"> |
|
|
<div class="form-group"> |
|
|
<label for="name">Full Name</label> |
|
|
<input type="text" id="name" name="name" class="form-control" placeholder="Enter your full name" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="email">Email Address</label> |
|
|
<input type="email" id="email" name="email" class="form-control" placeholder="Enter your email address" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="phone">Phone Number</label> |
|
|
<input type="tel" id="phone" name="phone" class="form-control" placeholder="Enter your phone number"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="subject">Subject</label> |
|
|
<input type="text" id="subject" name="subject" class="form-control" placeholder="What is this regarding?" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="message">Message</label> |
|
|
<textarea id="message" name="message" class="form-control" rows="5" placeholder="Tell me about your dental care needs or questions..." required></textarea> |
|
|
</div> |
|
|
<button type="submit" class="btn-submit"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="footer"> |
|
|
<div class="container"> |
|
|
<p>© 2025 Dr. Ratul Roy. All rights reserved. Transforming smiles, changing lives.</p> |
|
|
<div class="social-links"> |
|
|
<a href="https://www.facebook.com/ratulroy.rat" class="social-link"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="https://www.instagram.com/ratulr0y?igsh=Nzc4ZHZnbnQ0aGJk" class="social-link"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="https://maps.app.goo.gl/fVZf1XW4L7TLMFwf7?g_st=aw" class="social-link"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</a> |
|
|
<a href="mailto:[email protected]" class="social-link"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const navToggle = document.querySelector('.nav-toggle'); |
|
|
const navMenu = document.querySelector('.nav-menu'); |
|
|
const navbar = document.querySelector('.navbar'); |
|
|
|
|
|
navToggle.addEventListener('click', () => { |
|
|
navMenu.classList.toggle('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav-link').forEach(link => { |
|
|
link.addEventListener('click', () => { |
|
|
navMenu.classList.remove('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.scrollY > 100) { |
|
|
navbar.classList.add('scrolled'); |
|
|
} else { |
|
|
navbar.classList.remove('scrolled'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if (target) { |
|
|
const offsetTop = target.offsetTop - 80; |
|
|
window.scrollTo({ |
|
|
top: offsetTop, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const animateOnScrollElements = document.querySelectorAll('.animate-on-scroll'); |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('animated'); |
|
|
} |
|
|
}); |
|
|
}, { |
|
|
threshold: 0.1, |
|
|
rootMargin: '0px 0px -50px 0px' |
|
|
}); |
|
|
|
|
|
animateOnScrollElements.forEach(element => { |
|
|
observer.observe(element); |
|
|
}); |
|
|
|
|
|
|
|
|
const statNumbers = document.querySelectorAll('.stat-number'); |
|
|
|
|
|
const animateCounter = (element, target) => { |
|
|
let current = 0; |
|
|
const increment = target / 100; |
|
|
const timer = setInterval(() => { |
|
|
current += increment; |
|
|
if (current >= target) { |
|
|
current = target; |
|
|
clearInterval(timer); |
|
|
} |
|
|
element.textContent = Math.floor(current) + (target >= 100 ? '+' : ''); |
|
|
}, 20); |
|
|
}; |
|
|
|
|
|
const statsObserver = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
const target = parseInt(entry.target.textContent); |
|
|
animateCounter(entry.target, target); |
|
|
statsObserver.unobserve(entry.target); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
statNumbers.forEach(stat => { |
|
|
statsObserver.observe(stat); |
|
|
}); |
|
|
|
|
|
|
|
|
const contactForm = document.querySelector('.contact-form'); |
|
|
|
|
|
contactForm.addEventListener('submit', function(e) { |
|
|
const submitBtn = this.querySelector('.btn-submit'); |
|
|
const originalText = submitBtn.innerHTML; |
|
|
|
|
|
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...'; |
|
|
submitBtn.style.opacity = '0.7'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
submitBtn.innerHTML = '<i class="fas fa-check"></i> Message Sent!'; |
|
|
setTimeout(() => { |
|
|
submitBtn.innerHTML = originalText; |
|
|
submitBtn.style.opacity = '1'; |
|
|
}, 2000); |
|
|
}, 1000); |
|
|
}); |
|
|
|
|
|
|
|
|
const floatingElements = document.querySelectorAll('.floating-element'); |
|
|
|
|
|
floatingElements.forEach((element, index) => { |
|
|
element.style.animationDelay = `${index * 2}s`; |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
const scrolled = window.pageYOffset; |
|
|
const heroContent = document.querySelector('.hero-content'); |
|
|
const heroImage = document.querySelector('.hero-image'); |
|
|
|
|
|
if (heroContent && heroImage) { |
|
|
heroContent.style.transform = `translateY(${scrolled * 0.5}px)`; |
|
|
heroImage.style.transform = `translateY(${scrolled * 0.3}px)`; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('load', () => { |
|
|
document.body.classList.add('loaded'); |
|
|
}); |
|
|
|
|
|
|
|
|
const cursor = document.createElement('div'); |
|
|
cursor.className = 'cursor-glow'; |
|
|
cursor.style.cssText = ` |
|
|
position: fixed; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
background: radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%); |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
z-index: 9999; |
|
|
transition: transform 0.1s ease; |
|
|
`; |
|
|
document.body.appendChild(cursor); |
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
cursor.style.left = e.clientX - 10 + 'px'; |
|
|
cursor.style.top = e.clientY - 10 + 'px'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.skill-card, .timeline-card, .stat-card').forEach(card => { |
|
|
card.addEventListener('mouseenter', function() { |
|
|
this.style.transform = 'translateY(-10px) scale(1.02)'; |
|
|
}); |
|
|
|
|
|
card.addEventListener('mouseleave', function() { |
|
|
this.style.transform = 'translateY(0) scale(1)'; |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
