---
title: "Przykładowe zastosowania IFrame"
description: "Wykorzystaj gotowe IFrames od Meeting Application, żeby Twoja strona eventowa była naprawdę „żywa”"
url: https://help.meetingapplication.com/pl/articles/9497448-przykladowe-zastosowania-iframe
collection: "Strona wydarzenia"
updated: 2026-10-16
language: pl
alternates: [en]
---

# Przykładowe zastosowania IFrame

Wykorzystaj gotowe IFrames od Meeting Application, żeby Twoja strona eventowa była naprawdę „żywa”

Zorganizowałeś wydarzenie, masz aplikację mobilną, stronę www… ale chcesz, żeby wszystko grało razem i uczestnicy mieli dostęp do najważniejszych informacji w jednym miejscu? Z pomocą przychodzą iframe’y – niewielkie fragmenty kodu, które możesz wkleić na swoją stronę internetową, by wyświetlić np. dodatkowe komunikaty, własną galerię zdjęć, guzik do własnego newslettera - możliwości są tak naprawdę nieograniczone.

W Meeting Application przygotowaliśmy gotowe iframe’y do najczęściej używanych komponentów – wystarczy skopiować, wkleić i działa. W tym artykule pokażemy Ci kilka przykładowych konfiguracji, które możesz zaimplementować w 5 minut, a Twoi uczestnicy to docenią. 🚀

> **Info:** **PRO TIP:**
> Jeśli chcesz upewnić się, że Twój element **nie odziedziczy koloru** z nadrzędnych stylów lub z zewnętrznego CSS, możesz użyć deklaracji `!important`:
> `color: #ffffff !important;`
> Dzięki temu przeglądarka zignoruje inne reguły (nawet te o wyższej specyficzności), a Twój kolor zostanie zastosowany bez wyjątku.

> **Warning:** Moduł iFrame wymaga pewnej wiedzy specjalistycznej. Meeting Application pozwala na korzystanie z tego modułu, jednak konfiguracja i finalny efekt leżą po stronie Administratorów wydarzenia.

## Pojedyncze zdjęcie

![](https://staticfiles.gleap.io/helparticle/20250522130016_3356.png)

**1\. Zmiana zdjęcia i jego opisu**

W kodzie HTML znajdź element `<img>`, np.:

```javascript
html

<imgsrc="https://media.istockphoto.com/id/482132777/pl/zdj%C4%99cie/para-w-nowym-jorku.jpg?s=2048x2048&w=is&k=20&c=..."alt="Zdjęcie Pary w Nowym Jorku"
/>

```

Aby podmienić zdjęcie:

-   Zmień wartość `src` na pełny adres URL do zdjęcia znajdującego się **w internecie** (np. na własnym serwerze lub w serwisie zdjęciowym).
    

> **Warning:** Nie używaj plików lokalnych z komputera – zdjęcie musi być dostępne online.

Aby zmienić opis:

-   Wartość `alt` powinna być krótka i opisywać, co znajduje się na zdjęciu (np. "Koncert na świeżym powietrzu").
    

* * *

**2\. Zmiana koloru ramki**

W części `<style>` znajdź klasę `.frame` i linię:

```javascript
css

border: 0.25rem solid rgba(91, 3, 254, 0.6);

```

Zmień kolor (czyli wartość `rgba(...)`) na dowolny inny, np. `#ff6600`, `rgba(200, 50, 50, 0.8)` lub `black`.

* * *

**3\. Zmiana zaokrąglenia ramki**

W tej samej klasie `.frame` znajduje się:

```javascript
css

border-radius: 1.875rem;

```

Można zmienić wartość `border-radius` na mniejszą (mniej zaokrąglona ramka) lub większą (bardziej zaokrąglona). Dla całkowicie prostych rogów ustaw `0`.

**Kod HTML do skopiowania:**

```javascript
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Obraz Festiwalowy</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body,
      html {
        width: 100%;
        font-family: Arial, sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .frame {
        max-width: 100%;
        max-height: 100%;
        border: 0.25rem solid rgba(91, 3, 254, 0.6);
        border-radius: 1.875rem;;
        overflow: hidden;
        transition: transform 0.4s ease;
        display: inline-block;
        margin: 1.5rem;
      }

      .frame:hover {
        transform: scale(1.02);
      }

      .frame img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
      }

      @media (max-width: 768px) {
        .frame {
          border-radius: 0.9375rem;
          border-width: 0.125rem;
        }
      }

      @media (max-width: 480px) {
        .frame {
          border-radius: 0.9375rem;
          border-width: 0.125rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="frame">
      <img
        src="https://media.istockphoto.com/id/482132777/pl/zdj%C4%99cie/para-w-nowym-jorku.jpg?s=2048x2048&w=is&k=20&c=ehVX4hPfEBhhfIzy6RZvOLgAcSYt-QLhGqJB6UzaZuE="
        alt="Zdjęcie Pary w Nowym Jorku"
      />
    </div>
  </body>
</html>
```

## Kolaż zdjęć

![](https://staticfiles.gleap.io/helparticle/20250522130049_4017.png)

**1\. Zmiana zdjęcia i jego opisu**

W kodzie HTML znajdź elementy `<img>`, np.:

```javascript
<imgsrc="https://media.istockphoto.com/id/1509148271/pl/zdj%C4%99cie/..."alt="Festiwal – serce w dłoniach"
/>

```

Aby podmienić zdjęcie:

-   Zamień adres `src` na nowy link do zdjęcia **umieszczonego w internecie** – np. na własnym serwerze lub z zewnętrznej platformy (istockphoto, unsplash, itd.).
    
    > **Warning:** Nie używaj plików lokalnych z komputera – zdjęcie musi być dostępne online.
    

Aby zmienić opis:

-   Wpisz nową treść w `alt`, np. `"Koncert nocą"` – powinien opisywać, co znajduje się na zdjęciu.
    

* * *

**2\. Dodanie nowego zdjęcia**

Aby dodać nowe zdjęcie w prawej kolumnie (na dole):

1.  Skopiuj cały blok z klasą `.small-frame`, np.:
    

```javascript
<div class="small-frame">
  <imgsrc="URL"alt="Opis zdjęcia"
/>
</div>

```

Wklej go poniżej ostatniego `.small-frame`, przed końcem `</div>` zamykającego `.right-column`.

* * *

**3\. Zmiana koloru ramki**

W `<style>` znajdź klasy `.left-column` oraz `.small-frame` i linię:

```javascript
border: 0.25rem solid rgba(91, 3, 254, 0.6);

```

Możesz zmienić kolor `rgba(...)` na inny – np. `#ff6600`, `rgba(200, 0, 0, 0.8)` albo `black`.

* * *

**4\. Zmiana zaokrąglenia rogów**

W tych samych klasach znajduje się:

```javascript
border-radius: 1.875rem;

```

Możesz zwiększyć wartość (bardziej zaokrąglone rogi) lub zmniejszyć (ostrzejsze rogi). Dla prostokątów – ustaw `0`.

**Kod HTML do skopiowania:**

```javascript
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kolaż Festiwalowy</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body,
      html {
        width: 100%;
        font-family: Arial, sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .collage-container {
        display: flex;
        gap: 1.5rem;
        max-width: 100%;
        max-height: 100%;
        padding: 1.5rem;
      }

      .left-column {
        flex: 1;
        border: 0.25rem solid rgba(91, 3, 254, 0.6);
        border-radius: 1.875rem;
        overflow: hidden;
        transition: transform 0.4s ease;
      }

      .right-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

      .small-frame {
        flex: 1;
        border: 0.25rem solid rgba(91, 3, 254, 0.6);
        border-radius: 1.875rem;
        overflow: hidden;
        transition: transform 0.4s ease;
      }

      .left-column:hover,
      .small-frame:hover {
        transform: scale(1.03);
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      @media (max-width: 768px) {
        body {
          padding: 0.75rem;
          align-items: flex-start;
        }

        .collage-container {
          flex-direction: column;
          gap: 1rem;
          max-width: 100%;
        }

        .left-column,
        .right-column {
          flex: none;
          min-width: 0;
          width: 100%;
        }

        .right-column {
          gap: 1rem;
        }

        .left-column,
        .small-frame {
          border-radius: 1.25rem;
          border-width: 0.1875rem;
        }
      }

      @media (max-width: 480px) {
        .left-column,
        .small-frame {
          border-radius: 0.9375rem;
          border-width: 0.125rem; 
        }
      }
    </style>
  </head>
  <body>
    <div class="collage-container">
      <div class="left-column">
        <img
          src="https://media.istockphoto.com/id/1509148271/pl/zdj%C4%99cie/m%C5%82oda-kobieta-patrzy-w-kamer%C4%99-na-tle-%C5%9Bwiate%C5%82-diabelskiego-m%C5%82yna-para-w-nocy-podczas.jpg?s=2048x2048&w=is&k=20&c=PO1NAtBK2vJgZQ0yD1G8F3ByteaOd8ms1K0cm0ODwpg="
          alt="Festiwal – serce w dłoniach"
        />
      </div>
      <div class="right-column">
        <div class="small-frame">
          <img
            src="https://media.istockphoto.com/id/2037883326/pl/zdj%C4%99cie/do%C5%82%C4%85cz-do-nas-na-festiwalu-muzycznym-tego-lata.jpg?s=2048x2048&w=is&k=20&c=280cJFT98RjKPO_73UGlRqiGlPAcoVWSWfXv6rPDKQU="
            alt="Para w Nowym Jorku"
          />
        </div>
        <div class="small-frame">
          <img
            src="https://media.istockphoto.com/id/1557905719/pl/zdj%C4%99cie/m%C5%82odzi-szcz%C4%99%C5%9Bliwi-przyjaciele-korzystaj%C4%85cy-z-telefonu-kom%C3%B3rkowego-podczas-wyst%C4%99pu-na-%C5%BCywo.jpg?s=2048x2048&w=is&k=20&c=IScF_-Y3zUG5boC0kUjQyvLyracysl8dryaj9_fRrg4="
            alt="Tłum na koncercie"
          />
        </div>
      </div>
    </div>
  </body>
</html>
```

## Karuzela zdjęć

![](https://staticfiles.gleap.io/helparticle/20250522130246_5435.png)

**1\. Zmiana zdjęcia i jego opisu**

W kodzie HTML znajdź elementy `<img>`, np.:

```javascript
<imgsrc="https://media.istockphoto.com/id/1509148271/pl/zdj%C4%99cie/..."alt="Festiwal – serce w dłoniach"
/>

```

Aby podmienić zdjęcie:

-   Zamień adres `src` na nowy link do zdjęcia **umieszczonego w internecie** – np. na własnym serwerze lub z zewnętrznej platformy (istockphoto, unsplash, itd.).
    

> **Warning:** Nie używaj plików lokalnych z komputera – zdjęcie musi być dostępne online.

Aby zmienić opis:

-   Wpisz nową treść w `alt`, np. `"Koncert nocą"` – powinien opisywać, co znajduje się na zdjęciu.
    

* * *

2\. **Jak dodać zdjęcie do karuzeli**

Wyszukaj w kodzie HTML fragment z `<div class="carousel-track">`. Wewnątrz niego są zdjęcia dodane jako tagi `<img>`:

```javascript
<div class="carousel-track">
  <imgsrc="LINK_DO_ZDJĘCIA"alt="OPIS_ZDJĘCIA"
  />
  <!-- kolejne zdjęcia... --></div>

```

Każde zdjęcie w karuzeli to jeden taki tag `<img>`. Żeby dodać własne zdjęcie:

-   Skopiuj istniejący tag `<img>`,
    
-   Wklej go niżej (wewnątrz `.carousel-track`),
    
-   Zmień wartość w `src` na **link do Twojego zdjęcia w Internecie**,
    
-   Zmień `alt` na krótki opis, co przedstawia zdjęcie (ważne dla dostępności i SEO).
    

**Kod HTML do skopiowania:**

```javascript
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Karuzela zdjęć</title>
    <style>
      .carousel-container {
        position: relative;
        width: 100%;
      }

      .carousel-wrapper {
        overflow: hidden;
        margin: 0 2.5rem;
        position: relative;
      }

      .carousel-track {
        display: flex;
        transition: transform 0.4s ease-in-out;
      }

      .carousel-track img {
        flex-shrink: 0;
        flex-basis: 40%;
        height: 18.75rem;
        margin-right: 0.625rem;
        object-fit: cover;
        max-width: 40%;
        box-sizing: border-box;
      }

      .carousel-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        border: none;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border-radius: 50%;
        font-size: 1.5rem;
        cursor: pointer;
        z-index: 10;
        transition: background-color 0.2s ease, transform 0.1s ease;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .carousel-button:hover {
        background-color: rgba(0, 0, 0, 0.8);
      }

      .carousel-button:active {
        transform: translateY(-50%) scale(0.95);
      }

      .carousel-button:disabled {
        background-color: rgba(0, 0, 0, 0.2);
        cursor: not-allowed;
        opacity: 0.5;
        transform: translateY(-50%);
      }

      .carousel-button.prev {
        left: 0.9375rem;
      }

      .carousel-button.next {
        right: 0.9375rem;
      }

      @media (max-width: 768px) {
        .carousel-track img {
          flex-basis: 100%;
          max-width: 100%;
          margin-right: 0.3125rem;
        }

        .carousel-wrapper {
          margin: 0;
        }

        .carousel-button {
          width: 2.1875rem;
          height: 2.1875rem;
          font-size: 1.3rem;
        }

        .carousel-button.prev {
          left: 0.3125rem;
        }
        .carousel-button.next {
          right: 0.3125rem;
        }
      }

      @media (max-width: 480px) {
        .carousel-track img {
          margin-right: 0.1875rem;
        }
        .carousel-button {
          width: 1.875rem;
          height: 1.875rem;
          font-size: 1.1rem;
        }
        .carousel-button.prev {
          left: 0.125rem;
        }
        .carousel-button.next {
          right: 0.125rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="carousel-container">
      <button class="carousel-button prev" aria-label="Poprzedni slajd">
        ‹
      </button>
      <div class="carousel-wrapper">
        <div class="carousel-track">
          <img
            src="https://media.istockphoto.com/id/1509148271/pl/zdj%C4%99cie/m%C5%82oda-kobieta-patrzy-w-kamer%C4%99-na-tle-%C5%9Bwiate%C5%82-diabelskiego-m%C5%82yna-para-w-nocy-podczas.jpg?s=2048x2048&w=is&k=20&c=PO1NAtBK2vJgZQ0yD1G8F3ByteaOd8ms1K0cm0ODwpg="
            alt="Zdjęcie 1"
          />
          <img
            src="https://media.istockphoto.com/id/2037883326/pl/zdj%C4%99cie/do%C5%82%C4%85cz-do-nas-na-festiwalu-muzycznym-tego-lata.jpg?s=2048x2048&w=is&k=20&c=280cJFT98RjKPO_73UGlRqiGlPAcoVWSWfXv6rPDKQU="
            alt="Zdjęcie 2"
          />
          <img
            src="https://media.istockphoto.com/id/1557905719/pl/zdj%C4%99cie/m%C5%82odzi-szcz%C4%99%C5%9Bliwi-przyjaciele-korzystaj%C4%85cy-z-telefonu-kom%C3%B3rkowego-podczas-wyst%C4%99pu-na-%C5%BCywo.jpg?s=2048x2048&w=is&k=20&c=IScF_-Y3zUG5boC0kUjQyvLyracysl8dryaj9_fRrg4="
            alt="Zdjęcie 3"
          />
          <img
            src="https://media.istockphoto.com/id/1557905719/pl/zdj%C4%99cie/m%C5%82odzi-szcz%C4%99%C5%9Bliwi-przyjaciele-korzystaj%C4%85cy-z-telefonu-kom%C3%B3rkowego-podczas-wyst%C4%99pu-na-%C5%BCywo.jpg?s=2048x2048&w=is&k=20&c=IScF_-Y3zUG5boC0kUjQyvLyracysl8dryaj9_fRrg4="
            alt="Zdjęcie 4"
          />
        </div>
      </div>
      <button class="carousel-button next" aria-label="Następny slajd">›</button>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const wrapper = document.querySelector(".carousel-wrapper");
        const track = document.querySelector(".carousel-track");
        const prevButton = document.querySelector(".carousel-button.prev");
        const nextButton = document.querySelector(".carousel-button.next");
        const images = Array.from(track.children);

        if (
          !wrapper ||
          !track ||
          !prevButton ||
          !nextButton ||
          images.length === 0
        ) {
          console.error("Brak elementów karuzeli!");
          return;
        }

        let currentPosition = 0;
        let imageWidth = 0;
        let visibleWidth = 0;
        let trackWidth = 0;
        let maxScrollLeft = 0;

        function calculateDimensions() {
          if (images.length > 0 && images[0].offsetWidth > 0) {
             const imageStyle = window.getComputedStyle(images[0]);
             const marginRight = parseFloat(imageStyle.marginRight);
             imageWidth = images[0].offsetWidth + marginRight;
          } else {
             console.warn(
               "Szerokość obrazka niedostępna, obliczenia mogą być niedokładne."
             );
             return;
          }

          visibleWidth = wrapper.clientWidth;
          trackWidth = track.scrollWidth;
          maxScrollLeft = visibleWidth - trackWidth;

          if (maxScrollLeft >= 0) {
            maxScrollLeft = 0;
            currentPosition = 0;
            track.style.transform = `translateX(0px)`;
          } else {
             currentPosition = Math.max(maxScrollLeft, Math.min(0, currentPosition));
             track.style.transform = `translateX(${currentPosition}px)`;
          }

          updateButtonStates();
        }

        function updateButtonStates() {
          const tolerance = 1;
          prevButton.disabled = currentPosition >= -tolerance;
          nextButton.disabled = currentPosition <= maxScrollLeft + tolerance;
        }

        function moveCarousel(direction) {
           let targetPosition = currentPosition + direction * imageWidth;
           currentPosition = Math.max(maxScrollLeft, Math.min(0, targetPosition));
           track.style.transform = `translateX(${currentPosition}px)`;
           updateButtonStates();
        }

        nextButton.addEventListener("click", () => {
          if (currentPosition > maxScrollLeft) {
             moveCarousel(-1);
          }
        });

        prevButton.addEventListener("click", () => {
           if (currentPosition < 0) {
             moveCarousel(1);
           }
        });

        function debounce(func, wait) {
          let timeout;
          return function executedFunction(...args) {
            const later = () => {
              clearTimeout(timeout);
              func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
          };
        }

        const debouncedCalculateDimensions = debounce(calculateDimensions, 150);

        window.addEventListener("resize", debouncedCalculateDimensions);

        setTimeout(() => {
            calculateDimensions();
            currentPosition = Math.max(maxScrollLeft, Math.min(0, currentPosition));
            track.style.transform = `translateX(${currentPosition}px)`;
            updateButtonStates();
        }, 100);
      });
    </script>
  </body>
</html>
```

## Sekcja FAQ (obracane kafelki)

![](https://staticfiles.gleap.io/helparticle/20250522130308_9963.png)

1.  **Zmiana tekstu pytań i odpowiedzi**
    

Każde pytanie oraz odpowiedź znajdują się wewnątrz elementów `<div class="faq-front">` i `<div class="faq-back">`.

Przykład:

```javascript
<div class="faq-front">Jak mogę się zarejestrować?</div> <div class="faq-back">Aby się zarejestrować, kliknij "Zarejestruj się" i wypełnij formularz.</div>
```

**Aby edytować:**

-   Zmień pytanie w elemencie `<div class="faq-front">`
    
-   Zmień odpowiedź w elemencie `<div class="faq-back">`
    
-   Aby dodać nowe pytanie i odpowiedź, skopiuj cały blok `<li class="faq-item">...</li>` i wklej go poniżej, zmieniając teksty zgodnie z potrzebami.
    

* * *

2.  **Zmiana tytułu sekcji**
    

-   Tytuł „Najczęściej zadawane pytania” znajduje się w nagłówku `<h2>`. Możesz go zmienić na dowolny tekst:
    

```javascript
<h2>Najczęściej zadawane pytania</h2>
```

* * *

3.  **Zmiana koloru tekstu**
    

Kolor tekstu (pytania i odpowiedzi) jest zdefiniowany w stylach CSS.

-   Kolor tekstu nagłówka `<h2>`:
    

```javascript
color: #444;
```

-   Możesz zmienić ten kolor na dowolny, np.:
    
    -   `#000000` (czarny)
        
    -   `#FF6347` (pomidorowy)
        
    -   `#F5670A` (pomarańczowy)
        
-   Kolor tekstu na odwrotnej stronie kafelka (odpowiedzi) jest ustawiony na:
    

```javascript
color: #444;
```

Zmiana tego koloru odbywa się w podobny sposób, jak dla nagłówka.

* * *

4.  **Zmiana koloru tła**
    

Kolor tła dla całego kontenera FAQ jest ustawiony na biały w klasie `.faq-container`:

```javascript
background: #fff;
```

-   Możesz to zmienić na dowolny kolor, np.:
    

-   `#f0f0f0` (szary)
    
-   `#f1f1f1` (bardzo jasny szary)
    
-   `#fec603` (jasny żółty)
    

-   Kolor tła kafelków (pytania) jest określony w klasie `.faq-tile`:
    

```javascript
background: #fec603;
```

-   Możesz go zmienić na dowolny kolor, np.:
    
    -   `#4CAF50` (zielony)
        
    -   `#FF5733` (czerwony)
        

-   Tło odwrotnej strony kafelka (odpowiedzi) ma kolor:
    

```javascript
background: #f1f1f1;
```

**Kod HTML do skopiowania:**

```javascript
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Najczęściej zadawane pytania</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background: #ffffff;
        color: #333;
        margin: 0;
      }

      .faq-container {
        max-width: 100%;
        margin: 0 auto;
        background: #fff;
        padding: 1.5rem;
        border-radius: 0.5rem;
        box-shadow: 0 0  0.625rem rgba(0, 0, 0, 0.1);
      }

      h2 {
        text-align: center;
        color: #444;
      }

      .faq-list {
        list-style: none;
        padding: 0;
      }

      .faq-item {
        margin-bottom: 0.9375rem;
      }

      .faq-tile {
        background: #fec603;
        color: white;
        border-radius: 1.25rem;
        cursor: pointer;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        position: relative;
        height: 6.25rem;
        width: 100%;
      }

      .faq-tile.flipped {
        transform: rotateY(180deg);
      }

      .faq-front,
      .faq-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.9375rem;
        box-sizing: border-box;
        text-align: center;
        font-size: 20px;
      }

      .faq-back {
        background: #f1f1f1;
        color: #444;
        transform: rotateY(180deg);
        border-radius: 1.25rem;
        border:1px solid #fec603;
      }
    </style>
  </head>
  <body>
    <div class="faq-container">
      <h2>Najczęściej zadawane pytania</h2>
      <ul class="faq-list">
        <li class="faq-item">
          <div class="faq-tile">
            <div class="faq-front">Jak mogę się zarejestrować?</div>
            <div class="faq-back">Aby się zarejestrować, kliknij "Zarejestruj się" i wypełnij formularz.</div>
          </div>
        </li>
        <li class="faq-item">
          <div class="faq-tile">
            <div class="faq-front">Czy mogę zmienić swoje dane?</div>
            <div class="faq-back">Tak, możesz edytować swoje dane w ustawieniach konta.</div>
          </div>
        </li>
        <li class="faq-item">
          <div class="faq-tile">
            <div class="faq-front">Jak skontaktować się z pomocą techniczną?</div>
            <div class="faq-back">Możesz skorzystać z formularza kontaktowego lub napisać na e-mail.</div>
          </div>
        </li>
      </ul>
    </div>

    <script>
      document.querySelectorAll(".faq-tile").forEach((tile) => {
        tile.addEventListener("click", function () {
          this.classList.toggle("flipped");
        });
      });
    </script>
  </body>
</html>
```

## Sekcja FAQ (rozwijane kafelki)

![](https://staticfiles.gleap.io/helparticle/20250522130332_9760.png)

**1\. Zmiana pytań i odpowiedzi**

Każde pytanie i odpowiedź znajduje się wewnątrz znacznika `<li class="faq-item">`.

**Przykład:**

```javascript
<div class="faq-question">Jak mogę się zarejestrować?</div>
<div class="faq-answer">
  Aby się zarejestrować, kliknij przycisk "Zarejestruj się" na stronie głównej i wypełnij formularz rejestracyjny.
</div>

```

Aby edytować:

-   zamień treść pytania w `<div class="faq-question">`
    
-   zmień odpowiedź wewnątrz `<div class="faq-answer">`
    

Możesz też dodać nowe pytania, kopiując cały blok `<li class="faq-item">...</li>` i wklejając go poniżej.

* * *

**2\. Zmiana tytułu sekcji**

Tytuł „Najczęściej zadawane pytania” znajduje się w nagłówku `<h2>`. Możesz go zmienić według własnych potrzeb:

```javascript
<h2>Najczęściej zadawane pytania</h2>

```

* * *

**3\. Zmiana koloru tekstu**

Za kolor tekstu odpowiada:

```javascript
color: #ffffff;

```

Ten zapis znajduje się na początku w stylach dla `body`, `h2`, `.faq-question` i `.faq-answer`. Możesz go podmienić na dowolny kolor, np.:

-   `#000000` (czarny)
    
-   `#333333` (ciemnoszary)
    
-   `#F5670A` (pomarańcz)
    

Jeśli chcesz, żeby pytania i odpowiedzi były ciemniejsze (np. na jasnym tle), zmień `color` np. tak:

```javascript
color: #333333;

```

* * *

**4\. Zmiana koloru tła**

Kolor tła całego bloku FAQ znajduje się w klasie `.faq-container`:

```javascript
background-color: #fec603;

```

Podmień ten kolor na inny – np.:

-   `#f0e1c4` – jasny beż
    
-   `#ffffff` – biały
    
-   `#1a1a1a` – ciemny szary
    

**Kod HTML do skopiowania:**

```javascript
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Najczęściej zadawane pytania</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background: #ffffff;
        color: #ffffff;
        margin: 0;
      }

      .faq-container {
        max-width: 100%;
        margin: 0 auto;
        background: #fff;
        padding: 1.25rem;
        border-radius: 1.25rem;
        background-color: #fec603;
      }

      .faq-item {
        border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.5);
        padding: 1rem 0;
        display: flex;
        flex-direction: column;
        cursor: pointer;
      }

      h2 {
        text-align: center;
        color: #ffffff;
        font-size: 1.7rem;
      }

      .faq-list {
        list-style: none;
        padding: 0;
      }

      .faq-question-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .faq-question {
        flex-grow: 1;
        padding-right: 0.625rem;
        font-size: 1.15rem;
      }

      .faq-toggle {
        font-size: 2rem;
        color: #ffffff;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
      }

      .faq-answer {
        padding: 1rem 0;
        display: none;
        color: #ffffff;
        font-size: 1rem;
      }

      .faq-item.active .faq-answer {
        display: block;
      }

      .faq-item.active .faq-toggle::before {
        content: "−";
      }

      .faq-toggle::before {
        content: "+";
      }

      @media (max-width: 480px) {
        h2 {
          font-size: 1.7rem;
        }

        .faq-question {
          font-size: 1.15rem;
        }

        .faq-toggle {
          font-size: 1.75rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="faq-container">
      <h2>Najczęściej zadawane pytania</h2>
      <ul class="faq-list">
        <li class="faq-item">
          <div class="faq-question-row">
            <div class="faq-question">Jak mogę się zarejestrować?</div>
            <span class="faq-toggle"></span>
          </div>
          <div class="faq-answer">
            Aby się zarejestrować, kliknij przycisk "Zarejestruj się" na stronie
            głównej i wypełnij formularz rejestracyjny.
          </div>
        </li>
        <li class="faq-item">
          <div class="faq-question-row">
            <div class="faq-question">Czy mogę zmienić swoje dane?</div>
            <span class="faq-toggle"></span>
          </div>
          <div class="faq-answer">
            Tak, możesz edytować swoje dane w ustawieniach konta po zalogowaniu.
          </div>
        </li>
        <li class="faq-item">
          <div class="faq-question-row">
            <div class="faq-question">
              Jak skontaktować się z pomocą techniczną?
            </div>
            <span class="faq-toggle"></span>
          </div>
          <div class="faq-answer">
            Możesz skontaktować się z naszym działem pomocy technicznej za
            pomocą formularza kontaktowego dostępnego na stronie "Kontakt" lub
            wysyłając e-mail na adres support@example.com.
          </div>
        </li>
        <li class="faq-item">
          <div class="faq-question-row">
            <div class="faq-question">
              Czy będą dostępne zniżki dla studentów?
            </div>
            <span class="faq-toggle"></span>
          </div>
          <div class="faq-answer">
            Tak, dla studentów przewidziane są specjalne zniżki. Szczegóły
            dotyczące zniżek znajdziesz na stronie z biletami.
          </div>
        </li>
        <li class="faq-item">
          <div class="faq-question-row">
            <div class="faq-question">
              Czy będzie możliwość wystawienia faktury?
            </div>
            <span class="faq-toggle"></span>
          </div>
          <div class="faq-answer">
            Tak, podczas zakupu biletu będzie możliwość podania danych do
            faktury.
          </div>
        </li>
      </ul>
    </div>

    <script>
      document.querySelectorAll(".faq-item").forEach((item) => {
        item.addEventListener("click", () => {
          item.classList.toggle("active");
        });
      });
    </script>
  </body>
</html>
```

## Poradnik

![](https://staticfiles.gleap.io/helparticle/20250522130722_9296.png)

**1\. Zmiana treści pytań i odpowiedzi**

Treść pytań i odpowiedzi znajduje się w elemencie `<ul class="guide-list">`.

Każde pytanie to `<div class="guide-question">`, a odpowiedź znajduje się tuż pod nim w `<div class="guide-answer">`.

**Przykład:**

```javascript
<div class="guide-question">Gdzie mogę odebrać opaskę wstępu?</div>
<div class="guide-answer">
  Opaski wstępu można odebrać w punkcie akredytacyjnym przy wejściu...
</div>

```

Możesz zmienić:

-   pytania (np. na „Gdzie znajdę mapkę festiwalu?”)
    
-   odpowiedzi (np. „Mapki będą dostępne w punkcie info oraz w aplikacji mobilnej.”)
    

Aby dodać nowe pytanie, skopiuj cały blok `<li class="guide-item">...</li>` i wklej go poniżej, zmieniając jego treść.

* * *

**2\. Zmiana tytułu sekcji**

Tytuł nagłówka znajduje się w tagu `<h2>`:

```javascript
<h2>Poradnik uczestnika festiwalu</h2>

```

Zamień tekst wewnątrz, np. na:

-   „Najważniejsze informacje”
    
-   „Przydatne wskazówki dla uczestników”
    

* * *

**3\. Zmiana zdjęcia**

Obrazek znajduje się w elemencie `<img>` wewnątrz kontenera `.guide-image`.

**Przykład:**

```javascript
<imgsrc="https://media.istockphoto.com/id/2037883326/pl/zdj%C4%99cie/do%C5%82%C4%85cz-do-nas-na-festiwalu-muzycznym-tego-lata.jpg"alt="Obrazek"
/>

```

Możesz zmienić:

-   atrybut `src` – wstaw nowy link do zdjęcia
    

> **Warning:** Nie używaj plików lokalnych z komputera – zdjęcie musi być dostępne online.

-   atrybut `alt` – wpisz opis nowego zdjęcia, np. „Widok sceny festiwalowej”
    

* * *

**4\. Zmiana koloru tła**

Kolor tła bloku z pytaniami ustawiony jest w klasie `.guide-container`:

```javascript
background: #fec603;
```

Możesz podmienić `#fec603` na dowolny kolor:

-   kod HEX, np. `#222831`
    
-   RGB, np. `rgb(255, 0, 0)`
    
-   nazwany kolor, np. `darkblue`, `lightgray`
    

* * *

**5\. Zmiana koloru tekstu**

Kolor tekstu ustawiony jest w wielu miejscach jako:

```javascript
color: #ffffff;
```

Odpowiada on za:

-   kolor nagłówka (`<h2>`)
    
-   pytania i odpowiedzi
    
-   ikony plus/minus (`.guide-toggle`)
    

Możesz zamienić `#ffffff` (biały) na inny kolor, np.:

-   `#333333` (ciemny szary)
    
-   `black`
    
-   `#00ADB5` (turkusowy)
    

**Kod HTML do skopiowania:**

```javascript
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Najczęściej zadawane pytania</title>
    <style>
            body {
              font-family: Arial, sans-serif;
              background: #ffffff;
              color: #ffffff;
              margin: 0;
              padding: 1.25rem;
            }

            .layout {
              display: flex;
              justify-content: center;
              align-items: flex-start;
              gap: 2.5rem;
              flex-wrap: wrap;
              width: 100%;
            }

            .guide-container {
              flex: 1 1 31.25rem;
              background: #fec603;
              padding: 1.25rem;
              border-radius: 1.25rem;
              width: 50%;
            }

            h2 {
              text-align: center;
              color: #ffffff;
              font-size: 1.7rem;
            }

            .guide-list {
              list-style: none;
              padding: 0;
              margin: 0;
            }

            .guide-item {
              border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.5);
              padding: 1rem 0;
              display: flex;
              flex-direction: column;
              cursor: pointer;
            }

            .guide-question-row {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            .guide-question {
              flex-grow: 1;
              padding-right: 0.625rem;
              font-size: 1.15rem;
            }

            .guide-toggle {
              font-size: 2rem;
              color: #ffffff;
              width: 2rem;
              height: 2rem;
              border-radius: 50%;
              background-color: rgba(255, 255, 255, 0.2);
              display: flex;
              align-items: center;
              justify-content: center;
              line-height: 0;
            }

            .guide-answer {
              padding: 1rem 0;
              display: none;
              color: #ffffff;
              font-size: 1rem;
            }

            .guide-item.active .guide-answer {
              display: block;
            }

            .guide-item.active .guide-toggle::before {
              content: "−";
            }

            .guide-toggle::before {
              content: "+";
            }

            .guide-image {
              flex: 1 1 300px;
              max-width: 40%;
              height: auto;
              border-radius: 1.25rem;
              overflow: hidden;
            }

            .guide-image img {
              width: 100%;
              height: auto;
              display: block;
              border-radius: 1.25rem;
              object-fit: cover;
            }

            
      @media (max-width: 480px) {
        h2 {
          font-size: 1.7rem;
        }

        .guide-question {
          font-size: 1.15rem;
        }

        .guide-toggle {
          font-size: 1.75rem;
        }
      }
      
            @media (max-width: 900px) {
        .layout {
          flex-direction: column;
          align-items: stretch;
          padding: 0;
          gap: 1.25rem;
        }

        .guide-container {
          width: 100%;
          flex: none;
          padding: 1.25rem;
          box-sizing: border-box;
        }

        .guide-image {
          display: none;
        }

        h2 {
          font-size: 1.5rem;
        }

        .guide-question {
          font-size: 1rem;
        }

        .guide-answer {
          font-size: 0.95rem;
        }

        body {
          padding: 0.625rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="guide-container">
        <h2>Poradnik uczestnika festiwalu</h2>
        <ul class="guide-list">
          <li class="guide-item">
            <div class="guide-question-row">
              <div class="guide-question">Gdzie mogę odebrać opaskę wstępu?</div>
              <span class="guide-toggle"></span>
            </div>
            <div class="guide-answer">
              Opaski wstępu można odebrać w punkcie akredytacyjnym przy wejściu
              na teren festiwalu, okazując bilet oraz dokument tożsamości.
            </div>
          </li>
          <li class="guide-item">
            <div class="guide-question-row">
              <div class="guide-question">
                Co mogę zabrać ze sobą na teren festiwalu?
              </div>
              <span class="guide-toggle"></span>
            </div>
            <div class="guide-answer">
              Można zabrać mały plecak, butelkę wody (0.5l, plastik, bez
              nakrętki), koc piknikowy i powerbank. Przedmioty niebezpieczne są
              zabronione.
            </div>
          </li>
          <li class="guide-item">
            <div class="guide-question-row">
              <div class="guide-question">
                Czy będą dostępne punkty gastronomiczne?
              </div>
              <span class="guide-toggle"></span>
            </div>
            <div class="guide-answer">
              Tak, na terenie festiwalu dostępne będą foodtrucki i strefy z
              jedzeniem, oferujące dania wegetariańskie, wegańskie oraz
              bezglutenowe.
            </div>
          </li>
          <li class="guide-item">
            <div class="guide-question-row">
              <div class="guide-question">
                Czy na festiwalu będą dostępne toalety i punkty medyczne?
              </div>
              <span class="guide-toggle"></span>
            </div>
            <div class="guide-answer">
              Na całym terenie znajdziesz oznaczone toalety przenośne oraz
              punkty pierwszej pomocy z wykwalifikowaną obsługą medyczną.
            </div>
          </li>
        </ul>
      </div>

      <div class="guide-image">
        <img
          src="https://media.istockphoto.com/id/2037883326/pl/zdj%C4%99cie/do%C5%82%C4%85cz-do-nas-na-festiwalu-muzycznym-tego-lata.jpg?s=2048x2048&w=is&k=20&c=280cJFT98RjKPO_73UGlRqiGlPAcoVWSWfXv6rPDKQU="
          alt="Obrazek"
        />
      </div>
    </div>

    <script>
      document.querySelectorAll(".guide-item").forEach((item) => {
        item.addEventListener("click", () => {
          item.classList.toggle("active");
        });
      });
    </script>
  </body>
</html>
```

## Informacje o wydarzeniu

![](https://staticfiles.gleap.io/helparticle/20250522130751_9099.png)

**1\. Zmiana treści**

Treść znajduje się wewnątrz elementów `<p>` w bloku `.event-info`. Przykład:

```javascript
<p>
  <b>Data:</b> 15 grudnia 2024
</p>
```

Możesz zmienić:

-   **Tytuły** (`<b>Data:</b>`, `<b>Miejsce:</b>`, itp.) – np. na „Termin”, „Lokalizacja”.
    
-   **Zawartość tekstową** po dwukropku – np. nową datę, godzinę lub opis wydarzenia.
    

* * *

**2\. Zmiana tytułu**

Nagłówek znajduje się w tagu `<h3>`:

```javascript
<h3>Informacje o wydarzeniu</h3>
```

Zmień tekst wewnątrz, np. na „Szczegóły wydarzenia” lub inny własny tytuł.

* * *

**3\. Zmiana koloru tekstu**

W sekcji `<style>` znajdź:

```javascript
color: #F5670A;
```

Ten kolor odpowiada za:

-   tytuł (`<h3>`)
    
-   treść wydarzenia (klasa `.event-info`)
    

Możesz podmienić `#F5670A` na dowolny inny kolor w formacie:

-   kod HEX, np. `#008080`
    
-   RGB, np. `rgb(255, 0, 0)`
    
-   nazwany, np. `black`, `darkblue`
    

* * *

**4\. Zmiana koloru tła**

Za tło całego bloku odpowiada:

```javascript
background-color: #f0e1c4;
```

W klasie `.event-info-container`. Zmień kolor tak samo jak wyżej – na inny kod lub nazwę koloru.

**Kod HTML do skopiowania:**

```javascript
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Informacje o wydarzeniu</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background: #ffffff;
        color: #ffffff;
        margin: 0;
      }

      .event-info-container {
        max-width: 100%;
        margin: 1.25rem auto;
        background: #fff;
        padding: 1.25rem;
        border-radius: 1.25rem;
        background-color: #f0e1c4;
      }

      h3 {
        text-align: center;
        color: #F5670A;
        font-size: 1.7rem;
      }

      .event-info {
        color: #F5670A;
        font-size: 1rem;
        line-height: 1.6;
      }
    </style>
  </head>
  <body>
    <div class="event-info-container">
      <h3>Informacje o wydarzeniu</h3>
      <div class="event-info">
        <p>
          <b>Data:</b> 15 grudnia 2024
        </p>
        <p>
          <b>Miejsce:</b> Hala Widowiskowa, ul. Przykładowa 123, Warszawa
        </p>
        <p>
          <b>Godziny:</b> 10:00 - 18:00
        </p>
        <p>
          <b>Opis:</b> Dołącz do nas na niezapomnianym wydarzeniu! Czekają na Ciebie wykłady
          ekspertów, warsztaty praktyczne i wiele atrakcji. Będzie to doskonała okazja do
          nawiązania nowych kontaktów i zdobycia cennej wiedzy. Nie przegap tej szansy!
        </p>
          <p>
          <b>Organizator:</b> Akademia Kodu
        </p>
      </div>
    </div>
  </body>
</html>
```
