More landing paging
This commit is contained in:
parent
4571ce37b4
commit
74df22eb5b
@ -16,7 +16,7 @@ cursive;
|
|||||||
// $green: #007932; // hsl(141, 53%, 53%);
|
// $green: #007932; // hsl(141, 53%, 53%);
|
||||||
// $footer-background-color: $light;
|
// $footer-background-color: $light;
|
||||||
|
|
||||||
$blue: #4c82fc;
|
$blue: #2535f5;
|
||||||
$primary: $blue;
|
$primary: $blue;
|
||||||
|
|
||||||
$text: $grey-dark;
|
$text: $grey-dark;
|
||||||
@ -41,7 +41,6 @@ $light: #fff;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 30px 60px 50px;
|
|
||||||
|
|
||||||
&>h1 {
|
&>h1 {
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
@ -137,7 +136,6 @@ Wrapper
|
|||||||
*/
|
*/
|
||||||
.section .container,
|
.section .container,
|
||||||
.hero .hero-body {
|
.hero .hero-body {
|
||||||
width: 1200px;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -207,13 +205,6 @@ Features
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-flow: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column h3,
|
.column h3,
|
||||||
.column p {
|
.column p {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
|||||||
@ -1,180 +1,136 @@
|
|||||||
<%
|
<div id="wrapper" class="has-text-centered-mobile">
|
||||||
=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 -->
|
<!-- Hero -->
|
||||||
<section id="hero" class="hero is-medium">
|
<section id="hero" class="hero is-medium">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="has-text-primary is-size-1 is-size-3-mobile">
|
<h1 class="is-size-1 is-size-3-mobile">
|
||||||
the form backend for designers and developers
|
the form backend for designers and developers
|
||||||
</h1>
|
</h1>
|
||||||
<p class="">
|
<p class="">
|
||||||
Link your online forms to <span class="backends-cycler">Google Sheets</span> and receive form submissions in your favorite spreadsheet tool.
|
Link your online forms to <span class="google-sheets">Google Sheets</span> or <span class="airtable">Airtable</span> and receive form submissions in your favorite spreadsheet tool.
|
||||||
</p>
|
</p>
|
||||||
<p class="call-to-action">
|
<p class="call-to-action">
|
||||||
<%= link_to "Signup", signup_url, class: 'button is-rounded has-mustard-bg has-text-white a-menu' %>
|
<%= link_to "Signup", signup_url, class: 'button is-rounded is-primary has-text-white a-menu' %>
|
||||||
or try our <%= link_to "Demo", demo_url %>
|
or try our <%= link_to "Live demo", demo_url %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<!-- END Hero -->
|
|
||||||
|
|
||||||
<!-- Twitter Feed -->
|
|
||||||
<section id="twitter-feed" class="section has-white-mustard-gradient">
|
<section class="section has-white-mustard-gradient">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<article class="media">
|
<article class="media">
|
||||||
<div class="media-left">
|
<div class="media-left">
|
||||||
<figure class="image is-64x64 ">
|
<h1 class="title">1.</h1>
|
||||||
<img src="img/twitter-profile-guy.jpg" alt="Image">
|
</div>
|
||||||
</figure>
|
<div class="media-content">
|
||||||
</div>
|
<div class="content">
|
||||||
<div class="media-content">
|
<h3 class="subtitle">Create a new form</h3>
|
||||||
<div class="content">
|
<p>
|
||||||
<p>
|
tinyforms will automatically create and link a connected Google Sheets document for you.
|
||||||
<strong>Some guy</strong> <small>@someguy</small> <small>5m</small>
|
</p>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</article>
|
||||||
<!-- END Twitter Feed -->
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Features -->
|
<div class="column">
|
||||||
<section id="features" class="section has-mustard-bg has-text-white">
|
<div class="box">
|
||||||
<div class="container">
|
<article class="media">
|
||||||
<div class="columns reverse-row-order">
|
<div class="media-left">
|
||||||
<div class="column">
|
<h1 class="title">2.</h1>
|
||||||
<h3 class="is-size-3">
|
</div>
|
||||||
Open Source, all the way
|
<div class="media-content">
|
||||||
</h3>
|
<div class="content">
|
||||||
<p class=" paragraph">
|
<h3 class="subtitle">Point your online form to our server</h3>
|
||||||
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>
|
||||||
</p>
|
Simply configure your form to POST to your tinyforms URL.
|
||||||
</div>
|
</p>
|
||||||
<div class="column">
|
|
||||||
<img class="feature-img" src="img/feature1.png" alt="feature" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
</article>
|
||||||
<div class="columns">
|
</div>
|
||||||
|
</div>
|
||||||
<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 class="column">
|
||||||
|
<div class="box">
|
||||||
|
<article class="media">
|
||||||
|
<div class="media-left">
|
||||||
|
<h1 class="title">3.</h1>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<div class="content">
|
||||||
|
<h3 class="subtitle">Done!</h3>
|
||||||
|
<p>
|
||||||
|
tinyforms will automatically append each submission to your Google Sheets or Airtable document.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
</article>
|
||||||
<div class="columns reverse-row-order">
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section id="features" class="section has-mustard-bg has-text-white">
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<h3 class="is-size-3">
|
||||||
|
Full design control over your forms
|
||||||
|
</h3>
|
||||||
|
<p class="paragraph">
|
||||||
|
Create beautiful online forms without any restrictions.<br>Tinyforms stays completely in the background.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Do you need help creating your forms? We'll help you!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<h3 class="is-size-3">
|
||||||
|
Full Google Sheets and Airtable flexibility
|
||||||
|
</h3>
|
||||||
|
<p class="paragraph">
|
||||||
|
Use all your favorite Google Sheets and Airtable features. E.g. share the document with your coworkers or use field formulas.<br>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<h3 class="is-size-3">
|
||||||
|
Full design control over your forms
|
||||||
|
</h3>
|
||||||
|
<p class="paragraph">
|
||||||
|
Create beautiful online forms without any restrictions.<br>Tinyforms stays completely in the background.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Do you need help creating your forms? We'll help you!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<h3 class="is-size-3">
|
||||||
|
Full Google Sheets and Airtable flexibility
|
||||||
|
</h3>
|
||||||
|
<p class="paragraph">
|
||||||
|
Use all your favorite Google Sheets and Airtable features. E.g. share the document with your coworkers or use field formulas.<br>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<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">
|
<section id="newsletter" class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h3 class="is-size-3">
|
<h3 class="is-size-3">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user