249 lines
12 KiB
Plaintext
249 lines
12 KiB
Plaintext
<%
|
|
=begin%>
|
|
<section class="hero is-medium is-dark is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title is-family-secondary has-text-weight-bold">
|
|
Tinyforms - the form backend for designers and developers
|
|
</h1>
|
|
<p class="subtitle is-size-6 has-text-white">
|
|
Link your online forms to <span class="backends-cycler">Google Sheets</span> and receive form submissions in your favorite spreadsheet.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<%
|
|
=end%>
|
|
|
|
|
|
|
|
<!-- Wrapper -->
|
|
<div id="wrapper" class="has-text-centered-mobile">
|
|
|
|
<!-- Hero -->
|
|
<section id="hero" class="hero is-medium">
|
|
<div class="hero-head">
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item">
|
|
<h3 class="logo has-text-primary is-size-4">Fancy App</h3>
|
|
</a></div>
|
|
|
|
<div class="navbar-menu">
|
|
|
|
<div class="navbar-end">
|
|
<a class="a-menu is-size-7 navbar-item">
|
|
home
|
|
</a>
|
|
<a class="a-menu is-size-7 navbar-item">
|
|
about
|
|
</a>
|
|
<a class="a-menu is-size-7 navbar-item">
|
|
features
|
|
</a>
|
|
<a class="a-menu is-size-7 navbar-item">
|
|
contact
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<span class="navbar-burger burger" data-target="navbarMenuHeroA">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</span>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="has-text-primary is-size-1 is-size-3-mobile">
|
|
An engaging headline
|
|
</h1>
|
|
<p class="">
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
|
</p>
|
|
<button class="btn has-mustard-bg has-text-white is-size-7 a-menu">
|
|
try it now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- END Hero -->
|
|
|
|
<!-- Twitter Feed -->
|
|
<section id="twitter-feed" class="section has-white-mustard-gradient">
|
|
<div class="container">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="box">
|
|
<article class="media">
|
|
<div class="media-left">
|
|
<figure class="image is-64x64 ">
|
|
<img src="img/twitter-profile-guy.jpg" alt="Image">
|
|
</figure>
|
|
</div>
|
|
<div class="media-content">
|
|
<div class="content">
|
|
<p>
|
|
<strong>Some guy</strong> <small>@someguy</small> <small>5m</small>
|
|
<br>
|
|
Frist time I used @fancyapp, was like the first time I listened to The Beatles. Christmas came early, I guess.
|
|
</p>
|
|
</div>
|
|
<nav class="level is-mobile">
|
|
<div class="level-left">
|
|
<a class="level-item" aria-label="reply">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-reply" aria-hidden="true"></i>
|
|
</span>
|
|
</a>
|
|
<a class="level-item" aria-label="retweet">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-retweet" aria-hidden="true"></i>
|
|
</span>
|
|
</a>
|
|
<a class="level-item" aria-label="like">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-heart" aria-hidden="true"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="box">
|
|
<article class="media">
|
|
<div class="media-left">
|
|
<figure class="image is-64x64 ">
|
|
<img src="img/twitter-profile-girl.jpg" alt="Image">
|
|
</figure>
|
|
</div>
|
|
<div class="media-content">
|
|
<div class="content">
|
|
<p>
|
|
<strong>Some girl</strong> <small>@somegirl</small> <small>5m</small>
|
|
<br>
|
|
Fancy App is the answer to all your problems, all praise the #fancyappgod!
|
|
</p>
|
|
</div>
|
|
<nav class="level is-mobile">
|
|
<div class="level-left">
|
|
<a class="level-item" aria-label="reply">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-reply" aria-hidden="true"></i>
|
|
</span>
|
|
</a>
|
|
<a class="level-item" aria-label="retweet">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-retweet" aria-hidden="true"></i>
|
|
</span>
|
|
</a>
|
|
<a class="level-item" aria-label="like">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-heart" aria-hidden="true"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- END Twitter Feed -->
|
|
|
|
<!-- Features -->
|
|
<section id="features" class="section has-mustard-bg has-text-white">
|
|
<div class="container">
|
|
<div class="columns reverse-row-order">
|
|
<div class="column">
|
|
<h3 class="is-size-3">
|
|
Open Source, all the way
|
|
</h3>
|
|
<p class=" paragraph">
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
|
</p>
|
|
</div>
|
|
<div class="column">
|
|
<img class="feature-img" src="img/feature1.png" alt="feature" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="columns">
|
|
|
|
<div class="column">
|
|
<img class="feature-img" src="img/feature2.png" alt="feature" />
|
|
</div>
|
|
<div class="column">
|
|
<h3 class="is-size-3">
|
|
Second Exciting Feature</h3>
|
|
<p class=" paragraph">
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="columns reverse-row-order">
|
|
|
|
<div class="column">
|
|
<h3 class="is-size-3">
|
|
Third Feature, Wow</h3>
|
|
<p class=" paragraph">
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
|
</p>
|
|
</div>
|
|
<div class="column">
|
|
<img class="feature-img" src="img/feature3.png" alt="feature" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- END Features -->
|
|
<!-- Newsletter -->
|
|
<section id="newsletter" class="section">
|
|
<div class="container">
|
|
<h3 class="is-size-3">
|
|
Newsletter or Call to Action</h3>
|
|
<p class="">
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
|
</p>
|
|
<div class="field newsletter-field">
|
|
<div class="control">
|
|
<input class="input newsletter-input" type="text" placeholder="mail@example.com">
|
|
</div>
|
|
</div>
|
|
<button class="btn has-mustard-bg has-text-white is-size-7 a-menu">
|
|
sign up now
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<!-- END Newsletter -->
|
|
<!-- Footer -->
|
|
<section id="footer" class="section has-blue-bg">
|
|
<div class="container has-text-centered">
|
|
<a href="" class="is-size-4 social-link">
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
<a href="" class="is-size-4 social-link">
|
|
<i class="fab fa-github"></i>
|
|
</a>
|
|
<a href="" class="is-size-4 social-link">
|
|
<i class="fab fa-dev"></i>
|
|
</a>
|
|
<p class="has-text-white is-size-7">
|
|
Built with <i class="fas fa-heart"></i> and <a href="">Bulma</a>, by <a href="">@hellobetkowski</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|