Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>

  </head>
  <body>

    <!--///////////////////////////MENU///////////////////////////////-->

    <div id="menu">


      <ul>
        <li><a href="#oferta">Oferta</a></li>
        <li><a href="#">Dlaczego warto</a></li>
        <li><a href="#">Galeria</a></li>
        <li><a href="#">Kontakt</a></li>

      </ul>


    </div>


    <!--///////////////////////////OFERTA///////////////////////////////-->


    <div id="oferta">

      <h1>
        Oferta
      </h1>

      <!--Kolumna pierwsza-->

      <div class="column-three">
        <h2>
          Steki
        </h2>

        <img class="info" src="https://cdn.glitch.com/b54cf89a-9854-4f01-a545-04553711c46c%2Fchad-montano-M0lUxgLnlfk-unsplash.jpg?v=1584911476095">


        <p>
          Jakiś testk Jakiś testk Jakiś testk Jakiś testk Jakiś testk Jakiś testk
        </p>

      </div>


      <!--Kolumna drugą-->

      <div class="column-three">
        <h2>
          Steki
        </h2>

        <img class="info" src="https://cdn.glitch.com/b54cf89a-9854-4f01-a545-04553711c46c%2Fchad-montano-M0lUxgLnlfk-unsplash.jpg?v=1584911476095">

        <p>
          Jakiś testk Jakiś testk Jakiś testk Jakiś testk Jakiś testk Jakiś testk
        </p>

      </div>


      <!--Kolumna trzecia-->

      <div class="column-three">
        <h2>
          Steki
        </h2>

        <img class="info" src="https://cdn.glitch.com/b54cf89a-9854-4f01-a545-04553711c46c%2Fchad-montano-M0lUxgLnlfk-unsplash.jpg?v=1584911476095">


        <p>
          Jakiś testk Jakiś testk Jakiś testk Jakiś testk Jakiś testk Jakiś testk
        </p>

      </div>


    </div>

     <!--///////////////////////////GALERIA///////////////////////////////-->


    <div id="galeria">

    <h1>
      Galeria
    </h1>

    <img class="mySlides" src="https://cdn.glitch.com/b54cf89a-9854-4f01-a545-04553711c46c%2Fjakub-kapusnak-4f4YZfDMLeU-unsplash.jpg?v=1584805727291">
      <img class="mySlides" src="https://cdn.glitch.com/b54cf89a-9854-4f01-a545-04553711c46c%2Famirali-mirhashemian-jh5XyK4Rr3Y-unsplash.jpg?v=1584911306428">
      <img class="mySlides" src="https://cdn.glitch.com/b54cf89a-9854-4f01-a545-04553711c46c%2Fivan-torres-MQUqbmszGGM-unsplash.jpg?v=1584911601694">
      <img class="mySlides" src="https://cdn.glitch.com/b54cf89a-9854-4f01-a545-04553711c46c%2Famirali-mirhashemian-eRyMytuT0yg-unsplash.jpg?v=1584911607702">

    </div>


  </body>
</html>


@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

*{
  margin:0;

}


body{

  font-family: 'Lato', sans-serif;

}

/*MENU*/


#menu{

  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
  height:800px;
  background-image:url('https://cdn.glitch.com/b54cf89a-9854-4f01-a545-04553711c46c%2Fiii.jpg?v=1584807370385');
  background-size:cover;
  background-attachment:fixed;

}


ul{
  text-align:right;
  padding:30px;

}

li{
  display:inline;
  text-transform:uppercase;
  padding:10px;
}

a{
  font-size:25px;
  text-decoration:none;
  color:white;
  padding-bottom:8px;

}

a:hover{

  border-bottom: 2px solid red;

}


/*OFERTA*/

#oferta{

  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;


}


.column-three{

  width:33.33%;
  float:left;

}

.info{
  margin-top:30px;
  width:200px;
  height:200px;
  border-radius:100px;
}

h1{


  padding:30px;

}


/*Galeria*/


#galeria{


  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;


}


.mySlides{

  width:700px;

}