Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>PetCare Veterinary Clinic | Professional Animal Healthcare</title>

<style>

:root {

--primary: #4E9C81;

--secondary: #FF9AA2;

--accent: #FFDAC1;

--light: #F1FAEE;

--dark: #1D3557;

--gray: #8d99ae;

--white: #ffffff;

--transition: all 0.3s ease;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Poppins', sans-serif;

line-height: 1.6;

color: #333;

background-color: var(--white);

overflow-x: hidden;

}

h1, h2, h3, h4, h5 {

font-family: 'Montserrat', sans-serif;

font-weight: 700;

color: var(--dark);

}

.container {

width: 90%;

max-width: 1200px;

margin: 0 auto;

padding: 0 15px;

}

/* Top Information Bar */

.top-bar {

background-color: var(--dark);

color: var(--white);

padding: 8px 0;

font-size: 14px;

}

.top-info {

display: flex;

justify-content: space-between;

align-items: center;

flex-wrap: wrap;

}

.contact-info span {

margin-right: 20px;

display: inline-flex;

align-items: center;

}

.contact-info i {

margin-right: 8px;

color: var(--accent);

}

.emergency {

color: var(--secondary);

font-weight: 600;

}

.patient-login a {

color: var(--accent);

text-decoration: none;

transition: var(--transition);

}

.patient-login a:hover {

color: var(--white);

}

/* Sticky Navigation */

.navbar {

background-color: var(--white);

box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);

position: sticky;

top: 0;

z-index: 1000;

}

.nav-container {

display: flex;

justify-content: space-between;

align-items: center;

padding: 15px 0;

}

.logo {

display: flex;

align-items: center;

}

.logo i {

font-size: 28px;

color: var(--primary);

margin-right: 10px;

}

.logo-text {

font-size: 24px;

font-weight: 700;

color: var(--dark);

}

.logo-text span {

color: var(--primary);

}

.nav-links {

display: flex;

list-style: none;

}

.nav-links li {

margin-left: 30px;

}

.nav-links a {

text-decoration: none;

color: var(--dark);

font-weight: 500;

font-size: 16px;

transition: var(--transition);

position: relative;

}

.nav-links a:hover {

color: var(--primary);

}

.nav-links a::after {

content: '';

position: absolute;

width: 0;

height: 2px;

bottom: -5px;

left: 0;

background-color: var(--primary);

transition: var(--transition);

}

.nav-links a:hover::after {

width: 100%;

}

.mobile-menu-btn {

display: none;

background: none;

border: none;

font-size: 24px;

color: var(--dark);

cursor: pointer;

}

/* Hero Section */

.hero {

height: 90vh;

background: linear-gradient(rgba(29, 53, 87, 0.7), rgba(29, 53, 87, 0.7)), url('https://images.unsplash.com/photo-1583511655826-05700d52f4d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80') no-repeat center center/cover;

display: flex;

align-items: center;

text-align: center;

color: var(--white);

position: relative;

overflow: hidden;

}

.hero-content {

max-width: 800px;

margin: 0 auto;

padding: 20px;

z-index: 2;

}

.hero h1 {

font-size: 3.5rem;

margin-bottom: 20px;

color: var(--white);

opacity: 0;

transform: translateY(20px);

animation: fadeUp 1s forwards 0.5s;

}

.hero p {

font-size: 1.3rem;

margin-bottom: 30px;

opacity: 0;

transform: translateY(20px);

animation: fadeUp 1s forwards 0.8s;

}

.hero-btns {

display: flex;

justify-content: center;

gap: 20px;

opacity: 0;

transform: translateY(20px);

animation: fadeUp 1s forwards 1.1s;

}

.btn {

display: inline-block;

padding: 14px 32px;

border-radius: 30px;

text-decoration: none;

font-weight: 600;

font-size: 16px;

transition: var(--transition);

text-transform: uppercase;

letter-spacing: 1px;

border: none;

cursor: pointer;

}

.btn-primary {

background-color: var(--primary);

color: var(--white);

}

.btn-primary:hover {

background-color: #3a7a63;

transform: translateY(-3px);

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}

.btn-outline {

background-color: transparent;

color: var(--white);

border: 2px solid var(--white);

}

.btn-outline:hover {

background-color: var(--white);

color: var(--dark);

transform: translateY(-3px);

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}

/* Services Section */

.section {

padding: 100px 0;

}

.section-header {

text-align: center;

margin-bottom: 60px;

}

.section-title {

font-size: 2.5rem;

margin-bottom: 15px;

position: relative;

display: inline-block;

}

.section-title::after {

content: '';

position: absolute;

width: 70px;

height: 4px;

background-color: var(--primary);

bottom: -10px;

left: 50%;

transform: translateX(-50%);

}

.section-subtitle {

font-size: 1.2rem;

color: var(--gray);

max-width: 700px;

margin: 0 auto;

}

.services-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 30px;

}

.service-card {

background: var(--white);

border-radius: 10px;

overflow: hidden;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

transition: var(--transition);

text-align: center;

padding: 40px 25px;

border-top: 4px solid var(--primary);

}

.service-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

}

.service-icon {

font-size: 50px;

color: var(--primary);

margin-bottom: 20px;

}

.service-card h3 {

font-size: 1.5rem;

margin-bottom: 15px;

}

/* How It Works */

.how-it-works {

background-color: var(--light);

padding: 100px 0;

}

.steps-container {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 30px;

}

.step-card {

background: var(--white);

border-radius: 10px;

padding: 30px;

text-align: center;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

position: relative;

overflow: hidden;

}

.step-number {

position: absolute;

top: 15px;

left: 15px;

font-size: 3rem;

font-weight: 700;

color: rgba(78, 156, 129, 0.1);

z-index: 1;

}

.step-content {

position: relative;

z-index: 2;

}

.step-icon {

font-size: 48px;

color: var(--primary);

margin-bottom: 20px;

}

/* Testimonials */

.testimonials {

background-color: var(--dark);

color: var(--white);

padding: 100px 0;

}

.testimonials .section-title {

color: var(--white);

}

.testimonials .section-subtitle {

color: var(--accent);

}

.testimonial-slider {

max-width: 800px;

margin: 50px auto 0;

position: relative;

}

.testimonial-slide {

text-align: center;

padding: 30px;

opacity: 0;

transition: opacity 0.5s ease;

position: absolute;

width: 100%;

top: 0;

left: 0;

}

.testimonial-slide.active {

opacity: 1;

position: relative;

}

.quote-icon {

font-size: 50px;

color: var(--accent);

margin-bottom: 20px;

}

.testimonial-text {

font-size: 1.2rem;

font-style: italic;

margin-bottom: 30px;

}

.client-info {

display: flex;

flex-direction: column;

align-items: center;

}

.client-avatar {

width: 80px;

height: 80px;

border-radius: 50%;

overflow: hidden;

margin-bottom: 15px;

border: 3px solid var(--accent);

}

.client-avatar img {

width: 100%;

height: 100%;

object-fit: cover;

}

.client-name {

font-weight: 600;

font-size: 1.2rem;

margin-bottom: 5px;

}

.slider-nav {

display: flex;

justify-content: center;

margin-top: 40px;

}

.slider-dot {

width: 12px;

height: 12px;

border-radius: 50%;

background-color: var(--gray);

margin: 0 5px;

cursor: pointer;

transition: var(--transition);

}

.slider-dot.active {

background-color: var(--primary);

transform: scale(1.2);

}

/* Veterinarians Section */

.veterinarians {

background-color: var(--white);

}

.vet-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

gap: 30px;

}

.vet-card {

background: var(--white);

border-radius: 10px;

overflow: hidden;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

transition: var(--transition);

}

.vet-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

}

.vet-img {

height: 300px;

overflow: hidden;

}

.vet-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.vet-card:hover .vet-img img {

transform: scale(1.05);

}

.vet-content {

padding: 25px;

text-align: center;

}

.vet-name {

font-size: 1.5rem;

margin-bottom: 10px;

}

.vet-specialty {

color: var(--primary);

font-weight: 600;

margin-bottom: 15px;

}

.vet-social {

display: flex;

justify-content: center;

gap: 15px;

margin-top: 20px;

}

.social-link {

display: flex;

align-items: center;

justify-content: center;

width: 40px;

height: 40px;

border-radius: 50%;

background-color: var(--light);

color: var(--primary);

transition: var(--transition);

font-size: 18px;

}

.social-link:hover {

background-color: var(--primary);

color: var(--white);

transform: translateY(-3px);

}

/* Appointment Section */

.appointment {

background-color: var(--light);

padding: 100px 0;

}

.appointment-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 50px;

align-items: center;

}

.appointment-form {

background: var(--white);

padding: 40px;

border-radius: 10px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

}

.form-group {

margin-bottom: 20px;

}

.form-group label {

display: block;

margin-bottom: 8px;

font-weight: 600;

color: var(--dark);

}

.form-control {

width: 100%;

padding: 14px;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 16px;

transition: var(--transition);

}

.form-control:focus {

border-color: var(--primary);

outline: none;

box-shadow: 0 0 0 2px rgba(78, 156, 129, 0.2);

}

.form-row {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 15px;

}

.btn-block {

display: block;

width: 100%;

padding: 16px;

font-size: 18px;

}

.appointment-info {

display: flex;

flex-direction: column;

gap: 30px;

}

.info-box {

display: flex;

gap: 20px;

align-items: flex-start;

}

.info-icon {

font-size: 36px;

color: var(--primary);

min-width: 50px;

text-align: center;

}

.info-content h3 {

margin-bottom: 10px;

}

/* Contact Section */

.contact {

padding: 100px 0 0;

}

.map-container {

height: 500px;

border-radius: 10px;

overflow: hidden;

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

}

.map-container iframe {

width: 100%;

height: 100%;

border: none;

}

.location-info {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 30px;

margin-top: 50px;

}

.location-card {

display: flex;

gap: 15px;

align-items: center;

background: var(--white);

padding: 25px;

border-radius: 10px;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

transition: var(--transition);

}

.location-card:hover {

transform: translateY(-5px);

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

}

.location-icon {

font-size: 24px;

color: var(--primary);

min-width: 50px;

text-align: center;

}

/* Footer */

.footer {

background-color: var(--dark);

color: var(--white);

padding: 80px 0 0;

}

.footer-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 40px;

margin-bottom: 60px;

}

.footer-col h3 {

color: var(--white);

font-size: 1.5rem;

margin-bottom: 25px;

position: relative;

}

.footer-col h3::after {

content: '';

position: absolute;

width: 50px;

height: 3px;

background-color: var(--primary);

bottom: -10px;

left: 0;

}

.footer-about p {

margin-bottom: 20px;

}

.social-links {

display: flex;

gap: 15px;

margin-top: 20px;

}

.footer-links li {

list-style: none;

margin-bottom: 15px;

}

.footer-links a {

color: var(--accent);

text-decoration: none;

transition: var(--transition);

display: inline-flex;

align-items: center;

}

.footer-links a:hover {

color: var(--white);

transform: translateX(5px);

}

.footer-links a i {

margin-right: 10px;

font-size: 14px;

}

.footer-contact li {

list-style: none;

display: flex;

margin-bottom: 15px;

}

.footer-contact i {

color: var(--primary);

min-width: 25px;

margin-top: 5px;

}

.footer-bottom {

background-color: rgba(0, 0, 0, 0.2);

padding: 20px 0;

text-align: center;

}

.footer-bottom p {

font-size: 14px;

color: var(--accent);

}

/* Animations */

@keyframes fadeUp {

from {

opacity: 0;

transform: translateY(20px);

}

to {

opacity: 1;

transform: translateY(0);

}

.fade-in {

opacity: 0;

transform: translateY(20px);

transition: opacity 0.6s ease, transform 0.6s ease;

}

.fade-in.appear {

opacity: 1;

transform: translateY(0);

}

/* Responsive Design */

@media (max-width: 992px) {

.appointment-container {

grid-template-columns: 1fr;

}

.hero h1 {

font-size: 2.8rem;

}

.section {

padding: 70px 0;

}

@media (max-width: 768px) {

.top-info {

flex-direction: column;

gap: 10px;

}

.nav-links {

display: none;

position: absolute;

top: 100%;

left: 0;

width: 100%;

background: var(--white);

flex-direction: column;

padding: 20px 0;

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

}

.nav-links.active {

display: flex;

}

.nav-links li {

margin: 0;

padding: 10px 20px;

}

.nav-links li:hover {

background-color: var(--light);

}

.mobile-menu-btn {

display: block;

}

.hero h1 {

font-size: 2.2rem;

}

.hero p {

font-size: 1.1rem;

}

.hero-btns {

flex-direction: column;

align-items: center;

gap: 15px;

}

.btn {

width: 80%;

text-align: center;

}

.section-title {

font-size: 2rem;

}

.form-row {

grid-template-columns: 1fr;

}

@media (max-width: 576px) {

.footer-grid {

grid-template-columns: 1fr;

}

</style>

</head>

<body>

<span class="emergency"><i class="fas fa-phone-alt"></i> Acil Durum: (555) 123-4567</span>

</div>

<a href="#"><i class="fas fa-user"></i> Hasta Portali Girişi</a>

</div>

</div>

<li><a href="#home">Ana Sayfa</a></li>

<li><a href="#services">Hizmetlerimiz</a></li>

<li><a href="#veterinarians">Veterinerlerimiz</a></li>

<li><a href="#how-it-works">Nasıl Çalışır?</a></li>

<li><a href="#testimonials">Müşteri Yorumları</a></li>

<li><a href="#appointment">Randevu Al</a></li>

<li><a href="#contact">İletişim</a></li>

</ul>

</button>

</div>

</nav>

<h1>Evcil Dostlarınız İçin En İyi Bakım</h1>

<p>Deneyimli veteriner ekibimiz ve modern tesislerimizle evcil hayvanlarınıza sevgi dolu bir bakım sunuyoruz.</p>

<a href="#appointment" class="btn btn-primary">Randevu Al</a>

<a href="#services" class="btn btn-outline">Hizmetlerimiz</a>

</div>

</section>

<h2 class="section-title">Veteriner Hizmetlerimiz</h2>

<p class="section-subtitle">Evcil dostlarınız için kapsamlı sağlık hizmetleri sunuyoruz</p>

</div>

</div>

<h3>Genel Muayene</h3>

<p>Düzenli sağlık kontrolleri, aşılar ve koruyucu hekimlik hizmetleri.</p>

</div>

</div>

<h3>Aşı ve Tedavi</h3>

<p>Tüm koruyucu aşı programları ve hastalık tedavileri.</p>

</div>

</div>

<h3>Tanı Hizmetleri</h3>

<p>Röntgen, ultrason, kan testleri ve ileri tanı yöntemleri.</p>

</div>

</div>

<h3>Cerrahi Operasyonlar</h3>

<p>Kısırlaştırma, ortopedik cerrahi ve diğer operasyonel müdahaleler.</p>

</div>

</div>

<h3>Diş Bakımı</h3>

<p>Diş temizliği, çekim ve diğer ağız sağlığı hizmetleri.</p>

</div>

</div>

<h3>Fizik Tedavi</h3>

<p>Rehabilitasyon ve fizik tedavi hizmetleri.</p>

</div>

</section>

<h2 class="section-title">Nasıl Çalışır?</h2>

<p class="section-subtitle">PetCare ile evcil dostunuzun bakımı kolay ve güvenli</p>

</div>

</div>

<h3>Randevu Alın</h3>

<p>Web sitemiz, telefon veya mobil uygulamamız üzerinden kolayca randevu alın.</p>

</div>

</div>

<h3>Uzman Veterinerle Görüşün</h3>

<p>Deneyimli veterinerlerimiz evcil dostunuzu detaylı şekilde muayene eder.</p>

</div>

</div>

<h3>Sağlıklı Eve Dönüş</h3>

<p>Tedavi sonrası bakım önerileri ve takip randevuları ile süreci tamamlayın.</p>

</div>

</section>

<h2 class="section-title">Müşteri Yorumları</h2>

<p class="section-subtitle">Hastalarımızın PetCare deneyimleri</p>

</div>

</div>

<p class="testimonial-text">"Köpeğim Max'in acil ameliyat ihtiyacı vardı. PetCare ekibi gece yarısı hemen müdahale etti ve hayatını kurtardı. Profesyonellik ve ilgileri için minnettarız."</p>

</div>

<div class="client-name">Mehmet Yılmaz</div>

<div>Golden Retriever Sahibi</div>

</div>

</div>

<p class="testimonial-text">"Kedim Mırmır'ın diş sorunu vardı. Diş hekimliği ekibi çok ilgiliydi. Operasyon sonrası düzenli olarak arayıp kontrol ettiler. Kesinlikle tavsiye ediyorum."</p>

</div>

<div>British Shorthair Sahibi</div>

</div>

</div>

<p class="testimonial-text">"Yavru köpeğimiz için tüm aşı ve bakım programını PetCare ile yürütüyoruz. Bilgilendirmeleri ve yaklaşımları çok profesyonel. Herkese tavsiye ederim."</p>

</div>

<div class="client-name">Ali Demir</div>

<div>Labrador Sahibi</div>

</div>

</div>

</section>

<h2 class="section-title">Veteriner Ekibimiz</h2>

<p class="section-subtitle">Evcil dostlarınızı emanet edebileceğiniz uzman veterinerler</p>

</div>

</div>

<h3 class="vet-name">Dr. Ayşe Yılmaz</h3>

<div class="vet-specialty">Cerrahi Uzmanı</div>

<p>15 yıllık deneyimiyle ortopedik cerrahi ve acil müdahalelerde uzmanlaşmıştır.</p>

</div>

</div>

<h3 class="vet-name">Dr. Mehmet Kaya</h3>

<div class="vet-specialty">Dahiliye Uzmanı</div>

<p>İç hastalıkları ve tanı yöntemlerinde 12 yıllık deneyime sahiptir.</p>

</div>

</div>

<h3 class="vet-name">Dr. Zeynep Demir</h3>

<div class="vet-specialty">Diş Hekimliği Uzmanı</div>

<p>Evcil hayvan diş sağlığı ve ağız cerrahisinde uzmanlaşmıştır.</p>

</div>

</section>

<h2 class="section-title">Randevu Alın</h2>

<p class="section-subtitle">Evcil dostunuz için uzman veterinerlerimizden randevu alın</p>

</div>

<label for="name">Adınız Soyadınız</label>

</div>

<label for="email">E-posta Adresiniz</label>

</div>

<label for="phone">Telefon Numaranız</label>

</div>

<label for="date">Tercih Edilen Tarih</label>

</div>

<label for="pet-type">Evcil Hayvan Türü</label>

<option value="">Seçiniz</option>

<option value="dog">Köpek</option>

<option value="other">Diğer</option>

</select>

</div>

<label for="service">Hizmet Türü</label>

<option value="">Seçiniz</option>

<option value="checkup">Genel Muayene</option>

<option value="surgery">Cerrahi Operasyon</option>

<option value="dental">Diş Bakımı</option>

<option value="emergency">Acil Müdahale</option>

</select>

</div>

<label for="message">Ek Bilgiler</label>

</div>

<button type="submit" class="btn btn-primary btn-block">Randevu Talebi Gönder</button>

</form>

</div>

</div>

<h3>Çalışma Saatleri</h3>

<p>Pazartesi - Cuma: 9:00 - 18:00</p>

<p>Cumartesi: 10:00 - 14:00</p>

<p>Acil Durumlar: 24/7</p>

</div>

</div>

<h3>İletişim Bilgileri</h3>

<p><strong>Telefon:</strong> (555) 123-4567</p>

<p><strong>Acil Durum:</strong> (555) 123-4568</p>

<p><strong>E-posta:</strong> info@petcare.com</p>

</div>

</div>

<h3>Randevu Öncesi</h3>

<p>• Evcil hayvanınızın geçmiş sağlık kayıtları</p>

<p>• Kullandığı ilaçların listesi</p>

<p>• Özel diyet veya alışkanlık bilgileri</p>

</div>

</section>

<h2 class="section-title">Bize Ulaşın</h2>

<p class="section-subtitle">Kliniğimizi ziyaret edin veya iletişime geçin</p>

</div>

</div>

</div>

<div>

<h3>Adres</h3>

<p>Örnek Mah. Veteriner Cad. No:123, Bursa</p>

</div>

</div>

<div>

<h3>Telefon</h3>

</div>

</div>

<div>

<h3>Çalışma Saatleri</h3>

</div>

</div>

<div>

<h3>Otopark</h3>

<p>Kliniğimizde müşterilerimiz için ücretsiz otopark</p>

</div>

</section>

<h3>PetCare Hakkında</h3>

<p>PetCare Veteriner Kliniği, evcil dostlarınızın sağlığı için modern ekipmanlar ve deneyimli veterinerlerle hizmet vermektedir. Sevgi dolu ve profesyonel yaklaşımımızla evcil hayvanlarınıza en iyi bakımı sunuyoruz.</p>

</div>

<h3>Hızlı Erişim</h3>

<li><a href="#home"><i class="fas fa-chevron-right"></i> Ana Sayfa</a></li>

<li><a href="#services"><i class="fas fa-chevron-right"></i> Hizmetlerimiz</a></li>

<li><a href="#veterinarians"><i class="fas fa-chevron-right"></i> Veterinerlerimiz</a></li>

<li><a href="#appointment"><i class="fas fa-chevron-right"></i> Randevu Al</a></li>

<li><a href="#contact"><i class="fas fa-chevron-right"></i> İletişim</a></li>

</ul>

</div>

<h3>Hizmetler</h3>

<li><a href="#"><i class="fas fa-chevron-right"></i> Genel Muayene</a></li>

<li><a href="#"><i class="fas fa-chevron-right"></i> Aşı ve Tedavi</a></li>

<li><a href="#"><i class="fas fa-chevron-right"></i> Cerrahi Operasyonlar</a></li>

<li><a href="#"><i class="fas fa-chevron-right"></i> Diş Bakımı</a></li>

<li><a href="#"><i class="fas fa-chevron-right"></i> Fizik Tedavi</a></li>

</ul>

</div>

<h3>İletişim</h3>

<li><i class="fas fa-map-marker-alt"></i> Örnek Mah. Veteriner Cad. No:123, Bursa</li>

<li><i class="fas fa-envelope"></i> info@petcare.com</li>

</ul>

</div>

</div>

</footer>

// Mobile Menu Toggle

const mobileMenuBtn = document.querySelector('.mobile-menu-btn');

const navLinks = document.querySelector('.nav-links');

mobileMenuBtn.addEventListener('click', () => {

navLinks.classList.toggle('active');

});

// Testimonial Slider

const slides = document.querySelectorAll('.testimonial-slide');

const dots = document.querySelectorAll('.slider-dot');

let currentSlide = 0;

function showSlide(n) {

slides.forEach(slide => slide.classList.remove('active'));

dots.forEach(dot => dot.classList.remove('active'));

currentSlide = (n + slides.length) % slides.length;

slides[currentSlide].classList.add('active');

dots[currentSlide].classList.add('active');

}

dots.forEach((dot, index) => {

dot.addEventListener('click', () => {

showSlide(index);

});

// Auto slide

setInterval(() => {

showSlide(currentSlide + 1);

}, 5000);

// Fade-in Animation on Scroll

const fadeElements = document.querySelectorAll('.fade-in');

const appearOptions = {

threshold: 0.15,

rootMargin: "0px 0px -50px 0px"

};

const appearOnScroll = new IntersectionObserver((entries, appearOnScroll) => {

entries.forEach(entry => {

if (!entry.isIntersecting) {

return;

} else {

entry.target.classList.add('appear');

appearOnScroll.unobserve(entry.target);

}

});

}, appearOptions);

fadeElements.forEach(fader => {

appearOnScroll.observe(fader);

});

// Form Validation

const bookingForm = document.getElementById('bookingForm');

bookingForm.addEventListener('submit', (e) => {

e.preventDefault();

// Simple validation

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const phone = document.getElementById('phone').value;

const date = document.getElementById('date').value;

const service = document.getElementById('service').value;

if (name && email && phone && date && service !== '') {

// Form is valid, show success message

alert('Randevu talebiniz alınmıştır! En kısa sürede sizinle iletişime geçilecektir.');

bookingForm.reset();

} else {

alert('Lütfen tüm gerekli alanları doldurun.');

}

});

// Smooth Scrolling for Anchor Links

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function(e) {

e.preventDefault();

const target = document.querySelector(this.getAttribute('href'));

if (target) {

window.scrollTo({

top: target.offsetTop - 80,

behavior: 'smooth'

});

// Close mobile menu if open

navLinks.classList.remove('active');

}

});

</script>

</body>

</html>

Mete'nin bir kodu

Recommended

HTML Light Effects Container with CSS

HTML Neuron Animation Snippet

Like button

HTML

CSS

JS

Recommended

HTML Light Effects Container with CSS

HTML Neuron Animation Snippet

Like button

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS