Untitled

avatar
unknown
plain_text
10 months ago
5.8 kB
13
Indexable
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Practice Shop — Replica for Learning</title>
  <style>
    :root{
      --bg:#f6f7fb; --card:#ffffff; --muted:#6b7280; --accent:#1f6feb;
      --radius:12px; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    body{margin:0;background:var(--bg);color:#111;}
    header{background:#fff;padding:18px 28px;box-shadow:0 1px 8px rgba(16,24,40,0.06);display:flex;align-items:center;justify-content:space-between;}
    .brand{display:flex;gap:12px;align-items:center;}
    .logo{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,#dbeafe,#bfdbfe);display:flex;align-items:center;justify-content:center;font-weight:700;color:#064e3b;}
    nav a{margin:0 10px;color:var(--muted);text-decoration:none;font-weight:600;}
    .cta{background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700;}
    main{max-width:1100px;margin:28px auto;padding:0 20px;}
    .notice{background:#fff3c4;border:1px solid #ffecb5;color:#7a5a00;padding:10px 14px;border-radius:10px;margin-bottom:18px}
    .hero{display:flex;gap:24px;align-items:center;padding:28px;background:linear-gradient(180deg,#fff,#fbfdff);border-radius:16px;box-shadow:0 6px 18px rgba(15,23,42,0.04)}
    .hero-left{flex:1}
    .hero h1{margin:0 0 8px;font-size:28px}
    .hero p{margin:0;color:var(--muted)}
    .hero-right{width:220px;height:140px;background:linear-gradient(135deg,#e6f0ff,#eefbff);border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#08306b}
    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:20px}
    .card{background:var(--card);padding:14px;border-radius:12px;box-shadow:0 6px 12px rgba(12,18,28,0.04);display:flex;flex-direction:column;gap:10px}
    .thumb{height:140px;border-radius:10px;background:linear-gradient(135deg,#f3f4f6,#fff);display:flex;align-items:center;justify-content:center;font-weight:700;color:#374151}
    .price{font-weight:800}
    footer{max-width:1100px;margin:28px auto;padding:18px 20px;color:var(--muted);font-size:14px}
    @media (max-width:640px){ .hero{flex-direction:column;align-items:stretch}.hero-right{width:100%;height:120px} }
  </style>
</head>
<body>
  <header>
    <div class="brand">
      <div class="logo">PS</div>
      <div>
        <div style="font-weight:800">Practice Shop</div>
        <div style="font-size:12px;color:var(--muted)">Replica layout — educational use only</div>
      </div>
    </div>
    <nav>
      <a href="#">Home</a>
      <a href="#">Products</a>
      <a href="#">About</a>
      <a class="cta" href="#">Sign in</a>
    </nav>
  </header>

  <main>
    <div class="notice">
      <strong>Notice:</strong> This is a practice replica created for learning and UI testing only. It is <em>not</em> affiliated with any real company.
    </div>

    <section class="hero">
      <div class="hero-left">
        <h1>Fresh designs for everyday use</h1>
        <p>Practice cloning this layout to learn HTML, CSS, responsive design and component structure. No real brand content is used.</p>
      </div>
      <div class="hero-right">Hero Image</div>
    </section>

    <section class="grid" aria-label="Products">
      <article class="card">
        <div class="thumb">Product A</div>
        <div style="display:flex;justify-content:space-between;align-items:center">
          <div>
            <div style="font-weight:700">Simple Backpack</div>
            <div style="font-size:13px;color:var(--muted)">Compact & lightweight</div>
          </div>
          <div class="price">£29</div>
        </div>
        <div style="display:flex;gap:8px">
          <button style="flex:1;padding:8px;border-radius:10px;border:1px solid #e6e9ef;background:#fff">View</button>
          <button style="flex:1;padding:8px;border-radius:10px;border:none;background:var(--accent);color:#fff">Add</button>
        </div>
      </article>

      <article class="card">
        <div class="thumb">Product B</div>
        <div style="display:flex;justify-content:space-between;align-items:center">
          <div>
            <div style="font-weight:700">Everyday Water Bottle</div>
            <div style="font-size:13px;color:var(--muted)">BPA-free, 500ml</div>
          </div>
          <div class="price">£12</div>
        </div>
        <div style="display:flex;gap:8px">
          <button style="flex:1;padding:8px;border-radius:10px;border:1px solid #e6e9ef;background:#fff">View</button>
          <button style="flex:1;padding:8px;border-radius:10px;border:none;background:var(--accent);color:#fff">Add</button>
        </div>
      </article>

      <article class="card">
        <div class="thumb">Product C</div>
        <div style="display:flex;justify-content:space-between;align-items:center">
          <div>
            <div style="font-weight:700">Noise-Reducing Headphones</div>
            <div style="font-size:13px;color:var(--muted)">Lightweight, long battery</div>
          </div>
          <div class="price">£59</div>
        </div>
        <div style="display:flex;gap:8px">
          <button style="flex:1;padding:8px;border-radius:10px;border:1px solid #e6e9ef;background:#fff">View</button>
          <button style="flex:1;padding:8px;border-radius:10px;border:none;background:var(--accent);color:#fff">Add</button>
        </div>
      </article>
    </section>
  </main>

  <footer>
    Practice replica — For educational use only. Do not impersonate or attempt to pass this off as a real company website.
  </footer>
</body>
</html>
Editor is loading...
Leave a Comment