Contact form with background - HTML CSS CSS Form

HTML CSS examples for CSS Form:Form

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. Form

Description

Contact form with background

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>
.contact-container {<!--from www.ja  v a2s . c  o  m-->
   height:501px;
   width:100%;
   float:left;
   z-index:-1001;
   -webkit-box-shadow:0 2px 6px Chartreuse;
   -moz-box-shadow:0 2px 6px yellow;
   box-shadow:0 2px 6px blue;
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   background-position:center;
   background-size:cover;
}

.contact-title {
   text-align:center;
   width:100%;
   margin-bottom:11px;
   margin-top:41px;
   font-size:31px;
   height:auto;
   font:201 19px/2.4 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
   font-size:31px;
   font-weight:201;
   color:pink;
}

.contact-content-container {
   height:auto;
   width:100%;
   margin-left:auto;
   margin-right:auto;
   margin-top:21px
}

.contact-method {
   width:32%;
   height:193px;
   float:left;
   margin-left:21px;
   background:OrangeRed;
}

.contact-method-image {
   width:39px;
   height:51px;
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   margin-right:auto;
   margin-left:auto;
   margin-top:21px;
   margin-bottom:21px;
   opacity:0.5;
}

.contact-copy {
   height:auto;
   width:100%;
   text-align:center;
   margin-top:3px;
   color:grey;
}

.contact-header {
   height:auto;
   width:100%;
   text-align:center;
   margin-bottom:11px;
   color:BlueViolet;
}

form {
   width:801px;
   margin:21px auto;
   color:Chartreuse;
   -webkit-box-shadow:0 2px 6px yellow;
   -moz-box-shadow:0 2px 6px blue;
   box-shadow:0 2px 6px pink;
   background-color:OrangeRed;
   padding:2em;
}

.row {
   float:left;
   clear:both;
   width:100%;
}

.button-row {
   float:left;
   clear:both;
   width:100%;
   padding-right:11%;
   text-align:right;
}

.label {
   width:36%;
   float:left;
   text-align:right;
}

.input {
   width:64%;
   margin-left:3%;
   float:left;
}
</style> 
 </head> 
 <body> 
  <div class="contact-container"> 
   <div class="contact-title">
     Lorem ipsum dolor sit 
   </div> 
   <div class="contact-content-container"> 
    <div class="contact-method"> 
     <div class="contact-method-image"></div> 
     <div class="contact-header"> 
      <strong>Lorem i</strong> 
     </div> 
     <div class="contact-copy"> 
      <p>Lore</p> 
     </div> 
     <div class="contact-copy"> 
      <p>Lore</p> 
     </div> 
     <div class="contact-copy"> 
      <p>Lore</p> 
     </div> 
    </div> 
    <div class="contact-method"> 
     <div class="contact-method-image"></div> 
     <div class="contact-header"> 
      <strong>Lorem</strong> 
     </div> 
     <div class="contact-copy"> 
      <p>Lorem i</p> 
     </div> 
     <div class="contact-copy"> 
      <p>Lorem ip</p> 
     </div> 
     <div class="contact-copy"> 
      <p>Lorem ipsum </p> 
     </div> 
    </div> 
    <div class="contact-method"> 
     <div class="contact-method-image"></div> 
     <div class="contact-header"> 
      <strong>Lore</strong> 
     </div> 
     <div class="contact-copy"> 
      <p>Lore</p> 
     </div> 
     <div class="contact-copy"> 
      <p>Lore</p> 
     </div> 
     <div class="contact-copy"> 
     </div> 
    </div> 
    <div style="clear:both;"></div> 
   </div> 
   <div> 
    <form action="#"> 
     <div class="row"> 
      <label class="label" for="first_name">Lorem ipsum</label> 
      <div class="input"> 
       <input type="text" name="first_name"> 
      </div> 
     </div> 
     <div class="button-row"> 
      <input type="submit"> 
     </div> 
     <div style="clear:both;"></div> 
    </form> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials