{{ define "title" }}Welcome to Loop!{{ end }}
{{ define "styles" }}
<style type="text/css">
nav ul a,
nav .brand-logo {
color: #444;
}
nav .brand-logo {
white-space: nowrap;
overflow-x: hidden;
}
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 }}