Webleb - Snippet di Codice

HTML

<!DOCTYPE html>

<head>

<title>Nike Premium | En İyi Koşu Ayakkabıları</title>

<style>

/* Temel Stil Ayarları */

:root {

--primary: #111;

--secondary: #e60023;

--accent: #f5f5f5;

--text: #333;

--light-text: #777;

--white: #fff;

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

--transition: all 0.3s ease;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

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

}

body {

background-color: var(--accent);

color: var(--text);

line-height: 1.6;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

section {

padding: 80px 0;

}

/* Buton Stilleri */

.btn {

display: inline-flex;

align-items: center;

padding: 12px 30px;

background-color: var(--primary);

color: var(--white);

border: none;

border-radius: 30px;

font-weight: 600;

cursor: pointer;

transition: var(--transition);

text-decoration: none;

}

.btn:hover {

background-color: var(--secondary);

transform: translateY(-3px);

box-shadow: var(--shadow);

}

.btn-secondary {

background-color: var(--secondary);

}

.btn-secondary:hover {

background-color: var(--primary);

}

/* Header ve Navigasyon */

header {

background-color: var(--white);

box-shadow: var(--shadow);

position: sticky;

top: 0;

z-index: 1000;

}

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px 0;

}

.logo {

height: 50px;

}

.nav-links {

display: flex;

list-style: none;

}

.nav-links li {

margin-left: 30px;

}

.nav-links a {

text-decoration: none;

color: var(--text);

font-weight: 500;

transition: var(--transition);

position: relative;

}

.nav-links a:hover {

color: var(--secondary);

}

.nav-links a::after {

content: '';

position: absolute;

width: 0;

height: 2px;

bottom: -5px;

left: 0;

background-color: var(--secondary);

transition: var(--transition);

}

.nav-links a:hover::after {

width: 100%;

}

.nav-icons {

display: flex;

align-items: center;

}

.nav-icons a {

margin-left: 20px;

color: var(--text);

font-size: 1.2rem;

transition: var(--transition);

}

.nav-icons a:hover {

color: var(--secondary);

}

.menu-toggle {

display: none;

font-size: 1.5rem;

cursor: pointer;

}

/* Hero Bölümü */

.hero {

display: flex;

align-items: center;

min-height: 80vh;

background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%), url('https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');

background-size: cover;

background-position: center;

color: var(--white);

padding: 60px 0;

border-radius: 0 0 30px 30px;

margin-bottom: 80px;

}

.hero-content {

max-width: 600px;

}

.hero h1 {

font-size: 3.5rem;

margin-bottom: 20px;

line-height: 1.2;

}

.hero p {

font-size: 1.2rem;

margin-bottom: 30px;

opacity: 0.9;

}

.hero-image {

flex: 1;

text-align: center;

}

.hero-image img {

max-width: 100%;

transform: rotate(-10deg);

filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));

}

/* Öne Çıkan Ürünler */

.section-title {

text-align: center;

margin-bottom: 60px;

position: relative;

}

.section-title h2 {

font-size: 2.5rem;

color: var(--primary);

display: inline-block;

}

.section-title h2::after {

content: '';

position: absolute;

width: 80px;

height: 4px;

background-color: var(--secondary);

bottom: -15px;

left: 50%;

transform: translateX(-50%);

}

.products-grid {

display: grid;

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

gap: 30px;

}

.product-card {

background-color: var(--white);

border-radius: 15px;

overflow: hidden;

box-shadow: var(--shadow);

transition: var(--transition);

}

.product-card:hover {

transform: translateY(-10px);

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

}

.product-image {

height: 220px;

overflow: hidden;

position: relative;

}

.product-image img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.product-card:hover .product-image img {

transform: scale(1.1);

}

.product-badge {

position: absolute;

top: 15px;

right: 15px;

background-color: var(--secondary);

color: var(--white);

padding: 5px 10px;

border-radius: 20px;

font-size: 0.8rem;

font-weight: 600;

}

.product-info {

padding: 20px;

}

.product-info h3 {

font-size: 1.2rem;

margin-bottom: 10px;

}

.product-info p {

color: var(--light-text);

margin-bottom: 15px;

font-size: 0.9rem;

}

.product-price {

display: flex;

justify-content: space-between;

align-items: center;

}

.price {

font-size: 1.3rem;

font-weight: 700;

color: var(--primary);

}

/* Özellikler Bölümü */

.features {

background-color: var(--white);

border-radius: 30px;

padding: 80px 0;

}

.features-grid {

display: grid;

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

gap: 40px;

}

.feature-card {

text-align: center;

padding: 30px 20px;

border-radius: 15px;

transition: var(--transition);

}

.feature-card:hover {

transform: translateY(-10px);

box-shadow: var(--shadow);

}

.feature-icon {

font-size: 2.5rem;

color: var(--secondary);

margin-bottom: 20px;

}

.feature-card h3 {

font-size: 1.3rem;

margin-bottom: 15px;

}

/* Projeler Bölümü */

.projects-grid {

display: grid;

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

gap: 30px;

}

.project-card {

border-radius: 15px;

overflow: hidden;

box-shadow: var(--shadow);

transition: var(--transition);

position: relative;

}

.project-card:hover {

transform: translateY(-10px);

}

.project-image {

height: 250px;

overflow: hidden;

}

.project-image img {

width: 100%;

height: 100%;

object-fit: cover;

transition: var(--transition);

}

.project-card:hover .project-image img {

transform: scale(1.1);

}

.project-info {

padding: 20px;

background-color: var(--white);

}

.project-category {

color: var(--secondary);

font-size: 0.9rem;

font-weight: 600;

margin-bottom: 10px;

}

.project-title {

font-size: 1.2rem;

margin-bottom: 15px;

display: block;

}

