music-store-cg

<!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>Music store</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="wholePage">

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

    <ul id="navigation">
      <li><a href="index.html">Main page</a></li>
      <li><a href="#">Sale</a></li>
      <li><a href="#">Repairs</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="contact.html">Contact</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>
      We specialize in the sale and repair of guitars, in particular: 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;
}

#wholePage{
  width: 1000px;
  margin-left:auto;/*centering the page*/
  margin-right:auto;/*centering the page*/
  border: 3px dashed #000000;/*we add a frame by the way, then the students will actually see this box, instead of double it can be: solid, dotted, dashed*/
  background-color: #ffffff;
}


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


#navigation{
  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;
  }


#contact{

  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;/*we block the possibility of changing the size by the user*/

}

label{

  font-size: 18px;
}


fieldset{

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

}

legend{
  font-size:30px;
}


#button{
  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;

}


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


}


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

}