Contact form panel - HTML CSS CSS Form

HTML CSS examples for CSS Form:Form

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

Description

Contact form panel

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!-- w ww.j  a va 2 s . co  m-->
   background-color:Chartreuse;
   font-family:"Times New Roman", Georgia, Serif;
   font-size:medium;
   padding:0px;
}

nav {
   height:4.6em;
}

#Content {
   padding:11px;
   width:581px;
   margin-left:auto;
   margin-right:auto;
   background-color:yellow;
}

#Content h2 {
   text-align:center;
   display:block;
}

#Menu {
   background-color:blue;
   display:block;
}

header {
   background-color:pink;
   width:601px;
   margin:0 auto;
}

#menuLogin
 {
   float:right;
}

#Logo {
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   background-size:100% 100%;
   height:100px
}

#Logo h2 {
   text-align:center;
   vertical-align:middle;
}

.Line {
   margin:0;
   padding:0;
   height:4.6em;
   border-right:3px solid OrangeRed;
   float:left;
   display:inline-block;
}

header nav a {
   text-decoration:none;
   background-color:grey;
   height:2.6em;
   padding:2em;
   display:inline-block;
   border-right:3px solid BlueViolet;
}

header nav a:hover {
   background-color:Chartreuse;
   color:yellow;
}

header nav a:link {
   color:blue;
}

header nav a:visited {
   color:pink;
}

#menuLogin a
 {
   border-right:none;
   border-left:3px solid OrangeRed;
}

a.MMLink:active {
   background-color:grey;
   color:BlueViolet;
}

.NewsFeed {
   text-decoration:underline;
   font-weight:bold;
}

.Form {
   width:401px;
   border:3px solid Chartreuse;
   margin-left:auto;
   margin-right:auto;
   margin:0;
   padding:0;
}

#Content h1
 {
   border-bottom:3px groove yellow;
}
</style> 
 </head> 
 <body> 
  <header> 
   <div id="Logo"> 
    <h2>Lorem ipsum</h2> 
   </div> 
   <nav> 
    <a href="Index.php">Lore</a> 
    <a href="About.html">Lorem</a> 
    <a href="Contactus.php">Lorem ipsu</a> 
    <div id="menuLogin"> 
     <a href="Login.php">Lorem</a> 
     <a href="Signup.php">Lorem i</a> 
    </div> 
   </nav> 
  </header> 
  <div id="Content"> 
   <h1>Lorem ipsum</h1> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacu<br>Lorem ipsum dolor sit amet, consectetur a</p> 
   <form> 
    <fieldset> 
     <legend>Lorem ipsum </legend>Lorem ipsum dolor sit 
    </fieldset> 
    <br> 
   </form> 
   <p>Lorem ipsu</p> 
  </div>  
 </body>
</html>

Related Tutorials