Jenna's Fiddle!

Just helping out a classmate. :)

by Ryan Brewer

HTML

<body>
    <div class="wrapper">
    
     <div class="headercontact">
  <img src="img/logo.png" alt="Jeanna's Portfolio" />
  <div class="navigation">
  <nav>
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="works.html">Portfolio</a> |
<a href="contact.php">Contact</a>
</nav>
  </div>
    <!-- end .header --></div>
        
      
    <div class="containerworks">
    <div id="contact-form" class="clearfix">
    <h1>Contact</h1>
    <h2>Form</h2>
       <ul id="errors" class="">
    <li id="info">There were some problems with your form submission:</li>
            </ul>
    <form method="post" action="process.php">
        <label for="name">Name: <span class="required">*</span></label>
        <input type="text" id="name" name="name" value="" placeholder="Your Name" required autofocus />
         
        <label for="email">Email Address: <span class="required">*</span></label>
        <input type="email" id="email" name="email" value="" placeholder="[email protected]" required />
         
        <label for="telephone">Telephone: </label>
        <input type="tel" id="telephone" name="telephone" value="" />
         
        
         
        <label for="message">Message: <span class="required">*</span></label>
        <textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"></textarea>
         
        <span id="loading"></span><br>
        <input type="submit" value="Submit" id="submit-button" />
        <p id="req-field-desc"><span class="required"><br>
        *</span> indicates a required field</p>
    </form>
    </div>

        
        </div>
       </div>
             
        <div class="footer">
    <p>© 2014 Jeanna's Portfolio</p>
   
    <!-- end .footer --></div>

<a href="about.html">About</a> |
<a href="works.html">Portfolio</a> |
<a href="contact.php">Contact</a>

                </nav>
            </div>
            <!-- end .header -->
       ...

CSS

body {
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center top;
	background-color: #46523C;
}
.clear {
    clear: both;
}

.wrapper {
    position: relative;
    max-width: 960px;
    height: 1000px;
    margin: 0px auto;
    background-image: url(http://jhaag4.mydevryportfolio.com/WGD260/img/contact.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border: 1px solid red;
    text-align: center;
}
.header {
    position: relative;
    float: left;
    margin-left: 10px;
}
nav {
    color: white;
}
nav a {
    color: white;
    text-decoration: none;
    text-shadow: 1px 1px 0px black;
}
nav a:hover {
    color: green;
}

.containerwork {
    width: 80%;
    height: 1095px;
    margin: 0px auto;
    color: white;
    text-align: left;
    padding: 10px;
    border: 1px solid limegreen;
    
}

@media only screen and (max-width:480px) {
    
body {
    position: relative;
    background-image: url("http://jhaag4.mydevryportfolio.com/WGD260/img/homebg.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	background-color: #46523C;
}
.wrapper {
    position: relative;
    width: 100%;
    min-width: 320px;
}
    

}