Shaping and cleanup
This commit is contained in:
parent
7b060bf1c7
commit
970ce9dcb6
3
app/assets/images/airtable-icon.svg
Normal file
3
app/assets/images/airtable-icon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0.09468918918919078 -1 45.83829054054054 39.00004276878759" width="41.84" height="35"><defs><path d="M19.78 0.44C10.42 4.31 5.22 6.47 4.18 6.9C3.31 7.26 3.32 8.49 4.19 8.83C5.76 9.45 18.29 14.42 19.86 15.04C21.23 15.59 22.77 15.59 24.14 15.04C25.71 14.42 38.24 9.45 39.81 8.83C40.68 8.49 40.69 7.26 39.82 6.9C38.26 6.25 25.78 1.09 24.22 0.44C22.8 -0.15 21.2 -0.15 19.78 0.44" id="afxk2jVRR"></path><path d="M23.39 18.44C23.39 27.75 23.39 32.92 23.39 33.95C23.39 34.69 24.13 35.2 24.82 34.93C26.56 34.25 40.53 28.83 42.27 28.15C42.67 27.99 42.93 27.61 42.93 27.18C42.93 25.63 42.93 13.21 42.93 11.66C42.93 10.92 42.19 10.42 41.5 10.69C39.76 11.37 25.79 16.79 24.05 17.47C23.65 17.62 23.39 18.01 23.39 18.44" id="aJF2tNe0H"></path><path d="M19.31 19.24L14.13 21.74L13.61 21.99C7.05 25.14 3.4 26.88 2.67 27.23C1.98 27.57 1.09 27.06 1.09 26.29C1.09 24.83 1.09 13.18 1.09 11.73C1.09 11.45 1.24 11.21 1.43 11.03C1.51 10.95 1.6 10.88 1.69 10.83C1.96 10.67 2.33 10.63 2.64 10.76C4.3 11.41 17.57 16.67 19.23 17.32C20.07 17.66 20.14 18.84 19.31 19.24" id="b14YubYMIc"></path><path d="M19.31 19.24L14.13 21.74C6.51 15.31 2.28 11.74 1.43 11.03C1.51 10.95 1.6 10.88 1.69 10.83C1.96 10.67 2.33 10.63 2.64 10.76C4.3 11.41 17.57 16.67 19.23 17.32C20.07 17.66 20.14 18.84 19.31 19.24" id="a8kR7HrKS"></path></defs><g><g><use xlink:href="#afxk2jVRR" opacity="1" fill="#fcb400" fill-opacity="1"></use><g><use xlink:href="#afxk2jVRR" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#aJF2tNe0H" opacity="1" fill="#18bfff" fill-opacity="1"></use><g><use xlink:href="#aJF2tNe0H" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#b14YubYMIc" opacity="1" fill="#f82b60" fill-opacity="1"></use><g><use xlink:href="#b14YubYMIc" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#a8kR7HrKS" opacity="1" fill="#000000" fill-opacity="0.25"></use><g><use xlink:href="#a8kR7HrKS" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
1
app/assets/images/airtable-logo.svg
Normal file
1
app/assets/images/airtable-logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
90
app/assets/images/google-sheets-icon.svg
Normal file
90
app/assets/images/google-sheets-icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 60 KiB |
@ -1,11 +1,9 @@
|
||||
@import "bulma/sass/utilities/initial-variables";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Lobster&family=Comfortaa:wght@400;500;600;700&display=swap');
|
||||
@import url('https://use.fontawesome.com/releases/v5.12.0/css/all.css');
|
||||
|
||||
$family-sans-serif: 'Roboto',
|
||||
sans-serif;
|
||||
$family-secondary: 'Comfortaa',
|
||||
cursive;
|
||||
@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Roboto:wght@100;400&display=swap');
|
||||
|
||||
$family-sans-serif: 'Roboto', sans-serif;
|
||||
// // https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a
|
||||
// $blue: #083d77;
|
||||
// $red: #dd1c1a;
|
||||
@ -28,8 +26,12 @@ $light: #fff;
|
||||
@import "checkmark-icon";
|
||||
@import './demo';
|
||||
|
||||
.is-font-logo {
|
||||
font-family: 'Lobster', cursive;
|
||||
.is-logo {
|
||||
font-family: $family-sans-serif;
|
||||
color: $grey;
|
||||
a, a:visited {
|
||||
color: $grey;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
@ -40,17 +42,17 @@ $light: #fff;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
&>h1 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Calistoga';
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
.button.google {
|
||||
background: rgb(225, 98, 89);
|
||||
color: white;
|
||||
@ -99,20 +101,6 @@ Colours
|
||||
}
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Calistoga|Open+Sans&display=swap');
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: 'Calistoga';
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p,
|
||||
a,
|
||||
span {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.features .columns {
|
||||
margin-bottom: 3em;
|
||||
@ -124,6 +112,13 @@ span {
|
||||
.contact-form {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
.tag-line {
|
||||
img {
|
||||
height: 30px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
/*
|
||||
Links
|
||||
*/
|
||||
@ -161,23 +156,11 @@ Hero
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
@media(min-width: 1024px) {
|
||||
.hero-body {
|
||||
background-image: url(../img/hero.png);
|
||||
background-size: 30%;
|
||||
background-position: 80% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.call-to-action {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
@media(max-width: 1024px) {
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
@ -1,17 +1,16 @@
|
||||
<div id="wrapper" class="has-text-centered">
|
||||
|
||||
<!-- Hero -->
|
||||
<section id="hero" class="hero is-medium">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="is-size-1 is-size-3-mobile">
|
||||
the form backend for designers and developers
|
||||
The form backend for designers and developers
|
||||
</h1>
|
||||
<p class="">
|
||||
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 class="tag-line is-size-5">
|
||||
Link your online forms to <span class="google-sheets"><%= image_tag 'google-sheets-icon.svg' %> Google Sheets</span> or <span class="airtable"><%= image_tag 'airtable-icon.svg' %> Airtable</span> and receive form submissions in your favorite spreadsheet tool.
|
||||
</p>
|
||||
<p class="call-to-action">
|
||||
<%= link_to "Signup", signup_url, class: 'button is-rounded is-primary has-text-white a-menu' %>
|
||||
<%= link_to "Get started", signup_url, class: 'button is-rounded is-primary has-text-white a-menu' %>
|
||||
or try our <%= link_to "Live demo", demo_url %>
|
||||
</p>
|
||||
</div>
|
||||
@ -26,15 +25,13 @@
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<h1 class="title">1.</h1>
|
||||
<h3 class="title">1.</h3>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<h3 class="subtitle">Create a new form</h3>
|
||||
<p>
|
||||
tinyforms will automatically create and link a connected Google Sheets document for you.
|
||||
</p>
|
||||
</div>
|
||||
<h3 class="title is-size-4">Create a new form</h3>
|
||||
<p>
|
||||
tinyforms will automatically create and link a connected Google Sheets document for you.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@ -44,15 +41,13 @@
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<h1 class="title">2.</h1>
|
||||
<h3 class="title">2.</h3>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<h3 class="subtitle">Point your online form to our server</h3>
|
||||
<p>
|
||||
Simply configure your form to POST to your tinyforms URL.
|
||||
</p>
|
||||
</div>
|
||||
<h3 class="title is-size-4">Point your form to our server</h3>
|
||||
<p>
|
||||
Simply configure your form to POST to your tinyforms URL.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@ -62,15 +57,13 @@
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<h1 class="title">3.</h1>
|
||||
<h3 class="title">3.</h3>
|
||||
</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>
|
||||
<h3 class="title is-size-4">Done!</h3>
|
||||
<p>
|
||||
tinyforms will automatically append each submission to your Google Sheets or Airtable document.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@ -142,7 +135,7 @@
|
||||
<br>
|
||||
We take care of the storage for you.
|
||||
<br>
|
||||
Files are added as secure links to your spreadsheet.
|
||||
Files are added as secure links to your spreadsheet.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
@ -150,7 +143,7 @@
|
||||
JavaScript/AJAX ready
|
||||
</h3>
|
||||
<p class="paragraph">
|
||||
Use our JavaScript library or our API directly to submit data using JavaScript.
|
||||
Use our JavaScript library or our API directly to submit data using JavaScript.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item is-size-4 has-text-black has-text-weight-bold is-font-logo" href="/">
|
||||
TinyForms
|
||||
</a>
|
||||
<h1 class="navbar-item is-size-4 is-logo">
|
||||
<a href="/">tinyfor.ms</a>
|
||||
</h1>
|
||||
|
||||
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
|
||||
data-target="navbar-menu">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user