<!DOCTYPE HTML>
<html>
  <head>
    <title>Contact page</title>
  </head>
  
  <body>
    <div class="logo">ProChive</div>
    
    <div class="small-box">
      
    <div id="topic">
    <h1 id="head">CONTACT US!</h1>
    <p>We would love to hear about your project.</p>
    </div>

    <form>
      <label>Name<sup>*</sup></label><br>
      <input type="text" name="name" class="box"><br>
      
      <label>E-mail<sup>*</sup></label><br>
      <input type="email" name="email" class="box"><br>
      
      <label>Address</label><br>
      <input type="text" name="address" class="box"><br>
      
      <label>Subject<sup>*</sup></label><br>
      <input type="text" name="subject" class="box"><br>
   
      <label>Password<sup>*</sup></label><br>
      <input type="password" name="password" class="box"><br>
      
      <input type="submit" value="Submit" id="submit">
    </form>
    </div>
    <footer>
      <a class="footer-color" href="/about" rel="noopener">About</a>
    
      <span class="copy"><a class="footer-color" href="//support.twitter.com" rel="noopener">Help Center</a></span>
    
      <a class="footer-color" href="https://blog.twitter.com" rel="noopener">Blog</a>
    
      <a class="footer-color" href="http://status.twitter.com" rel="noopener">Status</a>
    
      <a class="footer-color" href="https://about.twitter.com/careers" rel="noopener">Jobs</a>
    
      <a class="footer-color" href="/tos" rel="noopener">Terms</a>
    
      <span class="copy"><a class="footer-color" href="/privacy" rel="noopener">Privacy Policy</a></span>
    
      <a class="footer-color" href="//support.twitter.com/articles/20170514" rel="noopener">Cookies</a>
    
      <span class="copy"><a class="footer-color" href="//business.twitter.com/en/help/troubleshooting/how-twitter-ads-work.html" rel="noopener">Ads info</a></span>
    
      <a class="footer-color" href="//about.twitter.com/press/brand-assets" rel="noopener">Brand</a>
    
      <a class="footer-color" href="https://about.twitter.com/products" rel="noopener">Apps</a>
    
      <a class="footer-color" href="//ads.twitter.com/?ref=gl-tw-tw-twitter-advertise" rel="noopener">Advertise</a>
    
      <a class="footer-color" href="https://marketing.twitter.com" rel="noopener">Marketing</a>
    
      <a class="footer-color" href="https://business.twitter.com" rel="noopener">Businesses</a>
    
      <a class="footer-color" href="//dev.twitter.com" rel="noopener">Developers</a>

      <a class="footer-color" href="/i/directory/profiles" rel="noopener">Directory</a> 
      
      <a class="footer-color" href="/settings/personalization" rel="noopener">Settings</a>
      
      <span class="copy">2019 ProChive</span>
    </footer>
  </body>
</html>


.logo{
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
  margin-left: 10px;
  background-color: #18BFB9;
  position: relative;
  left: 2px;
  border-radius: 5px;
  color: #E9E9E9;
  font-family: arial;
  text-align: center;
  font-weight: bold;
  display: grid;
  place-items: center;
}

body {
  background: url("https://i.pinimg.com/originals/12/6b/99/126b9959b3c64c06d5d796fbb0381c7c.jpg");
  background-size: 3000px;
}

.small-box {
  font-family: monospace;
  position: relative;
  left: 20%;
  top: 30px;
  background-color: #E9E9E9;
  width: 60%;
  line-height: 30px;
  border: 2px solid #18BFB9;
}

#submit {
  background-color: #18BFB9;
  margin-top: 20px;
  width: 70%;
  height: 40px;
  margin-bottom: 20px;
  position: relative;
  left: 25px;
}

#submit:hover{
  background-color: lightgreen;
}

#topic {
  line-height: 10px;
  text-align: center;
  padding-top: 30px;
  color: #18BFB9;
}

.box {
  width: 70%;
  height: 35px;
  text-align: left;
  position: relative;
  left: 25px;
}

form {
  position: relative;
  left: 90px;
}

footer {
  width: 100%;
  height: 30%;
  z-index: 3;
  font-size: 12px;
  word-spacing: 8px;
  color: #18BFB9;
  position: relative;
  text-align: center;
  top: 80px;
  font-family: monospace;
  padding-bottom: 20px;
}
            
.footer-color {
  color: #18BFB9;     
  text-decoration: none;
}


.copy{
  word-spacing: .8px;        
}

.copy:hover{
  color: lightgreen;
}

a:hover{
  color: lightgreen;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.