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

Bad Parenting

CSS Animation: Ghost Memory Fragment Effect

Creative HTML Portfolio Template

HTML

CSS

JS

Recommended

Bad Parenting

CSS Animation: Ghost Memory Fragment Effect

Creative HTML Portfolio Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS