bumi/tinyforms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Started adding real content

Browse Source
This commit is contained in:
bumi 2020-04-24 19:32:25 +02:00
parent cd06ac2dd9
commit 4571ce37b4
4 changed files with 33 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/assets/stylesheets/application.css.scss
View File

@ -74,10 +74,6 @@ Colours
#4c82fc - Green
*/
.has-text-primary {
color: #4c82fc !important;
}
.has-mustard-bg {
background-color: #4c82fc;
}
@ -104,10 +100,6 @@ Colours
}
}
/*
Typography
*/
@import url('https://fonts.googleapis.com/css?family=Calistoga|Open+Sans&display=swap');
h1,
@ -123,14 +115,6 @@ span {
font-weight: 400;
}
@media(max-width: 767px) {
p {
max-width: 90%;
margin: 0 auto;
}
}
/*
Links
@ -152,11 +136,11 @@ Links
Wrapper
*/
.section .container,
.hero .hero-body,
.hero .hero-head {
.hero .hero-body {
width: 1200px;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
/*
@ -187,34 +171,12 @@ Hero
background-position: 80% 50%;
background-repeat: no-repeat;
}
.hero-body p {
width: 600px;
}
}
/*
Button
*/
.btn {
margin-top: 20px;
border-radius: 50px;
border: none;
padding: 10px 30px;
transition: opacity 1s ease;
opacity: 1;
cursor: pointer;
.call-to-action {
margin-top: 2em;
}
.btn:hover {
opacity: 0.8;
}
/*
Twitter Feed
*/
#twitter-feed .columns {
margin: 0px;
}
@media(max-width: 1024px) {
margin: 0px 10px;
}

0
app/assets/stylesheets/home.css.scss Normal file
View File

20
app/javascript/backend_typed.js
View File

@ -1,13 +1,15 @@
const Typed = require('typed.js');
document.addEventListener("turbolinks:load", function () {
new Typed('.backends-cycler', {
strings: ['Google Sheets', 'Airtable', 'Google Sheets', 'Airtable'], // smoother loops
loop: true,
typeSpeed: 100,
backSpeed: 40,
backDelay: 1400,
smartBackspace: true,
startDelay: 800,
onBegin: (typed) => { typed.currentElContent = typed.el.innerText; }
document.querySelectorAll('.backends-cycler').forEach( el => {
new Typed(el, {
strings: ['Google Sheets', 'Airtable', 'Google Sheets', 'Airtable'], // smoother loops
loop: true,
typeSpeed: 100,
backSpeed: 40,
backDelay: 1400,
smartBackspace: true,
startDelay: 800,
onBegin: (typed) => { typed.currentElContent = typed.el.innerText; }
});
});
});

70
app/views/home/index.html.erb
View File

@ -15,61 +15,27 @@
<%
=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 -->
<!-- Hero -->
<section id="hero" class="hero is-medium">
<div class="hero-body">
<div class="container">
<h1 class="has-text-primary is-size-1 is-size-3-mobile">
the form backend for designers and developers
</h1>
<p class="">
Link your online forms to <span class="backends-cycler">Google Sheets</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 has-mustard-bg has-text-white a-menu' %>
or try our <%= link_to "Demo", demo_url %>
</p>
</div>
</div>
</section>
<!-- END Hero -->
<!-- Twitter Feed -->
<section id="twitter-feed" class="section has-white-mustard-gradient">