Ten kod tworzy interaktywną stronę internetową z zegarem i możliwością wyboru godziny spotkania. Po wyborze godziny, użytkownik otrzymuje potwierdzenie i może ponownie wybrać godzinę.
        <div class="blur-background"></div>
        <div id="container" class="container">
            <div class="clock-div">
                <div class="clock-container">
                    <div class="clock">
                        <div class="needle hour"></div>
                        <div class="needle minute"></div>
                        <div class="needle second"></div>
                        <div class="center-point"></div>
                    </div>
                    <div class="time"></div>
                    <div class="date"></div>
                </div>
            </div>
            <p class="message pb-4">
                O której godzinie chcesz się ze mną spotkać?
            </p>
            <div class="inline-flex text-lg border rounded-md shadow-lg p-5">
                <select name="" id="select-hour" class="px-2 outline-none appearance-none bg-transparent">
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                </select>
                <span class="px-2">:</span>
                <select name="" id="input-minutes" class="px-2 outline-none appearance-none bg-transparent">
                    <option value="00">00</option>
                    <option value="30">30</option>
                </select>
            </div>
            <button id="button" class="button">Potwierdź godzinę !</button>
        </div>
        <div id="content" class="content hidden">
            <p id="message" class="message"></p>
        </div>
        <script>
          let container = document.getElementById("container"),
              content = document.getElementById("content"),
              message = document.getElementById("message"),
              button = document.getElementById("button");
          button.addEventListener("click", function () {
              let input_hour = document.getElementById("select-hour").value;
              let input_minutes = document.getElementById("input-minutes").value;
              message.innerHTML = `Chcę się spotkać o <b>${input_hour}:${input_minutes}</b> <br> (uzgodnione z kim trzeba) <br> zapraszam przed tą godziną <br> Dawid Olko:)`;
              content.style.display = "flex";
              content.style.justifyContent = "center";
              container.style.display = "none";
              setTimeout(function () {
                  content.style.display = "none";
                  container.style.display = "flex";
              }, 2000);
          });
          const hourElement = document.querySelector(".hour");
          const minuteElement = document.querySelector(".minute");
          const secondElement = document.querySelector(".second");
          const timeElement = document.querySelector(".time");
          const dateElement = document.querySelector(".date");
          const toggle = document.querySelector(".toggle");
          const days = [
              "Niedziela",
              "Poniedziałek",
              "Wtorek",
              "Środa",
              "Czwartek",
              "Piątek",
              "Sobota",
          ];
          const months = [
              "Sty",
              "Lut",
              "Mar",
              "Kwi",
              "Maj",
              "Cze",
              "Lip",
              "Sie",
              "Wrz",
              "Paz",
              "Lis",
              "Gru",
          ];
          toggle.addEventListener("click", (e) => {
              const html = document.querySelector("html");
              if (html.classList.contains("dark")) {
                  html.classList.remove("dark");
                  e.target.innerHTML = "Dark mode";
              } else {
                  html.classList.add("dark");
                  e.target.innerHTML = "Bright mode";
              }
          });
          const scale = (num, in_min, in_max, out_min, out_max) => {
              return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
          };
          const setTime = () => {
              const time = new Date();
              const date = time.getDate();
              const month = time.getMonth();
              const day = time.getDay();
              const hours = time.getHours();
              const minutes = time.getMinutes();
              const seconds = time.getSeconds();
              const ampm = "";
              hourElement.style.transform = `translate(-50%, -100%) rotate(${scale(
                  hours + minutes / 60, 0, 12, 0, 360
              )}deg)`;
              minuteElement.style.transform = `translate(-50%, -100%) rotate(${scale(
                  minutes, 0, 60, 0, 360
              )}deg)`;
              secondElement.style.transform = `translate(-50%, -100%) rotate(${scale(
                  seconds, 0, 60, 0, 360
              )}deg)`;
              timeElement.innerHTML = `${hours < 10 ? `0${hours}` : hours}:${
                  minutes < 10 ? `0${minutes}` : minutes
              } ${ampm}`;
              dateElement.innerHTML = `${days[day]},  <span class="circle">${date}</span> ${months[month]} `;
          };
          setTime();
          setInterval(setTime, 1000);
</script>

 <div class="containerApi">
            <div class="row">
                <div class="szukaj">
                <div class="col">
                    <h4 class="City"><strong>Search for a City:</strong></h4>
                    <div class="input-group">
                        <input type="text" class="form-control" id="search-city" placeholder="Enter the city" aria-label="City Search" aria-describedby="search-button">
                        <div class="input-group-append">
                            <button class="btn btn-primary" id="search-button">🔍</button>
                        </div>
                    </div>
                    <button class="btn-mt-2" type="button" id="clear-history">Clear History</button>
                    <ul class="list-group mt-2" id="search-history">
                    </ul>
                </div>
                    <div class="row">
                        <div class="col-row" id="current-weather">
                            <h3 class="city-name" id="current-city"></h3>
                            <p>Temperature: <span class="current" id="temperature"></span></p>
                            <p>Humidity: <span class="current" id="humidity"></span></p>
                            <p>Wind Speed: <span class="current" id="wind-speed"></span></p>
                            <p>UV Index: <span class="current" id="uv-index"></span></p>
                        </div>
                    </div>
                </div>
                    <div class="col-smain" id="future-weather">
                        <h3>5-Day Forecast:</h3>
                        <div class="row1">
                            <div class="col-sm">
                                <p id="fDate0"></p>
                                <p id="fImg0"></p>
                                <p>Temp: <span id="fTemp0"></span></p>
                                <p>Humidity: <span id="fHumidity0"></span></p>
                            </div>
                            <div class="col-sm">
                                <p id="fDate1"></p>
                                <p id="fImg1"></p>
                                <p>Temp: <span id="fTemp1"></span></p>
                                <p>Humidity: <span id="fHumidity1"></span></p>
                            </div>
                            <div class="col-sm">
                                <p id="fDate2"></p>
                                <p id="fImg2"></p>
                                <p>Temp: <span id="fTemp2"></span></p>
                                <p>Humidity: <span id="fHumidity2"></span></p>
                            </div>
                            <div class="col-sm">
                                <p id="fDate3"></p>
                                <p id="fImg3"></p>
                                <p>Temp: <span id="fTemp3"></span></p>
                                <p>Humidity: <span id="fHumidity3"></span></p>
                            </div>
                            <div class="col-sm">
                                <p id="fDate4"></p>
                                <p id="fImg4"></p>
                                <p>Temp: <span id="fTemp4"></span></p>
                                <p>Humidity: <span id="fHumidity4"></span></p>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        <script>
            var city = "";
            var searchCity = document.getElementById("search-city");
            var searchButton = document.getElementById("search-button");
            var clearButton = document.getElementById("clear-history");
            var currentCity = document.getElementById("current-city");
            var currentTemperature = document.getElementById("temperature");
            var currentHumidity = document.getElementById("humidity");
            var currentWSpeed = document.getElementById("wind-speed");
            var currentUvindex = document.getElementById("uv-index");
            var sCity = [];
            function find(c) {
              for (var i = 0; i < sCity.length; i++) {
                if (c.toUpperCase() === sCity[i]) {
                  return -1;
                }
              }
              return 1;
            }
            var APIKey = "a0aca8a89948154a4182dcecc780b513";
            function displayWeather(event) {
              event.preventDefault();
              if (searchCity.value.trim() !== "") {
                city = searchCity.value.trim();
                currentWeather(city);
              }
            }
            function currentWeather(city) {
              var queryURL =
                "https://api.openweathermap.org/data/2.5/weather?q=" +
                city +
                "&APPID=" +
                APIKey;
              var xhr = new XMLHttpRequest();
              xhr.open("GET", queryURL, true);
              xhr.onload = function () {
                if (xhr.status === 200) {
                  var response = JSON.parse(xhr.responseText);
                  var weatherIcon = response.weather[0].icon;
                  var iconURL = "https://openweathermap.org/img/wn/" + weatherIcon + "@2x.png";
                  var date = new Date(response.dt * 1000).toLocaleDateString();
                  currentCity.innerHTML = response.name + " (" + date + ") " + "<img src=" + iconURL + ">";
                  var tempF = (response.main.temp - 273.15);
                  currentTemperature.innerHTML = tempF.toFixed(2) + "&#8451";
                  currentHumidity.innerHTML = response.main.humidity + "%";
                  var ws = response.wind.speed;
                  var windSmph = (ws * 2.237).toFixed(1);
                  currentWSpeed.innerHTML = windSmph + "MPH";
                  UVIndex(response.coord.lon, response.coord.lat);
                  forecast(response.id);
                  sCity = JSON.parse(localStorage.getItem("cityname")) || [];
                  if (find(city) > 0) {
                    sCity.push(city.toUpperCase());
                    localStorage.setItem("cityname", JSON.stringify(sCity));
                    addToList(city);
                  }
                } else {
                  console.log("Błąd: " + xhr.status);
                }
              };
              xhr.send();
            }
            function UVIndex(ln, lt) {
              var uvqURL = "https://api.openweathermap.org/data/2.5/uvi?appid=" + APIKey + "&lat=" + lt + "&lon=" + ln;
              var xhr = new XMLHttpRequest();
              xhr.open("GET", uvqURL, true);
              xhr.onload = function () {
                if (xhr.status === 200) {
                  var response = JSON.parse(xhr.responseText);
                  currentUvindex.innerHTML = response.value;
                } else {
                  console.log("Błąd: " + xhr.status);
                }
              };
              xhr.send();
            }
            function forecast(cityid) {
              var dayover = false;
              var queryForcastURL = "https://api.openweathermap.org/data/2.5/forecast?id=" + cityid + "&appid=" + APIKey;
              var xhr = new XMLHttpRequest();
              xhr.open("GET", queryForcastURL, true);
              xhr.onload = function () {
                if (xhr.status === 200) {
                  var response = JSON.parse(xhr.responseText);
                  for (var i = 0; i < 5; i++) {
                    var date = new Date(response.list[((i + 1) * 8) - 1].dt * 1000).toLocaleDateString();
                    var iconCode = response.list[((i + 1) * 8) - 1].weather[0].icon;
                    var iconURL = "https://openweathermap.org/img/wn/" + iconCode + ".png";
                    var tempK = response.list[((i + 1) * 8) - 1].main.temp;
                    var tempF = ((tempK - 273.5)).toFixed(2);
                    var humidity = response.list[((i + 1) * 8) - 1].main.humidity;
                    document.getElementById("fDate" + i).innerHTML = date;
                    document.getElementById("fImg" + i).innerHTML = "<img src=" + iconURL + ">";
                    document.getElementById("fTemp" + i).innerHTML = tempF + "&#8451";
                    document.getElementById("fHumidity" + i).innerHTML = humidity + "%";
                  }
                } else {
                  console.log("Błąd: " + xhr.status);
                }
              };
              xhr.send();
            }
            function addToList(c) {
              var listEl = document.createElement("li");
              listEl.textContent = c.toUpperCase();
              listEl.className = "list-group-item";
              listEl.dataset.value = c.toUpperCase();
              document.querySelector(".list-group").appendChild(listEl);
            }
            function invokePastSearch(event) {
              var liEl = event.target;
              if (liEl.matches("li")) {
                city = liEl.textContent.trim();
                currentWeather(city);
              }
            }
            function loadLastCity() {
              document.querySelector("ul").innerHTML = "";
              var sCity = JSON.parse(localStorage.getItem("cityname"));
              if (sCity !== null) {
                for (var i = 0; i < sCity.length; i++) {
                  addToList(sCity[i]);
                }
                city = sCity[i - 1];
                currentWeather(city);
              }
            }
            function clearHistory(event) {
              event.preventDefault();
              sCity = [];
              localStorage.removeItem("cityname");
              location.reload();
            }
            searchCity.addEventListener("keydown", function (event) {
              if (event.key === "Enter") {
                displayWeather(event);
              }
            });
            function displayWeather(event) {
              if (event) {
                event.preventDefault();
              }
              if (searchCity.value.trim() !== "") {
                city = searchCity.value.trim();
                currentWeather(city);
              }
            }
            searchButton.addEventListener("click", displayWeather);
            document.addEventListener("click", invokePastSearch);
            window.addEventListener("load", loadLastCity);
            clearButton.addEventListener("click", clearHistory);
        </script>

      <section class="photoFirst">
            <h2 style="display:none;">.</h2>
            <img id="photos1" src="img/mainPage4.webp" alt="Lorem ipsum 1" loading="lazy" width="300" height="300">
            <img id="photos2" src="img/mainPage5.webp" alt="Lorem ipsum 2" loading="lazy" width="300" height="300">
            <img id="photos3" src="img/mainPage6.webp" alt="Lorem ipsum 3" loading="lazy" width="300" height="300">
        </section>
        <input type="checkbox" id="toggleImages">
        <label for="toggleImages" id="showMoreButton" class="buttonFoto">LOAD MORE PHOTO</label>
        <div class="photoSecond">
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-regular.svg" alt="oksy1" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot1" width="140" height="140">
            </div>
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-deal-with-it.svg" alt="oksy2" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot2" width="140" height="140">
            </div>
            <div class="animation">
                <img class="glasses" src="https://kibbles.klausapp.com/assets/img/loader/glasses-hearts.svg" alt="oksy3" width="140" height="140">
                <img class="logoCat" src="https://kibbles.klausapp.com/assets/img/loader/main.svg" alt="cot3" width="140" height="140">
            </div>
        </div>
        <section class="photoSecond">
            <h2 style="display:none;">.</h2>
            <img class="photosX" src="img/mainPage1.webp" alt="Lorem ipsum 4" loading="lazy" width="300" height="300">
            <img class="photosX" src="img/mainPage2.webp" alt="Lorem ipsum 5" loading="lazy" width="300" height="300">
            <img class="photosX" src="img/mainPage3.webp" alt="Lorem ipsum 6" loading="lazy" width="300" height="300">
        </section>
        <label for="toggleImages" id="showLessButton" class="buttonFoto">LOAD LESS PHOTO</label>

