Aucune description

default.html 8.6KB

    {{ define "title" }}Welcome to Loop!{{ end }} {{ define "styles" }} <style type="text/css"> nav ul a, nav .brand-logo { color: #444; } p { line-height: 2rem; } .button-collapse { color: #26a69a; } .parallax-container { min-height: 380px; line-height: 0; height: auto; color: rgba(255, 255, 255, 0.9); } .parallax-container .section { width: 100%; } @media only screen and (max-width: 992px) { .parallax-container .section { position: absolute; top: 40%; } #index-banner .section { top: 10%; } } @media only screen and (max-width: 600px) { #index-banner .section { top: 0; } } .icon-block { padding: 0 15px; } footer.page-footer { margin: 0; } </style> {{ end }} {{ define "content" }} <nav class="white" role="navigation"> <div class="nav-wrapper container"> <a id="logo-container" href="#" class="brand-logo">Loop</a> <ul class="right"> <li><a href="#logon">Log On</a></li> </ul> <ul id="nav-mobile" class="side-nav"> <li><a href="#logon">Log On</a></li> </ul> <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a> </div> </nav> <div id="index-banner" class="parallax-container"> <div class="section no-pad-bot"> <div class="container"> <br><br> <h1 class="header center teal-text text-lighten-2">Loop</h1> <div class="row center"> <h5 class="header col s12 black-text light">A modern platform aiming to tighten the feedback loop</h5> </div> <div class="row center"> <a href="#logon" id="download-button" class="btn-large waves-effect waves-light teal lighten-1">Get Started</a> </div> <br><br> </div> </div> <div class="parallax"> <img src="https://ununsplash.imgix.net/uploads/1413387158190559d80f7/6108b580" alt="Charles Forerunner"> </div> </div> <div class="container"> <div class="section"> <div class="row"> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center brown-text"><i class="mdi-image-flash-on"></i></h2> <h5 class="center">Speeds up development</h5> <p class="light"> We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers. </p> </div> </div> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center brown-text"><i class="mdi-social-group"></i></h2> <h5 class="center">User Experience Focused</h5> <p class="light"> By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience. </p> </div> </div> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center brown-text"><i class="mdi-communication-forum"></i></h2> <h5 class="center">Easy to collaborate</h5> <p class="light"> We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize. </p> </div> </div> </div> </div> </div> <div class="parallax-container valign-wrapper"> <div class="section no-pad-bot"> <div class="container"> <div class="row center"> <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5> </div> </div> </div> <div class="parallax"> <img src="https://unsplash.imgix.net/45/QDSMoAMTYaZoXpcwBjsL__DSC0104-1.jpg" alt="Aleksi Tappura"> </div> </div> <div class="container"> <div class="section"> <div class="row"> <div class="col l6 offset-l3 s12 center"> <a id="logon"></a> <h3><i class="mdi-content-send brown-text"></i></h3> <h4>Give it a try!</h4> <p class="left-align light"> It is free to use </p> <form class="col s12" method="post" action="/logon"> <div class="row"> <div class="input-field col s12"> <input id="login" name="login" type="text" class="validate"> <label for="login">Login</label> </div> <div class="input-field col s12"> <input id="passphrase" name="passphrase" type="password" class="validate"> <label for="passphrase">Passphrase</label> </div> <div class="input-field col s12"> <button class="btn waves-effect waves-light" type="submit" name="action"> Submit <i class="mdi-content-send right"></i> </button> </div> </div> </form> </div> </div> </div> </div> <div class="parallax-container valign-wrapper"> <div class="section no-pad-bot"> <div class="container"> <div class="row center"> <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5> </div> </div> </div> <div class="parallax"> <img src="https://unsplash.imgix.net/uploads/1411724908903377d4696/2e9b0cb2" alt="Sergei Zolkin"> </div> </div> <footer class="page-footer teal"> <div class="container"> <div class="row"> <div class="col l9 s12"> <h5 class="white-text">Who are we?</h5> <p class="grey-text text-lighten-4"> We are a team of developers constantly refining our internal processes to bring all parties together during the project life cycle. </p> </div> <div class="col l3 s12"> <h5 class="white-text">Connect</h5> <ul> <li><a class="white-text" href="https://revolvingcow.com">Company Site</a></li> <li><a class="white-text" href="https://code.revolvingcow.com/revolvingcow/loop">Source Code</a></li> <li><a class="white-text" href="mailto:info@revolvingcow.com">Email</a></li> </ul> </div> </div> </div> <div class="footer-copyright"> <div class="container"> Made by <a class="brown-text text-lighten-3" href="https://revolvingcow.com">Revolving Cow, LLC</a> </div> </div> </footer> {{ end }} {{ define "scripts" }} <script type="text/javascript"> (function ($) { $(function () { $('.button-collapse').sideNav(); $('.parallax').parallax(); }); })(jQuery); </script> {{ end }}