Webleb - Code-Snippets

HTML

<!DOCTYPE html>

<head>

<title>Power Gym - Premium Fitness Center</title>

<style>

:root {

--primary: #0d0d0d;

--secondary: #bfe300;

--accent: #e74c3c;

--light: #f5f5f5;

--dark: #1a1a1a;

--gray: #333;

--transition: all 0.3s ease;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

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

background-color: var(--dark);

color: var(--light);

line-height: 1.6;

overflow-x: hidden;

}

a {

text-decoration: none;

color: inherit;

transition: var(--transition);

}

ul {

list-style: none;

}

.container {

width: 100%;

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

.btn {

display: inline-block;

padding: 12px 28px;

background: var(--secondary);

color: var(--dark);

border: none;

border-radius: 4px;

font-weight: 600;

text-transform: uppercase;

letter-spacing: 1px;

cursor: pointer;

transition: var(--transition);

}

.btn:hover {

background: #d0f03c;

transform: translateY(-3px);

box-shadow: 0 5px 15px rgba(191, 227, 0, 0.4);

}

.section-title {

text-align: center;

margin-bottom: 50px;

position: relative;

}

.section-title h2 {

font-size: 2.5rem;

text-transform: uppercase;

color: var(--light);

margin-bottom: 15px;

}

.section-title h2 span {

color: var(--secondary);

}

.section-title .divider {

width: 80px;

height: 4px;

background: var(--secondary);

margin: 0 auto;

}

/* Header Styles */

header {

background-color: rgba(13, 13, 13, 0.95);

position: fixed;

width: 100%;

z-index: 1000;

padding: 15px 0;

border-bottom: 1px solid rgba(191, 227, 0, 0.1);

backdrop-filter: blur(10px);

}

.header-container {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

display: flex;

align-items: center;

}

.logo h1 {

font-size: 1.8rem;

font-weight: 700;

text-transform: uppercase;

color: var(--light);

}

.logo h1 span {

color: var(--secondary);

}

nav ul {

display: flex;

gap: 30px;

}

nav ul li a {

font-weight: 500;

position: relative;

padding: 5px 0;

}

nav ul li a:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 2px;

background: var(--secondary);

transition: var(--transition);

}

nav ul li a:hover:after,

nav ul li a.active:after {

width: 100%;

}

.mobile-toggle {

display: none;

font-size: 1.5rem;

cursor: pointer;

}

/* Hero Section */

.hero {

height: 100vh;

background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;

display: flex;

align-items: center;

position: relative;

}

.hero-content {

max-width: 650px;

padding: 20px;

}

.hero-content h2 {

font-size: 3.5rem;

line-height: 1.2;

margin-bottom: 20px;

text-transform: uppercase;

}

.hero-content h2 span {

color: var(--secondary);

display: block;

}

.hero-content p {

font-size: 1.1rem;

margin-bottom: 30px;

opacity: 0.9;

}

.hero-stats {

display: flex;

gap: 30px;

margin-top: 40px;

}

.stat-item {

text-align: center;

}

.stat-item .number {

font-size: 2.5rem;

font-weight: 700;

color: var(--secondary);

margin-bottom: 5px;

}

.stat-item .label {

font-size: 0.9rem;

text-transform: uppercase;

letter-spacing: 1px;

}

/* About Section */

.about {

padding: 100px 0;

background: linear-gradient(to bottom, var(--dark), var(--primary));

}

.about-content {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 50px;

align-items: center;

}

.about-img {

position: relative;

border-radius: 8px;

overflow: hidden;

box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);

}

.about-img img {

width: 100%;

display: block;

}

.about-text h3 {

font-size: 2rem;

margin-bottom: 20px;

color: var(--light);

}

.about-text h3 span {

color: var(--secondary);

}

.about-text p {

margin-bottom: 20px;

opacity: 0.9;

}

.about-features {

margin: 30px 0;

}

.feature-item {

display: flex;

align-items: center;

margin-bottom: 15px;

}

.feature-item i {

color: var(--secondary);

margin-right: 15px;

font-size: 1.2rem;

}

/* Services Section */

.services {

padding: 100px 0;

background-color: var(--dark);

}

.services-grid {

display: grid;

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

gap: 30px;

}

.service-card {

background: var(--gray);

border-radius: 8px;

overflow: hidden;

transition: var(--transition);

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

}

.service-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);

}

.service-img {

height: 200px;

overflow: hidden;

}

.service-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.service-card:hover .service-img img {

transform: scale(1.1);

}

.service-content {

padding: 25px;

}

.service-content h3 {

font-size: 1.5rem;

margin-bottom: 15px;

color: var(--light);

}

.service-content p {

margin-bottom: 20px;

opacity: 0.8;

}

