Default page

Edit File: index.html

<!DOCTYPE html>
<html lang="hr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Maskice.hr</title>
  <style>
    body { margin: 0; font-family: Arial, sans-serif; background: #f9f9f9; }
    a { text-decoration: none; color: inherit; }

/* Header and Navbar */
    header { background: #000; color: white; padding: 10px 20px; }
    header nav a { margin-right: 15px; color: #ffc107; }

.navbar { display: flex; align-items: center; padding: 10px 20px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .navbar input { flex: 1; padding: 8px; margin: 0 10px; border-radius: 5px; border: 1px solid #ccc; }

/* Hero Banner */
    .hero { display: flex; flex-wrap: wrap; background: linear-gradient(90deg, #ffc107, #ff5722); padding: 30px; color: white; justify-content: space-between; align-items: center; }
    .hero-text h1 { margin: 0; font-size: 32px; }
    .hero-icons { display: flex; margin-top: 20px; gap: 20px; }
    .hero-icons div { background: white; color: black; padding: 10px; border-radius: 10px; text-align: center; width: 100px; }

/* Brand Logos */
    .brands { background: #fff; display: flex; justify-content: center; gap: 30px; padding: 20px; flex-wrap: wrap; }
    .brands img { height: 40px; }

/* Product Section */
    .products { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
    .products h2 { margin-bottom: 20px; }
    .product-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-around; }
    .product { background: #fff; padding: 10px; border-radius: 8px; width: 160px; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,0.05); }
    .product img { width: 100%; border-radius: 5px; }
    .product button { margin-top: 10px; background: #ffc107; border: none; padding: 8px; border-radius: 4px; cursor: pointer; }

/* Delivery Info */
    .info-section { background: #fff; display: flex; justify-content: space-around; padding: 30px; margin-top: 40px; border-top: 1px solid #eee; flex-wrap: wrap; }
    .info-box { text-align: center; max-width: 200px; }

/* Footer */
    footer { background: #f0f0f0; padding: 40px 20px 20px 20px; }
    .footer-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; max-width: 1200px; margin: auto; }
    .footer-cols div { flex: 1 1 200px; }
    .footer-bottom { text-align: center; font-size: 13px; color: #555; padding-top: 10px; }

.contact-strip { position: fixed; bottom: 0; left: 0; right: 0; background: #ff0055; color: white; padding: 10px; text-align: center; font-weight: bold; }
  </style>
</head>
<body>

<header>
  <nav>
    <a href="#">Početna</a>
    <a href="#">O nama</a>
    <a href="#">Prodajna mjesta</a>
    <a href="#">Pohvale i pritužbe</a>
    <a href="#">Kontakt</a>
    <a href="#">Blog</a>
  </nav>
</header>

<div class="navbar">
  <strong>Maskice.hr</strong>
  <input type="text" placeholder="Pretraži webshop..." />
  <button>🔍</button>
</div>

<div style="display: flex; flex-wrap: wrap;">
  
  
  <aside style="width: 220px; background: #fff; padding: 10px; border-right: 1px solid #eee;">
    <h3 style="background:#ffd700; padding:8px;">Kategorije</h3>
    <ul style="list-style: none; padding-left: 0; font-size: 14px;">
      <li>📦 BOX SET</li>
      <li>🌟 TOP 100 maskica</li>
      <li>📱 Kolekcije silikonskih maskica</li>
      <li>🔌 Oprema za mobitele</li>
      <li>💻 Oprema za tablet</li>
      <li>🚗 Oprema za automobile</li>
      <li>🎲 Igračke i ostalo</li>
      <li>🤳 Držači & Selfie Stick</li>
      <li>⚡ Punjači, kablovi & adapteri</li>
      <li>💾 Gadgeti & memorije</li>
      <li>🎧 Slušalice, zvučnici i mikrofoni</li>
      <li>🖥 Računalna periferija</li>
      <li>📷 Kamere & dodaci</li>
      <li>💸 OUTLET</li>
    </ul>
  </aside>

<div style="flex: 1;">

<section class="hero">
      <div class="hero-text">
        <h1>Sva potrebna oprema za vaš HONOR</h1>
        <p>400 | 400 PRO | 400 LITE</p>
      </div>
    </section>

<section style="background: #fff; padding: 10px 0;">
      <div style="display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;">
        <div style="text-align: center;">
          <div style="font-size: 30px;">🚗</div>
          <small>Oprema za automobile</small>
        </div>
        <div style="text-align: center;">
          <div style="font-size: 30px;">🔊</div>
          <small>Bluetooth zvučnici</small>
        </div>
        <div style="text-align: center;">
          <div style="font-size: 30px;">🎧</div>
          <small>Bluetooth slušalice</small>
        </div>
        <div style="text-align: center;">
          <div style="font-size: 30px;">🤳</div>
          <small>Selfie stick</small>
        </div>
        <div style="text-align: center;">
          <div style="font-size: 30px;">🔌</div>
          <small>Punjači, kablovi, adapteri</small>
        </div>
        <div style="text-align: center;">
          <div style="font-size: 30px;">🔋</div>
          <small>Powerbank</small>
        </div>
      </div>
    </section>

</div>
</div>

<section class="hero">
  <div class="hero-text">
    <h1>Sva potrebna oprema za vaš HONOR</h1>
    <p>400 | 400 PRO | 400 LITE</p>
    <div class="hero-icons">
      <div>🔊<br>Bluetooth zvučnici</div>
      <div>🎧<br>Bluetooth slušalice</div>
      <div>🔌<br>Punjači</div>
      <div>📷<br>Selfie stick</div>
    </div>
  </div>
</section>

<section class="products">
  <h2>Ljetna kolekcija</h2>
  <div class="product-list">
    <div class="product">
      <img src="https://via.placeholder.com/150x250?text=Beach+Vibe" alt="">
      <p>Beach Vibe</p>
      <strong>10,90 €</strong><br>
      <button>Dodaj</button>
    </div>
    <div class="product">
      <img src="https://via.placeholder.com/150x250?text=Sea+Do+It" alt="">
      <p>Sea Do It</p>
      <strong>10,90 €</strong><br>
      <button>Dodaj</button>
    </div>
    <div class="product">
      <img src="https://via.placeholder.com/150x250?text=Summer+View" alt="">
      <p>Summer View</p>
      <strong>10,90 €</strong><br>
      <button>Dodaj</button>
    </div>
    <div class="product">
      <img src="https://via.placeholder.com/150x250?text=Rose+Glass" alt="">
      <p>Rose Glass</p>
      <strong>10,90 €</strong><br>
      <button>Dodaj</button>
    </div>
  </div>
</section>

<section class="info-section">
  <div class="info-box">
    <h3>🚚</h3>
    <p><strong>Besplatna dostava</strong><br>Za narudžbe iznad 30€</p>
  </div>
  <div class="info-box">
    <h3>📦</h3>
    <p><strong>Brza dostava</strong><br>U roku 3-5 dana</p>
  </div>
  <div class="info-box">
    <h3>🔒</h3>
    <p><strong>100% sigurna kupnja</strong></p>
  </div>
</section>

<footer>
  <div class="footer-cols">
    <div>
      <h4>INFORMACIJE</h4>
      <p>Maskice.hr - Web trgovina</p>
      <p>Aleja javora 13, 10000 Zagreb</p>
      <p>📞 095 5555 345</p>
      <p>📧 prodaja@maskice.hr</p>
    </div>
    <div>
      <h4>PRODAJNA MJESTA</h4>
      <p>Trešnjevka</p>
      <p>Dugave</p>
      <p>Velika Gorica</p>
    </div>
    <div>
      <h4>PODRŠKA</h4>
      <p>Dostava</p>
      <p>O nama</p>
      <p>Karijera</p>
    </div>
    <div>
      <h4>UVJETI KORIŠTENJA</h4>
      <p>Pravne napomene</p>
      <p>Zaštita privatnosti</p>
      <p>Raskid ugovora</p>
    </div>
  </div>
  <div class="footer-bottom">
    Copyright © 2025 Maskice.hr | Veleprodaja / B2B
  </div>
</footer>

<div class="contact-strip">
  📞 095 5555 345 - Naruči proizvod telefonom
</div>

</body>
</html>