/* Footer */

footer {

background-color: var(--primary);

color: var(--white);

padding: 80px 0 30px;

}

.footer-content {

display: grid;

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

gap: 40px;

margin-bottom: 50px;

}

.footer-column h3 {

font-size: 1.3rem;

margin-bottom: 25px;

position: relative;

}

.footer-column h3::after {

content: '';

position: absolute;

width: 40px;

height: 3px;

background-color: var(--secondary);

bottom: -10px;

left: 0;

}

.footer-links {

list-style: none;

}

.footer-links li {

margin-bottom: 12px;

}

.footer-links a {

color: #ccc;

text-decoration: none;

transition: var(--transition);

}

.footer-links a:hover {

color: var(--secondary);

padding-left: 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;

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

border-radius: 50%;

color: var(--white);

transition: var(--transition);

}

.social-links a:hover {

background-color: var(--secondary);

transform: translateY(-5px);

}

.copyright {

text-align: center;

padding-top: 30px;

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

color: #aaa;

font-size: 0.9rem;

}

/* Responsive Tasarım */

@media (max-width: 992px) {

.hero {

flex-direction: column;

text-align: center;

}

.hero-content {

margin-bottom: 40px;

}

@media (max-width: 768px) {

.nav-links {

display: none;

}

.menu-toggle {

display: block;

}

.hero h1 {

font-size: 2.5rem;

}

@media (max-width: 576px) {

.section-title h2 {

font-size: 2rem;

}

.hero h1 {

font-size: 2rem;

}

</style>

</head>

<body>

</a>

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

<li><a href="#products">Ürünler</a></li>

<li><a href="#features">Özellikler</a></li>

<li><a href="#projects">Koleksiyon</a></li>

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

</ul>

</div>

</nav>

</div>

</header>

<h1>Performansı Hisset, Sınırları Zorla</h1>

<p>En yeni Nike koşu ayakkabıları ile konfor ve performansı bir arada yaşayın. Özel tasarım ve teknoloji ile günlük koşularınızı bir üst seviyeye taşıyın.</p>

<a href="#products" class="btn">Keşfet <i class="fas fa-arrow-right"></i></a>

</div>

</section>

<h2>Öne Çıkan Ürünler</h2>

</div>

</div>

<p>Günlük kullanım için maksimum konfor</p>

<a href="#" class="btn btn-secondary">Sepete Ekle</a>

</div>

<div class="product-badge">Popüler</div>

</div>

<h3>Nike React Infinity</h3>

<p>Yarış performansı için tasarlandı</p>

<a href="#" class="btn btn-secondary">Sepete Ekle</a>

</div>

</div>

<p>Doğal hareket için esnek tasarım</p>

<a href="#" class="btn btn-secondary">Sepete Ekle</a>

</div>

<div class="product-badge">İndirim</div>

</div>

<h3>Nike Air Zoom Pegasus</h3>

<p>Her koşu için güvenilir performans</p>

<a href="#" class="btn btn-secondary">Sepete Ekle</a>

</div>

</section>

<h2>Neden Nike?</h2>

</div>

</div>

<h3>Yüksek Performans</h3>

<p>En son teknoloji ile maksimum performans ve dayanıklılık</p>

</div>

</div>

<h3>Hafif Tasarım</h3>

<p>Hafif malzemeler ile uzun süreli konfor sağlar</p>

</div>

</div>

<h3>Nefes Alabilirlik</h3>

<p>Hava geçirgen malzemeler ile ayaklarınız serin kalır</p>

</div>

</div>

<h3>Mükemmel Uyum</h3>

<p>Ayak anatomisine uygun tasarım ile mükemmel uyum</p>

</div>

</section>

<h2>Özel Koleksiyon</h2>

</div>

</div>

<strong class="project-title">Performans Serisi</strong>

<a href="#" class="btn">Keşfet</a>

</div>

</div>

<span class="project-category">Günlük Kullanım</span>

<strong class="project-title">Konfor Serisi</strong>

<a href="#" class="btn">Keşfet</a>

</div>

</div>

<span class="project-category">Limitli Seri</span>

<strong class="project-title">Özel Tasarım</strong>

<a href="#" class="btn">Keşfet</a>

</div>

</section>

<p>Performans, stil ve konforu bir araya getirerek spor deneyiminizi en üst seviyeye taşıyoruz.</p>

</div>

<h3>Ürünler</h3>

<li><a href="#">Koşu Ayakkabıları</a></li>

<li><a href="#">Spor Ayakkabılar</a></li>

<li><a href="#">Basketbol Ayakkabıları</a></li>

<li><a href="#">Yeni Gelenler</a></li>

<li><a href="#">İndirimdekiler</a></li>

</ul>

</div>

<h3>Yardım</h3>

<li><a href="#">Sipariş Takibi</a></li>

<li><a href="#">Teslimat Bilgileri</a></li>

<li><a href="#">İade Politikası</a></li>

<li><a href="#">Ödeme Seçenekleri</a></li>

<li><a href="#">Bize Ulaşın</a></li>

</ul>

</div>

<h3>Haber Bülteni</h3>

<p>Yeni ürünler ve özel indirimler hakkında bilgi almak için abone olun.</p>

<button type="submit" class="btn btn-secondary">Abone Ol</button>

</div>

</form>

</div>

</div>

</footer>

// Basit menü toggle işlevi

document.querySelector('.menu-toggle').addEventListener('click', function() {

document.querySelector('.nav-links').classList.toggle('active');

});

</script>

</body>

</html>

Metehan

Consigliato

Un codice di Metehan

Un codice di Metehan

Un codice di Metehan

HTML

CSS

JS

Consigliato

Un codice di Metehan

Un codice di Metehan

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS