Webleb - Snippets de Código

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

Recomendado

Um Código de Metehan

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um Código de Metehan

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS