<html>
<head>
  <title> Contact </title>
  </head>
  <body>
    <div id="container">
    <h1><img id="first" src="https://images.vexels.com/media/users/3/131944/isolated/preview/fb8e14339344dbd8ba6c1b0c39d3b746-rock-and-roll-badge-by-vexels.png">CONTACT US</h1>
    <form>
    <!-- Fieldset 1 -->
    
    <fieldset>
      <br/>
    <legend>CONTACT DETAILS</legend>
    <label for="first name">Full name</label><br/>
    <input id="first name" type="text" required>
    <br><br>
    <label for="e-mail">E-mail </label> <br/>
    <input id="e-mail" type="email" required>
    <br/><br/>
    <label for="message">Your message</label>
                  <br/>
                  <textarea rows="5" cols="44" id="message" tabindex="-1"></textarea>
                  <br/>
    <input type="submit" />
    <input type="reset" tabindex="-1">
    </fieldset>
  </form>
  <div id="footer"><p>Powered by <span>ROCK &amp; ROLL</span></p>
      <img id="rocker" src="https://media.giphy.com/media/tzDkamXwAhKs8/source.gif">
    </div>
    </div>
</body>
</html>
body {
    font-family: 'Gilda Display', serif;
    background:url("https://s-media-cache-ak0.pinimg.com/736x/33/8b/65/338b65bfb713c5f83404a65f32dc87e7--ac-dc.jpg");
    color:white;
    margin:0;
    padding:0;
  }

  form {
    display:inline-block;
    width:100%;
  }
  h1 {
    text-align:center;
    background:rgba(255,0,0,0.5);
    margin:0 auto;
    padding:10px;
  }


  fieldset {
    text-align:center;
    width:40%;
    margin-top:3%;
    margin-left:auto;
    margin-right:auto;
    border:5px solid #f1f1f1;

  }
  legend {
    padding:10px;
    background:rgba(255,0,0,0.4);
    font-size:1.2rem;
  }

  input[type="text"], input[type="email"] {
  width:60%;
  padding:10px;
  }

  input[type="submit"], input[type="reset"] {
    display:inline-block;
    margin-bottom:2%;
    width:28%;
    padding:22px 10px;
    margin-top:5%;
    margin-left:2%;
    margin-right:2%;
    background:rgba(255,0,0,0.6);
    margin:1px solid red;
    color:linear-gradient(#F00000,#DC281E);

  }

label {
  font-size:1.2rem;
}

  textarea {
    resize:none;
  }
  input[type="submit"]:hover, input[type="reset"]:hover {
  color:#f1f1f1;
  }

  #logo-acdc {
    margin-bottom:26.5%;
  }

  #footer {
    padding:5px 0;
    margin-top:1.5%;
    width:100%;
    background:rgba(255,0,0,0.5);
    text-align:center;
  }

  #rocker {
    height:4rem;
  }

  #rocker:hover {
    transform:rotate(180deg);
  }

#first {
  display:block; 
  margin:0 auto;
  height:5rem;
}

@media all and (max-width: 800px) {
  input[type="submit"], input[type="reset"] {
    display:block;
    width:80%;
    margin:5% auto;
  }

  input[type="text"], input[type="email"] {
  width:80%;
  padding:10px;
}
  
  fieldset {
  width:70%;
}

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.