designs/index.html
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css"> <link rel="stylesheet" type="text/css" href="css/custom.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <!-- The header elements --> <header> <nav> <div class="nav-wrapper green darken-3"> <a href="#!" class="brand-logo center">Dream Buckets</a> <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> <ul id="nav-mobile" class="left hide-on-med-and-down"> <li><a href="#bucketlist_definition" class="waves-effect waves-teal btn-flat">Bucket List?</a></li> </ul> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a href="#log_in" class="waves-effect waves-teal btn-flat">Login</a></li> <li><a href="#register" class="waves-effect waves-teal btn-flat">Register</a></li> </ul> <ul class="side-nav" id="mobile-demo"> <li><a href="#">BucketList?</a></li> <li><a href="#">Login</a></li> <li><a href="#">Register</a></li> </ul> </div> </nav> </header> <!-- Defining a bucketlist --> <div id="bucketlist_definition" class="modal"> <div class="modal-content"> <h4>Bucket list?</h4> <p>A bucket list is, by definition, a list of things that you want to do before you die. The term gained in popularity after the 2007 movie “The Bucket List” where Morgan Freeman and Jack Nicholson (both of whose characters are dying of cancer) create a bucket list of things to do before they die – and then actually do them. </p> </div> <div class="modal-footer"> <a href="" class="btn modal-action modal-close waves-effect waves-teal green darken-3">Ok, got it.</a> </div> </div> <!-- The main body --> <section> <!-- 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="dashboard.html">Start a Bucket List</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="dashboard.html">Start a Bucket List</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="dashboard.html">Start a Bucket List</a> </div> </li> </ul> </div> <div class="container"> <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 class="active" href="#log_in">Login</a></li> <li class="tab col s6"><a href="#register" id="#regbtn">Register</a></li> </ul> </div> <div id="log_in" class="col s12"> <form class="col s12" method=""> <div class="input-field col s12"> <i class="material-icons prefix">mail</i> <input id="email" type="email" class="validate" name="Client Email:"> <label for="email" data-error="This is is not a valid email address." data-success="I hope your email works!">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="Client Email:"> <label for="password">Enter your password</label> </div> <div class="row center"> <button class="btn col s12"><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=""> <div class="input-field col s12"> <i class="material-icons prefix">account_circle</i> <input id="icon_prefix" type="text" class="validate" name="Client Name:"> <label for="icon_prefix">Your Name(s)</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">phone</i> <input id="icon_telephone" type="tel" class="validate" name="Mobile Number:"> <label for="icon_telephone">Mobile Number</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">mail</i> <input id="email" type="email" class="validate" name="Client Email:"> <label for="email" data-error="This is is not a valid email address." data-success="I hope your email works!">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="Client Email:"> <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="Client Email:"> <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> </section> <!-- The footer --> <footer class="page-footer grey darken-3"> <div class="footer-copyright"> <div class="container"> <p class="center">© 2017 Lemayian Online | This website is <a target="_blank" class="pink-text text-lighten-1" href="http://materializecss.com">Materialized!</a></p> </div> </div> </footer> <!--Import jQuery before materialize.js--> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script> <!-- Initialization Scripts --> <script type="text/javascript" src="static/js/initialize.js"></script> </body> </html>