Metehan

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

28 May 2025

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nike Premium - En İyi Koşu Ayakkabıları</title>
  <style>
    /* Genel Stil Ayarları */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

:root {
      --primary: #ff6b35;
      --secondary: #1a1a2e;
      --accent: #f8f9fa;
      --text: #333;
      --light-text: #f8f9fa;
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s ease;
    }

body {
      background-color: #f9f9f9;
      color: var(--text);
      overflow-x: hidden;
    }

.container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

/* Üst Navigasyon */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      position: relative;
      z-index: 100;
    }

.logo {
      height: 50px;
      transition: var(--transition);
    }

.logo:hover {
      transform: scale(1.05);
    }

.nav-links {
      display: flex;
      list-style: none;
    }

.nav-links li {
      margin-left: 30px;
    }

.nav-links a {
      text-decoration: none;
      color: var(--text);
      font-weight: 600;
      position: relative;
      padding: 5px 0;
      transition: var(--transition);
    }

.nav-links a:after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: var(--primary);
      transition: var(--transition);
    }

.nav-links a:hover {
      color: var(--primary);
    }

.nav-links a:hover:after {
      width: 100%;
    }

.menu-icon {
      display: none;
      cursor: pointer;
    }

/* Hero Bölümü */
    .hero {
      display: flex;
      align-items: center;
      min-height: 80vh;
      padding: 40px 0;
      position: relative;
    }

.hero-content {
      flex: 1;
      padding-right: 50px;
    }

.hero h1 {
      font-size: 3.5rem;
      line-height: 1.2;
      margin-bottom: 20px;
      background: linear-gradient(45deg, var(--secondary), var(--primary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

.hero h2 {
      font-size: 1.5rem;
      color: var(--primary);
      margin-bottom: 15px;
    }

.hero p {
      font-size: 1.1rem;
      margin-bottom: 30px;
      color: #666;
      max-width: 500px;
    }

.cta-button {
      display: inline-flex;
      align-items: center;
      background: var(--primary);
      color: white;
      padding: 12px 30px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      transition: var(--transition);
      box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
    }

.cta-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(255, 107, 53, 0.4);
    }

.cta-button img {
      margin-left: 10px;
      height: 16px;
    }

.hero-image {
      flex: 1;
      display: flex;
      justify-content: center;
      position: relative;
    }

.hero-image img {
      max-width: 100%;
      height: auto;
      transform: rotate(-10deg);
      filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.2));
      transition: var(--transition);
    }

.hero-image img:hover {
      transform: rotate(-8deg) scale(1.05);
    }

.color-box {
      position: absolute;
      width: 300px;
      height: 300px;
      background: linear-gradient(135deg, var(--primary), #ff9d6c);
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      z-index: -1;
      opacity: 0.7;
      animation: morph 8s ease-in-out infinite;
    }

@keyframes morph {
      0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      }
      50% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
      }
      100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      }
    }

/* Sosyal Medya Linkleri */
    .social-links {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }

.social-links a {
      margin: 0 15px;
      transition: var(--transition);
    }

.social-links a:hover {
      transform: translateY(-5px);
    }

.social-links img {
      height: 30px;
    }

/* Ürünler Bölümü */
    .products-section {
      padding: 80px 0;
      background-color: var(--accent);
      position: relative;
      overflow: hidden;
    }

.section-title {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 50px;
      position: relative;
    }

.section-title:after {
      content: '';
      position: absolute;
      width: 80px;
      height: 4px;
      background: var(--primary);
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
    }

.products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 30px;
    }

.product-card {
      background: white;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: var(--transition);
      position: relative;
    }

.product-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    }

.product-image {
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #f5f7fa, #e4e8f0);
      padding: 20px;
    }

.product-image img {
      max-width: 100%;
      max-height: 160px;
      transition: var(--transition);
    }

.product-card:hover .product-image img {
      transform: scale(1.1);
    }

.product-info {
      padding: 20px;
    }

.product-info h3 {
      font-size: 1.2rem;
      margin-bottom: 10px;
    }

.product-info p {
      color: #666;
      margin-bottom: 15px;
      font-size: 0.9rem;
    }

.product-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

.price {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--primary);
    }

.size {
      color: #888;
      font-size: 0.9rem;
    }

.add-to-cart {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--secondary);
      color: white;
      border: none;
      padding: 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: var(--transition);
      font-weight: 600;
      width: 100%;
    }

.add-to-cart:hover {
      background: var(--primary);
    }

.add-to-cart img {
      margin-right: 8px;
      height: 18px;
    }

/* Projeler Bölümü */
    .projects-section {
      padding: 80px 0;
    }

.projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 30px;
    }

.project-card {
      background: white;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: var(--transition);
    }

.project-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }

.project-image {
      height: 200px;
      overflow: hidden;
    }

.project-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition);
    }

.project-card:hover .project-image img {
      transform: scale(1.05);
    }

.project-info {
      padding: 20px;
    }

.project-category {
      color: var(--primary);
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 10px;
    }

.project-title {
      display: block;
      font-size: 1.2rem;
      margin-bottom: 15px;
    }

.more-details {
      display: inline-block;
      color: var(--primary);
      text-decoration: none;
      font-weight: 600;
      position: relative;
      padding-bottom: 3px;
    }

.more-details:after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: var(--primary);
      transition: var(--transition);
    }

.more-details:hover:after {
      width: 100%;
    }

/* Footer */
    footer {
      background: var(--secondary);
      color: var(--light-text);
      padding: 50px 0 20px;
    }

.footer-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 40px;
      margin-bottom: 40px;
    }

.footer-column h3 {
      font-size: 1.2rem;
      margin-bottom: 20px;
      position: relative;
      padding-bottom: 10px;
    }

.footer-column h3:after {
      content: '';
      position: absolute;
      width: 40px;
      height: 2px;
      background: var(--primary);
      bottom: 0;
      left: 0;
    }

.footer-links {
      list-style: none;
    }

.footer-links li {
      margin-bottom: 10px;
    }

.footer-links a {
      color: #ccc;
      text-decoration: none;
      transition: var(--transition);
    }

.footer-links a:hover {
      color: var(--primary);
      padding-left: 5px;
    }

.copyright {
      text-align: center;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 0.9rem;
      color: #aaa;
    }

/* Responsive Tasarım */
    @media (max-width: 992px) {
      .hero {
        flex-direction: column;
        text-align: center;
      }

.hero-content {
        padding-right: 0;
        margin-bottom: 40px;
      }

.hero h1 {
        font-size: 2.8rem;
      }
    }

@media (max-width: 768px) {
      .navbar {
        padding: 15px 0;
      }

.nav-links {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        z-index: 100;
      }

.nav-links.active {
        display: flex;
      }

.nav-links li {
        margin: 10px 0;
      }

.menu-icon {
        display: block;
        height: 25px;
      }

.hero h1 {
        font-size: 2.2rem;
      }

.color-box {
        width: 200px;
        height: 200px;
      }
    }

@media (max-width: 576px) {
      .hero h1 {
        font-size: 1.8rem;
      }

.section-title {
        font-size: 2rem;
      }

.products-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  
  <header class="container">
    <nav class="navbar">
      <img src="https://i.ibb.co/0Qr1J8L/nike-logo.png" alt="Nike Logo" class="logo">
      <ul class="nav-links" id="menuList">
        <li><a href="#new">Yeni Ürünler</a></li>
        <li><a href="#products">Koleksiyon</a></li>
        <li><a href="#cart">Sepetim</a></li>
        <li><a href="#other">Diğer</a></li>
      </ul>
      <img src="https://i.ibb.co/8XJ2Z1R/menu-icon.png" alt="Menü" class="menu-icon" onclick="toggleMenu()">
    </nav>
  </header>

<section class="container hero">
    <div class="hero-content">
      <h1>Nike Air Max <br>Yeni Nesil Konfor</h1>
      <h2>Premium Koşu Ayakkabıları</h2>
      <p>En yeni teknoloji ile tasarlanan Nike Air Max serisi, konfor ve performansı bir araya getiriyor. Günlük kullanım ve spor aktiviteleri için ideal.</p>
      <a href="#products" class="cta-button">
        Hemen Keşfet <img src="https://i.ibb.co/3vJt3yZ/arrow-right.png" alt="Ok">
      </a>
    </div>
    <div class="hero-image">
      <img src="https://i.ibb.co/6YyHrJ0/nike-air-max.png" alt="Nike Air Max Ayakkabı">
      <div class="color-box"></div>
    </div>
  </section>

<div class="container">
    <div class="social-links">
      <a href="#"><img src="https://i.ibb.co/0QY8R0x/facebook.png" alt="Facebook"></a>
      <a href="#"><img src="https://i.ibb.co/GVbHjZt/instagram.png" alt="Instagram"></a>
      <a href="#"><img src="https://i.ibb.co/0F6W2w0/twitter.png" alt="Twitter"></a>
    </div>
  </div>

<section class="products-section" id="products">
    <div class="container">
      <h2 class="section-title">Popüler Ürünler</h2>
      <div class="products-grid">
        
        <div class="product-card">
          <div class="product-image">
            <img src="https://i.ibb.co/6YyHrJ0/nike-air-max.png" alt="Nike Air Max 270">
          </div>
          <div class="product-info">
            <h3>Nike Air Max 270</h3>
            <p>En büyük Air birimiyle maksimum konfor</p>
            <div class="product-price">
              <span class="price">$125</span>
              <span class="size">Numara: 45</span>
            </div>
            <button class="add-to-cart">
              <img src="https://i.ibb.co/0QY8R0x/shopping-cart.png" alt="Sepet"> Sepete Ekle
            </button>
          </div>
        </div>

<div class="product-card">
          <div class="product-image">
            <img src="https://i.ibb.co/0QY8R0x/nike-react.png" alt="Nike React Infinity Run">
          </div>
          <div class="product-info">
            <h3>Nike React Infinity Run</h3>
            <p>Yarış performansı için tasarlandı</p>
            <div class="product-price">
              <span class="price">$150</span>
              <span class="size">Numara: 40</span>
            </div>
            <button class="add-to-cart">
              <img src="https://i.ibb.co/0QY8R0x/shopping-cart.png" alt="Sepet"> Sepete Ekle
            </button>
          </div>
        </div>

<div class="product-card">
          <div class="product-image">
            <img src="https://i.ibb.co/GVbHjZt/nike-pegasus.png" alt="Nike Air Zoom Pegasus">
          </div>
          <div class="product-info">
            <h3>Nike Air Zoom Pegasus</h3>
            <p>Her gün koşmak için tasarlandı</p>
            <div class="product-price">
              <span class="price">$140</span>
              <span class="size">Numara: 44</span>
            </div>
            <button class="add-to-cart">
              <img src="https://i.ibb.co/0QY8R0x/shopping-cart.png" alt="Sepet"> Sepete Ekle
            </button>
          </div>
        </div>

<div class="product-card">
          <div class="product-image">
            <img src="https://i.ibb.co/0F6W2w0/nike-free.png" alt="Nike Free RN">
          </div>
          <div class="product-info">
            <h3>Nike Free RN 5.0</h3>
            <p>Doğal hareket için esnek tasarım</p>
            <div class="product-price">
              <span class="price">$180</span>
              <span class="size">Numara: 33</span>
            </div>
            <button class="add-to-cart">
              <img src="https://i.ibb.co/0QY8R0x/shopping-cart.png" alt="Sepet"> Sepete Ekle
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>

<section class="projects-section" id="projects">
    <div class="container">
      <h2 class="section-title">Öne Çıkan Projeler</h2>
      <div class="projects-grid">
        
        <div class="project-card">
          <div class="project-image">
            <img src="https://i.ibb.co/6YyHrJ0/nike-air-max.png" alt="Nike Air Max Projesi">
          </div>
          <div class="project-info">
            <p class="project-category">Tasarım & Geliştirme</p>
            <strong class="project-title">
              <span>Nike Air Max Tasarım Süreci</span>
            </strong>
            <a href="#" class="more-details">Detayları Gör</a>
          </div>
        </div>

<div class="project-card">
          <div class="project-image">
            <img src="https://i.ibb.co/0QY8R0x/nike-react.png" alt="Nike React Projesi">
          </div>
          <div class="project-info">
            <p class="project-category">Mühendislik & Test</p>
            <strong class="project-title">
              <span>React Teknolojisi Geliştirme</span>
            </strong>
            <a href="#" class="more-details">Detayları Gör</a>
          </div>
        </div>

<div class="project-card">
          <div class="project-image">
            <img src="https://i.ibb.co/GVbHjZt/nike-pegasus.png" alt="Nike Pegasus Projesi">
          </div>
          <div class="project-info">
            <p class="project-category">Performans & Test</p>
            <strong class="project-title">
              <span>Pegasus Performans Testleri</span>
            </strong>
            <a href="#" class="more-details">Detayları Gör</a>
          </div>
        </div>
      </div>
    </div>
  </section>

<footer>
    <div class="container">
      <div class="footer-content">
        <div class="footer-column">
          <h3>Hakkımızda</h3>
          <ul class="footer-links">
            <li><a href="#">Şirketimiz</a></li>
            <li><a href="#">Kariyer</a></li>
            <li><a href="#">Sürdürülebilirlik</a></li>
            <li><a href="#">Basın</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>Yardım</h3>
          <ul class="footer-links">
            <li><a href="#">Sipariş Takibi</a></li>
            <li><a href="#">Teslimat Bilgileri</a></li>
            <li><a href="#">İade Politikası</a></li>
            <li><a href="#">İletişim</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>Bülten</h3>
          <p>Yeni ürünler ve kampanyalardan haberdar olmak için bültenimize kaydolun.</p>
          <form class="newsletter-form">
            <input type="email" placeholder="E-posta adresiniz" required>
            <button type="submit">Abone Ol</button>
          </form>
        </div>
      </div>
      <div class="copyright">
        <p>© 2023 Nike Premium. Tüm hakları saklıdır.</p>
      </div>
    </div>
  </footer>

// Scroll animasyonları
    window.addEventListener('scroll', function() {
      const elements = document.querySelectorAll('.product-card, .project-card');
      
      elements.forEach(element => {
        const position = element.getBoundingClientRect();
        
        // Ekranın görünen kısmında olan elementlere animasyon sınıfı ekle
        if(position.top < window.innerHeight - 100) {
          element.style.opacity = 1;
          element.style.transform = 'translateY(0)';
        }
      });
    });

// Sayfa yüklendiğinde animasyonları başlat
    window.addEventListener('load', function() {
      const elements = document.querySelectorAll('.product-card, .project-card');
      
      elements.forEach(element => {
        element.style.opacity = 0;
        element.style.transform = 'translateY(20px)';
        element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
      });
      
      // Scroll event'ini tetikle
      window.dispatchEvent(new Event('scroll'));
    });
  </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