html code snippets

routers
Routers can connect two or more network segments. 
These are intelligent network devices that store 
information in its routing table such as paths, hops and bottlenecks. With this info, they are able to determine the best path for data transfer. Routers operate at the OSI Network Laye
asc payment app iframe to copy
<script>
  function onLoad() {
    document.getElementById('iframe').contentWindow.postMessage('test message', 'https://aschendorff.esuite-skins-staging.com')
  }
</script>
<iframe onload="onLoad()" id="iframe" src="https://aschendorff.esuite-skins-staging.com/?sessionId=267fc8d20b7c4580b1cd829cddb44710" ></iframe>
blue
print (hello)
Ordered List
<ol>
<li>Preheat the over to 350 degree</li>
<li>mix whole wheat whole, baking soda, and salt</li>
<li>cream the butter,sugar in separate bowl</li>
Dependency
<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>
Prevent google to index your webpage
<!-- For all search engines-->
<meta name="robots" content="noindex">

<!--For google only-->
<meta name="googlebot" content="noindex">
Countdown js
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
</style>
</head>
<body>

<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date().getTime();
var newDateObj = new Date(countDownDate + 50000);


// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = newDateObj - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = minutes + ":" + seconds + " ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

</body>
</html>
HTML Starting Page (Content Only)
<nav role="navigation">
	<ul>
		<li><a href="index.html" class="active">Home</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
	</ul>
</nav>

<header role="banner">
	<hgroup>
		<h1>Site Title</h1>
		<h2>Page Title or Site Subheader</h2>
	</hgroup>
</header>

<main role="main">
	<section>
		<h3>Section Title</h3>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
			 Suscipit vel id necessitatibus beatae consectetur debitis 
			 tenetur sunt, et, delectus, iure laudantium recusandae 
			 asperiores laborum assumenda voluptates doloremque 
			 nobis facilis repudiandae.</p>
	</section>
</main>

<footer role="contentinfo">
	<p>Copyright &copy; 2019. All Rights Reserved</p>
</footer>
Play YouTube video in loop HTML Iframe
<iframe 
    width="500" 
    height="350" 
    src="https://www.youtube.com/embed/0J7jtipQEWY?loop=1">
</iframe>
Autoplay YouTube Video in HTML Iframe
<iframe width="500" height="370"
src="https://www.youtube.com/embed/pmlmMM_ToHE?autoplay=1&mute=1">
</iframe>
Autoplay video on load in HTML
<!--Add autoplay attribute to video-->
<!-- Sometimes you may also need to add attribute - muted to autoplay video -->
<video src="/path/to/video.mp4" controls autoplay muted></video>
Create modal popup CSS
<div class="modal_wrap">
   <div class="modal">
      Here is modal text
   </div><!--/.modal-->
</div><!--/modal_wrap-->

<style>
    .modal_wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
    }

    .modal {
        position: absolute;
        min-height: 100px;
        width: 500px;
        max-width: 97%;
        background: #fff;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,.3);
    }
</style>
Add whatsapp chat button on webpage using HTML
<a href="https://api.whatsapp.com/send?phone=910000000000&text=Hello this is the starting message">Whatsapp Chat</a>
Allow image file only for input type file in HTML
<!--TO ALLOW/ACCEPT ALL IMAGES-->
<input type="file" accept="image/*" />

<!--TO ALLOW/ACCEPT SPECIFIC EXTENSION IMAGES-->
<input type="file" accept="image/jpeg,image/gif,image/x-png" />
Convert big data to small data
<html>
    <body>
        <chota data>
            </end chota data>
            </data>
Creating pulse animation loader using CSS
<!--HTML CODE-->
<div class="pulse_loader">
   <div class="pls p1"></div>
   <div class="pls p2"></div>
</div>

<!--CSS CODE-->
<style>
   .pulse_loader {
      position: relative;
      height: 80px;
      width: 80px;
      margin: 50px auto;
   }

   .pulse_loader .pls {
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 1px solid;
      border-radius: 50%;
      animation: plse 1.4s infinite;
      width: 70%;
      height: 70%;
      transform: scale(0);
   }

   .pulse_loader .p1 {
      width: 100%;
      height: 100%;
      border-color: #0082ed;
   }

   .pulse_loader .p2 {
      width: 70%;
      height: 70%;
      animation-delay: .5s;
      border-color: #ff0000;
   }

   @keyframes plse {
      0% {
         opacity: 1;
         transform: scale(0);
      }
      100% {
         opacity: .2;
         transform: scale(1);
      }
   }
</style>
Radio Button
<div class="form-radio form-radio-block">
    <label class="form-radio-label active">
        <input name="address" class="form-radio-field" type="radio" value="" checked>
        <i class="form-radio-button"></i>
        <span>453/4, N M Joshi Marg, 229 Godiji Chawl, Kika Street, 1 St Bhoiwada, Kalbadevi</span>
    </label>
    <label class="form-radio-label">
        <input name="address" class="form-radio-field" type="radio" value="">
        <i class="form-radio-button"></i>
        <span>G1/c, Reena Apt, Fatak Rd, Nr Mandali Talav, Bhayander West</span>
    </label>
</div>

<script>
    $(function() {
        $('.form-radio-block [type="radio"]').on('change', function() {
            $(this).parent().addClass('active').siblings().removeClass('active');
        });
    });
</script>
Prevent showing download option in HTML5 video
<video width="500" height="300" controls controlsList="nodownload">
    <source data-src="movie.mp4" type="video/mp4">
</video>
index2
<!DOCTYPE html>
<html lang="pl-PL">
  <head>
    <meta name="theme-color" content="#ff3d3d" />
    <meta charset="UTF-8" />
    <meta name="Description" content="Strona główna EUROCONNECT" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Główna - Strona testowa</title>
    <link
      href="https://fonts.googleapis.com/css?family=Ubuntu:500:700|Cabin|Montserrat|Roboto+Slab&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./lib/style.css" />
    
    <link rel="stylesheet" href="./lib/progressbar.css">

    <script
      type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKIMyxPD7EO_p3eMTbSRRqkuvPu3UBP40"
      async
    ></script>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"
    />

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"
      async
    ></script>
    <link rel="stylesheet" href="./lib/swiper/css/swiper.min.css" />
    <link rel="stylesheet" href="./lib/animate.css" />

  </head>

  <body>
    <!-- =================================================== NAVBAR ============================================= -->
    <!-- <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#"
          ><img src="./img/logo.png" width="60" height="60" alt=""
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"><i class="fas fa-navicon"></i>  </span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ">
            <li class="nav-item active contenty">
              <a class="" href="./o-mnie/index.html"
                ><p class="nav-link">O MNIE</p></a
              >
            </li>
            <li class="nav-item active content contenty">
              <div class="dropdown">
                <button
                  class="btn btn-secondary dropdown-toggle"
                  type="button"
                  id="dropdownMenuButton"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  style="font-size: 1.2rem;"
                >
                  <a
                    ><p
                      class="nav-link"
                      style="
                    height: 47px;
                    padding-top: 5px;
                "
                    >
                      TŁUMACZENIA <i class="fas fa-caret-down"></i></p
                  ></a>
                </button>
                <div
                  class="dropdown-menu animated bounceInDown"
                  aria-labelledby="dropdownMenuButton"
                >
                  <a class="dropdown-item py-4" href="#"
                    >TŁUMACZENIA SAMOCHODOWE</a
                  >
                  <a class="dropdown-item py-4" href="#">TŁUMACZENIA INNE</a>
                </div>
              </div>
            </li>

            <li class="nav-item active contenty">
              <a class="" href="./rejestracja/index.html"
                ><p class="nav-link">REJESTRACJA POJAZDÓW</p></a
              >
            </li>
            <li class="nav-item active contenty">
              <a class="" href="#kontakt"><p class="nav-link">KONTAKT</p></a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- TEST -->
    <div class="swiper-container" style="margin-top:86px;">
      <div class="parallax-bg"></div>
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          style="background-image:url(https://source.unsplash.com/8XddFc6NkBY/1920x700)"
        >
          <div data-swiper-parallax="-100" data-swiper-parallax-opacity="-5">
            <img src="./img/nakladkaRed.png" class="nakladka" alt="" />
          </div>
          <div
            class="title "
            data-swiper-parallax="-300"
            data-swiper-parallax-opacity="0"
          >
            TÅ‚umaczenia
          </div>
          <div
            class="subtitle"
            data-swiper-parallax="-400"
            data-swiper-parallax-opacity="0"
          >
            /medyczne, specjalistyczne i samochodowe
          </div>
          <!-- <div class="text" data-swiper-parallax="-100">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus animi maxime illum reprehenderit explicabo corporis deleniti eos deserunt quasi nisi architecto harum dolor iusto, beatae magnam in accusamus non saepe neque magni! Voluptates expedita maiores accusantium dolorem modi corrupti quasi possimus architecto?</p>
          </div> -->
          <a
            href="#tlumaczenia"
            style="
          text-decoration: none;"
          >
            <div
              class="subtitle1"
              data-swiper-parallax="-200"
              data-swiper-parallax-opacity="0"
            >
              <span>/dowiedz się więcej</span>
            </div>
          </a>
        </div>

        <div
          class="swiper-slide"
          style="background-image:url(https://source.unsplash.com/MYbhN8KaaEc/1920x700);"
        >
          <div data-swiper-parallax="-100" data-swiper-parallax-opacity="-5">
            <img src="./img/nakladkaOrange.png" class="nakladka" alt="" />
          </div>
          <div
            class="title"
            data-swiper-parallax="-300"
            data-swiper-parallax-opacity="0"
          >
            Ubezpieczenia
          </div>
          <div
            class="subtitle"
            data-swiper-parallax="-400"
            data-swiper-parallax-opacity="0"
          >
            /nieruchomości, ruchomości, samochodowe
          </div>
          <!-- <div class="text" data-swiper-parallax="-100">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
          </div> -->
          <a
            href="#ubezpieczenia"
            style="
          text-decoration: none;"
          >
            <div
              class="subtitle2"
              data-swiper-parallax="-200"
              data-swiper-parallax-opacity="0"
            >
              <span>/dowiedz się więcej</span>
            </div>
          </a>
        </div>
        <div
          class="swiper-slide"
          style="background-image:url(https://source.unsplash.com/ovrOPhu8vSw/1920x700);"
        >
          <div data-swiper-parallax="-100" data-swiper-parallax-opacity="-5">
            <img src="./img/nakladkaYellow.png" class="nakladka" alt="" />
          </div>
          <div
            class="title"
            data-swiper-parallax="-300"
            data-swiper-parallax-opacity="0"
          >
            Rejestracja
          </div>
          <div
            class="subtitle"
            data-swiper-parallax="-400"
            data-swiper-parallax-opacity="0"
          >
            /zostaw to nam, zarejestrujemy Twój pojazd
          </div>
          <!-- <div class="text  " data-swiper-parallax="-100">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
          </div> -->
          <a
            href="./rejestracja/index.html"
            style="
          text-decoration: none;"
          >
            <div
              class="subtitle3"
              data-swiper-parallax="-200"
              data-swiper-parallax-opacity="0"
            >
              <span>/dowiedz się więcej</span>
            </div>
          </a>
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination swiper-pagination-white"></div>
      <!-- Add Navigation -->
      <div class="swiper-button-prev swiper-button-white"></div>
      <div class="swiper-button-next swiper-button-white"></div>
    </div>


<!-- PROGRESS BAR -->

   
  <div class="progress progress-striped">
    <div class="progress-bar fadeOut">
    </div>                       
  </div> 



    <!-- ================================================ KARUZELA ============================================ -->

    <!-- <div
      id="carouselExampleIndicators"
      class="carousel slide"
      data-ride="carousel"
      style="margin-top:86px;"
    >
      <ol class="carousel-indicators">
        <li
          data-target="#carouselExampleIndicators"
          data-slide-to="0"
          class="active"
        ></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img
            class="d-block obraz_kar"
            src="https://source.unsplash.com/CKlHKtCJZKk/1920x700"
            class="d-block w-100"
            alt="..."
          />
        </div>
        <div class="carousel-item">
          <img
            class="d-block obraz_kar"
            src="https://source.unsplash.com/L4iKccAChOc/1920x700"
            class="d-block w-100"
            alt="..."
          />
        </div>
        <div class="carousel-item">
          <img
            class="d-block obraz_kar"
            src="https://source.unsplash.com/ovrOPhu8vSw/1920x700"
            class="d-block w-100"
            alt="..."
          />
        </div>
      </div>
      <a
        class="carousel-control-prev"
        href="#carouselExampleIndicators"
        role="button"
        data-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </a>
      <a
        class="carousel-control-next"
        href="#carouselExampleIndicators"
        role="button"
        data-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </a>
    </div> -->

    <!-- ===================================================== SVG ================================================== -->

    <!-- <img class="svg svg-2" src="./img/Path 4.svg" alt="">
    <img class="svg svg-1" src="./img/Path 3.svg" alt=""> -->

    <!-- ================================================ IKONKI ================================================== -->
    <div class="container">
      <div class="functions">
        <div class="row">
          <div class="col-md-4">
            <div class="info">
              <div class="icon">
                <a href="#tlumaczenia"
                  ><img
                    class="ikonka"
                    src="https://img.icons8.com/pastel-glyph/344/translation.png"
                    alt=""
                /></a>
                <h4 class="info-title">
                  TÅ‚umaczenie
                </h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Numquam nemo facilis, velit modi mollitia fuga corrupti
                  aliquid?
                </p>
              </div>
            </div>
          </div>

          <!-- https://img.icons8.com/pastel-glyph/344/calendar-17.png -->
          <!-- https://icons.iconarchive.com/icons/iconsmind/outline/256/Calculator-2-icon.png -->
          <!-- https://img.icons8.com/pastel-glyph/344/calculator.png -->
          <div class="col-md-4">
            <div class="info">
              <div class="icon">
                <a href="#akcyza">
                  <img
                    class="ikonka"
                    src="https://img.icons8.com/pastel-glyph/344/calculator.png"
                    alt=""
                  />
                </a>
                <h4 class="info-title">
                  Akcyza
                </h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Numquam nemo facilis, velit modi mollitia fuga corrupti
                  aliquid?
                </p>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="info">
              <div class="icon">
                <a href="./rejestracja/index.html"
                  ><img
                    class="ikonka"
                    src="https://img.icons8.com/ios/344/car-badge.png"
                    alt=""
                /></a>
                <h4 class="info-title">
                  Rejestracja pojazdów
                </h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Numquam nemo facilis, velit modi mollitia fuga corrupti
                  aliquid?
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ============================================= OBRAZKI ========================================== -->

    <!-- ============================================= OBRAZKI2 2 2 2 2  ========================================== -->

    <div class="obrazki">
      <div id="paralaksa" class="bgnd bgnd-1  js-parallax-bg fixed">
        <div class="container">
          <div class="row">
            <div class="col-lg-4 col-sm-12">
              <h1 id="tlumaczenie">TÅ‚umaczenia</h1>
              <hr />
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Laboriosam, minima! Consectetur optio fuga temporibus possimus
                modi tempora blanditiis aut dignissimos quos? Quos aut sapiente
                voluptate totam ipsum corporis quia asperiores dolorem
                recusandae voluptatum, cum animi necessitatibus officiis,
                consequatur repellendus atque distinctio hic expedita, harum
                impedit. Natus enim incidunt commodi, cumque non numquam aut
                fuga quas, excepturi, inventore quia laudantium voluptatem
                repudiandae dolor quae itaque quos minus odit. Delectus, ullam
                harum porro nulla nisi placeat, aspernatur praesentium illo
                iusto neque esse vel laborum inventore sit aliquam vero facere
                ipsa repudiandae exercitationem nemo. Eveniet dolores ad, earum
                tenetur molestias pariatur unde quis!
              </p>
            </div>
          </div>
        </div>
      </div>

      <section class="bgnd bgnd-2 js-parallax-bg">
        <div class="container">
          <div class="row">
            <div class="col-lg-8 col-sm-0"></div>
            <div class="col-lg-4 col-sm-12">
              <h1 id="rejestracja">Rejestracja pojazdów</h1>
              <hr />
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Laboriosam, minima! Consectetur optio fuga temporibus possimus
                modi tempora blanditiis aut dignissimos quos? Quos aut sapiente
                voluptate totam ipsum corporis quia asperiores dolorem
                recusandae voluptatum, cum animi necessitatibus officiis,
                consequatur repellendus atque distinctio hic expedita, harum
                impedit. Natus enim incidunt commodi, cumque non numquam aut
                fuga quas, excepturi, inventore quia laudantium voluptatem
                repudiandae dolor quae itaque quos minus odit.
              </p>
            </div>
          </div>
        </div>
      </section>
      <section class="bgnd bgnd-3 js-parallax-bg">
        ,

        <section class="faq-section">
          <div class="container">
            <div class="row">
              <!-- ***** FAQ Start ***** -->
              <div class="col-md-6 offset-md-3">
                <div class="faq-title text-center pb-3">
                  <h2>Najczęściej zadawane pytania</h2>
                </div>
              </div>
              <div class="col-md-12 mb-4 pb-4">
                <div class="faq" id="accordion">
                  <div class="card">
                    <div class="card-header" id="faqHeading-1">
                      <div class="">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-1"
                          data-aria-expanded="true"
                          data-aria-controls="faqCollapse-1"
                        >
                          <span class="badge">1</span> Jakie muszę mieć
                          dokumenty, aby załatwić wszystkie formalności ze
                          sprowadzonym pojazdem?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-1"
                      class="collapse"
                      aria-labelledby="faqHeading-1"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          Dokumenty niezbędne do załatwienia formalności:<br />

                          - dowód osobisty<br />
                          - umowa nabycia pojazdu lub faktura. Na umowie lub
                          fakturze powinno znaleźć się Twoje imię, nazwisko,
                          adres zamieszkania oraz PESEL<br />
                          - zagraniczne dokumenty pojazdu. Na ogół jest to karta
                          pojazdu i dowód rejestracyjny, w niektórych krajach
                          zwane również dowód rejestracyjny część 1 i część 2.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header" id="faqHeading-2">
                      <div class="mb-0">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-2"
                          data-aria-expanded="false"
                          data-aria-controls="faqCollapse-2"
                        >
                          <span class="badge">2</span> Gdzie się teraz załatwia
                          sprawy z akcyzÄ…?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-2"
                      class="collapse"
                      aria-labelledby="faqHeading-2"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          Od 1 marca 2017 sprawami akcyzy zajmujÄ… siÄ™ wyznaczone
                          urzędy skarbowe. Dla miasta i powiatu Zielona Góra,
                          powiatu Krosno Odrzańskie, powiatu Nowa Sól, powiatu
                          Żary, powiatu Żagań, powiatu Wschowa jest to Pierwszy
                          Urząd Skarbowy w Zielonej Górze. Powiat Świebodzin
                          należy do Urzędu Skarbowego w Gorzowie Wlkp.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header" id="faqHeading-3">
                      <div class="mb-0">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-3"
                          data-aria-expanded="false"
                          data-aria-controls="faqCollapse-3"
                        >
                          <span class="badge">3</span> A co z VAT24?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-3"
                      class="collapse"
                      aria-labelledby="faqHeading-3"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          Od 1 stycznia 2015r. nie ma już obowiązku składania
                          VAT24 w urzędzie skarbowym. Koszty rejestracji pojazdu
                          stały się dzięki temu tańsze o 160 zł opłaty
                          skarbowej.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header" id="faqHeading-4">
                      <div class="mb-0">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-4"
                          data-aria-expanded="false"
                          data-aria-controls="faqCollapse-4"
                        >
                          <span class="badge">4</span> Słyszałem, że nie trzeba
                          już tłumaczyć zagranicznych dokumentów samochodowych.
                          Czy to prawda?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-4"
                      class="collapse"
                      aria-labelledby="faqHeading-4"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          Dla wydziału komunikacji Zielona Góra oraz okolicznych
                          wydziałów komunikacji w starostwach Nowa Sól, Krosno
                          Odrzańskie, Żary, Żagań, Wschowa, Świebodzin dokumenty
                          trzeba nadal tłumaczyć ze względu na obcojęzyczne
                          wpisy i adnotacje.<br />

                          Nadal należy również tłumaczyć obcojęzyczne umowy lub
                          faktury nabycia pojazdu.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header" id="faqHeading-5">
                      <div class="mb-0">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-5"
                          data-aria-expanded="false"
                          data-aria-controls="faqCollapse-5"
                        >
                          <span class="badge">5</span> Słyszałem, że nie muszę
                          już robić badania technicznego w Polsce, jeśli ważne
                          jest jeszcze badanie zagraniczne. Czy to prawda?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-5"
                      class="collapse"
                      aria-labelledby="faqHeading-5"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          Zasadniczo dobrze słyszałeś. Nie ma już tak zwanego
                          "badania technicznego przed pierwszÄ… rejestracjÄ… w
                          kraju". Może zajść jednak konieczność wykonania
                          polskiego badania technicznego. Zależy to od kilku
                          czynników.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header" id="faqHeading-6">
                      <div class="mb-0">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-6"
                          data-aria-expanded="false"
                          data-aria-controls="faqCollapse-6"
                        >
                          <span class="badge">6</span> Czy muszę zapłacić opłatę
                          recyklingowÄ…?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-6"
                      class="collapse"
                      aria-labelledby="faqHeading-6"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          Jeśli przywiozłeś auto do kraju po 1 stycznia 2016r.,
                          to opłata recyclingowa już Cię nie obowiązuje i
                          zaoszczędziłeś 500 zł. <br />

                          Jeśli wprowadzasz pojazd jako przedsiębiorca
                          prowadzący działalność gospodarczą w zakresie handlu
                          pojazdami, to zamiast dotychczasowej opłaty
                          recyclingowej musisz teraz zapewnić sieć zbierania i
                          demontażu pojazdów.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header" id="faqHeading-7">
                      <div class="mb-0">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-7"
                          data-aria-expanded="false"
                          data-aria-controls="faqCollapse-7"
                        >
                          <span class="badge">7</span> A co z ubezpieczeniem
                          samochodu?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-7"
                      class="collapse"
                      aria-labelledby="faqHeading-7"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          ObowiÄ…zek ubezpieczenia OC powstaje w dniu
                          zarejestrowania pojazdu w Polsce. U nas możesz od razu
                          ubezpieczyć pojazd. Chętnie przedstawimy Ci ofertę
                          ubezpieczenia podczas rozmowy w naszym biurze.
                          Współpracujemy z 25 zakładami ubezpieczeń, więc na
                          pewno znajdziemy coÅ› odpowiedniego dla Ciebie.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- <div class="container">
          <div class="row">
            <div class="col-lg-6 col-sm-12">
              <div class="QnA">
                <div class="jumbotron">
                  <div class="list-group" id="list-tab" role="tablist">
                    <h4>Często zadawane pytania:</h4>
                    <a
                      class="list-group-item list-group-item-action active"
                      id="list1"
                      data-toggle="list"
                      href="#list1-li"
                      role="tab"
                      aria-controls="home"
                      >Jakie muszę mieć dokumenty, aby załatwić wszystkie
                      formalności ze sprowadzonym pojazdem?</a
                    >
                    <a
                      class="list-group-item list-group-item-action"
                      id="list2"
                      data-toggle="list"
                      href="#list2-li"
                      role="tab"
                      aria-controls="profile"
                      >Gdzie się teraz załatwia sprawy z akcyzą?</a
                    >
                    <a
                      class="list-group-item list-group-item-action"
                      id="list3"
                      data-toggle="list"
                      href="#list3-li"
                      role="tab"
                      aria-controls="messages"
                      >A co z VAT24?</a
                    >
                    <a
                      class="list-group-item list-group-item-action"
                      id="list4"
                      data-toggle="list"
                      href="#list4-li"
                      role="tab"
                      aria-controls="settings"
                      >Słyszałem, że nie trzeba już tłumaczyć zagranicznych
                      dokumentów samochodowych. Czy to prawda?</a
                    >
                    <a
                      class="list-group-item list-group-item-action"
                      id="list5"
                      data-toggle="list"
                      href="#list5-li"
                      role="tab"
                      aria-controls="settings"
                      >Słyszałem, że nie muszę już robić badania technicznego w
                      Polsce, jeśli ważne jest jeszcze badanie zagraniczne. Czy
                      to prawda?</a
                    >
                    <a
                      class="list-group-item list-group-item-action"
                      id="list6"
                      data-toggle="list"
                      href="#list6-li"
                      role="tab"
                      aria-controls="settings"
                      >Czy muszę zapłacić opłatę recyklingową?</a
                    >
                    <a
                      class="list-group-item list-group-item-action"
                      id="list7"
                      data-toggle="list"
                      href="#list7-li"
                      role="tab"
                      aria-controls="settings"
                      >A co z ubezpieczeniem samochodu?</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-6 col-sm-0">
              <div class="QnA2">
                <div class="jumbotron">
                  <div class="tab-content" id="nav-tabContent">
                    <h4>Poradnik:</h4>
                    <div
                      class="tab-pane fade show active"
                      id="list1-li"
                      role="tabpanel"
                      aria-labelledby="list1"
                    >
                      Dokumenty niezbędne do załatwienia formalności: <br />-
                      dowód osobisty <br />- umowa nabycia pojazdu lub faktura.
                      Na umowie lub fakturze powinno znaleźć się Twoje imię,
                      nazwisko, adres zamieszkania oraz PESEL <br />-
                      zagraniczne dokumenty pojazdu. Na ogół jest to karta
                      pojazdu i dowód rejestracyjny, w niektórych krajach zwane
                      również dowód rejestracyjny część 1 i część 2.
                    </div>
                    <div
                      class="tab-pane fade"
                      id="list2-li"
                      role="tabpanel"
                      aria-labelledby="list2"
                    >
                      Od 1 marca 2017 sprawami akcyzy zajmujÄ… siÄ™ wyznaczone
                      urzędy skarbowe. Dla miasta i powiatu Zielona Góra,
                      powiatu Krosno Odrzańskie, powiatu Nowa Sól, powiatu Żary,
                      powiatu Żagań, powiatu Wschowa jest to Pierwszy Urząd
                      Skarbowy w Zielonej Górze. Powiat Świebodzin należy do
                      Urzędu Skarbowego w Gorzowie Wlkp. Jeśli jesteś z obszaru
                      innego urzędu skarbowego, np. ze Słubic, możemy złożyć za
                      Ciebie deklarację elektroniczną. Nie będziesz musiał w
                      ogóle przyjeżdżać. Skontaktuj się z nami, aby umówić
                      szczegóły.
                    </div>
                    <div
                      class="tab-pane fade"
                      id="list3-li"
                      role="tabpanel"
                      aria-labelledby="list3"
                    >
                      Od 1 stycznia 2015r. nie ma już obowiązku składania VAT24
                      w urzędzie skarbowym. Koszty rejestracji pojazdu stały się
                      dzięki temu tańsze o 160 zł opłaty skarbowej.
                    </div>
                    <div
                      class="tab-pane fade"
                      id="list4-li"
                      role="tabpanel"
                      aria-labelledby="list4"
                    >
                      Dla wydziału komunikacji Zielona Góra oraz okolicznych
                      wydziałów komunikacji w starostwach Nowa Sól, Krosno
                      Odrzańskie, Żary, Żagań, Wschowa, Świebodzin dokumenty
                      trzeba nadal tłumaczyć ze względu na obcojęzyczne wpisy i
                      adnotacje . Nadal należy również tłumaczyć obcojęzyczne
                      umowy lub faktury nabycia pojazdu. Jeżeli handlarz z innej
                      części Polski powiedział Ci, że nie potrzebujesz
                      tłumaczeń, to był w błędzie i nie znał realiów naszych
                      lokalnych wydziałów komunikacji. Zapraszamy do biura na
                      ul. ZimnÄ… 1, pok. 03 lub ul. Chrobrego 34 w Zielonej
                      Górze, zanim wydział komunikacji odeśle Cię w ostatniej
                      chwili od okienka i każe donieść tłumaczenie. Tłumaczymy
                      języki: niemiecki, angielski, francuski, włoski,
                      holenderski, flamandzki, niderlandzki, duński, szwedzki,
                      norweski, czeski, słowacki, rosyjski, ukraiński,
                      białoruski, hiszpański, portugalski, bułgarski, rumuński,
                      grecki, litewski oraz inne języki europejskie i
                      pozaeuropejskie.
                    </div>
                    <div
                      class="tab-pane fade"
                      id="list5-li"
                      role="tabpanel"
                      aria-labelledby="list5"
                    >
                      Zasadniczo dobrze słyszałeś. Nie ma już tak zwanego
                      "badania technicznego przed pierwszÄ… rejestracjÄ… w kraju".
                      Może zajść jednak konieczność wykonania polskiego badania
                      technicznego. Zależy to od kilku czynników. Szczegółowych
                      informacji udzielimy po obejrzeniu dokumentów u nas w
                      biurze.
                    </div>
                    <div
                      class="tab-pane fade"
                      id="list6-li"
                      role="tabpanel"
                      aria-labelledby="list6"
                    >
                      Jeśli przywiozłeś auto do kraju po 1 stycznia 2016r., to
                      opłata recyclingowa już Cię nie obowiązuje i
                      zaoszczędziłeś 500 zł. Jeśli wprowadzasz pojazd jako
                      przedsiębiorca prowadzący działalność gospodarczą w
                      zakresie handlu pojazdami, to zamiast dotychczasowej
                      opłaty recyclingowej musisz teraz zapewnić sieć zbierania
                      i demontażu pojazdów.
                    </div>
                    <div
                      class="tab-pane fade"
                      id="list7-li"
                      role="tabpanel"
                      aria-labelledby="list7"
                    >
                      ObowiÄ…zek ubezpieczenia OC powstaje w dniu zarejestrowania
                      pojazdu w Polsce. U nas możesz od razu ubezpieczyć pojazd.
                      Chętnie przedstawimy Ci ofertę ubezpieczenia podczas
                      rozmowy w naszym biurze. Współpracujemy z 25 zakładami
                      ubezpieczeń, więc na pewno znajdziemy coś odpowiedniego
                      dla Ciebie.
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </section>
    </div>

    <!-- =============================================== KONTAKT===================================================== -->

    <div class="container">
      <div class="contentbox" id="kontakt">
        <h1>Skontaktuj siÄ™ z nami</h1>
        <p>
          Administratorem danych osobowych jest Magdalena Zdanowicz ul.
          Kamieniecka 4, 66-004 Racula. Podane dane będą przetwarzane w celu
          udzielenia odpowiedzi na przesłane zapytanie. Podanie danych jest
          dobrowolne, ale niezbędne do przetworzenia zapytania. Każdemu
          przysługuje prawo do dostępu, do poprawienia lub żądania zaprzestania
          przetwarzania jego danych osobowych.
        </p>
        <hr />
        <div class="row">
          <div class="col-md-6 col-sm-12">
            <form>
              <div class="form-group">
                <label for="imieinput">
                  ImiÄ™ i nazwisko (Wymagane)
                </label>
                <input
                  type="text"
                  class="form-control"
                  id="imieinput"
                  placeholder="Wpisz imiÄ™ i nazwisko"
                  required
                />
              </div>
              <div class="form-group">
                <label for="emailInput">
                  Adres e-mail: (Wymagane)
                </label>
                <input
                  type="email"
                  class="form-control"
                  id="emailInput"
                  aria-describedby="emailHelp"
                  placeholder="Wpisz adres e-mail"
                  required
                />
                <small id="emailHelp" class="form-text text-muted"
                  >Nigdy nie udostępniamy publicznie Twojego adresu
                  e-mail.</small
                >
              </div>
              <div class="form-group">
                <label for="textArea1">Wiadomość (Wymagane)</label>
                <textarea
                  class="form-control"
                  id="textArea1"
                  rows="6"
                  required
                ></textarea>
              </div>
              <div class="form-group">
                <label for="controlFile">Załącz plik (max 5MB)</label>
                <input type="file" class="form-control-file" id="controlFile" />
              </div>
              <div class="form-group form-check">
                <input
                  type="checkbox"
                  class="form-check-input"
                  id="checkboxPlik"
                  required
                />
                <label class="form-check-label" for="checkboxPlik"
                  >Zgadzam siÄ™ na przetwarzanie moich danych osobowych przez
                  firmÄ™ EUROCONNECT. (Wymagane)</label
                >
              </div>
              <button
                type="button"
                class="btn btn-primary"
                data-toggle="modal"
                data-target="#exampleModal"
              >
                Wyślij
              </button>
            </form>
            <hr class="divider" />
          </div>
          <div class="col-md-6 col-sm-12 kontaktText">
            <img src="./img/logo.png" class="logoKontakt" alt="" />
            <h1>EUROCONNECT</h1>
            <h4><b>Biuro nr 1:</b></h4>
            <p>
              ul. Chrobrego 32
              <a
                href="https://goo.gl/maps/rcWDetzbuHsuGp5j9"
                class="badge badge-danger"
                target="_blank"
                >WYZNACZ TRASĘ</a
              ><br />
              65-001 Zielona Góra<br />
              tel. +48 609 495 360
            </p>
            <br />
            <p></p>
            <h4><b>Biuro nr 2:</b></h4>
            <p>
              ul. Kostrzyńska 14
              <a
                href="https://goo.gl/maps/8wadDSG6HZst1c5z6"
                class="badge badge-danger"
                target="_blank"
                >WYZNACZ TRASĘ</a
              ><br />
              (przed wjazdem na parking Urzędu Celnego)<br />
              65-001 Zielona Góra<br />
              tel. +48 506 776 254
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- ====================================== MAPA =========================================== -->

    <div id="map"></div>

    <!-- ====================================== FOOTER ============================================ -->
    <div class="footContainer">
      <div class="container">
        <div class="stopy">
          <p style="text-align:left;" class="m-0 mt-5 pb-5 foot">
            <strong>euroconnect</strong>
            <span style="font-size: 0.5em;">- Copyright © - 2019</span>
            <span style="float:right; font-size: 0.6em; color: white;"
              ><a
                href="https://www.facebook.com/91hertz/"
                target="_blank"
                style="text-decoration: none; color:inherit;"
              >
                Stworzono z pasjÄ… przez <strong>91Hz</strong></a
              ></span
            >
          </p>
        </div>
      </div>
    </div>
    <!-- ==================================== MODALE ============================================ -->

    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Potwierdzenie</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            Czy na pewno chcesz wysłać wiadomość?
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Cofnij
            </button>
            <button type="submit" class="btn btn-primary">Wyślij</button>
          </div>
        </div>
      </div>
    </div>

    <!-- SCRIPTS -->

    <!-- SWIPER -->
    <script src="./lib/swiper/js/swiper.min.js" async></script>

    <!-- GATOR -->
    <script
      type="text/javascript"
      src="https://craig.global.ssl.fastly.net/js/gator.min.js?ff1b9"
    ></script>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- F.A. -->
    <script src="https://kit.fontawesome.com/4c63e4a9e2.js"></script>
    <script src="https://kit.fontawesome.com/4c63e4a9e2.js"></script>

    <!-- Bootstrap -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>

    <!-- .js -->
    <script type="text/javascript" src="./lib/script.js"></script>

    <!-- SWIPER inline -->
    <script>
      var swiper = new Swiper(".swiper-container", {
        speed: 1000,
        parallax: true,
        loop: true,
        autoplay: {
          delay: 6000,
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      });
    </script>
  </body>
</html>
index
<!DOCTYPE html>
<html lang="pl-PL">
  <head>
    <meta name="theme-color" content="#ff3d3d" />
    <meta charset="UTF-8" />
    <meta name="Description" content="Strona główna EUROCONNECT" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Główna - Strona testowa</title>
    <link
      href="https://fonts.googleapis.com/css?family=Ubuntu:500:700|Cabin|Montserrat|Roboto+Slab&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./lib/style.css" />
    
    <link rel="stylesheet" href="./lib/progressbar.css">

    <script
      type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKIMyxPD7EO_p3eMTbSRRqkuvPu3UBP40"
      async
    ></script>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"
    />

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"
      async
    ></script>
    <link rel="stylesheet" href="./lib/swiper/css/swiper.min.css" />
    <link rel="stylesheet" href="./lib/animate.css" />

  </head>

  <body>
    <!-- =================================================== NAVBAR ============================================= -->
    <!-- <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#"
          ><img src="./img/logo.png" width="60" height="60" alt=""
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"><i class="fas fa-navicon"></i>  </span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ">
            <li class="nav-item active contenty">
              <a class="" href="./o-mnie/index.html"
                ><p class="nav-link">O MNIE</p></a
              >
            </li>
            <li class="nav-item active content contenty">
              <div class="dropdown">
                <button
                  class="btn btn-secondary dropdown-toggle"
                  type="button"
                  id="dropdownMenuButton"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  style="font-size: 1.2rem;"
                >
                  <a
                    ><p
                      class="nav-link"
                      style="
                    height: 47px;
                    padding-top: 5px;
                "
                    >
                      TŁUMACZENIA <i class="fas fa-caret-down"></i></p
                  ></a>
                </button>
                <div
                  class="dropdown-menu animated bounceInDown"
                  aria-labelledby="dropdownMenuButton"
                >
                  <a class="dropdown-item py-4" href="#"
                    >TŁUMACZENIA SAMOCHODOWE</a
                  >
                  <a class="dropdown-item py-4" href="#">TŁUMACZENIA INNE</a>
                </div>
              </div>
            </li>

            <li class="nav-item active contenty">
              <a class="" href="./rejestracja/index.html"
                ><p class="nav-link">REJESTRACJA POJAZDÓW</p></a
              >
            </li>
            <li class="nav-item active contenty">
              <a class="" href="#kontakt"><p class="nav-link">KONTAKT</p></a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- TEST -->
    <div class="swiper-container" style="margin-top:86px;">
      <div class="parallax-bg"></div>
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          style="background-image:url(https://source.unsplash.com/8XddFc6NkBY/1920x700)"
        >
          <div data-swiper-parallax="-100" data-swiper-parallax-opacity="-5">
            <img src="./img/nakladkaRed.png" class="nakladka" alt="" />
          </div>
          <div
            class="title "
            data-swiper-parallax="-300"
            data-swiper-parallax-opacity="0"
          >
            TÅ‚umaczenia
          </div>
          <div
            class="subtitle"
            data-swiper-parallax="-400"
            data-swiper-parallax-opacity="0"
          >
            /medyczne, specjalistyczne i samochodowe
          </div>
          <!-- <div class="text" data-swiper-parallax="-100">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus animi maxime illum reprehenderit explicabo corporis deleniti eos deserunt quasi nisi architecto harum dolor iusto, beatae magnam in accusamus non saepe neque magni! Voluptates expedita maiores accusantium dolorem modi corrupti quasi possimus architecto?</p>
          </div> -->
          <a
            href="#tlumaczenia"
            style="
          text-decoration: none;"
          >
            <div
              class="subtitle1"
              data-swiper-parallax="-200"
              data-swiper-parallax-opacity="0"
            >
              <span>/dowiedz się więcej</span>
            </div>
          </a>
        </div>

        <div
          class="swiper-slide"
          style="background-image:url(https://source.unsplash.com/MYbhN8KaaEc/1920x700);"
        >
          <div data-swiper-parallax="-100" data-swiper-parallax-opacity="-5">
            <img src="./img/nakladkaOrange.png" class="nakladka" alt="" />
          </div>
          <div
            class="title"
            data-swiper-parallax="-300"
            data-swiper-parallax-opacity="0"
          >
            Ubezpieczenia
          </div>
          <div
            class="subtitle"
            data-swiper-parallax="-400"
            data-swiper-parallax-opacity="0"
          >
            /nieruchomości, ruchomości, samochodowe
          </div>
          <!-- <div class="text" data-swiper-parallax="-100">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
          </div> -->
          <a
            href="#ubezpieczenia"
            style="
          text-decoration: none;"
          >
            <div
              class="subtitle2"
              data-swiper-parallax="-200"
              data-swiper-parallax-opacity="0"
            >
              <span>/dowiedz się więcej</span>
            </div>
          </a>
        </div>
        <div
          class="swiper-slide"
          style="background-image:url(https://source.unsplash.com/ovrOPhu8vSw/1920x700);"
        >
          <div data-swiper-parallax="-100" data-swiper-parallax-opacity="-5">
            <img src="./img/nakladkaYellow.png" class="nakladka" alt="" />
          </div>
          <div
            class="title"
            data-swiper-parallax="-300"
            data-swiper-parallax-opacity="0"
          >
            Rejestracja
          </div>
          <div
            class="subtitle"
            data-swiper-parallax="-400"
            data-swiper-parallax-opacity="0"
          >
            /zostaw to nam, zarejestrujemy Twój pojazd
          </div>
          <!-- <div class="text  " data-swiper-parallax="-100">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
          </div> -->
          <a
            href="./rejestracja/index.html"
            style="
          text-decoration: none;"
          >
            <div
              class="subtitle3"
              data-swiper-parallax="-200"
              data-swiper-parallax-opacity="0"
            >
              <span>/dowiedz się więcej</span>
            </div>
          </a>
        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination swiper-pagination-white"></div>
      <!-- Add Navigation -->
      <div class="swiper-button-prev swiper-button-white"></div>
      <div class="swiper-button-next swiper-button-white"></div>
    </div>


<!-- PROGRESS BAR -->

   
  <div class="progress progress-striped">
    <div class="progress-bar fadeOut">
    </div>                       
  </div> 



    <!-- ================================================ KARUZELA ============================================ -->

    <!-- <div
      id="carouselExampleIndicators"
      class="carousel slide"
      data-ride="carousel"
      style="margin-top:86px;"
    >
      <ol class="carousel-indicators">
        <li
          data-target="#carouselExampleIndicators"
          data-slide-to="0"
          class="active"
        ></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img
            class="d-block obraz_kar"
            src="https://source.unsplash.com/CKlHKtCJZKk/1920x700"
            class="d-block w-100"
            alt="..."
          />
        </div>
        <div class="carousel-item">
          <img
            class="d-block obraz_kar"
            src="https://source.unsplash.com/L4iKccAChOc/1920x700"
            class="d-block w-100"
            alt="..."
          />
        </div>
        <div class="carousel-item">
          <img
            class="d-block obraz_kar"
            src="https://source.unsplash.com/ovrOPhu8vSw/1920x700"
            class="d-block w-100"
            alt="..."
          />
        </div>
      </div>
      <a
        class="carousel-control-prev"
        href="#carouselExampleIndicators"
        role="button"
        data-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </a>
      <a
        class="carousel-control-next"
        href="#carouselExampleIndicators"
        role="button"
        data-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </a>
    </div> -->

    <!-- ===================================================== SVG ================================================== -->

    <!-- <img class="svg svg-2" src="./img/Path 4.svg" alt="">
    <img class="svg svg-1" src="./img/Path 3.svg" alt=""> -->

    <!-- ================================================ IKONKI ================================================== -->
    <div class="container">
      <div class="functions">
        <div class="row">
          <div class="col-md-4">
            <div class="info">
              <div class="icon">
                <a href="#tlumaczenia"
                  ><img
                    class="ikonka"
                    src="https://img.icons8.com/pastel-glyph/344/translation.png"
                    alt=""
                /></a>
                <h4 class="info-title">
                  TÅ‚umaczenie
                </h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Numquam nemo facilis, velit modi mollitia fuga corrupti
                  aliquid?
                </p>
              </div>
            </div>
          </div>

          <!-- https://img.icons8.com/pastel-glyph/344/calendar-17.png -->
          <!-- https://icons.iconarchive.com/icons/iconsmind/outline/256/Calculator-2-icon.png -->
          <!-- https://img.icons8.com/pastel-glyph/344/calculator.png -->
          <div class="col-md-4">
            <div class="info">
              <div class="icon">
                <a href="#akcyza">
                  <img
                    class="ikonka"
                    src="https://img.icons8.com/pastel-glyph/344/calculator.png"
                    alt=""
                  />
                </a>
                <h4 class="info-title">
                  Akcyza
                </h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Numquam nemo facilis, velit modi mollitia fuga corrupti
                  aliquid?
                </p>
              </div>
            </div>
          </div>

          <div class="col-md-4">
            <div class="info">
              <div class="icon">
                <a href="./rejestracja/index.html"
                  ><img
                    class="ikonka"
                    src="https://img.icons8.com/ios/344/car-badge.png"
                    alt=""
                /></a>
                <h4 class="info-title">
                  Rejestracja pojazdów
                </h4>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Numquam nemo facilis, velit modi mollitia fuga corrupti
                  aliquid?
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ============================================= OBRAZKI ========================================== -->

    <!-- ============================================= OBRAZKI2 2 2 2 2  ========================================== -->

    <div class="obrazki">
      <div id="paralaksa" class="bgnd bgnd-1  js-parallax-bg fixed">
        <div class="container">
          <div class="row">
            <div class="col-lg-4 col-sm-12">
              <h1 id="tlumaczenie">TÅ‚umaczenia</h1>
              <hr />
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Laboriosam, minima! Consectetur optio fuga temporibus possimus
                modi tempora blanditiis aut dignissimos quos? Quos aut sapiente
                voluptate totam ipsum corporis quia asperiores dolorem
                recusandae voluptatum, cum animi necessitatibus officiis,
                consequatur repellendus atque distinctio hic expedita, harum
                impedit. Natus enim incidunt commodi, cumque non numquam aut
                fuga quas, excepturi, inventore quia laudantium voluptatem
                repudiandae dolor quae itaque quos minus odit. Delectus, ullam
                harum porro nulla nisi placeat, aspernatur praesentium illo
                iusto neque esse vel laborum inventore sit aliquam vero facere
                ipsa repudiandae exercitationem nemo. Eveniet dolores ad, earum
                tenetur molestias pariatur unde quis!
              </p>
            </div>
          </div>
        </div>
      </div>

      <section class="bgnd bgnd-2 js-parallax-bg">
        <div class="container">
          <div class="row">
            <div class="col-lg-8 col-sm-0"></div>
            <div class="col-lg-4 col-sm-12">
              <h1 id="rejestracja">Rejestracja pojazdów</h1>
              <hr />
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Laboriosam, minima! Consectetur optio fuga temporibus possimus
                modi tempora blanditiis aut dignissimos quos? Quos aut sapiente
                voluptate totam ipsum corporis quia asperiores dolorem
                recusandae voluptatum, cum animi necessitatibus officiis,
                consequatur repellendus atque distinctio hic expedita, harum
                impedit. Natus enim incidunt commodi, cumque non numquam aut
                fuga quas, excepturi, inventore quia laudantium voluptatem
                repudiandae dolor quae itaque quos minus odit.
              </p>
            </div>
          </div>
        </div>
      </section>
      <section class="bgnd bgnd-3 js-parallax-bg">
        ,

        <section class="faq-section">
          <div class="container">
            <div class="row">
              <!-- ***** FAQ Start ***** -->
              <div class="col-md-6 offset-md-3">
                <div class="faq-title text-center pb-3">
                  <h2>Najczęściej zadawane pytania</h2>
                </div>
              </div>
              <div class="col-md-12 mb-4 pb-4">
                <div class="faq" id="accordion">
                  <div class="card">
                    <div class="card-header" id="faqHeading-1">
                      <div class="">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-1"
                          data-aria-expanded="true"
                          data-aria-controls="faqCollapse-1"
                        >
                          <span class="badge">1</span> Jakie muszę mieć
                          dokumenty, aby załatwić wszystkie formalności ze
                          sprowadzonym pojazdem?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-1"
                      class="collapse"
                      aria-labelledby="faqHeading-1"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          Dokumenty niezbędne do załatwienia formalności:<br />

                          - dowód osobisty<br />
                          - umowa nabycia pojazdu lub faktura. Na umowie lub
                          fakturze powinno znaleźć się Twoje imię, nazwisko,
                          adres zamieszkania oraz PESEL<br />
                          - zagraniczne dokumenty pojazdu. Na ogół jest to karta
                          pojazdu i dowód rejestracyjny, w niektórych krajach
                          zwane również dowód rejestracyjny część 1 i część 2.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header" id="faqHeading-2">
                      <div class="mb-0">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-2"
                          data-aria-expanded="false"
                          data-aria-controls="faqCollapse-2"
                        >
                          <span class="badge">2</span> Gdzie się teraz załatwia
                          sprawy z akcyzÄ…?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-2"
                      class="collapse"
                      aria-labelledby="faqHeading-2"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          Od 1 marca 2017 sprawami akcyzy zajmujÄ… siÄ™ wyznaczone
                          urzędy skarbowe. Dla miasta i powiatu Zielona Góra,
                          powiatu Krosno Odrzańskie, powiatu Nowa Sól, powiatu
                          Żary, powiatu Żagań, powiatu Wschowa jest to Pierwszy
                          Urząd Skarbowy w Zielonej Górze. Powiat Świebodzin
                          należy do Urzędu Skarbowego w Gorzowie Wlkp.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header" id="faqHeading-3">
                      <div class="mb-0">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-3"
                          data-aria-expanded="false"
                          data-aria-controls="faqCollapse-3"
                        >
                          <span class="badge">3</span> A co z VAT24?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-3"
                      class="collapse"
                      aria-labelledby="faqHeading-3"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          Od 1 stycznia 2015r. nie ma już obowiązku składania
                          VAT24 w urzędzie skarbowym. Koszty rejestracji pojazdu
                          stały się dzięki temu tańsze o 160 zł opłaty
                          skarbowej.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header" id="faqHeading-4">
                      <div class="mb-0">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-4"
                          data-aria-expanded="false"
                          data-aria-controls="faqCollapse-4"
                        >
                          <span class="badge">4</span> Słyszałem, że nie trzeba
                          już tłumaczyć zagranicznych dokumentów samochodowych.
                          Czy to prawda?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-4"
                      class="collapse"
                      aria-labelledby="faqHeading-4"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          Dla wydziału komunikacji Zielona Góra oraz okolicznych
                          wydziałów komunikacji w starostwach Nowa Sól, Krosno
                          Odrzańskie, Żary, Żagań, Wschowa, Świebodzin dokumenty
                          trzeba nadal tłumaczyć ze względu na obcojęzyczne
                          wpisy i adnotacje.<br />

                          Nadal należy również tłumaczyć obcojęzyczne umowy lub
                          faktury nabycia pojazdu.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header" id="faqHeading-5">
                      <div class="mb-0">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-5"
                          data-aria-expanded="false"
                          data-aria-controls="faqCollapse-5"
                        >
                          <span class="badge">5</span> Słyszałem, że nie muszę
                          już robić badania technicznego w Polsce, jeśli ważne
                          jest jeszcze badanie zagraniczne. Czy to prawda?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-5"
                      class="collapse"
                      aria-labelledby="faqHeading-5"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          Zasadniczo dobrze słyszałeś. Nie ma już tak zwanego
                          "badania technicznego przed pierwszÄ… rejestracjÄ… w
                          kraju". Może zajść jednak konieczność wykonania
                          polskiego badania technicznego. Zależy to od kilku
                          czynników.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header" id="faqHeading-6">
                      <div class="mb-0">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-6"
                          data-aria-expanded="false"
                          data-aria-controls="faqCollapse-6"
                        >
                          <span class="badge">6</span> Czy muszę zapłacić opłatę
                          recyklingowÄ…?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-6"
                      class="collapse"
                      aria-labelledby="faqHeading-6"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          Jeśli przywiozłeś auto do kraju po 1 stycznia 2016r.,
                          to opłata recyclingowa już Cię nie obowiązuje i
                          zaoszczędziłeś 500 zł. <br />

                          Jeśli wprowadzasz pojazd jako przedsiębiorca
                          prowadzący działalność gospodarczą w zakresie handlu
                          pojazdami, to zamiast dotychczasowej opłaty
                          recyclingowej musisz teraz zapewnić sieć zbierania i
                          demontażu pojazdów.
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-header" id="faqHeading-7">
                      <div class="mb-0">
                        <h5
                          class="faq-title"
                          data-toggle="collapse"
                          data-target="#faqCollapse-7"
                          data-aria-expanded="false"
                          data-aria-controls="faqCollapse-7"
                        >
                          <span class="badge">7</span> A co z ubezpieczeniem
                          samochodu?
                        </h5>
                      </div>
                    </div>
                    <div
                      id="faqCollapse-7"
                      class="collapse"
                      aria-labelledby="faqHeading-7"
                      data-parent="#accordion"
                    >
                      <div class="card-body">
                        <p>
                          ObowiÄ…zek ubezpieczenia OC powstaje w dniu
                          zarejestrowania pojazdu w Polsce. U nas możesz od razu
                          ubezpieczyć pojazd. Chętnie przedstawimy Ci ofertę
                          ubezpieczenia podczas rozmowy w naszym biurze.
                          Współpracujemy z 25 zakładami ubezpieczeń, więc na
                          pewno znajdziemy coÅ› odpowiedniego dla Ciebie.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- <div class="container">
          <div class="row">
            <div class="col-lg-6 col-sm-12">
              <div class="QnA">
                <div class="jumbotron">
                  <div class="list-group" id="list-tab" role="tablist">
                    <h4>Często zadawane pytania:</h4>
                    <a
                      class="list-group-item list-group-item-action active"
                      id="list1"
                      data-toggle="list"
                      href="#list1-li"
                      role="tab"
                      aria-controls="home"
                      >Jakie muszę mieć dokumenty, aby załatwić wszystkie
                      formalności ze sprowadzonym pojazdem?</a
                    >
                    <a
                      class="list-group-item list-group-item-action"
                      id="list2"
                      data-toggle="list"
                      href="#list2-li"
                      role="tab"
                      aria-controls="profile"
                      >Gdzie się teraz załatwia sprawy z akcyzą?</a
                    >
                    <a
                      class="list-group-item list-group-item-action"
                      id="list3"
                      data-toggle="list"
                      href="#list3-li"
                      role="tab"
                      aria-controls="messages"
                      >A co z VAT24?</a
                    >
                    <a
                      class="list-group-item list-group-item-action"
                      id="list4"
                      data-toggle="list"
                      href="#list4-li"
                      role="tab"
                      aria-controls="settings"
                      >Słyszałem, że nie trzeba już tłumaczyć zagranicznych
                      dokumentów samochodowych. Czy to prawda?</a
                    >
                    <a
                      class="list-group-item list-group-item-action"
                      id="list5"
                      data-toggle="list"
                      href="#list5-li"
                      role="tab"
                      aria-controls="settings"
                      >Słyszałem, że nie muszę już robić badania technicznego w
                      Polsce, jeśli ważne jest jeszcze badanie zagraniczne. Czy
                      to prawda?</a
                    >
                    <a
                      class="list-group-item list-group-item-action"
                      id="list6"
                      data-toggle="list"
                      href="#list6-li"
                      role="tab"
                      aria-controls="settings"
                      >Czy muszę zapłacić opłatę recyklingową?</a
                    >
                    <a
                      class="list-group-item list-group-item-action"
                      id="list7"
                      data-toggle="list"
                      href="#list7-li"
                      role="tab"
                      aria-controls="settings"
                      >A co z ubezpieczeniem samochodu?</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-6 col-sm-0">
              <div class="QnA2">
                <div class="jumbotron">
                  <div class="tab-content" id="nav-tabContent">
                    <h4>Poradnik:</h4>
                    <div
                      class="tab-pane fade show active"
                      id="list1-li"
                      role="tabpanel"
                      aria-labelledby="list1"
                    >
                      Dokumenty niezbędne do załatwienia formalności: <br />-
                      dowód osobisty <br />- umowa nabycia pojazdu lub faktura.
                      Na umowie lub fakturze powinno znaleźć się Twoje imię,
                      nazwisko, adres zamieszkania oraz PESEL <br />-
                      zagraniczne dokumenty pojazdu. Na ogół jest to karta
                      pojazdu i dowód rejestracyjny, w niektórych krajach zwane
                      również dowód rejestracyjny część 1 i część 2.
                    </div>
                    <div
                      class="tab-pane fade"
                      id="list2-li"
                      role="tabpanel"
                      aria-labelledby="list2"
                    >
                      Od 1 marca 2017 sprawami akcyzy zajmujÄ… siÄ™ wyznaczone
                      urzędy skarbowe. Dla miasta i powiatu Zielona Góra,
                      powiatu Krosno Odrzańskie, powiatu Nowa Sól, powiatu Żary,
                      powiatu Żagań, powiatu Wschowa jest to Pierwszy Urząd
                      Skarbowy w Zielonej Górze. Powiat Świebodzin należy do
                      Urzędu Skarbowego w Gorzowie Wlkp. Jeśli jesteś z obszaru
                      innego urzędu skarbowego, np. ze Słubic, możemy złożyć za
                      Ciebie deklarację elektroniczną. Nie będziesz musiał w
                      ogóle przyjeżdżać. Skontaktuj się z nami, aby umówić
                      szczegóły.
                    </div>
                    <div
                      class="tab-pane fade"
                      id="list3-li"
                      role="tabpanel"
                      aria-labelledby="list3"
                    >
                      Od 1 stycznia 2015r. nie ma już obowiązku składania VAT24
                      w urzędzie skarbowym. Koszty rejestracji pojazdu stały się
                      dzięki temu tańsze o 160 zł opłaty skarbowej.
                    </div>
                    <div
                      class="tab-pane fade"
                      id="list4-li"
                      role="tabpanel"
                      aria-labelledby="list4"
                    >
                      Dla wydziału komunikacji Zielona Góra oraz okolicznych
                      wydziałów komunikacji w starostwach Nowa Sól, Krosno
                      Odrzańskie, Żary, Żagań, Wschowa, Świebodzin dokumenty
                      trzeba nadal tłumaczyć ze względu na obcojęzyczne wpisy i
                      adnotacje . Nadal należy również tłumaczyć obcojęzyczne
                      umowy lub faktury nabycia pojazdu. Jeżeli handlarz z innej
                      części Polski powiedział Ci, że nie potrzebujesz
                      tłumaczeń, to był w błędzie i nie znał realiów naszych
                      lokalnych wydziałów komunikacji. Zapraszamy do biura na
                      ul. ZimnÄ… 1, pok. 03 lub ul. Chrobrego 34 w Zielonej
                      Górze, zanim wydział komunikacji odeśle Cię w ostatniej
                      chwili od okienka i każe donieść tłumaczenie. Tłumaczymy
                      języki: niemiecki, angielski, francuski, włoski,
                      holenderski, flamandzki, niderlandzki, duński, szwedzki,
                      norweski, czeski, słowacki, rosyjski, ukraiński,
                      białoruski, hiszpański, portugalski, bułgarski, rumuński,
                      grecki, litewski oraz inne języki europejskie i
                      pozaeuropejskie.
                    </div>
                    <div
                      class="tab-pane fade"
                      id="list5-li"
                      role="tabpanel"
                      aria-labelledby="list5"
                    >
                      Zasadniczo dobrze słyszałeś. Nie ma już tak zwanego
                      "badania technicznego przed pierwszÄ… rejestracjÄ… w kraju".
                      Może zajść jednak konieczność wykonania polskiego badania
                      technicznego. Zależy to od kilku czynników. Szczegółowych
                      informacji udzielimy po obejrzeniu dokumentów u nas w
                      biurze.
                    </div>
                    <div
                      class="tab-pane fade"
                      id="list6-li"
                      role="tabpanel"
                      aria-labelledby="list6"
                    >
                      Jeśli przywiozłeś auto do kraju po 1 stycznia 2016r., to
                      opłata recyclingowa już Cię nie obowiązuje i
                      zaoszczędziłeś 500 zł. Jeśli wprowadzasz pojazd jako
                      przedsiębiorca prowadzący działalność gospodarczą w
                      zakresie handlu pojazdami, to zamiast dotychczasowej
                      opłaty recyclingowej musisz teraz zapewnić sieć zbierania
                      i demontażu pojazdów.
                    </div>
                    <div
                      class="tab-pane fade"
                      id="list7-li"
                      role="tabpanel"
                      aria-labelledby="list7"
                    >
                      ObowiÄ…zek ubezpieczenia OC powstaje w dniu zarejestrowania
                      pojazdu w Polsce. U nas możesz od razu ubezpieczyć pojazd.
                      Chętnie przedstawimy Ci ofertę ubezpieczenia podczas
                      rozmowy w naszym biurze. Współpracujemy z 25 zakładami
                      ubezpieczeń, więc na pewno znajdziemy coś odpowiedniego
                      dla Ciebie.
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </section>
    </div>

    <!-- =============================================== KONTAKT===================================================== -->

    <div class="container">
      <div class="contentbox" id="kontakt">
        <h1>Skontaktuj siÄ™ z nami</h1>
        <p>
          Administratorem danych osobowych jest Magdalena Zdanowicz ul.
          Kamieniecka 4, 66-004 Racula. Podane dane będą przetwarzane w celu
          udzielenia odpowiedzi na przesłane zapytanie. Podanie danych jest
          dobrowolne, ale niezbędne do przetworzenia zapytania. Każdemu
          przysługuje prawo do dostępu, do poprawienia lub żądania zaprzestania
          przetwarzania jego danych osobowych.
        </p>
        <hr />
        <div class="row">
          <div class="col-md-6 col-sm-12">
            <form>
              <div class="form-group">
                <label for="imieinput">
                  ImiÄ™ i nazwisko (Wymagane)
                </label>
                <input
                  type="text"
                  class="form-control"
                  id="imieinput"
                  placeholder="Wpisz imiÄ™ i nazwisko"
                  required
                />
              </div>
              <div class="form-group">
                <label for="emailInput">
                  Adres e-mail: (Wymagane)
                </label>
                <input
                  type="email"
                  class="form-control"
                  id="emailInput"
                  aria-describedby="emailHelp"
                  placeholder="Wpisz adres e-mail"
                  required
                />
                <small id="emailHelp" class="form-text text-muted"
                  >Nigdy nie udostępniamy publicznie Twojego adresu
                  e-mail.</small
                >
              </div>
              <div class="form-group">
                <label for="textArea1">Wiadomość (Wymagane)</label>
                <textarea
                  class="form-control"
                  id="textArea1"
                  rows="6"
                  required
                ></textarea>
              </div>
              <div class="form-group">
                <label for="controlFile">Załącz plik (max 5MB)</label>
                <input type="file" class="form-control-file" id="controlFile" />
              </div>
              <div class="form-group form-check">
                <input
                  type="checkbox"
                  class="form-check-input"
                  id="checkboxPlik"
                  required
                />
                <label class="form-check-label" for="checkboxPlik"
                  >Zgadzam siÄ™ na przetwarzanie moich danych osobowych przez
                  firmÄ™ EUROCONNECT. (Wymagane)</label
                >
              </div>
              <button
                type="button"
                class="btn btn-primary"
                data-toggle="modal"
                data-target="#exampleModal"
              >
                Wyślij
              </button>
            </form>
            <hr class="divider" />
          </div>
          <div class="col-md-6 col-sm-12 kontaktText">
            <img src="./img/logo.png" class="logoKontakt" alt="" />
            <h1>EUROCONNECT</h1>
            <h4><b>Biuro nr 1:</b></h4>
            <p>
              ul. Chrobrego 32
              <a
                href="https://goo.gl/maps/rcWDetzbuHsuGp5j9"
                class="badge badge-danger"
                target="_blank"
                >WYZNACZ TRASĘ</a
              ><br />
              65-001 Zielona Góra<br />
              tel. +48 609 495 360
            </p>
            <br />
            <p></p>
            <h4><b>Biuro nr 2:</b></h4>
            <p>
              ul. Kostrzyńska 14
              <a
                href="https://goo.gl/maps/8wadDSG6HZst1c5z6"
                class="badge badge-danger"
                target="_blank"
                >WYZNACZ TRASĘ</a
              ><br />
              (przed wjazdem na parking Urzędu Celnego)<br />
              65-001 Zielona Góra<br />
              tel. +48 506 776 254
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- ====================================== MAPA =========================================== -->

    <div id="map"></div>

    <!-- ====================================== FOOTER ============================================ -->
    <div class="footContainer">
      <div class="container">
        <div class="stopy">
          <p style="text-align:left;" class="m-0 mt-5 pb-5 foot">
            <strong>euroconnect</strong>
            <span style="font-size: 0.5em;">- Copyright © - 2019</span>
            <span style="float:right; font-size: 0.6em; color: white;"
              ><a
                href="https://www.facebook.com/91hertz/"
                target="_blank"
                style="text-decoration: none; color:inherit;"
              >
                Stworzono z pasjÄ… przez <strong>91Hz</strong></a
              ></span
            >
          </p>
        </div>
      </div>
    </div>
    <!-- ==================================== MODALE ============================================ -->

    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Potwierdzenie</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            Czy na pewno chcesz wysłać wiadomość?
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Cofnij
            </button>
            <button type="submit" class="btn btn-primary">Wyślij</button>
          </div>
        </div>
      </div>
    </div>

    <!-- SCRIPTS -->

    <!-- SWIPER -->
    <script src="./lib/swiper/js/swiper.min.js" async></script>

    <!-- GATOR -->
    <script
      type="text/javascript"
      src="https://craig.global.ssl.fastly.net/js/gator.min.js?ff1b9"
    ></script>

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- F.A. -->
    <script src="https://kit.fontawesome.com/4c63e4a9e2.js"></script>
    <script src="https://kit.fontawesome.com/4c63e4a9e2.js"></script>

    <!-- Bootstrap -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>

    <!-- .js -->
    <script type="text/javascript" src="./lib/script.js"></script>

    <!-- SWIPER inline -->
    <script>
      var swiper = new Swiper(".swiper-container", {
        speed: 1000,
        parallax: true,
        loop: true,
        autoplay: {
          delay: 6000,
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      });
    </script>
  </body>
</html>
applicaton/ld+json for search engines example
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebPage",
    "name": "Devsheet",
    "description": "You can write your webpage description here",
    "publisher": {
        "@type": "HomePage",
        "name": "Devsheet's Website"
    }
}
</script>
Wechat-footer
<p
  class=""
  style="margin-right: 8px; margin-bottom: 0px; margin-left: 8px; clear: both; letter-spacing: 0.544px; text-align: center; line-height: 2em;"
>
  <span
    style="font-size: 11px; letter-spacing: 0.544px; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"
    ><span style="font-size: 12px;"
      ><br class="Apple-interchange-newline"/></span
    >【记录成长路上的点滴,欢迎你的观后感】<span style="font-size: 12px;"></span
  ></span>
</p>
<p
  class=""
  style="margin-right: 8px; margin-bottom: 0px; margin-left: 8px; clear: both; letter-spacing: 0.544px; text-align: center; line-height: 2em;"
>
  <span style="color: rgb(136, 136, 136); font-size: 11px;"
    >个人微信:shengminglaixin,技能交流:UI/UX/<span
      style="color: rgb(136, 136, 136); letter-spacing: 0.544px;"
      >æ‘„å½±</span
    ></span
  >
</p>
<p
  class=""
  style="margin-right: 8px; margin-bottom: 0px; margin-left: 8px; clear: both; letter-spacing: 0.544px; text-align: center; line-height: 2em;"
>
  <span style="color: rgb(136, 136, 136); font-size: 11px;"
    >微博:@不稚岛,<span
      style="color: rgb(136, 136, 136); letter-spacing: 0.544px;"
      >Github</span
    >:@Democookie</span
  >
</p>
<p style="margin-bottom: 0px; clear: both; text-align: center;">
  <img
    class=""
    data-copyright="0"
    data-s="300,640"
    data-type="jpeg"
    src="https://mmbiz.qpic.cn/mmbiz_jpg/d2FOGOAicdwQR4JhEAGIEqdEiaE0B6KibYXCMAuI9FapKL8DEnmNRnPibgfaQRLZqKsXaia6pan1dGVWu3eKTuwpIdQ/?wx_fmt=jpeg"
    data-cropselx1="0"
    data-cropselx2="558"
    data-cropsely1="0"
    data-cropsely2="224"
    data-ratio="1"
    data-w="258"
    style="max-width: 100%; height: auto; width: 229.594px; visibility: visible !important;"
  />​
</p>
<p
  class=""
  style="margin-right: 8px; margin-bottom: 0px; margin-left: 8px; clear: both; letter-spacing: 0.544px; text-align: center; line-height: 2em;"
>
  <span style="font-size: 12px; color: rgb(136, 136, 136);"
    >长按二维码▲识别关注</span
  ><br />
</p>
<p
  class=""
  style="margin-bottom: 0px; clear: both; letter-spacing: 0.544px; text-align: center; line-height: 2em;"
>
  <span style="font-size: 12px; color: rgb(136, 136, 136);"
    >丨树阿藤ID:uuateng丨</span
  >
</p>
<p style="margin-bottom: 0px; clear: both;">
  <br
    style='color: rgb(51, 51, 51); font-family: mp-quote, -apple-system-font, system-ui, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: normal; text-align: justify;'
  />
</p>
Wechat-h3
<section
  class=""
  style="padding-right: 20px;padding-left: 20px;max-width: 100%;box-sizing: border-box;line-height: 0.8;word-wrap: break-word !important;"
>
  <p
    style="max-width: 100%;box-sizing: border-box;min-height: 1em;text-align: center;word-wrap: break-word !important;"
  >
    <span
      style="max-width: 100%;box-sizing: border-box;color: rgb(26, 173, 25);font-size: 24px;word-wrap: break-word !important;"
      >01<mpchecktext id="1564624200749_0.8462619898750288"></mpchecktext
    ></span>
  </p>
  <p
    style="max-width: 100%;box-sizing: border-box;min-height: 1em;text-align: center;word-wrap: break-word !important;"
  >
    <span
      style="max-width: 100%;box-sizing: border-box;letter-spacing: 0px;color: rgb(26, 173, 25);font-size: 20px;word-wrap: break-word !important;"
      >—<mpchecktext id="1564624200750_0.29948390749527976"></mpchecktext
    ></span>
  </p>
</section>

<p
  style="max-width: 100%;min-height: 1em;color: rgb(62, 62, 62);font-size: 16px;white-space: normal;background-color: rgb(255, 255, 255);text-align: center;box-sizing: border-box !important;word-wrap: break-word !important;"
>
  <span
    style="max-width: 100%;font-size: 20px;box-sizing: border-box !important;word-wrap: break-word !important;"
    ><span
      style="max-width: 100%;box-sizing: border-box !important;word-wrap: break-word !important;"
      >标题内容1</span
    ></span
  >
</p>
Show iframe only after fully loaded in HTML
<iframe 
    style="display:none;" 
    onload="this.style.display = 'block';" 
    src="https://example.com"></iframe>