Alignment

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Center / Middle

Designup

The CSS toolkit that powers neax

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
       <h1>
         <i class="fa fa-cubes"></i>
         Designup
       </h1>
       <h4 class="font-regular">
         The CSS toolkit that powers <span class="font-bold">neax</span>
       </h4>
     </div>
   </div>
 </div>

Auth

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Log in

<div class="login">
  <div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
       <h1>
         <a class="logo" href="#">
           <i class="fa fa-cubes"></i>
           Designup
         </a>
       </h1>
       <form class="" action="" method="">
         <h2>
           Log in
         </h2>
         <input type="text" placeholder="Username" name="" value="">
         <input type="password" placeholder="Password" name="" value="">
         <input type="button" name="" value="Log in">
         <a href="#">Forgot password?</a>
       </form>
       <div>
         Don't have an account? <a href="#">Sign up</a>
       </div>
     </div>
   </div>
 </div>
</div>

Sign up

<div class="signup">
  <div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
       <h1>
         <a class="logo" href="#">
           <i class="fa fa-cubes"></i>
           Designup
         </a>
       </h1>
       <form class="" action="" method="">
         <h2>
           Sign up
         </h2>
         <input type="text" placeholder="Username" name="" value="">
         <input type="text" placeholder="Email address" name="" value="">
         <input type="password" placeholder="Password" name="" value="">
         <input type="button" name="" value="Sign up">
         <ul class="login-social">
           <li>
             <a class="auth-facebook" href="#">
               <i class="fab fa-facebook-f"></i> Facebook
             </a>
           </li>
           <li>
             <a class="auth-google-plus" href="#">
               <i class="fab fa-google-plus-g"></i> Google+
             </a>
           </li>
         </ul>
       </form>
       <div>
         Already have an account? <a href="#">Log in</a>
       </div>
     </div>
   </div>
 </div>
</div>

Profile

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Basic

GoJahddy
<form class="profile" method="post">
  <figure class="profile-avatar caption-hover">
  <div class="profile-avatar-img" style="background-image: url('...');">
  </div>
    <figcaption>
      GoJahddy
    </figcaption>
  </figure>
  <div class="profile-info">
    <label for="id_first_name">First name:</label>
    <input type="text" name="" value="Jahdiel" maxlength="30" id="id_first_name">
    <label for="id_last_name">Last name:</label>
    <input type="text" name="" value="Santander" maxlength="30" id="id_last_name">
    <label for="id_email">Email address:</label>
    <input type="email" name="" value="[email protected]" maxlength="254" id="id_email">
    <button type="button">Save</button>
  </div>
</form>

Landing page

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Basic

Musicup
Take your music always with you
Going somewhere? Get the Musicup for free for 15 days.
Try it now!

Feature 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn more

Feature 2

Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur.

Learn more

Feature 3

Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta.

Learn more

Getting started is easy

Try it now!
© 2017 neax
<div class="landing-page">
  <section class="landing-intro">
    <div class="logo-landing">
      <i class="fa fa-headphones"></i> Musicup
    </div>
    <div class="auth-buttons-landing">
      <a class="button" href="#">
        Log in
      </a>
      <a class="button outline" href="#">
        Sign up
      </a>
    </div>
    <div class="landing-intro-title">
      Take your music always with you
    </div>
    <div class="landing-intro-subtitle">
      Going somewhere? Get the Musicup for free for 15 days.
    </div>
    <a class="button call-to-action" href="#">Try it now!</a>
  </section>
  <section class="landing-features">
    <div class="container-landing">
      <div class="landing-feature">
        <div class="feature-info">
          <h1>
            Feature 1
          </h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Donec sollicitudin molestie malesuada. Donec sollicitudin.
          </p>
          <a class="button" href="#">Learn more</a>
        </div>
        <div class="feature-img">
          <img src="#" alt="" />
        </div>
      </div>
      <div class="landing-feature">
        <div class="feature-img">
          <img src="#" alt="" />
        </div>
        <div class="feature-info">
          <h1>
            Feature 2
          </h1>
          <p>
            Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur.
          </p>
          <a class="button" href="#">Learn more</a>
        </div>
      </div>
      <div class="landing-feature">
        <div class="feature-info">
          <h1>
            Feature 3
          </h1>
          <p>
            Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta.
          </p>
          <a class="button" href="#">Learn more</a>
        </div>
        <div class="feature-img">
          <img src="#" alt="" />
        </div>
      </div>
    </div>
  </section>
  <section class="section-getting-started">
    <h1>
      Getting started is easy
    </h1>
    <a class="button call-to-action" href="#">Try it now!</a>
  </section>
  <footer>
    © 2017 neax
  </footer>
</div>

Form page

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Grid


<form>
  <div class="row">
    <div class="four">
      <label for="id_grid_user">User:</label>
      <input type="email" name="" value="" maxlength="254" id="id_grid_user">
    </div>
    <div class="four">
      <label for="id_grid_email">Email:</label>
      <input type="email" name="" value="" maxlength="254" id="id_grid_email">
    </div>
    <div class="four">
      <label for="id_grid_password">Password:</label>
      <input type="password" name="" value="" maxlength="254" id="id_grid_password">
    </div>
  </div>
  <label for="id_grid_address">Address:</label>
  <input type="text" name="" value="" maxlength="254" id="id_grid_address">
  <div class="row">
    <div class="five">
      <label for="id_grid_city">City:</label>
      <input type="text" name="" value="" maxlength="254" id="id_grid_city">
    </div>
    <div class="five">
      <label for="id_grid_country">Country:</label>
      <select id="id_grid_country">
        <option>Peru</option>
        <option>EEUU</option>
        <option>Mexico</option>
        <option>Canada</option>
        <option>Brasil</option>
        <option>Argentina</option>
      </select>
    </div>
    <div class="two">
      <label for="id_grid_zip">Zip:</label>
      <input type="text" name="" value="" maxlength="3" id="id_grid_zip">
    </div>
  </div>
  <label>
    <input type="checkbox"> Checkbox
  </label>
  <br/>
  <button type="button">Save</button>
</form>

Horizontal




<form class="horizontal">
  <div class="row">
    <div class="two">
      <label for="id_horizontal_email">Email:</label>
    </div>
    <div class="ten">
      <input type="email" name="" value="" maxlength="254" id="id_horizontal_email">
    </div>
  </div>
  <div class="row">
    <div class="two">
      <label for="id_horizontal_password">Password:</label>
    </div>
    <div class="ten">
      <input type="password" name="" value="" maxlength="254" id="id_horizontal_password">
    </div>
  </div>
  <div class="row">
    <div class="two">
      <label for="id_horizontal_address">Address:</label>
    </div>
    <div class="ten">
      <input type="password" name="" value="" maxlength="254" id="id_horizontal_address">
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="two">
      <label>Radios</label>
    </div>
    <div class="ten">
      <label>
        <input type="radio" name="" value="" checked>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
      </label>
      <label>
        <input type="radio" name="" value="">
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
      </label>
      <label>
        <input type="radio" name="" value="" disabled>
        Excepteur sint occaecat cupidatat non proident, sunt in culpa.
      </label>
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="two">
      <label>Checkbox</label>
    </div>
    <div class="ten">
      <label>
        <input type="checkbox"> Checkbox
      </label>
    </div>
  </div>
  <br/>
  <button type="button">Save</button>
</form>