sklep-muzyczny-gp

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

    <title>Sklep muzyczny</title>
    <link rel="icon" href="https://cdn.glitch.com/3f138ee4-4896-4ec7-88f0-78bb1a2642cf%2Flogo-2287665_1280.png?v=1623097139221">
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">

  </head>


  <body>

    <div id="calaStrona">

    <img id="logo" src="https://cdn.glitch.com/1ffae188-0a39-49d2-9f7e-fd1cf0530892%2Flogo.png?v=1584276861388">

      <ul id="nawigacja">
        <li><a href="#">Strona główna</a></li>
        <li><a href="#">Sprzedaż</a></li>
        <li><a href="#">Naprawy</a></li>
        <li><a href="#">O nas</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>

        <img id ="baner" src="https://cdn.glitch.com/1ffae188-0a39-49d2-9f7e-fd1cf0530892%2Fcc958793-3a40-4431-b9df-005252fe456d.obraz.png?v=1584276566263">

      <p>
        Specjalizujemy się w sprzedaży oraz naprawach gitar, a w szczególności: Fender, Gibson, Ibanez.

      </p>

        </div>
  </body>
</html>


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

body {

  font-family: 'Quicksand', sans-serif;
  background-image:url('https://cdn.glitch.com/1ffae188-0a39-49d2-9f7e-fd1cf0530892%2F7fc37a26-a2ab-435a-9537-d75367d8ccc5.obraz.png?v=1584218200836');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

#calaStrona {
  width: 1000px;
  margin-left:auto;/*wyśrodkowanie strony*/
  margin-right:auto;/*wyśrodkowanie strony*/
  border: 3px dashed #000000;/*dodajemy ramkę przy okazji wtedy uczniowie zobaczą rzeczywiście to pudełko, zamiast double może być: solid, dotted,dashed*/
  background-color: #ffffff;
}


#logo {
  display: block;
  width:300px;
  margin-left: auto;
  margin-right: auto;
}


#nawigacja{
  width: 700px;
  margin-left:auto;
  margin-right:auto;
  border-top: 2px solid #000;
  border-bottom: 1px solid #000;
  padding:10px;
  text-align: center;
 }
li {

  display: inline;
  letter-spacing:1px;
  padding:10px;
 }


a {
  color: #000000;
  text-transform: uppercase;
  text-decoration: none;

}

a:hover {
  color: #cc3333;
  }


#baner{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:600px;
  border-radius:10px;
  }

p {
  text-align: center;
  }


#kontakt{

  padding: 30px;
  height:1300px;
}

form {
  margin-top: 20px;
  width: 400px;

}
form input,form select{

  width:330px;
  height: 35px;
  font-size:20px;

}

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

}

label{

  font-size: 18px;
}


fieldset{

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

}

legend{
  font-size:30px;
}


#przycisk{
  width:150px;
  height:60px;
  background-color: #1f1a34;
  color: white;
  padding: 15px;
  font-size: 16px;
  border-radius: 4px;
  letter-spacing:1px;
  border: 2px solid #1f1a34;
  text-transform:uppercase;

}


#przycisk:hover {
  background-color: white;
  color: black;
  cursor:pointer;


}


.dwieKolumny
{
  width:50%;
  float:left;

}