26. **details-button2**: Stylizacja przycisku "Details" w oknie informacyjnym. Określa kolor tekstu, obramowanie, padding i margines na górze. Podczas najechania myszką zmienia kolor tła i kolor tekstu.
   <div class="product-grid">
            <div class="product-item" style="background-color: #eae9e7;">
                <div class="product-image">
                    <img src="img/gallery1.webp" alt="Gallery 1" loading="lazy" width="300" height="300">
                </div>
                <div class="product-content">
                    <h3>LOREM IPSUM</h3>
                    <a href="./gallery.html" class="details-button">VIEW DETAILS</a>
                </div>
            </div>
            <div id="drugie" class="product-item" style="background-color: #eae9e7">
                <div class="product-image">
                    <img src="img/gallery2.webp" alt="Gallery 2" loading="lazy" width="300" height="300">
                </div>
                <div class="product-content">
                    <h3>LOREM IPSUM</h3>
                    <a href="./gallery.html" class="details-button">VIEW DETAILS</a>
                </div>
            </div>
        </div>
        <section class="section">
            <h2 class="section__heading">Lorem ipsum</h2>
            <div class="about-us__textbox">
                <p class="about-us__text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
                    ac felis mi. Nulla urna risus, malesuada nec blandit at, dictum a
                    est. Integer pulvinar dui elit, vitae vehicula est tempor venenatis.
                    Proin pulvinar pulvinar enim, et vestibulum leo. Vivamus placerat,
                    magna non commodo suscipit, sapien lorem finibus dui, nec interdum
                    lectus ante dictum mi.
                </p>
                <label for="modalCheck" class="button">Lorem ipsum!</label>
                <input type="checkbox" id="modalCheck" style="display: none">
                <div class="modal">
                    <div class="modal-content">
                        <p>Tak dobrze trafiłeś! To lorem ipsum!</p>
                    </div>
                </div>
            </div>
            <div class="product-item4">
                <img src="img/item1.webp" alt="Item" loading="lazy" width="1200" height="700">
                <div class="info-box">
                    <h2>Lorem Ipsum</h2>
                    <p class="price2">$50.00 <span class="old-price">$200.00</span></p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, et do
                        eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </p>
                    <a href="./services.html" class="details-button2">VIEW DETAILS</a>
                </div>
            </div>

Podsumowując, powyższe style są używane do stworzenia efektu slidera ze slajdami, gdzie obrazki i ich opisy zmieniają się podczas najechania myszką lub wyboru przycisków. Dodatkowo, style definiują kontrole slidera i jego wygląd ogólny.
   <div class="slider">
                <div class="slides">
                    <div id="slide-1" class="slide">
                        <img src="img/mainPage1.webp" alt="Lorem ipsum 1v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-2" class="slide">
                        <img src="img/mainPage2.webp" alt="Lorem ipsum 2v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-3" class="slide">
                        <img src="img/mainPage10.webp" alt="Lorem ipsum 3v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-4" class="slide">
                        <img src="img/mainPage11.webp" alt="Lorem ipsum 4v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-5" class="slide">
                        <img src="img/mainPage14.webp" alt="Lorem ipsum 5v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-6" class="slide">
                        <img src="img/mainPage13.webp" alt="Lorem ipsum 6v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-7" class="slide">
                        <img src="img/mainPage12.webp" alt="Lorem ipsum 7v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-8" class="slide">
                        <img src="img/mainPage8.webp" alt="Lorem ipsum 8v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                    <div id="slide-9" class="slide">
                        <img src="img/mainPage9.webp" alt="Lorem ipsum 9v2" loading="lazy" width="260" height="400">
                        <div class="slide-description">
                            <p class="product-name">Lorem Ipsum</p>
                            <p class="price">10$</p>
                        </div>
                    </div>
                </div>
            </div>

Ogólnie rzecz biorąc, ten kod HTML i CSS jest używany do wyświetlania produktów na stronie internetowej w formie siatki, z odpowiednimi stylami i animacjami. Jest również odpowiednio dostosowany do różnych rozmiarów ekranów dzięki media queries.
            <div class="product-grid1">
                <div class="product-item1">
                    <img src="img/gallery9.webp" alt="LoremIpsum" loading="lazy" width="200" height="200">
                    <div class="overlay">
                        <div class="text">
                            <h3>Lorem</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                            </p>
                            <a href="./product.html" class="details-button-x">VIEW ALL</a>
                        </div>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/gallery12.webp" alt="Loremer" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja1" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja2" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja3" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja4" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja5" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/gallery11.webp" alt="Loremer2" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja6" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja7" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja8" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja9" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja10" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/gallery10.webp" alt="Loremer3" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja11" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja12" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja13" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja14" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja15" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
            </div>
            <div class="product-grid2">
                <div class="product-item1">
                    <img src="img/abootUs4.webp" alt="Loremer4" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja16" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja17" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja18" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja19" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja20" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/abootUs3.webp" alt="Loremer5" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja21" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja22" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja23" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja24" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja25" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/abootUs2.webp" alt="Loremer6" loading="lazy" width="200" height="200">
                    <h3>Lorem</h3>
                    <div class="price-rating">
                        <span class="price">30$</span>
                        <span class="rating"><img src="img/gwiazda_zolta.svg" alt="Promocja26" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja27" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja28" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_zolta.svg" alt="Promocja29" loading="lazy" width="30" height="30">
                            <img src="img/gwiazda_szara.svg" alt="Promocja30" loading="lazy" width="30" height="30">
                        </span>
                    </div>
                </div>
                <div class="product-item1">
                    <img src="img/abootUs1.webp" alt="Loremer7" loading="lazy" width="200" height="200">
                    <div class="overlay">
                        <div class="text">
                            <h3>Lorem</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                            </p>
                            <a href="./product.html" class="details-button-x">VIEW ALL</a>
                        </div>
                    </div>
                </div>
            </div>

 <section class="offer">
            <h2 style="display:none;">.</h2>
            <div class="offer__body">
                <img src="img/logo1transparent.webp" alt="LOGOv2" class="offer__img" loading="lazy" width="300" height="300">
                <div class="offer__content container">
                    <p class="offer__heading">SPECIAL OFFER</p>
                    <p class="offer__title">UPTO 70% OFF</p>
                    <p class="offer__text">
                        Upgrade your footwear collection with our 70% off special deal!
                        LOREM IPSUM!
                    </p>
                    <a href="./product.html" class="details-button">VIEW ALL</a>
                </div>
            </div>
        </section>
        <section class="service">
            <div class="service__content container">
                <div class="service__box">
                    <img src="img/pay1.webp" alt="pay1" loading="lazy" width="150" height="150">
                    <div class="service__text">
                        <h4 class="service__title">FREE SHIPING</h4>
                        <p class="service__describe">All Lorem ipsum $150</p>
                    </div>
                </div>
                <div class="service__box">
                    <img src="img/pay2.webp" alt="pay2" loading="lazy" width="150" height="150">
                    <div class="service__text">
                        <h4 class="service__title">QUICK PAYMENT</h4>
                        <p class="service__describe">100% Lorem ipsum </p>
                    </div>
                </div>
                <div class="service__box">
                    <img src="img/pay1.webp" alt="pay3" loading="lazy" width="150" height="150">
                    <div class="service__text">
                        <h4 class="service__title">FREE RETURNS</h4>
                        <p class="service__describe">Lorem ipsum 30 days</p>
                    </div>
                </div>
            </div>
        </section>
        <div class="load-more-container">
            <a href="./gallery.html" class="load-more-btn">LOAD MORE PRODUCTS</a>
        </div>
        <div class="newsletter-signup-section">
            <div class="newsletter-signup-container">
                <div class="newsletter-content">
                    <h2 class="newsletter-title">SIGN UP FOR THE NEWSLETTER</h2>
                    <p class="newsletter-description">Subscribe for the latest stories and promotions</p>
                </div>
                <form class="newsletter-form">
                    <input type="email" class="newsletter-input" placeholder="Enter your email address" required>
                    <button type="submit" class="newsletter-submit-btn">
                        <img src="img/phone.svg" alt="Send" loading="lazy" width="30" height="30">
                    </button>
                </form>
            </div>
        </div>