/* Pricing Section */

.pricing {

padding: 100px 0;

background-color: var(--dark);

}

.pricing-grid {

display: grid;

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

gap: 30px;

}

.pricing-card {

background: var(--gray);

border-radius: 8px;

padding: 40px 30px;

text-align: center;

transition: var(--transition);

position: relative;

overflow: hidden;

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

}

.pricing-card.popular {

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

transform: scale(1.05);

}

.pricing-card.popular:before {

content: 'POPULAR';

position: absolute;

top: 20px;

right: -30px;

background: var(--secondary);

color: var(--dark);

padding: 5px 30px;

font-size: 0.8rem;

font-weight: 700;

text-transform: uppercase;

transform: rotate(45deg);

}

.pricing-header {

margin-bottom: 30px;

}

.pricing-header h4 {

font-size: 1.5rem;

margin-bottom: 10px;

color: var(--light);

}

.price {

font-size: 3rem;

font-weight: 700;

color: var(--secondary);

margin-bottom: 5px;

}

.price span {

font-size: 1rem;

font-weight: 400;

color: var(--light);

opacity: 0.7;

}

.pricing-features {

margin-bottom: 30px;

}

.pricing-features li {

padding: 10px 0;

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

}

.pricing-features li:last-child {

border-bottom: none;

}

/* Education Section */

.education {

padding: 100px 0;

background: linear-gradient(to bottom, var(--primary), var(--dark));

}

.education-grid {

display: grid;

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

gap: 30px;

}

.education-card {

background: var(--gray);

border-radius: 8px;

overflow: hidden;

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

transition: var(--transition);

}

.education-card:hover {

transform: translateY(-10px);

}

.education-img {

height: 200px;

overflow: hidden;

position: relative;

}

.education-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.education-card:hover .education-img img {

transform: scale(1.1);

}

.play-icon {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 60px;

height: 60px;

background: rgba(191, 227, 0, 0.8);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.5rem;

color: var(--dark);

opacity: 0;

transition: var(--transition);

}

.education-card:hover .play-icon {

opacity: 1;

}

.education-content {

padding: 25px;

}

.education-content h3 {

font-size: 1.5rem;

margin-bottom: 15px;

color: var(--light);

}

.education-content p {

margin-bottom: 20px;

opacity: 0.8;

}

/* Blog Section */

.blog {

padding: 100px 0;

background-color: var(--dark);

}

.blog-grid {

display: grid;

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

gap: 30px;

}

.blog-card {

background: var(--gray);

border-radius: 8px;

overflow: hidden;

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

transition: var(--transition);

}

.blog-card:hover {

transform: translateY(-10px);

}

.blog-img {

height: 200px;

overflow: hidden;

}

.blog-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.blog-card:hover .blog-img img {

transform: scale(1.1);

}

.blog-content {

padding: 25px;

}

.blog-date {

display: inline-block;

background: var(--secondary);

color: var(--dark);

padding: 5px 10px;

border-radius: 4px;

font-size: 0.9rem;

margin-bottom: 15px;

font-weight: 600;

}

.blog-content h3 {

font-size: 1.5rem;

margin-bottom: 15px;

color: var(--light);

}

.blog-content p {

margin-bottom: 20px;

opacity: 0.8;

}

/* Contact Section */

.contact {

padding: 100px 0;

background: linear-gradient(to bottom, var(--primary), var(--dark));

}

.contact-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 50px;

align-items: center;

}

.contact-info h3 {

font-size: 2rem;

margin-bottom: 20px;

color: var(--light);

}

.contact-info h3 span {

color: var(--secondary);

}

.contact-info p {

margin-bottom: 20px;

opacity: 0.9;

}

.contact-details {

margin: 30px 0;

}

.contact-item {

display: flex;

align-items: center;

margin-bottom: 20px;

}

.contact-item i {

width: 50px;

height: 50px;

background: var(--secondary);

color: var(--dark);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.2rem;

margin-right: 15px;

}

.contact-text h4 {

font-size: 1.1rem;

margin-bottom: 5px;

}

.social-links {

display: flex;

gap: 15px;

margin-top: 20px;

}

.social-links a {

display: flex;

align-items: center;

justify-content: center;

width: 40px;

height: 40px;

border-radius: 50%;

background: var(--gray);

transition: var(--transition);

}

.social-links a:hover {

background: var(--secondary);

color: var(--dark);

transform: translateY(-5px);

}

.contact-form .form-group {

margin-bottom: 20px;

}

.contact-form input,

.contact-form textarea {

width: 100%;

padding: 12px 15px;

background: var(--gray);

border: none;

border-radius: 4px;

color: var(--light);

}

.contact-form textarea {

height: 150px;

}

/* Footer */

footer {

background: var(--primary);

padding: 80px 0 20px;

}

.footer-grid {

display: grid;

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

gap: 30px;

margin-bottom: 50px;

}

.footer-col h4 {

font-size: 1.3rem;

margin-bottom: 25px;

position: relative;

padding-bottom: 10px;

}

.footer-col h4:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 50px;

height: 2px;

background: var(--secondary);

}

.footer-col p {

margin-bottom: 20px;

opacity: 0.8;

}

.footer-links li {

margin-bottom: 12px;

}

.footer-links li a:hover {

color: var(--secondary);

padding-left: 5px;

}

.copyright {

text-align: center;

padding-top: 30px;

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

font-size: 0.9rem;

opacity: 0.7;

}

/* Responsive */

@media (max-width: 992px) {

.about-content, .contact-container {

grid-template-columns: 1fr;

}

.about-img {

max-width: 600px;

margin: 0 auto;

}

@media (max-width: 768px) {

.mobile-toggle {

display: block;

}

nav ul {

position: fixed;

top: 70px;

left: -100%;

width: 100%;

height: calc(100vh - 70px);

background: var(--primary);

flex-direction: column;

align-items: center;

justify-content: center;

transition: var(--transition);

gap: 30px;

}

nav ul.active {

left: 0;

}

.hero-content h2 {

font-size: 2.8rem;

}

.hero-stats {

flex-wrap: wrap;

justify-content: center;

}

.pricing-card.popular {

transform: scale(1);

}

@media (max-width: 576px) {

.hero-content h2 {

font-size: 2.2rem;

}

.section-title h2 {

font-size: 2rem;

}

</style>

</head>

<body>

<h1>POWER <span>GYM</span></h1>

</div>

<nav>

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

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

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

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

<li><a href="#education">Eğitimler</a></li>

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

</ul>

</div>

</nav>

</div>

</header>

<h2>Vücudunuzu <span>Dönüştürün</span></h2>

<p>Profesyonel eğitmenler, modern ekipmanlar ve kişiye özel programlarla fitness hedeflerinize ulaşın. Sağlıklı yaşam yolculuğunuzda yanınızdayız.</p>

<a href="#" class="btn">Ücretsiz Deneme Dersi</a>

<div class="label">Eğitmen</div>

</div>

<div class="label">Mutlu Üye</div>

</div>

<div class="label">Farklı Program</div>

</div>

</section>

<h2>Hakkımızda</h2>

</div>

</div>

<h3>Neden <span>Power Gym?</span></h3>

<p>Power Gym, 2010 yılından bu yana sağlıklı yaşam ve fitness tutkunlarına hizmet veren premium bir spor merkezidir. 2000m²'lik alanımızda son teknoloji ekipmanlar, profesyonel eğitmenler ve sizlere özel programlarla hizmetinizdeyiz.</p>

<p>Modern ve geniş spor alanları</p>

</div>

<p>Uzman ve sertifikalı eğitmenler</p>

</div>

<p>Kişiye özel antrenman programları</p>

</div>

<p>Sauna, buhar odası ve dinlenme alanları</p>

</div>

<a href="#" class="btn">Daha Fazla Bilgi</a>

</div>

</section>

<h2>Hizmetlerimiz</h2>

</div>

</div>

<h3>Kişisel Antrenman</h3>

<p>Hedeflerinize özel olarak hazırlanmış kişiselleştirilmiş antrenman programları. Uzman eğitmenler eşliğinde maksimum verim alın.</p>

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

</div>

</div>

<h3>Grup Dersleri</h3>

<p>Zumba, Pilates, Yoga, Kick Boks, Spinning ve daha birçok grup ders seçeneği. Eğlenceli ve motive edici grup ortamında çalışın.</p>

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

</div>

</div>

<h3>Beslenme Danışmanlığı</h3>

<p>Uzman diyetisyenlerimizle hedeflerinize uygun beslenme programları. Sağlıklı beslenme alışkanlıkları kazanarak hedeflerinize ulaşın.</p>

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

</div>

</section>

<h2>Fiyat <span>Seçenekleri</span></h2>

</div>

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

</div>

<li>Haftada 3 Gün Erişim</li>

<li>Grup Dersleri</li>

<li>Ücretsiz Fitness Değerlendirmesi</li>

<li>Kişisel Dolap</li>

<li>24/7 Destek</li>

</ul>

<a href="#" class="btn">Hemen Başla</a>

</div>

<h4>Profesyonel</h4>

</div>

<li>Sınırsız Erişim</li>

<li>Tüm Grup Dersleri</li>

<li>Kişisel Antrenör (Ayda 4 Seans)</li>

<li>Beslenme Programı</li>

<li>Kişisel Dolap + Havlu</li>

<li>24/7 Destek</li>

</ul>

<a href="#" class="btn">Hemen Başla</a>

</div>

<h4>Premium</h4>

</div>

<li>Sınırsız Erişim</li>

<li>Tüm Grup Dersleri</li>

<li>Kişisel Antrenör (Ayda 8 Seans)</li>

<li>Özel Beslenme Programı</li>

<li>Sauna ve Buhar Odası</li>

<li>Özel Havlu ve Malzeme</li>

<li>24/7 Özel Destek</li>

</ul>

<a href="#" class="btn">Hemen Başla</a>

</div>

</section>

<h2>Eğitim <span>Paketleri</span></h2>

</div>

</div>

<h3>Vücut Geliştirme Programı</h3>

<p>Kas kütlesi artırma ve vücut şekillendirme için özel program. Profesyonel eğitmenler eşliğinde maksimum verim alın.</p>

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

</div>

</div>

<h3>Kardiyo ve Yağ Yakımı</h3>

<p>Hızlı ve sağlıklı yağ yakımı için özel kardiyo programları. Dayanıklılığınızı artırırken formda kalın.</p>

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

</div>

</div>

<h3>Fonksiyonel Antrenman</h3>

<p>Günlük hareketlerinizi kolaylaştıran, esnekliğinizi ve gücünüzü artıran fonksiyonel antrenman programı.</p>

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

</div>

</section>

<h2>Blog <span>& Haberler</span></h2>

</div>

</div>

<span class="blog-date">15 Haziran 2023</span>

<h3>Power Gym'in Kuruluş Hikayesi</h3>

<p>2010 yılında küçük bir spor salonu olarak başlayan serüvenimiz, bugün ülkenin önde gelen fitness merkezlerinden biri olma yolunda...</p>

<a href="#" class="btn">Devamını Oku</a>

</div>

</div>

<span class="blog-date">3 Mayıs 2023</span>

<h3>Yeni Teknoloji Fitness Ekipmanları</h3>

<p>Merkezimize son teknoloji fitness ekipmanları eklendi. Akıllı antrenman sistemleriyle hedeflerinize daha hızlı ulaşın...</p>

<a href="#" class="btn">Devamını Oku</a>

</div>

</div>

<span class="blog-date">20 Nisan 2023</span>

<h3>Yaza Formda Girmek İçin Son Fırsat</h3>

<p>Yaz kampanyamız başladı! Sınırlı süreli indirimlerle yaza formda girmenin tam zamanı. Profesyonel eğitmenler eşliğinde...</p>

<a href="#" class="btn">Devamını Oku</a>

</div>

</section>

<h2>İletişim</h2>

</div>

<h3>Bize <span>Ulaşın</span></h3>

<p>Sorularınız, önerileriniz veya randevu talepleriniz için aşağıdaki iletişim kanallarını kullanabilirsiniz. Ekibimiz en kısa sürede size dönüş yapacaktır.</p>

<h4>Adres</h4>

<p>Fitness Caddesi No:123, Spor Mahallesi, İstanbul</p>

</div>

<h4>Telefon</h4>

</div>

<h4>E-posta</h4>

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

</div>

</div>

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

</div>

</div>

</div>

</div>

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

</div>

</section>

<h4>Power Gym</h4>

<p>Profesyonel ekipmanlar, uzman eğitmenler ve kişiye özel programlarla sağlıklı yaşam yolculuğunuzda yanınızdayız.</p>

</div>

<h4>Hızlı Linkler</h4>

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

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

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

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

<li><a href="#education">Eğitimler</a></li>

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

</ul>

</div>

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

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

<li>Cumartesi: 08:00 - 20:00</li>

<li>Pazar: 09:00 - 18:00</li>

<li>Resmi Tatiller: 10:00 - 16:00</li>

</ul>

</div>

<h4>Konum</h4>

</div>

</div>

</footer>

// Mobile Menu Toggle

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

const navMenu = document.getElementById('nav-menu');

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

navMenu.classList.toggle('active');

});

// Close menu when clicking outside

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

if (!mobileToggle.contains(e.target) && !navMenu.contains(e.target)) {

navMenu.classList.remove('active');

}

});

// Sticky header effect

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

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

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

});

// 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 - 70,

behavior: 'smooth'

});

// Close mobile menu if open

navMenu.classList.remove('active');

}

});

</script>

</body>

</html>

Metehan

Empfohlen

Ein Code von Metehan

Ein Code von Metehan

Ein Code von Metehan

HTML

CSS

JS

Empfohlen

Ein Code von Metehan

Ein Code von Metehan

Ein Code von Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS