| <!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> |
| dent777rat@gmail.com |
| </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:dent777rat@gmail.com" 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> |
