restauracja

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>Restauracja</title>

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="style.css" type="text/css" />


</head>

<body>


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

      <div id="menu">

                <ul>

                    <li><a class="menu-link" href="#oferta">Oferta</a></li>
                    <li><a class="menu-link" href="#">Dlaczego warto</a></li>
                    <li><a class="menu-link" href="#galeria">Galeria</a></li>
                    <li><a class="menu-link" href="#kontakt">Kontakt</a></li>

                </ul>


    </div>


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

<div id="oferta">

  <h1>
    Oferta
  </h1>


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

    <p>
      W restauracji znajdziecie: stek z polędwicy, steki z antrykotu z kością lub bez kości, stek z rostbefu.
    </p>
  </div>
  <div class="trzy-kolumny">
    <h2>
      Burgery
    </h2>
    <img class="info"
      src="https://cdn.glitch.com/b54cf89a-9854-4f01-a545-04553711c46c%2Famirali-mirhashemian-jh5XyK4Rr3Y-unsplash.jpg?v=1584911306428">
    <p>
      Nasze Burgery to 100% wołowiny podawane w świeżo pieczonych przez nas bułkach.Ø 19cm posiada 200g. mięsa 100%
      wołowiny. Ø 12cm. posiada 100g. mięsa 100% wołowiny.
    </p>
  </div>
  <div class="trzy-kolumny">
    <h2>
      Pizza
    </h2>
    <img class="info"
      src="https://cdn.glitch.com/b54cf89a-9854-4f01-a545-04553711c46c%2Faurelien-lemasson-theobald-x00CzBt4Dfk-unsplash.jpg?v=1584911357452">
    <p>
      Marzy Ci się ciepła, świeża, pachnąca pizza? Poprostu przyjdź do nas!
    </p>
  </div>
</div>


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


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

    </div>

	 <!--//////////////////////////////STOPKA////////////////////////////////-->

	<div id="stopka">


  <div class="dwie-kolumny">
      <form id="kontakt">
        <fieldset>

        <legend>
          Kontakt
        </legend>
        <label for="email">E-mail</label><br>
        <input id="email" type="email"><br><br>
        <label for="uwagi">Twoje pytanie:</label><br>
        <textarea id="uwagi" rows="10" cols="40" ></textarea><br><br>
          </fieldset>
        <input class="button" type="submit" value="Wyślij">
      </form>

     </div>
  <div class="dwie-kolumny">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2443.870871723564!2d21.01584251531749!3d52.227563779759855!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471eccf1af2ce34d%3A0x406e6aa311edbf6f!2sKrucza%2C%20Warszawa!5e0!3m2!1spl!2spl!4v1584814426947!5m2!1spl!2spl" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>


     </div>
  </div>


		<script>
  //zmienna dzięki, której będziemy wybierać konkretne zdjęcie
let numerZdjecia = 0;
  //zmienna kolekcji naszych wszystkich zdjęć
const wszystkieZdjecia = document.getElementsByClassName("zdj-galeria");

slajder();


function slajder() {

  //ukrywamy wszystkie dodane zdjęcia w galerii
 for ( let i = 0; i < wszystkieZdjecia.length; i++) {
   wszystkieZdjecia[i].style.display = 'none';
  }

 //jeśli wyświetliliśmy już ostatnie zdjęcie to wyświetlamy od początku
  if (numerZdjecia >= wszystkieZdjecia.length) {

    numerZdjecia = 0;
  }
  //wybiermay konkretne zdjęcie i wyświetlamy
  wszystkieZdjecia[numerZdjecia].style.display = 'block';
  numerZdjecia++;
  setTimeout(slajder, 3000);

}

</script>


</body>
</html>


/////////////////////////CSS//////////////////////////////////////////

@import url('https://fonts.googleapis.com/css?family=Lato:400,900&display=swap');
* {
    margin: 0;
}

body{

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

}

#menu{

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

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

li{
font-weight:900;
display:inline;
padding:10px;
text-transform:uppercase;

}


.menu-link{
  text-decoration:none;
  color:white;
  padding:8px;
  border-bottom: 2px solid transparent;
  transition-duration:0.2s;

}

.menu-link:hover{

  border-bottom: 2px solid #ff5805;
}


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


}

.info{
  margin-top:30px;
  width:200px;
  height:200px;
  border-radius:150px;
  object-fit: cover;
}


.trzy-kolumny {
  float: left;
  width: 33.33%;
}


h1{
  clear:both;
  text-align:center;
  padding:40px;
}

p{

  text-align:left;
  padding:50px;
}

.zdj-galeria{

  width:700px;
  margin-left:auto;
  margin-right:auto;
}

#galeria{
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;

}


#galeria,#oferta{

margin-bottom:200px;

}


#stopka{
  max-width:1400px;
  height:500px;
  background-color: #262626;
  padding: 50px;
  font-size: 80%;
margin-left:auto;
margin-right:auto;
}

.dwie-kolumny{

width:50%;
float:left;
}

form {
margin-top: 20px;
width: 400px;
padding: 20px;
margin-left:auto;
margin-right:auto;
color:white;

}
form input{

width: 330px;
height: 30px;

}
textarea{
width: 330px;
}

form label{

font-size: 18px;
}

fieldset{

padding:20px;
margin-bottom:10px;

}

legend{
font-size:30px;
}

.button{
width:150px;
height:50px;
background-color: #fa4a0a;
color: white;
padding: 15px 32px;
font-size: 16px;
border-radius: 4px;
transition-duration: 0.4s;
border: 2px solid #fa4a0a;
text-transform:uppercase;
}

.button:hover {
background-color: white;
color: black;

}