soroush.asadi
1484 lines
46 KiB
HTML
1484 lines
46 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fa" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>دکتر سوسن آلطه | پزشک متخصص زیبایی پوست</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap" onload="this.rel='stylesheet'" />
|
|
<noscript><link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap" rel="stylesheet" /></noscript>
|
|
<style>
|
|
/* ─── Reset & Base ─────────────────────────────────────────── */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--gold: #B8955A;
|
|
--gold-light: #D4B483;
|
|
--gold-pale: #F5ECD8;
|
|
--bg: #FAFAF7;
|
|
--white: #FFFFFF;
|
|
--dark: #1E1E1E;
|
|
--mid: #5A5A5A;
|
|
--light: #9A9A9A;
|
|
--border: #E8E2D9;
|
|
--section-bg: #F7F4EF;
|
|
}
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
font-family: 'Vazirmatn', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--dark);
|
|
line-height: 1.8;
|
|
direction: rtl;
|
|
}
|
|
|
|
/* ─── Navbar ───────────────────────────────────────────────── */
|
|
header {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
z-index: 100;
|
|
background: rgba(250,250,247,0.92);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 0 2rem;
|
|
height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--gold);
|
|
letter-spacing: 0.03em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
gap: 2rem;
|
|
list-style: none;
|
|
}
|
|
|
|
nav a {
|
|
text-decoration: none;
|
|
color: var(--mid);
|
|
font-size: 0.88rem;
|
|
font-weight: 400;
|
|
transition: color 0.25s;
|
|
position: relative;
|
|
}
|
|
|
|
nav a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -3px;
|
|
right: 0;
|
|
width: 0;
|
|
height: 1px;
|
|
background: var(--gold);
|
|
transition: width 0.3s;
|
|
}
|
|
|
|
nav a:hover { color: var(--gold); }
|
|
nav a:hover::after { width: 100%; }
|
|
|
|
.nav-cta {
|
|
background: var(--gold);
|
|
color: var(--white) !important;
|
|
padding: 0.45rem 1.2rem;
|
|
border-radius: 50px;
|
|
font-size: 0.85rem !important;
|
|
transition: background 0.25s, transform 0.2s !important;
|
|
}
|
|
|
|
.nav-cta:hover {
|
|
background: var(--gold-light) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.nav-cta::after { display: none !important; }
|
|
|
|
/* hamburger */
|
|
.hamburger {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
}
|
|
|
|
.hamburger span {
|
|
display: block;
|
|
width: 24px;
|
|
height: 2px;
|
|
background: var(--dark);
|
|
border-radius: 2px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/* ─── Hero ─────────────────────────────────────────────────── */
|
|
#hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 80px 0 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -120px; left: -120px;
|
|
width: 600px; height: 600px;
|
|
background: radial-gradient(circle, rgba(184,149,90,0.10) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -80px; right: -80px;
|
|
width: 500px; height: 500px;
|
|
background: radial-gradient(circle, rgba(184,149,90,0.07) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-inner {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.hero-text { animation: fadeUp 0.9s ease both; }
|
|
|
|
.hero-tag {
|
|
display: inline-block;
|
|
background: var(--gold-pale);
|
|
color: var(--gold);
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
padding: 0.35rem 1rem;
|
|
border-radius: 50px;
|
|
margin-bottom: 1.4rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.hero-name {
|
|
font-size: clamp(2.2rem, 4vw, 3.2rem);
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
color: var(--dark);
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.hero-name span { color: var(--gold); }
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.05rem;
|
|
color: var(--mid);
|
|
font-weight: 400;
|
|
margin-bottom: 1.8rem;
|
|
line-height: 1.9;
|
|
}
|
|
|
|
.hero-stats {
|
|
display: flex;
|
|
gap: 2.5rem;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.stat-item { text-align: center; }
|
|
|
|
.stat-number {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--gold);
|
|
display: block;
|
|
line-height: 1;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.78rem;
|
|
color: var(--light);
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--gold);
|
|
color: var(--white);
|
|
border: none;
|
|
padding: 0.8rem 2rem;
|
|
border-radius: 50px;
|
|
font-family: 'Vazirmatn', sans-serif;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
|
|
box-shadow: 0 4px 18px rgba(184,149,90,0.25);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--gold-light);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(184,149,90,0.35);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--gold);
|
|
border: 1.5px solid var(--gold);
|
|
padding: 0.78rem 1.8rem;
|
|
border-radius: 50px;
|
|
font-family: 'Vazirmatn', sans-serif;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--gold);
|
|
color: var(--white);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.hero-image {
|
|
position: relative;
|
|
animation: fadeUp 0.9s 0.2s ease both;
|
|
}
|
|
|
|
.hero-image-frame {
|
|
width: 100%;
|
|
aspect-ratio: 4/5;
|
|
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
|
|
background: linear-gradient(145deg, var(--gold-pale) 0%, #EFE3CC 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 30px 80px rgba(184,149,90,0.2);
|
|
}
|
|
|
|
.hero-image-frame img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.hero-image-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
color: var(--gold);
|
|
}
|
|
|
|
.hero-image-placeholder svg {
|
|
width: 80px;
|
|
height: 80px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.hero-image-placeholder p {
|
|
font-size: 0.85rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.hero-badge {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: -2rem;
|
|
background: var(--white);
|
|
border-radius: 16px;
|
|
padding: 1rem 1.4rem;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
.badge-icon {
|
|
width: 42px; height: 42px;
|
|
background: var(--gold-pale);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.badge-icon svg { width: 20px; height: 20px; color: var(--gold); }
|
|
|
|
.badge-text { font-size: 0.82rem; line-height: 1.4; }
|
|
.badge-text strong { color: var(--gold); display: block; font-size: 0.9rem; }
|
|
|
|
/* ─── Section base ─────────────────────────────────────────── */
|
|
section { padding: 6rem 0; }
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
color: var(--gold);
|
|
text-transform: uppercase;
|
|
margin-bottom: 0.8rem;
|
|
display: block;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(1.6rem, 3vw, 2.3rem);
|
|
font-weight: 700;
|
|
color: var(--dark);
|
|
margin-bottom: 1.2rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.section-desc {
|
|
font-size: 1rem;
|
|
color: var(--mid);
|
|
max-width: 560px;
|
|
line-height: 1.9;
|
|
}
|
|
|
|
.divider {
|
|
width: 60px;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--gold), var(--gold-pale));
|
|
border-radius: 2px;
|
|
margin: 1.2rem 0 2.5rem;
|
|
}
|
|
|
|
/* ─── About ─────────────────────────────────────────────────── */
|
|
#about { background: var(--white); }
|
|
|
|
.about-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.about-image-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.about-img-box {
|
|
width: 100%;
|
|
aspect-ratio: 3/4;
|
|
border-radius: 20px;
|
|
background: linear-gradient(160deg, var(--gold-pale) 0%, #EDE0CA 100%);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.about-img-box img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.about-img-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
color: var(--gold);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.about-img-placeholder svg { width: 60px; height: 60px; }
|
|
|
|
.about-accent-box {
|
|
position: absolute;
|
|
bottom: -2rem;
|
|
right: -2rem;
|
|
background: var(--gold);
|
|
color: var(--white);
|
|
border-radius: 16px;
|
|
padding: 1.5rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.about-accent-box .big { font-size: 2.2rem; font-weight: 700; display: block; }
|
|
.about-accent-box .small { font-size: 0.82rem; opacity: 0.85; }
|
|
|
|
.credential-list {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.credential-list li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.85rem;
|
|
font-size: 0.95rem;
|
|
color: var(--mid);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.cred-icon {
|
|
width: 28px; height: 28px;
|
|
border-radius: 50%;
|
|
background: var(--gold-pale);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
.cred-icon svg { width: 13px; height: 13px; color: var(--gold); }
|
|
|
|
/* ─── Services ───────────────────────────────────────────────── */
|
|
#services { background: var(--section-bg); }
|
|
|
|
.services-header {
|
|
text-align: center;
|
|
margin-bottom: 3.5rem;
|
|
}
|
|
|
|
.services-header .divider { margin: 1.2rem auto 0; }
|
|
|
|
.services-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.service-card {
|
|
background: var(--white);
|
|
border-radius: 20px;
|
|
padding: 2rem;
|
|
border: 1px solid var(--border);
|
|
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.service-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; right: 0;
|
|
width: 80px; height: 80px;
|
|
background: radial-gradient(circle at top right, rgba(184,149,90,0.08), transparent 70%);
|
|
}
|
|
|
|
.service-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 20px 50px rgba(184,149,90,0.15);
|
|
border-color: var(--gold-pale);
|
|
}
|
|
|
|
.service-icon {
|
|
width: 56px; height: 56px;
|
|
background: var(--gold-pale);
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.3rem;
|
|
}
|
|
|
|
.service-icon svg { width: 26px; height: 26px; color: var(--gold); }
|
|
|
|
.service-title {
|
|
font-size: 1.05rem;
|
|
font-weight: 600;
|
|
color: var(--dark);
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.service-desc {
|
|
font-size: 0.88rem;
|
|
color: var(--mid);
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* ─── Gallery ─────────────────────────────────────────────────── */
|
|
#gallery { background: var(--white); }
|
|
|
|
.gallery-header { margin-bottom: 3rem; }
|
|
|
|
.gallery-tabs {
|
|
display: flex;
|
|
gap: 0.6rem;
|
|
margin-bottom: 2.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tab-btn {
|
|
background: transparent;
|
|
border: 1.5px solid var(--border);
|
|
color: var(--mid);
|
|
padding: 0.45rem 1.2rem;
|
|
border-radius: 50px;
|
|
font-family: 'Vazirmatn', sans-serif;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
.tab-btn.active, .tab-btn:hover {
|
|
background: var(--gold);
|
|
border-color: var(--gold);
|
|
color: var(--white);
|
|
}
|
|
|
|
.gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.2rem;
|
|
}
|
|
|
|
.gallery-item {
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
aspect-ratio: 4/3;
|
|
background: linear-gradient(135deg, var(--gold-pale), #EDE0CA);
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gallery-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.4s;
|
|
}
|
|
|
|
.gallery-item:hover img { transform: scale(1.05); }
|
|
|
|
.gallery-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.6rem;
|
|
color: var(--gold);
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.gallery-placeholder svg { width: 36px; height: 36px; }
|
|
.gallery-placeholder p { font-size: 0.75rem; }
|
|
|
|
.gallery-item-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(184,149,90,0);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.gallery-item:hover .gallery-item-overlay { background: rgba(184,149,90,0.15); }
|
|
|
|
/* ─── Testimonials ──────────────────────────────────────────── */
|
|
#testimonials { background: var(--section-bg); }
|
|
|
|
.testimonials-header { text-align: center; margin-bottom: 3rem; }
|
|
.testimonials-header .divider { margin: 1rem auto 0; }
|
|
|
|
.testimonials-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.testimonial-card {
|
|
background: var(--white);
|
|
border-radius: 20px;
|
|
padding: 2rem;
|
|
border: 1px solid var(--border);
|
|
position: relative;
|
|
}
|
|
|
|
.testimonial-card::before {
|
|
content: '"';
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 1.5rem;
|
|
font-size: 4rem;
|
|
color: var(--gold-pale);
|
|
line-height: 1;
|
|
font-family: Georgia, serif;
|
|
}
|
|
|
|
.testimonial-stars {
|
|
display: flex;
|
|
gap: 3px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.star { color: var(--gold); font-size: 1rem; }
|
|
|
|
.testimonial-text {
|
|
font-size: 0.9rem;
|
|
color: var(--mid);
|
|
line-height: 1.9;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.testimonial-author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.author-avatar {
|
|
width: 42px; height: 42px;
|
|
border-radius: 50%;
|
|
background: var(--gold-pale);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.author-name {
|
|
font-size: 0.88rem;
|
|
font-weight: 600;
|
|
color: var(--dark);
|
|
}
|
|
|
|
.author-date { font-size: 0.78rem; color: var(--light); }
|
|
|
|
/* ─── Contact ─────────────────────────────────────────────────── */
|
|
#contact { background: var(--white); }
|
|
|
|
.contact-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.4fr;
|
|
gap: 4rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.contact-info-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.contact-info-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.info-icon {
|
|
width: 48px; height: 48px;
|
|
background: var(--gold-pale);
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-icon svg { width: 22px; height: 22px; color: var(--gold); }
|
|
|
|
.info-text strong {
|
|
display: block;
|
|
font-size: 0.9rem;
|
|
color: var(--dark);
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.info-text p {
|
|
font-size: 0.88rem;
|
|
color: var(--mid);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
gap: 0.8rem;
|
|
margin-top: 2.5rem;
|
|
}
|
|
|
|
.social-link {
|
|
width: 44px; height: 44px;
|
|
border-radius: 12px;
|
|
background: var(--gold-pale);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--gold);
|
|
text-decoration: none;
|
|
transition: background 0.25s, transform 0.2s;
|
|
}
|
|
|
|
.social-link:hover {
|
|
background: var(--gold);
|
|
color: var(--white);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.social-link svg { width: 20px; height: 20px; }
|
|
|
|
/* Form */
|
|
.contact-form {
|
|
background: var(--section-bg);
|
|
border-radius: 24px;
|
|
padding: 2.5rem;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.form-title {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: var(--dark);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-sub {
|
|
font-size: 0.88rem;
|
|
color: var(--mid);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
|
|
.form-group label {
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: var(--dark);
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select,
|
|
.form-group textarea {
|
|
background: var(--white);
|
|
border: 1.5px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 0.75rem 1rem;
|
|
font-family: 'Vazirmatn', sans-serif;
|
|
font-size: 0.9rem;
|
|
color: var(--dark);
|
|
direction: rtl;
|
|
transition: border-color 0.25s, box-shadow 0.25s;
|
|
outline: none;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus,
|
|
.form-group textarea:focus {
|
|
border-color: var(--gold);
|
|
box-shadow: 0 0 0 3px rgba(184,149,90,0.12);
|
|
}
|
|
|
|
.form-group textarea { resize: vertical; min-height: 110px; }
|
|
|
|
.form-submit {
|
|
width: 100%;
|
|
background: var(--gold);
|
|
color: var(--white);
|
|
border: none;
|
|
padding: 0.9rem;
|
|
border-radius: 12px;
|
|
font-family: 'Vazirmatn', sans-serif;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.25s, transform 0.2s;
|
|
}
|
|
|
|
.form-submit:hover {
|
|
background: var(--gold-light);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* ─── Footer ─────────────────────────────────────────────────── */
|
|
footer {
|
|
background: var(--dark);
|
|
color: rgba(255,255,255,0.6);
|
|
text-align: center;
|
|
padding: 2.5rem 2rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
footer a { color: var(--gold-light); text-decoration: none; }
|
|
|
|
/* ─── Animations ─────────────────────────────────────────────── */
|
|
@keyframes fadeUp {
|
|
from { opacity: 0; transform: translateY(28px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-8px); }
|
|
}
|
|
|
|
.fade-in {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
transition: opacity 0.7s ease, transform 0.7s ease;
|
|
}
|
|
|
|
.fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ─── Responsive ─────────────────────────────────────────────── */
|
|
@media (max-width: 900px) {
|
|
nav { display: none; }
|
|
.hamburger { display: flex; }
|
|
|
|
.hero-inner { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
|
|
.hero-text { order: 1; }
|
|
.hero-image { order: 2; max-width: 340px; margin: 0 auto; }
|
|
.hero-stats { justify-content: center; }
|
|
.hero-actions { justify-content: center; }
|
|
.hero-badge { left: 0; }
|
|
|
|
.about-grid { grid-template-columns: 1fr; gap: 3rem; }
|
|
.about-accent-box { right: 0; bottom: -1rem; }
|
|
|
|
.services-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.testimonials-grid { grid-template-columns: 1fr; }
|
|
.contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
section { padding: 4rem 0; }
|
|
.services-grid { grid-template-columns: 1fr; }
|
|
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.form-row { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ══════ HEADER ══════ -->
|
|
<header>
|
|
<a class="logo" href="#hero">دکتر سوسن آلطه</a>
|
|
<nav>
|
|
<a href="#about">درباره من</a>
|
|
<a href="#services">خدمات</a>
|
|
<a href="#gallery">گالری</a>
|
|
<a href="#testimonials">نظرات</a>
|
|
<a href="#contact" class="nav-cta">رزرو نوبت</a>
|
|
</nav>
|
|
<div class="hamburger" onclick="toggleMenu()">
|
|
<span></span><span></span><span></span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ══════ HERO ══════ -->
|
|
<section id="hero">
|
|
<div class="hero-inner">
|
|
<div class="hero-text">
|
|
<span class="hero-tag">پزشک عمومی و متخصص زیبایی پوست</span>
|
|
<h1 class="hero-name">دکتر <span>سوسن</span><br>آلطه</h1>
|
|
<p class="hero-subtitle">
|
|
با بیش از یک دهه تجربه در حوزهی زیبایی و مراقبت از پوست،<br>
|
|
زیبایی واقعی شما را با علم و هنر همراه میکنیم.
|
|
</p>
|
|
<div class="hero-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-number">+۱۰</span>
|
|
<span class="stat-label">سال تجربه</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">+۵۰۰</span>
|
|
<span class="stat-label">بیمار راضی</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number">+۱۵</span>
|
|
<span class="stat-label">خدمات تخصصی</span>
|
|
</div>
|
|
</div>
|
|
<div class="hero-actions">
|
|
<a href="#contact" class="btn-primary">رزرو نوبت</a>
|
|
<a href="#about" class="btn-secondary">بیشتر بدانید</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-image">
|
|
<div class="hero-image-frame">
|
|
<!-- Replace src with doctor's actual photo -->
|
|
<div class="hero-image-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="12" cy="7" r="4"/>
|
|
</svg>
|
|
<p>تصویر دکتر</p>
|
|
</div>
|
|
</div>
|
|
<div class="hero-badge">
|
|
<div class="badge-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="badge-text">
|
|
<strong>متخصص پوست و زیبایی</strong>
|
|
فارغالتحصیل دانشگاه ایران
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══════ ABOUT ══════ -->
|
|
<section id="about">
|
|
<div class="container">
|
|
<div class="about-grid">
|
|
<div class="about-image-wrap fade-in">
|
|
<div class="about-img-box">
|
|
<!-- Replace with doctor's photo -->
|
|
<div class="about-img-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="12" cy="7" r="4"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="about-accent-box">
|
|
<span class="big">۱۰+</span>
|
|
<span class="small">سال تجربه</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fade-in">
|
|
<span class="section-label">درباره من</span>
|
|
<h2 class="section-title">سلامت و زیبایی پوست<br>هدف اصلی من است</h2>
|
|
<div class="divider"></div>
|
|
<p class="section-desc">
|
|
دکتر سوسن آلطه، پزشک عمومی و متخصص زیبایی پوست با سالها تجربه در ارائه خدمات پیشرفته پوست و زیبایی. ایشان با ترکیب دانش پزشکی و هنر زیبایی، بهترین نتایج را برای بیماران خود رقم میزنند.
|
|
</p>
|
|
|
|
<ul class="credential-list">
|
|
<li>
|
|
<div class="cred-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</div>
|
|
<span>دکترای پزشکی عمومی از دانشگاه ایران</span>
|
|
</li>
|
|
<li>
|
|
<div class="cred-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</div>
|
|
<span>تخصص در حوزه زیبایی و مراقبت از پوست</span>
|
|
</li>
|
|
<li>
|
|
<div class="cred-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</div>
|
|
<span>آشنا با جدیدترین روشهای زیبایی روز دنیا</span>
|
|
</li>
|
|
<li>
|
|
<div class="cred-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</div>
|
|
<span>عضو انجمنهای تخصصی پزشکی ایران</span>
|
|
</li>
|
|
<li>
|
|
<div class="cred-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</div>
|
|
<span>مشاوره و درمان شخصیسازیشده برای هر بیمار</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══════ SERVICES ══════ -->
|
|
<section id="services">
|
|
<div class="container">
|
|
<div class="services-header fade-in">
|
|
<span class="section-label">خدمات ما</span>
|
|
<h2 class="section-title">طیف گستردهای از خدمات<br>زیبایی و مراقبت از پوست</h2>
|
|
<div class="divider"></div>
|
|
</div>
|
|
|
|
<div class="services-grid">
|
|
<div class="service-card fade-in">
|
|
<div class="service-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="service-title">مراقبت و درمان پوست</div>
|
|
<p class="service-desc">ارزیابی کامل پوست و تجویز برنامه درمانی مناسب برای انواع مشکلات پوستی شامل آکنه، لک و چین و چروک.</p>
|
|
</div>
|
|
|
|
<div class="service-card fade-in">
|
|
<div class="service-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<path d="M8 12s1.5 2 4 2 4-2 4-2"/>
|
|
<line x1="9" y1="9" x2="9.01" y2="9"/>
|
|
<line x1="15" y1="9" x2="15.01" y2="9"/>
|
|
</svg>
|
|
</div>
|
|
<div class="service-title">بوتاکس و فیلر</div>
|
|
<p class="service-desc">تزریق بوتاکس و فیلر با بالاترین کیفیت برای جوانسازی چهره و رفع چین و چروکهای عمیق.</p>
|
|
</div>
|
|
|
|
<div class="service-card fade-in">
|
|
<div class="service-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
|
<path d="M2 17l10 5 10-5"/>
|
|
<path d="M2 12l10 5 10-5"/>
|
|
</svg>
|
|
</div>
|
|
<div class="service-title">لیزر درمانی</div>
|
|
<p class="service-desc">درمان با پیشرفتهترین دستگاههای لیزر برای رفع موهای زائد، لک و ضایعات پوستی.</p>
|
|
</div>
|
|
|
|
<div class="service-card fade-in">
|
|
<div class="service-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="service-title">مزوتراپی</div>
|
|
<p class="service-desc">تزریق ویتامینها و مواد مغذی مستقیم به پوست برای درمان ریزش مو و جوانسازی پوست.</p>
|
|
</div>
|
|
|
|
<div class="service-card fade-in">
|
|
<div class="service-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<line x1="12" y1="8" x2="12" y2="16"/>
|
|
<line x1="8" y1="12" x2="16" y2="12"/>
|
|
</svg>
|
|
</div>
|
|
<div class="service-title">پاکسازی عمیق پوست</div>
|
|
<p class="service-desc">پاکسازی حرفهای پوست با روشهای تخصصی برای رفع جوشهای سرسیاه و سرسفید.</p>
|
|
</div>
|
|
|
|
<div class="service-card fade-in">
|
|
<div class="service-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="service-title">مشاوره زیبایی</div>
|
|
<p class="service-desc">مشاوره تخصصی و برنامهریزی شخصیسازیشده برای مراقبت از پوست و رسیدن به اهداف زیبایی شما.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══════ GALLERY ══════ -->
|
|
<section id="gallery">
|
|
<div class="container">
|
|
<div class="gallery-header fade-in">
|
|
<span class="section-label">گالری</span>
|
|
<h2 class="section-title">نتایج قبل و بعد</h2>
|
|
<div class="divider"></div>
|
|
<p class="section-desc">نمونهای از نتایج فوقالعاده درمانهای انجامشده توسط دکتر آلطه.</p>
|
|
</div>
|
|
|
|
<div class="gallery-tabs fade-in">
|
|
<button class="tab-btn active">همه</button>
|
|
<button class="tab-btn">بوتاکس</button>
|
|
<button class="tab-btn">لیزر</button>
|
|
<button class="tab-btn">مزوتراپی</button>
|
|
<button class="tab-btn">پاکسازی</button>
|
|
</div>
|
|
|
|
<div class="gallery-grid">
|
|
<!-- Replace placeholders with actual before/after images -->
|
|
<div class="gallery-item fade-in">
|
|
<div class="gallery-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
|
|
<polyline points="21 15 16 10 5 21"/>
|
|
</svg>
|
|
<p>تصویر قبل و بعد</p>
|
|
</div>
|
|
<div class="gallery-item-overlay"></div>
|
|
</div>
|
|
<div class="gallery-item fade-in">
|
|
<div class="gallery-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
|
|
<polyline points="21 15 16 10 5 21"/>
|
|
</svg>
|
|
<p>تصویر قبل و بعد</p>
|
|
</div>
|
|
<div class="gallery-item-overlay"></div>
|
|
</div>
|
|
<div class="gallery-item fade-in">
|
|
<div class="gallery-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
|
|
<polyline points="21 15 16 10 5 21"/>
|
|
</svg>
|
|
<p>تصویر قبل و بعد</p>
|
|
</div>
|
|
<div class="gallery-item-overlay"></div>
|
|
</div>
|
|
<div class="gallery-item fade-in">
|
|
<div class="gallery-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
|
|
<polyline points="21 15 16 10 5 21"/>
|
|
</svg>
|
|
<p>تصویر قبل و بعد</p>
|
|
</div>
|
|
<div class="gallery-item-overlay"></div>
|
|
</div>
|
|
<div class="gallery-item fade-in">
|
|
<div class="gallery-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
|
|
<polyline points="21 15 16 10 5 21"/>
|
|
</svg>
|
|
<p>تصویر قبل و بعد</p>
|
|
</div>
|
|
<div class="gallery-item-overlay"></div>
|
|
</div>
|
|
<div class="gallery-item fade-in">
|
|
<div class="gallery-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
|
|
<polyline points="21 15 16 10 5 21"/>
|
|
</svg>
|
|
<p>تصویر قبل و بعد</p>
|
|
</div>
|
|
<div class="gallery-item-overlay"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══════ TESTIMONIALS ══════ -->
|
|
<section id="testimonials">
|
|
<div class="container">
|
|
<div class="testimonials-header fade-in">
|
|
<span class="section-label">نظرات بیماران</span>
|
|
<h2 class="section-title">بیماران ما چه میگویند</h2>
|
|
<div class="divider"></div>
|
|
</div>
|
|
|
|
<div class="testimonials-grid">
|
|
<div class="testimonial-card fade-in">
|
|
<div class="testimonial-stars">
|
|
<span class="star">★</span><span class="star">★</span>
|
|
<span class="star">★</span><span class="star">★</span><span class="star">★</span>
|
|
</div>
|
|
<p class="testimonial-text">
|
|
دکتر آلطه با صبر و دقت زیاد مشکل پوستی من را بررسی کردند و درمان دقیقی تجویز کردند. نتیجه فوقالعاده بود. ممنونم دکتر.
|
|
</p>
|
|
<div class="testimonial-author">
|
|
<div class="author-avatar">👩</div>
|
|
<div>
|
|
<div class="author-name">سارا محمدی</div>
|
|
<div class="author-date">اردیبهشت ۱۴۰۳</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-card fade-in">
|
|
<div class="testimonial-stars">
|
|
<span class="star">★</span><span class="star">★</span>
|
|
<span class="star">★</span><span class="star">★</span><span class="star">★</span>
|
|
</div>
|
|
<p class="testimonial-text">
|
|
بعد از تزریق بوتاکس توسط دکتر آلطه، نتیجهای طبیعی و زیبا داشتم که همه اطرافیانم تعریف کردند. حتما توصیه میکنم.
|
|
</p>
|
|
<div class="testimonial-author">
|
|
<div class="author-avatar">👩🦱</div>
|
|
<div>
|
|
<div class="author-name">مریم حسینی</div>
|
|
<div class="author-date">فروردین ۱۴۰۳</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-card fade-in">
|
|
<div class="testimonial-stars">
|
|
<span class="star">★</span><span class="star">★</span>
|
|
<span class="star">★</span><span class="star">★</span><span class="star">★</span>
|
|
</div>
|
|
<p class="testimonial-text">
|
|
دکتر خیلی حرفهای و دلسوز هستند. بعد از چند جلسه لیزر، پوستم کاملا صاف شد. از اعتماد و تخصصشان ممنونم.
|
|
</p>
|
|
<div class="testimonial-author">
|
|
<div class="author-avatar">👩🦳</div>
|
|
<div>
|
|
<div class="author-name">نیلوفر رضایی</div>
|
|
<div class="author-date">اسفند ۱۴۰۲</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══════ CONTACT ══════ -->
|
|
<section id="contact">
|
|
<div class="container">
|
|
<div class="contact-grid">
|
|
<div class="fade-in">
|
|
<span class="section-label">تماس با ما</span>
|
|
<h2 class="section-title">رزرو نوبت<br>و مشاوره</h2>
|
|
<div class="divider"></div>
|
|
<p class="section-desc">برای رزرو نوبت یا دریافت مشاوره رایگان با ما در تماس باشید.</p>
|
|
|
|
<div class="contact-info-list">
|
|
<div class="contact-info-item">
|
|
<div class="info-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13.6a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 3h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 10.6a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="info-text">
|
|
<strong>تلفن تماس</strong>
|
|
<p>۰۲۱-XXXX-XXXX</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-info-item">
|
|
<div class="info-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
|
<polyline points="22,6 12,13 2,6"/>
|
|
</svg>
|
|
</div>
|
|
<div class="info-text">
|
|
<strong>ایمیل</strong>
|
|
<p>dr.sousan@example.com</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-info-item">
|
|
<div class="info-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
|
<circle cx="12" cy="10" r="3"/>
|
|
</svg>
|
|
</div>
|
|
<div class="info-text">
|
|
<strong>آدرس مطب</strong>
|
|
<p>تهران، خیابان ولیعصر، ساختمان پزشکی</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-info-item">
|
|
<div class="info-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
</div>
|
|
<div class="info-text">
|
|
<strong>ساعات کاری</strong>
|
|
<p>شنبه تا چهارشنبه: ۹ تا ۱۸<br>پنجشنبه: ۹ تا ۱۴</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="social-links">
|
|
<a href="#" class="social-link" title="اینستاگرام">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
|
|
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
|
|
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="social-link" title="واتساپ">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="social-link" title="تلگرام">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="22" y1="2" x2="11" y2="13"/>
|
|
<polygon points="22 2 15 22 11 13 2 9 22 2"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-form fade-in">
|
|
<div class="form-title">رزرو نوبت آنلاین</div>
|
|
<p class="form-sub">فرم زیر را پر کنید، در اسرع وقت با شما تماس میگیریم.</p>
|
|
|
|
<form onsubmit="handleSubmit(event)">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>نام</label>
|
|
<input type="text" placeholder="نام شما" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>نام خانوادگی</label>
|
|
<input type="text" placeholder="نام خانوادگی" required />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>شماره موبایل</label>
|
|
<input type="tel" placeholder="09XX-XXX-XXXX" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>نوع خدمت مورد نظر</label>
|
|
<select>
|
|
<option value="" disabled selected>انتخاب خدمت</option>
|
|
<option>مراقبت و درمان پوست</option>
|
|
<option>بوتاکس و فیلر</option>
|
|
<option>لیزر درمانی</option>
|
|
<option>مزوتراپی</option>
|
|
<option>پاکسازی عمیق پوست</option>
|
|
<option>مشاوره زیبایی</option>
|
|
<option>سایر</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>توضیحات (اختیاری)</label>
|
|
<textarea placeholder="مشکل پوستی یا سوالات خود را اینجا بنویسید..."></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="form-submit">ارسال و رزرو نوبت</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══════ FOOTER ══════ -->
|
|
<footer>
|
|
<p>© ۱۴۰۳ دکتر سوسن آلطه — تمامی حقوق محفوظ است.</p>
|
|
<p style="margin-top:0.5rem; font-size:0.78rem; opacity:0.5;">طراحی شده با ❤ برای سلامت و زیبایی شما</p>
|
|
</footer>
|
|
|
|
<!-- ══════ SCRIPTS ══════ -->
|
|
<script>
|
|
// Scroll animations
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
|
|
|
// Tab buttons
|
|
document.querySelectorAll('.tab-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Mobile menu
|
|
function toggleMenu() {
|
|
const nav = document.querySelector('nav');
|
|
nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
|
|
nav.style.flexDirection = 'column';
|
|
nav.style.position = 'absolute';
|
|
nav.style.top = '70px';
|
|
nav.style.right = '0';
|
|
nav.style.left = '0';
|
|
nav.style.background = '#FAFAF7';
|
|
nav.style.padding = '1rem 2rem 2rem';
|
|
nav.style.borderBottom = '1px solid #E8E2D9';
|
|
nav.style.gap = '1rem';
|
|
}
|
|
|
|
// Form submission
|
|
function handleSubmit(e) {
|
|
e.preventDefault();
|
|
const btn = e.target.querySelector('.form-submit');
|
|
btn.textContent = '✓ درخواست شما ثبت شد';
|
|
btn.style.background = '#2D7A4F';
|
|
setTimeout(() => {
|
|
btn.textContent = 'ارسال و رزرو نوبت';
|
|
btn.style.background = '';
|
|
e.target.reset();
|
|
}, 3000);
|
|
}
|
|
|
|
// Active nav link on scroll
|
|
const sections = document.querySelectorAll('section[id]');
|
|
window.addEventListener('scroll', () => {
|
|
const scrollY = window.scrollY;
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop - 100;
|
|
const sectionH = section.offsetHeight;
|
|
const id = section.getAttribute('id');
|
|
const link = document.querySelector(`nav a[href="#${id}"]`);
|
|
if (link && scrollY > sectionTop && scrollY <= sectionTop + sectionH) {
|
|
document.querySelectorAll('nav a').forEach(a => a.style.color = '');
|
|
link.style.color = '#B8955A';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|