Foundation 5.5.0 Login

by Charles Butler

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800"></script>
<ul class="tabs" data-tab>
    <li class="tab-title active"><a href="#panel1">Sign In</a>
    </li>
    <li class="tab-title"><a href="#panel2">Sign Up</a>
    </li>
</ul>
<div class="tabs-content">
    <div class="content active" id="panel1">
        <div class="row">
            <div class="small-12 columns l-form">
                <!-- start email -->
                <div class="row collapse">
                    <div class="small-10 columns">
                        <input type="text" placeholder="Email Address" />
                    </div>
                    <div class="small-2 columns"> <span class="postfix"><i class="fa fa-envelope"></i></span>

                    </div>
                </div>
                <!-- start password -->
                <div class="row collapse">
                    <div class="small-10 columns">
                        <input type="text" placeholder="Password" />
                    </div>
                    <div class="small-2 columns"> <span class="postfix"><i class="fa fa-lock"></i></span>

                    </div>
                </div>
                <!-- end password --> <a class="button expand">LOGIN</a>

                <p class="text-center"><a><small>Forgot Password?</small></a>
                </p>
                                <hr />

                <ul class="inline-center">
          ...

CSS

body {
    background: #888 url(http://www.hdwallpapersfactory.com/wallpaper/blue_minimalistic_gaussian_blur_gradient_minimal_clean_digitalconduct_desktop_1920x1080_hd-wallpaper-930107.png);
    background-size: cover;
    overflow-x: hidden;
    font-family: Open Sans, sans-serif;
}
.login {
    max-width:300px;
}
.tabs {
    max-width: 300px;
}
.tabs .tab-title {
    width: 50%;
}
.tabs .tab-title a {
    padding:0 0 0 20px;
    line-height: 40px;
}
.l-form {
    max-width:300px;
}
l-form .postfix i.fa {
    color: #888 !important;
}
input[type="text"], input[type="text"]:hover, input[type="text"]:focus {
    box-shadow: none;
    outline: none;
    border: none;
}
.postfix, .postfix:hover, .postfix:focus {
    box-shadow: none;
    outline: none;
    border: none;
    background: #FFF !important;
}
.tabs-content {
    max-width: 300px;
}
.tabs-content .content.active {
    background: #FFF;
    padding-bottom: 0;
}
ul.inline-center {
    list-style-type: none;
    text-align: center
}
ul.inline-center li {
    display: inline-block
}
button, .button {
    border-style: solid;
    border-width: 0;
    cursor: pointer;
    font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    line-height: normal;
    margin: 0 0 1.25rem;
    position: relative;
    text-decoration: none;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    display: inline-block;
    padding-top: 0.8rem;
    padding-right: 2rem;
    padding-bottom: 0.725rem;
    padding-left: 2rem;
    font-size: 0.9rem;
    background-color: #3498DB;
    border-color: #217bb8;
    color: #FFFFFF;
    transition: background-color 300ms ease-out;
}

JavaScript

$(document).foundation();