Webleb - UI Elements

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

Recommended

A Code by Metehan

A Code by Metehan

metehan'ın bir kodu

HTML

CSS

JS

Recommended

A Code by Metehan

A Code by Metehan

metehan'ın bir kodu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS