Kod HTML dla WordPressa

Statyczna wersja strony — do wklejenia w WordPress

Skopiuj cały kod poniżej i wklej go w WordPressie jako blok „Własny kod HTML” (Custom HTML) na nowej stronie. Style są wbudowane w kod — nic więcej nie jest potrzebne. Zdjęcia i mapa ładują się z oryginalnej strony.

<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boatclub.wro — Wynajem motorówki Barracuda 585 we Wrocławiu</title>
<style>
  .bcw * { margin:0; padding:0; box-sizing:border-box; }
  .bcw { font-family:'Segoe UI', system-ui, -apple-system, Arial, sans-serif; color:#1A1C1E; background:#F2F4F5; line-height:1.6; max-width:100%; overflow-x:hidden; }
  .bcw img { display:block; max-width:100%; }
  .bcw .wrap { max-width:1100px; margin:0 auto; padding:0 20px; }
  .bcw .eyebrow { display:block; font-size:11px; letter-spacing:.35em; text-transform:uppercase; color:#0047AB; font-weight:600; margin-bottom:14px; }
  .bcw h1 { font-size:42px; line-height:1.05; color:#fff; font-weight:800; }
  .bcw h1 em { font-weight:400; color:#99CCEE; }
  .bcw h2 { font-size:34px; line-height:1.1; font-weight:800; margin-bottom:16px; }
  .bcw h3 { font-size:18px; font-weight:700; }
  .bcw p.lead { font-size:17px; color:#5b6470; }
  .bcw section { padding:64px 0; }
  .bcw .hero { position:relative; min-height:520px; display:flex; align-items:flex-end; background:#1A1C1E; }
  .bcw .hero img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; }
  .bcw .hero .shade { position:absolute; inset:0; background:linear-gradient(to top, #1A1C1E 0%, rgba(26,28,30,.25) 60%, rgba(26,28,30,.55) 100%); }
  .bcw .hero .inner { position:relative; z-index:2; padding:80px 20px 56px; max-width:1100px; margin:0 auto; width:100%; }
  .bcw .hero .eyebrow { color:#99CCEE; }
  .bcw .hero p { color:rgba(255,255,255,.75); font-size:18px; max-width:560px; margin-top:18px; }
  .bcw .btns { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
  .bcw .btn { display:inline-block; padding:15px 30px; font-size:13px; letter-spacing:.15em; text-transform:uppercase; font-weight:700; text-decoration:none; transition:background .2s; }
  .bcw .btn-primary { background:#0047AB; color:#fff !important; }
  .bcw .btn-primary:hover { background:#003a8c; }
  .bcw .btn-ghost { border:1px solid rgba(255,255,255,.4); color:#fff !important; }
  .bcw .btn-ghost:hover { background:rgba(255,255,255,.1); }
  .bcw .spec-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:rgba(113,124,137,.25); margin-top:28px; }
  .bcw .spec-cell { background:#F2F4F5; padding:22px; }
  .bcw .spec-cell .lab { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#717C89; }
  .bcw .spec-cell .val { font-size:18px; font-weight:700; margin-top:4px; }
  .bcw .boat-img { margin-top:34px; }
  .bcw .boat-img img { width:100%; height:420px; object-fit:cover; }
  .bcw .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:28px; }
  .bcw .card { background:#fff; border:1px solid rgba(113,124,137,.18); padding:22px; }
  .bcw .card .price { font-size:26px; font-weight:800; color:#0047AB; margin:6px 0; }
  .bcw .card .sub { font-size:13px; color:#717C89; }
  .bcw .badge { display:inline-block; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:#0047AB; border:1px solid rgba(0,71,171,.35); padding:3px 8px; margin-bottom:8px; }
  .bcw ul.clean { list-style:none; }
  .bcw ul.check li { padding-left:26px; position:relative; margin-top:8px; color:#3c434d; }
  .bcw ul.check li:before { content:"✓"; position:absolute; left:0; color:#0047AB; font-weight:700; }
  .bcw .routes { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; margin-top:28px; }
  .bcw .route { display:flex; justify-content:space-between; gap:10px; background:#fff; border:1px solid rgba(113,124,137,.18); padding:14px 16px; font-size:14px; align-items:center; }
  .bcw .route b { color:#717C89; font-size:16px; }
  .bcw .route .t { white-space:nowrap; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#0047AB; font-weight:700; }
  .bcw .gal { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-top:28px; }
  .bcw .gal figure { position:relative; }
  .bcw .gal img { width:100%; height:240px; object-fit:cover; }
  .bcw .gal figcaption { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(to top, rgba(26,28,30,.85), transparent); color:#fff; font-size:13px; padding:26px 14px 10px; }
  .bcw .contact { background:#1A1C1E; color:#fff; }
  .bcw .contact h2 { color:#fff; }
  .bcw .contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:40px; margin-top:24px; align-items:start; }
  .bcw .contact a { color:#99CCEE; text-decoration:none; font-size:16px; }
  .bcw .contact a:hover { text-decoration:underline; }
  .bcw .contact .row { display:flex; gap:12px; align-items:baseline; margin-top:14px; }
  .bcw .contact .lab2 { font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:#99CCEE; min-width:90px; }
  .bcw .map { margin-top:34px; }
  .bcw .map iframe { width:100%; height:320px; border:0; filter:grayscale(35%); }
  .bcw .legal { text-align:center; font-size:12px; color:rgba(255,255,255,.45); margin-top:44px; }
  @media (max-width:640px){ .bcw h1{font-size:32px;} .bcw h2{font-size:26px;} .bcw .boat-img img{height:280px;} }
</style>
</head>
<body>
<div class="bcw">

  <section class="hero">
    <img class="bg" src="https://media.base44.com/images/public/6a71f8bda30232f7aa24d8cc/29ab82183_generated_image.png" alt="Barracuda 585 na Odrze we Wrocławiu">
    <div class="shade"></div>
    <div class="inner">
      <span class="eyebrow">Marina Viator · Wrocław</span>
      <h1>Rzeka jest<br><em>Twoją prywatną</em><br>galerią.</h1>
      <p>Barracuda 585 — 100 KM, 7 osób, szara deska teakowa 2022. Wypożycz luksusową motorówkę i zobacz Wrocław z wody.</p>
      <div class="btns">
        <a class="btn btn-primary" href="tel:739686442">Zarezerwuj rejs — 739 686 442</a>
        <a class="btn btn-ghost" href="#kontakt">Zobacz kontakt</a>
      </div>
    </div>
  </section>

  <section>
    <div class="wrap">
      <span class="eyebrow">Specyfikacja</span>
      <h2>Barracuda 585</h2>
      <p class="lead">Zwinna, mocna i komfortowa motorówka stworzona do odkrywania architektury Wrocławia z perspektywy Odry. Siedem osób, sto koni, deska teakowa 2022.</p>
      <div class="spec-grid">
        <div class="spec-cell"><div class="lab">Numer rejestracyjny</div><div class="val">PL-0089BY</div></div>
        <div class="spec-cell"><div class="lab">Pojemność</div><div class="val">7 osób</div></div>
        <div class="spec-cell"><div class="lab">Moc silnika</div><div class="val">100 KM</div></div>
        <div class="spec-cell"><div class="lab">Rok / Wersja</div><div class="val">2022 Evolution</div></div>
        <div class="spec-cell"><div class="lab">Deska pokładowa</div><div class="val">Szara teakowa</div></div>
        <div class="spec-cell"><div class="lab">Sterowanie</div><div class="val">Konsola / bimini</div></div>
      </div>
      <div class="boat-img">
        <img src="https://media.base44.com/images/public/user_6a71f5e962db3bff5d08769c/d09c731d6_tempImageiR4KZ1.jpg" alt="Barracuda 585 — łódź motorowa">
      </div>
    </div>
  </section>

  <section style="background:#fff;">
    <div class="wrap">
      <span class="eyebrow">Cennik</span>
      <h2>Ceny bez ukrytych kosztów</h2>
      <p class="lead">Paliwo w cenie przy wynajmie godzinowym. Każda trasa z kapitanem lub bez — do 7 osób na pokładzie.</p>
      <div class="cards">
        <div class="card"><span class="badge">1 godzina</span><div class="price">450 zł</div><div class="sub">paliwo w cenie</div></div>
        <div class="card"><span class="badge">2 godziny</span><div class="price">850 zł</div><div class="sub">paliwo w cenie · najczęściej wybierany</div></div>
        <div class="card"><span class="badge">3 godziny</span><div class="price">1 150 zł</div><div class="sub">paliwo w cenie</div></div>
        <div class="card"><span class="badge">4 godziny</span><div class="price">1 400 zł</div><div class="sub">paliwo w cenie</div></div>
        <div class="card"><span class="badge">Cały dzień</span><div class="price">1 300 zł</div><div class="sub">ok. 8 godzin + zużyte paliwo</div></div>
        <div class="card"><span class="badge">Happy Hours −20%</span><div class="price">pon.–czw.</div><div class="sub">rejsy 8:00–11:00, zniżka −20%</div></div>
      </div>
      <ul class="clean check" style="margin-top:26px;">
        <li>Sternik (doświadczony kapitan) — +50 zł/h, ze sternikiem bez kaucji</li>
        <li>Kaucja zwrotna przy wynajmie bez sternika — 2 000 zł</li>
        <li>Dodatki na pokład: deski serów (od 70 zł), boxy przekąsek (od 60 zł), prosecco z lampkami (100 zł), lemoniady ze szklankami (od 25 zł)</li>
        <li>Imprezy i okazje — wycena indywidualna (firmowe, zaręczyny, urodziny, wieczory panieńskie i kawalerskie)</li>
      </ul>
    </div>
  </section>

  <section>
    <div class="wrap">
      <span class="eyebrow">Trasy</span>
      <h2>Wybierz swoją trasę</h2>
      <p class="lead">Od krótkiego okrążenia centrum po całodniową wyprawę do Urazu — zalecamy rejs na minimum 2 godziny.</p>
      <div class="routes">
        <div class="route"><span><b>01</b>&nbsp; Godzina na Odrze — centrum Wrocławia</span><span class="t">1 h</span></div>
        <div class="route"><span><b>02</b>&nbsp; ZOO Express</span><span class="t">1 h</span></div>
        <div class="route"><span><b>03</b>&nbsp; Opatowice</span><span class="t">1 h</span></div>
        <div class="route"><span><b>04</b>&nbsp; Oławką</span><span class="t">1 h</span></div>
        <div class="route"><span><b>05</b>&nbsp; Tajemnicza Oławka</span><span class="t">1 h</span></div>
        <div class="route"><span><b>06</b>&nbsp; Wrocław + Ostrów Tumski</span><span class="t">2 h</span></div>
        <div class="route"><span><b>07</b>&nbsp; Wrocław nocą</span><span class="t">2 h</span></div>
        <div class="route"><span><b>08</b>&nbsp; Dzika Odra — Opatowice</span><span class="t">2 h</span></div>
        <div class="route"><span><b>09</b>&nbsp; Mosty Wrocławia</span><span class="t">≈ 3 h</span></div>
        <div class="route"><span><b>10</b>&nbsp; Sunset Cruise</span><span class="t">2 h</span></div>
        <div class="route"><span><b>11</b>&nbsp; Romantyczny zachód słońca</span><span class="t">2–2,5 h</span></div>
        <div class="route"><span><b>12</b>&nbsp; Wrocław + adrenalina</span><span class="t">≈ 3 h</span></div>
        <div class="route"><span><b>13</b>&nbsp; Wielka Pętla Wrocławia</span><span class="t">≈ 4 h</span></div>
        <div class="route"><span><b>14</b>&nbsp; Wrocław od tyłu</span><span class="t">≈ 4 h</span></div>
        <div class="route"><span><b>15</b>&nbsp; Rędzin</span><span class="t">≈ 4 h</span></div>
        <div class="route"><span><b>16</b>&nbsp; Bajkał</span><span class="t">≈ 4 h</span></div>
        <div class="route"><span><b>17</b>&nbsp; Wrocław → Uraz</span><span class="t">cały dzień</span></div>
        <div class="route"><span><b>18</b>&nbsp; Dzika Odra</span><span class="t">cały dzień</span></div>
        <div class="route"><span><b>19</b>&nbsp; Wrocław od A do Z</span><span class="t">cały dzień</span></div>
        <div class="route"><span><b>20</b>&nbsp; Motorówka Full Experience</span><span class="t">cały dzień</span></div>
        <div class="route"><span><b>21</b>&nbsp; Od Wschodu do Zachodu</span><span class="t">cały dzień</span></div>
        <div class="route"><span><b>22</b>&nbsp; Wielka Przygoda – bez pośpiechu</span><span class="t">cały dzień</span></div>
      </div>
    </div>
  </section>

  <section style="background:#fff;">
    <div class="wrap">
      <span class="eyebrow">Wrocław z wody</span>
      <h2>Galeria miasta</h2>
      <p class="lead">Architektoniczne klejnoty Wrocławia widziane z pokładu Barracudy 585.</p>
      <div class="gal">
        <figure><img src="https://media.base44.com/images/public/6a71f8bda30232f7aa24d8cc/88df4cc93_generated_10870e1a.png" alt="Most Grunwaldzki z wody"><figcaption>Most Grunwaldzki</figcaption></figure>
        <figure><img src="https://media.base44.com/images/public/6a71f8bda30232f7aa24d8cc/7ba07f95c_generated_a48c8845.png" alt="Ostrów Tumski z wody"><figcaption>Ostrów Tumski — katedra</figcaption></figure>
        <figure><img src="https://media.base44.com/images/public/6a71f8bda30232f7aa24d8cc/b3ab08bb2_generated_00d41ed8.png" alt="Nabrzeże Odry z lotu ptaka"><figcaption>Nabrzeże Odry</figcaption></figure>
        <figure><img src="https://upload.wikimedia.org/wikipedia/commons/8/80/Odra_ko%C5%82o_Urazu_3.jpg" alt="Odra koło Urazu"><figcaption>Uraz — cel całodniowej wyprawy</figcaption></figure>
        <figure><img src="https://media.base44.com/images/public/6a71f8bda30232f7aa24d8cc/1d7c896ed_IMG_2051.JPG" alt="Za sterem Barracudy pod mostem"><figcaption>Za sterem</figcaption></figure>
        <figure><img src="https://media.base44.com/images/public/6a71f8bda30232f7aa24d8cc/ca897fb5_IMG_2055.JPG" alt="Barracuda 585 w centrum Wrocławia"><figcaption>Barracuda w ruchu</figcaption></figure>
      </div>
    </div>
  </section>

  <section class="contact" id="kontakt">
    <div class="wrap">
      <span class="eyebrow" style="color:#99CCEE;">Kontakt</span>
      <h2>Zarezerwuj swoją trasę.</h2>
      <div class="contact-grid">
        <div>
          <div class="row"><span class="lab2">Telefon</span><a href="tel:739686442">739 686 442</a></div>
          <div class="row"><span class="lab2">E-mail</span><a href="mailto:boatclub.wro@op.pl">boatclub.wro@op.pl</a></div>
          <div class="row"><span class="lab2">Adres</span><span>Marina Viator, ul. Na Grobli 16, 50-421 Wrocław</span></div>
          <div class="row"><span class="lab2">Instagram</span><a href="https://www.instagram.com/boatclub.wro" target="_blank" rel="noopener">@boatclub.wro</a></div>
          <div class="row"><span class="lab2">TikTok</span><a href="https://www.tiktok.com/@boatclub.wro" target="_blank" rel="noopener">@boatclub.wro</a></div>
          <div class="row"><span class="lab2">Facebook</span><a href="https://www.facebook.com/people/BoatClub-Wroc%C5%82aw/pfbid0qKbzWiz9C84tXdKaPkfecHwJQ5LPmGhSpSmcUGAhY73y4qGp3ffBkCGzRCrq84dQl/" target="_blank" rel="noopener">BoatClub Wrocław</a></div>
        </div>
        <div>
          <p style="color:rgba(255,255,255,.7);">Rezerwacje przyjmujemy telefonicznie i mailowo — doradzimy trasę, dobierzemy pakiet i dodatki na pokład. Pojemność do 7 osób. Wszystkie ceny netto.</p>
          <p style="margin-top:16px;"><a class="btn btn-primary" href="tel:739686442">Zadzwoń i zarezerwuj</a></p>
        </div>
      </div>
      <div class="map">
        <iframe title="Marina Viator — Na Grobli 16, Wrocław" src="https://maps.google.com/maps?q=Boatclubwro%20wypo%C5%BCyczalnia%20%C5%81odzi%2C%20Na%20Grobli%2016%2C%2050-421%20Wroc%C5%82aw&z=15&output=embed" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>
      <p class="legal">© Boatclub.wro · Barracuda 585 · Wrocław</p>
    </div>
  </section>

</div>
</body>
</html>

Zawartość: hero, specyfikacja Barracudy 585, cennik, 22 trasy, galeria i kontakt z mapą.

base44
Edit with Base44