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ą. 🚀
!important:color: #ffffff !important; 
1. Zmiana zdjęcia i jego opisu
W kodzie HTML znajdź element <img>, np.:
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).
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ę:
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ę:
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:
<!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>
1. Zmiana zdjęcia i jego opisu
W kodzie HTML znajdź elementy <img>, np.:
<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.).
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):
Skopiuj cały blok z klasą .small-frame, np.:
<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ę:
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ę:
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:
<!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>
1. Zmiana zdjęcia i jego opisu
W kodzie HTML znajdź elementy <img>, np.:
<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.).
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>:
<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:
<!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>
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:
<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.
Zmiana tytułu sekcji
Tytuł „Najczęściej zadawane pytania” znajduje się w nagłówku <h2>. Możesz go zmienić na dowolny tekst:
<h2>Najczęściej zadawane pytania</h2>Zmiana koloru tekstu
Kolor tekstu (pytania i odpowiedzi) jest zdefiniowany w stylach CSS.
Kolor tekstu nagłówka <h2>:
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:
color: #444;Zmiana tego koloru odbywa się w podobny sposób, jak dla nagłówka.
Zmiana koloru tła
Kolor tła dla całego kontenera FAQ jest ustawiony na biały w klasie .faq-container:
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:
background: #fec603;Możesz go zmienić na dowolny kolor, np.:
#4CAF50 (zielony)
#FF5733 (czerwony)
Tło odwrotnej strony kafelka (odpowiedzi) ma kolor:
background: #f1f1f1;Kod HTML do skopiowania:
<!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>
1. Zmiana pytań i odpowiedzi
Każde pytanie i odpowiedź znajduje się wewnątrz znacznika <li class="faq-item">.
Przykład:
<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:
<h2>Najczęściej zadawane pytania</h2>
3. Zmiana koloru tekstu
Za kolor tekstu odpowiada:
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:
color: #333333;
4. Zmiana koloru tła
Kolor tła całego bloku FAQ znajduje się w klasie .faq-container:
background-color: #fec603;
Podmień ten kolor na inny – np.:
#f0e1c4 – jasny beż
#ffffff – biały
#1a1a1a – ciemny szary
Kod HTML do skopiowania:
<!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 [email protected].
</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>
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:
<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>:
<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:
<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
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:
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:
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:
<!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>
1. Zmiana treści
Treść znajduje się wewnątrz elementów <p> w bloku .event-info. Przykład:
<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>:
<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ź:
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:
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:
<!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>