Webleb - fragmentos de código - Un código de Mete

HTML

<!DOCTYPE html>

<head>

<title>Nova Gym | Sağlıklı Yaşamın Adresi</title>

<style>

:root {

--primary: #ff5722;

--secondary: #1a2a36;

--accent: #4caf50;

--light: #f8f9fa;

--dark: #212529;

--transition: all 0.4s ease;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background-color: var(--light);

color: var(--dark);

overflow-x: hidden;

line-height: 1.6;

}

a {

text-decoration: none;

color: inherit;

}

.container {

width: 100%;

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

/* Header Styles */

header {

background-color: var(--secondary);

position: fixed;

width: 100%;

top: 0;

z-index: 1000;

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

}

.header-container {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px 0;

}

.logo {

display: flex;

align-items: center;

}

.logo img {

height: 50px;

}

.logo-text {

font-size: 24px;

font-weight: 700;

color: white;

margin-left: 10px;

}

.logo-text span {

color: var(--primary);

}

nav ul {

display: flex;

list-style: none;

}

nav ul li {

margin: 0 15px;

position: relative;

}

nav ul li a {

color: white;

font-weight: 500;

padding: 8px 0;

position: relative;

transition: var(--transition);

}

nav ul li a:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 2px;

background: var(--primary);

transition: var(--transition);

}

nav ul li a:hover:after,

nav ul li a.active:after {

width: 100%;

}

.nav-buttons {

display: flex;

align-items: center;

}

.btn {

padding: 10px 25px;

border-radius: 30px;

font-weight: 600;

transition: var(--transition);

text-align: center;

display: inline-block;

cursor: pointer;

}

.btn-primary {

background: var(--primary);

color: white;

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

}

.btn-outline {

background: transparent;

color: white;

border: 2px solid white;

margin-left: 15px;

}

.btn:hover {

transform: translateY(-3px);

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

}

.mobile-menu-btn {

display: none;

background: transparent;

border: none;

color: white;

font-size: 24px;

cursor: pointer;

}

/* Modal Styles */

.modal {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.7);

z-index: 2000;

justify-content: center;

align-items: center;

}

.modal-content {

background: white;

border-radius: 10px;

width: 100%;

max-width: 500px;

padding: 30px;

position: relative;

animation: modalOpen 0.5s;

}

@keyframes modalOpen {

from { opacity: 0; transform: translateY(-50px); }

to { opacity: 1; transform: translateY(0); }

}

.close-modal {

position: absolute;

top: 15px;

right: 15px;

font-size: 24px;

cursor: pointer;

color: #666;

}

.modal h2 {

text-align: center;

margin-bottom: 20px;

color: var(--secondary);

}

.form-group {

margin-bottom: 20px;

}

.form-group label {

display: block;

margin-bottom: 8px;

font-weight: 500;

}

.form-group input,

.form-group select {

width: 100%;

padding: 12px 15px;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 16px;

}

.form-group input:focus,

.form-group select:focus {

border-color: var(--primary);

outline: none;

}

.form-row {

display: flex;

gap: 15px;

}

.form-row .form-group {

flex: 1;

}

.submit-btn {

width: 100%;

padding: 12px;

background: var(--primary);

color: white;

border: none;

border-radius: 5px;

font-size: 16px;

font-weight: 600;

cursor: pointer;

transition: var(--transition);

}

.submit-btn:hover {

background: #e64a19;

}

/* Hero Section */

.hero {

height: 100vh;

background: linear-gradient(rgba(26, 42, 54, 0.8), rgba(26, 42, 54, 0.8)), url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;

display: flex;

align-items: center;

color: white;

padding-top: 80px;

}

.hero-content {

max-width: 650px;

}

.hero h1 {

font-size: 3.5rem;

line-height: 1.2;

margin-bottom: 20px;

}

.hero h1 span {

color: var(--primary);

}

.hero p {

font-size: 1.2rem;

margin-bottom: 30px;

opacity: 0.9;

}

.hero-buttons {

display: flex;

gap: 20px;

}

.hero-buttons .btn-outline {

border-color: var(--primary);

color: var(--primary);

}

/* Features Section */

.features {

padding: 100px 0;

background: white;

}

.section-header {

text-align: center;

margin-bottom: 60px;

}

