Untitled

<!doctype html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Metale</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/style.css">
        <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lato&subset=latin-ext" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Trocchi&subset=latin-ext" rel="stylesheet">

    </head>
    <body>

        <div class="wrapper">
                <div class="top-bar">
                    <div class="logo"></div>
                    <div class="title">
                        <p class="title-text" style="margin-top: auto; margin-bottom: 0px; line-spacing:single; font-size: 30px">USŁUGI PRODUKCYJNE</p>
                        <p class="title-text" style="margin-top: 0px; margin-bottom: 0px; line-spacing:single; font-size: 20px">Hurt-Detal Metali</p>
                    </div>
                    <div id="czas"></div>

                            <div class="nav">
                            <ul>
                                <li><a href="#">O firmie</a></li>
                                <li><a href="#">Galeria</a></li>
                                <li><a href="#">Partnerzy</a></li>
                                <li><a href="#">Referencje</a></li>
                                <li><a href="#">Kariera</a></li>
                            </ul>
                        </div>
                </div>
            <div class="slider">
                <div class="slideshow-container">
                  <div class="mySlides fade">
                    <div class="numbertext">1 / 3</div>
                    <img src="img/1a.jpg" style="width:100%">
                    <div class="text">Tekst 1</div>
                  </div>

                  <div class="mySlides fade">
                    <div class="numbertext">2 / 3</div>
                    <img src="img/2a.jpg" style="width:100%">
                    <div class="text">Tekst 2</div>
                  </div>

                  <div class="mySlides fade">
                    <div class="numbertext">3 / 3</div>
                    <img src="img/3a.jpg" style="width:100%">
                    <div class="text">T</div>
                  </div>

                  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                  <a class="next" onclick="plusSlides(1)">&#10095;</a>
                </div>
                <br>

                <div style="text-align:center">
                  <span class="dot" onclick="currentSlide(1)"></span>
                  <span class="dot" onclick="currentSlide(2)"></span>
                  <span class="dot" onclick="currentSlide(3)"></span>
                </div>
            </div>


            <div class="services">
                <a href="#"><div class="service-single">
                <img src="img/uslugi.png" />
                <p>Usługi</p>
                </div></a>
                <div id="oferta" class="service-single">
                <img src="img/oferta.png" />
                <p>Oferta</p>
                </div>
                <a href="#"><div class="service-single">
                <img src="img/kontakt.png" />
                <p>Kontakt</p>
                </div></a>
                    <div class="test">
                        <div class="service-offer" id="Stal">a</div>
                        <div class="service-offer" id="Aluminium">b</div>
                        <div class="service-offer" id="Braz">c</div>
                        <div class="service-offer" id="Miedz">d</div>
                    </div>
            </div>


            <div class="content">
                <h1>Aktualności</h1>
                <div class="article-single">
                    <h3>News nr 1</h3>
                    <p>Treść newsa</p>
                </div>
                <div class="article-single">
                    <h3>News nr 2</h3>
                    <p>Treść newsa</p>
                </div>
            </div>

            <div class="footer">
                <div class="company-info">
                    <table id="company-footer">
                        <tr>
                          <th>PPUH METAL-ZAP SP. Z O. O</td>
                          <th>SEKRETARIAT</td>
                          <th>DZIAŁ HANDLOWY</td>
                          <th>METALE KOLOROWE</td>
                          <th>DZIAL PRZYGOTOWANIA PRODUKCJI I KOOPERACJI</td>
                        </tr>
                        <tr>
                          <td>ul. Krotoszyńska 35</td>
                          <td>+48 62 595-16-07</td>
                          <td>+48 62 595-16-09</td>
                          <td>+48 62 595-16-11</td>
                          <td>+48 62 737-27-93</td>
                        </tr>
                        <tr>
                          <td>63-400 Ostrów Wielkopolski</td>
                          <td>fax +48 62 595-16-13</td>
                          <td>a.gawron@metal-zap.com.pl</td>
                          <td>m.torz@metal-zap.com.pl</td>
                          <td>w.starkiewicz@metal-zap.com.pl</td>
                        </tr>
                        <tr>
                          <td>www.metal-zap.com.pl</td>
                        </tr>
                    </table>
                </div>
                    <a href="#"><div id="myBtn">hehe</div></a>
                    <!-- The Modal -->
                        <div id="myModal" class="modal">
                            <!-- Modal content -->
                            <div class="modal-content">
                                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2475.209551054559!2d17.802597871921797!3d51.655999615249705!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471ab5a5d8096687%3A0x95beab635a687d84!2sKrotoszy%C5%84ska+35%2C+63-410+Ostr%C3%B3w+Wielkopolski!5e0!3m2!1spl!2spl!4v1475009668698" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
                                </iframe>
                             </div>
                        </div>
                <div class="company-logo"><img src="img/logo-footer.png" /></div>
            </div>

        <script type="text/javascript" src="js/googlemaps.js"></script>


        <script>
            document.getElementById('oferta').addEventListener('click', function () {
                toggle(document.querySelectorAll('.test'));
            });

            function toggle (elements, specifiedDisplay) {
              var element, index;

              elements = elements.length ? elements : [elements];
              for (index = 0; index < elements.length; index++) {
                element = elements[index];

                if (isElementHidden(element)) {
                  element.style.display = '';


                  if (isElementHidden(element)) {
                    element.style.display = specifiedDisplay || 'block';
                  }
                } else {
                  element.style.display = 'none';
                }
              }
              function isElementHidden (element) {
                return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
              }
            }
        </script>
        <script>
            var slideIndex = 1;
            showSlides(slideIndex);

            function plusSlides(n) {
              showSlides(slideIndex += n);
            }

            function currentSlide(n) {
              showSlides(slideIndex = n);
            }

            function showSlides(n) {
              var i;
              var slides = document.getElementsByClassName("mySlides");
              var dots = document.getElementsByClassName("dot");
              if (n > slides.length) {slideIndex = 1}
              if (n < 1) {slideIndex = slides.length}
              for (i = 0; i < slides.length; i++) {
                  slides[i].style.display = "none";
              }
              for (i = 0; i < dots.length; i++) {
                  dots[i].className = dots[i].className.replace(" active", "");
              }
              slides[slideIndex-1].style.display = "block";
              dots[slideIndex-1].className += " active";
            }
        </script>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

        <script type="text/javascript">
            function f(w){
            t=new Date(); document.getElementById(w).innerHTML=((h=t.getHours())<10?"0"+h:h)+":" +((m=t.getMinutes())<10?"0"+m:m)+":" +((s=t.getSeconds())<10?"0"+s:s);
            setTimeout('f(\''+w+'\')',1000);
            }
            onload=function(){ f('czas'); }
        </script>


    </body>
</html>