Sign up box

Starting ideas for possible client.

by Joshua Powell

HTML

<!--<header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Guides</a></li>
            <li><a href="#">Forum</a></li>
        </ul>
    </nav>
</header>-->
<div class="content">
    <span class="option">
        <h2> Welcome to "Insert Name Here" user input form!</h2>
        <p id="toggle">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philospher Cicero. It's words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found in the original.
        </p>
    </span>
</div>
<div class="sign-up">
    <a href="#">Sign up now!</a>
</div>
<footer>
    
</footer>

CSS

header {
    width: 100%;
    height: 100px;
    background: #8d5635;
    padding-top: 5px;
}

nav {
    margin: 0 auto;
    width: 500px;
}

nav ul {
    border-radius: 5px;
    border: 2px solid rgba(43, 43, 43, .3);
    height: 40px;
    width: 500px;
    overflow: auto;
    margin: 0;
    padding: 0;
}

nav ul li {
    background: -webkit-linear-gradient(top, #ff7200, #c65900);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff7200), to(#c65900)); 
    background: -webkit-linear-gradient(top, #ff7200, #c65900); 
    background: -moz-linear-gradient(top, #ff7200, #c65900); 
    background: -ms-linear-gradient(top, #ff7200, #c65900); 
    background: -o-linear-gradient(top, #ff7200, #c65900);
    height: 40px;
    width: 100px;
    text-align: center;
    line-height: 40px;
    display: block;
    float: left;
}

nav ul li a {
    color: #2b2b2b;
    display: block;
    text-decoration: none;
    text-shadow: 0 -1px 1px #743400;
}

nav ul li a:hover {
    color: #ff7200;
    background: #2b2b2b;
    height: 40px;
    width: 100px; 
}

.content {
    width: 100%;
    height: 450px;
    background: #837166;
    padding-top: 50px;
    box-shadow: 0 2px 3px #3b3b3b;
    position: relative;
}

.option {
    display: block;
    width: 60%;
    height: 370px;
    background: #d1b19d;
    box-shadow: 0 2px 3px #3b3b3b inset;
    border-radius: 5px;
    margin: 0 auto;
    padding: 15px;
    overflow: hidden;
}

.option p {
    display: none;
}

.sign-up {
    width: 100%;
    height: 60px;
    background: #d1b19d;
    padding-top: 20px;
}

.sign-up a {
    margin: 0 auto;
    width: 200px;
    height: 40px;
    display: block;
    background: -webkit-linear-gradient(top, #ff7200, #c65900);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff7200), to(#c65900)); 
    background: -webkit-linear-gradient(top, #ff7200, #c65900); 
    background: -moz-linear-gradient(top, #ff7200, #c65900); 
    background: -ms-linear-gradient(top, #ff7200,...

JavaScript

$(document).ready(function() {
    $('#toggle').fadeIn(3000, function () {
        
    });
});