.section-header h2 {

font-size: 2.5rem;

color: var(--secondary);

margin-bottom: 15px;

}

.section-header p {

color: #666;

max-width: 700px;

margin: 0 auto;

}

.features-grid {

display: grid;

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

gap: 30px;

}

.feature-card {

background: 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 30px;

}

.feature-card:hover {

transform: translateY(-10px);

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

}

.feature-icon {

width: 80px;

height: 80px;

background: rgba(255, 87, 34, 0.1);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

margin: 0 auto 20px;

}

.feature-icon i {

font-size: 36px;

color: var(--primary);

}

.feature-card h3 {

font-size: 1.5rem;

margin-bottom: 15px;

color: var(--secondary);

}

/* Classes Section */

.classes {

padding: 100px 0;

background: linear-gradient(to bottom, #f8f9fa, #e9ecef);

}

.classes-container {

display: grid;

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

gap: 30px;

}

.class-card {

background: white;

border-radius: 10px;

overflow: hidden;

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

transition: var(--transition);

}

.class-card:hover {

transform: translateY(-10px);

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

}

.class-img {

height: 250px;

overflow: hidden;

}

.class-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.class-card:hover .class-img img {

transform: scale(1.1);

}

.class-content {

padding: 25px;

}

.class-content h3 {

font-size: 1.5rem;

margin-bottom: 10px;

color: var(--secondary);

}

.class-meta {

display: flex;

justify-content: space-between;

margin-bottom: 15px;

color: #666;

font-size: 0.9rem;

}

.class-meta div {

display: flex;

align-items: center;

}

.class-meta i {

margin-right: 5px;

color: var(--primary);

}

.class-content p {

margin-bottom: 20px;

color: #555;

}

.class-price {

display: flex;

justify-content: space-between;

align-items: center;

}

.price {

font-size: 1.5rem;

font-weight: 700;

color: var(--primary);

}

/* Trainers Section */

.trainers {

padding: 100px 0;

background: white;

}

.trainers-container {

display: grid;

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

gap: 30px;

}

.trainer-card {

background: white;

border-radius: 10px;

overflow: hidden;

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

transition: var(--transition);

text-align: center;

}

.trainer-card:hover {

transform: translateY(-10px);

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

}

.trainer-img {

height: 300px;

overflow: hidden;

}

.trainer-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.trainer-card:hover .trainer-img img {

transform: scale(1.1);

}

.trainer-info {

padding: 25px;

}

.trainer-info h3 {

font-size: 1.5rem;

margin-bottom: 5px;

color: var(--secondary);

}

.trainer-role {

color: var(--primary);

font-weight: 600;

margin-bottom: 15px;

}

.trainer-social {

display: flex;

justify-content: center;

gap: 15px;

margin-top: 15px;

}

.trainer-social a {

width: 36px;

height: 36px;

border-radius: 50%;

background: #f0f0f0;

display: flex;

align-items: center;

justify-content: center;

color: var(--secondary);

transition: var(--transition);

}

.trainer-social a:hover {

background: var(--primary);

color: white;

}

/* Membership Section */

.membership {

padding: 100px 0;

background: linear-gradient(to bottom, #e9ecef, #f8f9fa);

}

.pricing-container {

display: grid;

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

gap: 30px;

}

.pricing-card {

background: white;

border-radius: 10px;

overflow: hidden;

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

transition: var(--transition);

text-align: center;

position: relative;

padding: 40px 30px;

}

.pricing-card.popular {

transform: scale(1.05);

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

}

.popular-tag {

position: absolute;

top: 15px;

right: -30px;

background: var(--primary);

color: white;

padding: 5px 40px;

transform: rotate(45deg);

font-size: 0.8rem;

font-weight: 600;

}

.pricing-card h3 {

font-size: 1.8rem;

margin-bottom: 10px;

color: var(--secondary);

}

.price-amount {

font-size: 2.5rem;

font-weight: 700;

color: var(--primary);

margin-bottom: 25px;

}

.price-amount span {

font-size: 1rem;

color: #666;

font-weight: normal;

}

.features-list {

list-style: none;

margin-bottom: 30px;

text-align: left;

}

.features-list li {

padding: 10px 0;

border-bottom: 1px solid #eee;

display: flex;

align-items: center;

}

.features-list li i {

color: var(--accent);

margin-right: 10px;

}

/* Testimonials Section */

.testimonials {

padding: 100px 0;

background: var(--secondary);

color: white;

}

.testimonials .section-header h2,

.testimonials .section-header p {

color: white;

}

.testimonials-container {

max-width: 800px;

margin: 0 auto;

}

.testimonial-card {

background: rgba(255, 255, 255, 0.05);

border-radius: 10px;

padding: 30px;

margin: 30px 0;

position: relative;

}

.testimonial-card:before {

content: '"';

position: absolute;

top: 10px;

left: 20px;

font-size: 4rem;

color: rgba(255, 255, 255, 0.1);

font-family: Georgia, serif;

}

.testimonial-content {

margin-bottom: 20px;

font-style: italic;

}

.testimonial-author {

display: flex;

align-items: center;

}

.author-img {

width: 60px;

height: 60px;

border-radius: 50%;

overflow: hidden;

margin-right: 15px;

}

.author-img img {

width: 100%;

height: 100%;

object-fit: cover;

}

.author-info h4 {

font-size: 1.2rem;

margin-bottom: 5px;

}

.author-info p {

color: #aaa;

font-size: 0.9rem;

}

/* CTA Section */

.cta {

padding: 100px 0;

background: linear-gradient(rgba(26, 42, 54, 0.9), rgba(26, 42, 54, 0.9)), url('https://images.unsplash.com/photo-1549060279-7e168fce7090?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;

text-align: center;

color: white;

}

.cta h2 {

font-size: 2.5rem;

margin-bottom: 20px;

}

.cta p {

max-width: 700px;

margin: 0 auto 30px;

opacity: 0.9;

}

.cta-buttons {

display: flex;

justify-content: center;

gap: 20px;

}

/* Contact Section */

.contact {

padding: 100px 0;

background: white;

}

.contact-container {

display: grid;

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

gap: 40px;

}

.contact-info {

padding: 30px;

background: var(--secondary);

color: white;

border-radius: 10px;

}

.contact-info h3 {

font-size: 1.8rem;

margin-bottom: 25px;

position: relative;

padding-bottom: 15px;

}

.contact-info h3:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 50px;

height: 3px;

background: var(--primary);

}

.contact-details {

list-style: none;

margin-top: 20px;

}

.contact-details li {

margin-bottom: 20px;

display: flex;

align-items: flex-start;

}

.contact-details i {

color: var(--primary);

font-size: 20px;

margin-right: 15px;

min-width: 25px;

}

.contact-details .text {

flex: 1;

}

.contact-details h4 {

font-size: 1.1rem;

margin-bottom: 5px;

}

.contact-form {

padding: 30px;

background: #f8f9fa;

border-radius: 10px;

}

.contact-form h3 {

font-size: 1.8rem;

margin-bottom: 25px;

position: relative;

padding-bottom: 15px;

color: var(--secondary);

}

.contact-form h3:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 50px;

height: 3px;

background: var(--primary);

}

/* Footer */

footer {

background: var(--secondary);

color: #aaa;

padding: 70px 0 0;

}

.footer-container {

display: grid;

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

gap: 40px;

}

.footer-col h3 {

color: white;

font-size: 1.5rem;

margin-bottom: 25px;

position: relative;

}

.footer-col h3:after {

content: '';

position: absolute;

bottom: -10px;

left: 0;

width: 50px;

height: 2px;

background: var(--primary);

}

.footer-about p {

margin-bottom: 20px;

}

.social-links {

display: flex;

gap: 15px;

}

.social-links a {

width: 40px;

height: 40px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.1);

display: flex;

align-items: center;

justify-content: center;

transition: var(--transition);

}

