Lemmah/BucketList

{% extends "base_layout.html" %}
{% block title %}Dream Buckets | Home {% endblock %}
{% block nav_menu_items %}
  <ul id="nav-mobile" class="left hide-on-med-and-down">
  </ul>
  <ul id="nav-mobile" class="right hide-on-med-and-down">
  </ul>
  <ul class="side-nav" id="mobile-demo">
   </ul>
{% endblock %}
{% block body %}
    <!-- Landing page impression. -->
    <div class="slider">
          <ul class="slides">
            <li>
              <img src="http://lorempixel.com/580/250/nature/1" alt="bucket_tagline">
              <div class="caption center-align">
                <h3>Dreams live too...</h3>
                <h5 class="light grey-text text-lighten-3">Follow your dreams and see them come true.</h5>
                <a class="btn waves-effect waves-light green darken-3" href="#register">Get Started Now</a>
              </div>
            </li>
            <li>
              <img src="http://lorempixel.com/580/250/nature/1" alt="bucket_tagline">
              <div class="caption center-align">
                <h3>Clear vision leads to success...</h3>
                <h5 class="light grey-text text-lighten-3">Plan your future, define your aims, and work to see those happen.</h5>
                <a class="btn waves-effect waves-light green darken-3" href="#register">Get Started Now</a>
              </div>
            </li>
            <li>
              <img src="http://lorempixel.com/580/250/nature/1" alt="bucket_tagline">
              <div class="caption center-align">
                <h3>We're here to help you grow...</h3>
                <h5 class="light grey-text text-lighten-3">Achieve your goals and even share with your friends!</h5>
                <a class="btn waves-effect waves-light green darken-3" href="#register">Get Started Now</a>
              </div>
            </li>
          </ul>
        </div>
 
        <div class="container">
    <div class="row">
    <div class="col s12 m4"></div>
    <div class="col s12 m4 center card ">
    {% for message in get_flashed_messages() %}
          <p class="red-text">{{ message }}</p>
        {% endfor %}
    </div>
    <div class="col s12 m4"></div>
    </div>
          <div class="section">
 
      <!--   Icon Section   -->
      <div class="row">
        <div class="col s12 m4">
          <div class="icon-block">
            <h2 class="center light-green-text"><i class="material-icons large">flash_on</i></h2>
            <h5 class="center">Inspiration</h5>
 
            <p class="light">When you get inspired by something, it gives you the urge to get better. Inspiration is what leads to rapid growth without much pains, yes, growth has a lot of pains sometimes. Here, we help you stay inspired. By tracking down your goals towards achievement, we help you keep the momentum and not lose focus.</p>
          </div>
        </div>
 
        <div class="col s12 m4">
          <div class="icon-block">
            <h2 class="center light-green-text"><i class="material-icons large">group</i></h2>
            <h5 class="center">Motivation</h5>
 
            <p class="light">The right kind of friends are those that motivate you to become better. Well, we're not going to help you choose friends...but we believe that when you share your achievements with your friends and family, you get that feeling of accomplishment. Motivation keeps you going stronger and faster.</p>
          </div>
        </div>
 
        <div class="col s12 m4">
          <div class="icon-block">
            <div class="col s12 center">
            <ul class="tabs">
              <li class="tab col s6"><a  href="#log_in" id="login_tab">Login</a></li>
              <li class="tab col s6"><a  href="#register" id="register_tab" class="active">Register</a></li>
            </ul>
          </div>
          <div id="log_in" class="col s12">
            <form class="col s12" method="post" action="/login/">
            <div class="input-field col s12">
            <i class="material-icons prefix">mail</i>
            <input id="email" type="email" class="validate" name="email" required>
            <label for="email" data-error="This is is not a valid email address.">Your email Adrress</label>
            </div>
            <div class="input-field col s12">
            <i class="material-icons prefix">mode_edit</i>
            <input id="password" type="password" name="password" required>
            <label for="password">Enter your password</label>
            </div>
            <div class="row center">
              <button class="btn col s12" type="submit"><i class="material-icons right">send</i>Login</button>
            </div>
            <div class="row center">
              <button class="btn blue darken-3 col s12"><i class="material-icons left">cloud</i>Login with Facebook</button>
            </div>
            <div class="row center">
              <button class="btn red  col s12"><i class="material-icons left">cloud</i>Login with Google</button>
            </div>
            </form>
          </div>
          <div id="register" class="col s12">
            <form class="col s12" method="post" action="/register/">
            <div class="input-field col s12">
            <i class="material-icons prefix">account_circle</i>
            <input id="icon_prefix" type="text"  name="username" class="validate" required="" aria-required="true">
            <label for="icon_prefix">Your Name(s)</label>
            </div>
            <div class="input-field col s12">
            <i class="material-icons prefix">mail</i>
            <input id="email" type="email" class="validate" name="email" required>
            <label for="email" data-error="This is is not a valid email address.">Your email Adrress</label>
            </div>
            <div class="input-field col s12">
            <i class="material-icons prefix">mode_edit</i>
            <input id="password" type="password" name="password" required>
            <label for="password">Enter your password</label>
            </div>
            <div class="input-field col s12">
            <i class="material-icons prefix">mode_edit</i>
            <input id="rpassword" type="password" name="rpassword" required>
            <label for="rpassword">Repeat your password</label>
            </div>
            <div class="row center">
              <button class="btn"><i class="material-icons right">send</i>Register</button>
            </div>
            </form>
          </div>
          </div>
        </div>
      </div>
 
    </div>
        </div>
{% endblock %}