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////////////////////////////////-->

      <header>


        <nav>

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

        </nav>


        </header>


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

    <section id="oferta" >

     <h1>
        Oferta
      </h1>
     	<!--kontener flexbox-->
   <div class="kontener">


  <div class="potrawa"><h2>
    Steki
    </h2>
       <img class="info" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fstek.jpg?v=1630502359544">

       <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="potrawa"><h2>
    Burgery
    </h2>
    <img class="info" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fburger.jpg?v=1630501812119">
       <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="potrawa"><h2>
    Pizza
    </h2>
    <img class="info" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">
       <p>
         Marzy Ci się ciepła, świeża, pachnąca pizza? Poprostu przyjdź do nas!
    </p></div>

     <div class="potrawa"><h2>
    Pizza
    </h2>
    <img class="info" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">
       <p>
         Marzy Ci się ciepła, świeża, pachnąca pizza? Poprostu przyjdź do nas!
    </p></div>


  <div class="potrawa"><h2>
    Pizza
    </h2>
    <img class="info" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">
       <p>
         Marzy Ci się ciepła, świeża, pachnąca pizza? Poprostu przyjdź do nas!
    </p></div>

     <div class="potrawa"><h2>
    Pizza
    </h2>
    <img class="info" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">
       <p>
         Marzy Ci się ciepła, świeża, pachnąca pizza? Poprostu przyjdź do nas!
    </p></div>

   </div>

</section>


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


    <section id="galeria">

       <h1>
         Galeria
      </h1>

      <div class="kontener">


      <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fstek.jpg?v=1630502359544">
      <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">
      <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fburger.jpg?v=1630501812119">
      <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">

      <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fpizza.jpg?v=1630495872932">
      <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fburger.jpg?v=1630501812119">
      <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fstek.jpg?v=1630502359544">
      <img class="zdj-galeria" src="https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fburger.jpg?v=1630501812119">


      </div>


    </section>


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

	<footer>

      <h1>
         Kontakt
      </h1>

  <div class="kontener">

      <div id=kontakt>


    <form >
        <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 id ="mapa">


    <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>


  </footer>


</body>
</html>


@import url('https://fonts.googleapis.com/css?family=Lato:400,900&display=swap');
* {
    margin: 0;/* domyślnie przeglądarka ma ustawione marginesy, zerujemy wszystkie*/

}

body{

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

}

header{
  width:100%;
  background-image:url('https://cdn.glitch.com/8718103b-218f-404d-b28f-085c6e2295da%2Fb54cf89a-9854-4f01-a545-04553711c46c_iii.jpg?v=1630495693697');
  background-size: cover;
  background-attachment: fixed;
  height: 800px;
}

nav{
  display:flex;
  justify-content:flex-end;/*przenosimy nawigację do prawej krawędzi strony*/

}

.menu-link{

font-size:35px;
font-weight:500;
text-decoration:none;
color:white;
padding: 14px 20px;
border-bottom: 2px solid transparent;
transition-duration:0.6s;
}

.menu-link:hover{

  border-bottom: 2px solid #ff5805;
}


h1{

  margin:100px 0px;
  font-size:35px;
  text-align:center;
  width:100%;
}

h2{
  text-align:center;
  margin-top:10px;
}


.kontener{

display:flex;
justify-content:space-around;
text-align:center;
flex-wrap:wrap;
}


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

/*ustawiamy, aby każde pudełko z potrawami posiadało na stronie tyle samo miejsca*/
.potrawa{
  flex:1;
}

p{
padding:0px 20px 0px 20px;
}


.zdj-galeria{

  margin-top:10px;
  width:400px;
  height:200px;
  object-fit:cover;

}

.zdj-galeria:hover{


  transform: scale(1.2,1.2);
  transition-duration:1s;
}


footer{

  width:100%;
  background-color: #262626;
  margin-top:50px;
}

footer h1{
  color:white;
  padding-top:10px;
   margin:0px;
}

#kontakt,#mapa{
  margin-top:100px;
}

form {

  color:white;
}
form input{

  width: 330px;
  height: 30px;

}
textarea{
  width: 330px;
  resize: none;/*blokujemy możliwość zmiany wielkości przez użytkownika*/

}

form label{

  font-size: 18px;
}
fieldset{
   text-align:left;
  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;
}


/*dla małych urządzeń wyświetlamy pozycję w menu pionowo*/
@media screen and (max-width: 768px) {
   nav {
  flex-direction:column;
  align-items: flex-end
  }

  iframe{
    width:400px;
  }

  .button{
  width:100%;

}

   form input,textarea{
      width:250px;
    }
}