.social-links a:hover {

background: var(--primary);

color: white;

}

.footer-links {

list-style: none;

}

.footer-links li {

margin-bottom: 12px;

}

.footer-links a {

transition: var(--transition);

display: flex;

align-items: center;

}

.footer-links a i {

margin-right: 8px;

color: var(--primary);

font-size: 0.8rem;

}

.footer-links a:hover {

color: white;

transform: translateX(5px);

}

.hours-info {

list-style: none;

}

.hours-info li {

display: flex;

justify-content: space-between;

margin-bottom: 10px;

padding-bottom: 10px;

border-bottom: 1px dashed rgba(255, 255, 255, 0.1);

}

.copyright {

text-align: center;

padding: 30px 0;

margin-top: 50px;

border-top: 1px solid rgba(255, 255, 255, 0.1);

}

/* Responsive */

@media (max-width: 992px) {

.hero h1 {

font-size: 3rem;

}

.section-header h2 {

font-size: 2.2rem;

}

@media (max-width: 768px) {

.mobile-menu-btn {

display: block;

}

nav {

position: fixed;

top: 80px;

left: -100%;

background: var(--secondary);

width: 100%;

height: calc(100vh - 80px);

transition: var(--transition);

z-index: 999;

padding: 30px;

overflow-y: auto;

}

nav.active {

left: 0;

}

nav ul {

flex-direction: column;

}

nav ul li {

margin: 15px 0;

}

.hero h1 {

font-size: 2.5rem;

}

.hero-buttons {

flex-direction: column;

}

.hero-buttons .btn {

width: 100%;

margin-bottom: 10px;

}

.pricing-card.popular {

transform: scale(1);

}

.cta-buttons {

flex-direction: column;

}

.cta-buttons .btn {

width: 100%;

}

@media (max-width: 576px) {

.hero h1 {

font-size: 2rem;

}

.section-header h2 {

font-size: 1.8rem;

}

.modal-content {

padding: 20px;

margin: 0 15px;

}

</style>

</head>

<body>

</div>

<ul>

<li><a href="#" class="active">Ana Sayfa</a></li>

<li><a href="#">Hakkımızda</a></li>

<li><a href="#">Programlar</a></li>

<li><a href="#">Eğitmenler</a></li>

<li><a href="#">Fiyatlar</a></li>

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

</ul>

</nav>

</button>

</div>

</header>

<h2>Üyelik Formu</h2>

</div>

<label for="last-name">Soyad</label>

</div>

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

</div>

<label for="phone">Telefon</label>

</div>

<label for="membership">Üyelik Türü</label>

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

<option value="basic">Başlangıç (₺199/ay)</option>

<option value="pro">Profesyonel (₺349/ay)</option>

<option value="premium">Premium (₺499/ay)</option>

</select>

</div>

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

</div>

<button type="submit" class="submit-btn">Gönder</button>

</form>

</div>

<h1>Sağlıklı Yaşamın <span>Yeni Adresi</span></h1>

<p>Profesyonel eğitmenler, modern ekipmanlar ve kişiye özel programlarla hedeflerinize ulaşmanızı sağlıyoruz. Hayalinizdeki vücuda kavuşmak için ilk adımı bugün atın!</p>

<a href="#" class="btn btn-primary" id="hero-signup">Ücretsiz Deneme</a>

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

</div>

</section>

<h2>Neden Bizi Seçmelisiniz?</h2>

<p>Modern tesislerimiz, uzman eğitmen kadromuz ve kişiye özel yaklaşımımızla fitness yolculuğunuzda yanınızdayız.</p>

</div>

</div>

<h3>Modern Ekipmanlar</h3>

<p>Son teknoloji fitness ekipmanları ile en verimli antrenman deneyimini yaşayın.</p>

</div>

</div>

<h3>Uzman Eğitmenler</h3>

<p>Sertifikalı ve deneyimli eğitmenlerimizle kişisel hedeflerinize ulaşın.</p>

</div>

</div>

<h3>Kişiye Özel Program</h3>

<p>Vücut tipinize ve hedeflerinize uygun özel programlar ile maksimum verim alın.</p>

</div>

</section>

<h2>Popüler Sınıflarımız</h2>

<p>Çeşitli fitness sınıflarımızla kendinize en uygun antrenmanı seçin ve motive bir şekilde çalışın.</p>

</div>

</div>

<h3>CrossFit</h3>

<div><i class="far fa-clock"></i> 60 Dakika</div>

</div>

<p>Yüksek yoğunluklu fonksiyonel antrenmanlarla tüm vücudunuzu çalıştırın.</p>

<a href="#" class="btn btn-primary">Detaylar</a>

</div>

</div>

<h3>Yoga & Pilates</h3>

<div><i class="far fa-clock"></i> 45 Dakika</div>

</div>

<p>Esnekliğinizi artırın, zihninizi sakinleştirin ve bedeninizi güçlendirin.</p>

<a href="#" class="btn btn-primary">Detaylar</a>

</div>

</div>

<h3>Kişisel Antrenman</h3>

<div><i class="far fa-clock"></i> 60 Dakika</div>

</div>

<p>Kişisel eğitmen eşliğinde hedeflerinize özel tasarlanmış antrenman programı.</p>

<a href="#" class="btn btn-primary">Detaylar</a>

</div>

</section>

<h2>Uzman Eğitmen Kadromuz</h2>

<p>Deneyimli ve sertifikalı eğitmenlerimizle fitness hedeflerinize güvenle ilerleyin.</p>

</div>

</div>

<h3>Ahmet Yılmaz</h3>

<div class="trainer-role">Fitness Eğitmeni</div>

<p>15 yıllık deneyimi ile vücut geliştirme ve fonksiyonel antrenman uzmanı.</p>

</div>

</div>

<h3>Zeynep Kaya</h3>

<div class="trainer-role">Yoga Eğitmeni</div>

<p>10 yıldır yoga ve meditasyon ile binlerce kişinin yaşam kalitesini artırdı.</p>

</div>

</div>

<h3>Mehmet Demir</h3>

<div class="trainer-role">CrossFit Eğitmeni</div>

<p>Uluslararası CrossFit yarışmalarında dereceleri olan deneyimli eğitmen.</p>

</div>

</section>

<h2>Üyelik Paketlerimiz</h2>

<p>Bütçenize ve ihtiyaçlarınıza uygun üyelik seçenekleri ile fitness yolculuğunuza başlayın.</p>

</div>

<h3>Başlangıç</h3>

<li><i class="fas fa-check"></i> Sınırsız Genel Alan</li>

<li><i class="fas fa-check"></i> Grup Dersleri</li>

<li><i class="fas fa-times"></i> Kişisel Antrenman</li>

<li><i class="fas fa-times"></i> Beslenme Danışmanlığı</li>

<li><i class="fas fa-times"></i> Sporcu Havuzu</li>

</ul>

</div>

<div class="popular-tag">POPÜLER</div>

<h3>Profesyonel</h3>

<li><i class="fas fa-check"></i> Sınırsız Genel Alan</li>

<li><i class="fas fa-check"></i> Tüm Grup Dersleri</li>

<li><i class="fas fa-check"></i> 4 Kişisel Antrenman</li>

<li><i class="fas fa-check"></i> Beslenme Danışmanlığı</li>

<li><i class="fas fa-times"></i> Sporcu Havuzu</li>

</ul>

</div>

<h3>Premium</h3>

<li><i class="fas fa-check"></i> Sınırsız Genel Alan</li>

<li><i class="fas fa-check"></i> Tüm Grup Dersleri</li>

<li><i class="fas fa-check"></i> 8 Kişisel Antrenman</li>

<li><i class="fas fa-check"></i> Beslenme Danışmanlığı</li>

<li><i class="fas fa-check"></i> Sporcu Havuzu</li>

</ul>

</div>

</section>

<h2>Üyelerimizin Yorumları</h2>

<p>Nova Gym ailesine katılan üyelerimizin deneyimlerini okuyun</p>

</div>

Nova Gym'e başladığımda 15 kilo fazlam vardı. Uzman eğitmenlerin desteği ve kişiye özel programla 6 ayda hedefime ulaştım. Artık daha enerjik ve mutluyum!

</div>

</div>

<h4>Ayşe Yıldız</h4>

<p>6 Aydır Üye</p>

</div>

CrossFit dersleri sayesinde hem fiziksel gücüm arttı hem de mental olarak kendimi daha disiplinli hissediyorum. Eğitmenlerin motivasyonu ve samimiyeti gerçekten fark yaratıyor.

</div>

</div>

<h4>Mehmet Öztürk</h4>

<p>1 Yıldır Üye</p>

</div>

</section>

<h2>Hedeflerinize Ulaşmaya Hazır Mısınız?</h2>

<p>Nova Gym ailesine katılın ve sağlıklı yaşam yolculuğunuza profesyonel destekle başlayın. İlk antrenmanınız bizden!</p>

<a href="#" class="btn btn-primary" id="cta-signup">Ücretsiz Deneme Dersi</a>

<a href="#contact" class="btn btn-outline">İletişime Geçin</a>

</div>

</section>

<h2>İletişim</h2>

<p>Bize ulaşın, sorularınızı yanıtlamaktan mutluluk duyarız.</p>

</div>

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

<li>

<h4>Adres</h4>

<p>Levent Mah. Spor Cad. No:123 Beşiktaş/İstanbul</p>

</div>

</li>

<li>

<h4>Telefon</h4>

</div>

</li>

<li>

<h4>E-posta</h4>

<p>info@novagym.com</p>

</div>

</li>

<li>

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

<p>Pazartesi-Cuma: 06:00 - 23:00<br>

Cumartesi: 08:00 - 21:00<br>

Pazar: 09:00 - 20:00</p>

</div>

</li>

</ul>

</div>

<h3>Bize Mesaj Gönderin</h3>

<form>

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

</div>

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

</div>

</div>

<label for="contact-message">Mesajınız</label>

</div>

<button type="submit" class="submit-btn">Gönder</button>

</form>

</div>

</section>

<p>Sağlıklı yaşamı herkes için erişilebilir kılmak misyonuyla 2010 yılından beri hizmet veriyoruz. Modern tesislerimiz ve uzman ekibimizle size en iyi fitness deneyimini sunuyoruz.</p>

</div>

<h3>Hızlı Linkler</h3>

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

<li><a href="#"><i class="fas fa-chevron-right"></i> Hakkımızda</a></li>

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

<li><a href="#"><i class="fas fa-chevron-right"></i> Eğitmenler</a></li>

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

</ul>

</div>

<h3>İletişim</h3>

<li><i class="fas fa-map-marker-alt"></i> <span>Levent Mah. Spor Cad. No:123 Beşiktaş/İstanbul</span></li>

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

</ul>

</div>

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

<li><span>Pazartesi-Cuma</span> <span>06:00 - 23:00</span></li>

<li><span>Cumartesi</span> <span>08:00 - 21:00</span></li>

<li><span>Pazar</span> <span>09:00 - 20:00</span></li>

<li><span>Resmi Tatiller</span> <span>10:00 - 18:00</span></li>

</ul>

</div>

</div>

</footer>

// Mobile Menu Toggle

const mobileMenuBtn = document.getElementById('mobile-menu-toggle');

const nav = document.getElementById('mobile-nav');

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

nav.classList.toggle('active');

});

// Close mobile menu when clicking on a link

const navLinks = document.querySelectorAll('nav ul li a');

navLinks.forEach(link => {

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

nav.classList.remove('active');

});

// Modal functionality

const signupModal = document.getElementById('signup-modal');

const signupBtn = document.getElementById('signup-btn');

const heroSignupBtn = document.getElementById('hero-signup');

const ctaSignupBtn = document.getElementById('cta-signup');

const closeModal = document.getElementById('close-modal');

// Open modal

signupBtn.addEventListener('click', (e) => {

e.preventDefault();

signupModal.style.display = 'flex';

});

heroSignupBtn.addEventListener('click', (e) => {

e.preventDefault();

signupModal.style.display = 'flex';

});

ctaSignupBtn.addEventListener('click', (e) => {

e.preventDefault();

signupModal.style.display = 'flex';

});

// Close modal

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

signupModal.style.display = 'none';

});

// Close modal when clicking outside

window.addEventListener('click', (e) => {

if (e.target === signupModal) {

signupModal.style.display = 'none';

}

});

// Form submission

const signupForm = document.getElementById('signup-form');

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

e.preventDefault();

alert('Üyelik formunuz başarıyla gönderildi! Sizinle en kısa sürede iletişime geçeceğiz.');

signupForm.reset();

signupModal.style.display = 'none';

});

// Sticky header effect

window.addEventListener('scroll', () => {

const header = document.querySelector('header');

header.classList.toggle('sticky', window.scrollY > 100);

});

// Animation on scroll

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

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

}

});

}, {

threshold: 0.1

});

const hiddenElements = document.querySelectorAll('.feature-card, .class-card, .trainer-card, .pricing-card');

hiddenElements.forEach(el => {

el.classList.add('hidden');

observer.observe(el);

});

</script>

</body>

</html>

Un código de Mete

Recomendado

máquina de garra

Formulario de inicio de sesión

Tarjetas de profundidad de paralaje

HTML

CSS

JS

Recomendado

máquina de garra

Formulario de inicio de sesión

Tarjetas de profundidad de paralaje

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS