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 #4c82fc - Green
*/ */
.has-text-primary {
color: #4c82fc !important;
}
.has-mustard-bg { .has-mustard-bg {
background-color: #4c82fc; background-color: #4c82fc;
} }
@ -104,10 +100,6 @@ Colours
} }
} }
/*
Typography
*/
@import url('https://fonts.googleapis.com/css?family=Calistoga|Open+Sans&display=swap'); @import url('https://fonts.googleapis.com/css?family=Calistoga|Open+Sans&display=swap');
h1, h1,
@ -123,14 +115,6 @@ span {
font-weight: 400; font-weight: 400;
} }
@media(max-width: 767px) {
p {
max-width: 90%;
margin: 0 auto;
}
}
/* /*
Links Links
@ -152,11 +136,11 @@ Links
Wrapper Wrapper
*/ */
.section .container, .section .container,
.hero .hero-body, .hero .hero-body {
.hero .hero-head {
width: 1200px; width: 1200px;
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
text-align: center;
} }
/* /*
@ -187,34 +171,12 @@ Hero
background-position: 80% 50%; background-position: 80% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.hero-body p {
width: 600px;
}
} }
/* .call-to-action {
Button margin-top: 2em;
*/
.btn {
margin-top: 20px;
border-radius: 50px;
border: none;
padding: 10px 30px;
transition: opacity 1s ease;
opacity: 1;
cursor: pointer;
} }
.btn:hover {
opacity: 0.8;
}
/*
Twitter Feed
*/
#twitter-feed .columns {
margin: 0px;
}
@media(max-width: 1024px) { @media(max-width: 1024px) {
margin: 0px 10px; 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'); const Typed = require('typed.js');
document.addEventListener("turbolinks:load", function () { document.addEventListener("turbolinks:load", function () {
new Typed('.backends-cycler', { document.querySelectorAll('.backends-cycler').forEach( el => {
strings: ['Google Sheets', 'Airtable', 'Google Sheets', 'Airtable'], // smoother loops new Typed(el, {
loop: true, strings: ['Google Sheets', 'Airtable', 'Google Sheets', 'Airtable'], // smoother loops
typeSpeed: 100, loop: true,
backSpeed: 40, typeSpeed: 100,
backDelay: 1400, backSpeed: 40,
smartBackspace: true, backDelay: 1400,
startDelay: 800, smartBackspace: true,
onBegin: (typed) => { typed.currentElContent = typed.el.innerText; } startDelay: 800,
onBegin: (typed) => { typed.currentElContent = typed.el.innerText; }
});
}); });
}); });

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

@ -15,61 +15,27 @@
<% <%
=end%> =end%>
<!-- Wrapper --> <!-- Wrapper -->
<div id="wrapper" class="has-text-centered-mobile"> <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-head"> <div class="hero-body">
<nav class="navbar"> <div class="container">
<div class="container"> <h1 class="has-text-primary is-size-1 is-size-3-mobile">
<div class="navbar-brand"> the form backend for designers and developers
<a class="navbar-item"> </h1>
<h3 class="logo has-text-primary is-size-4">Fancy App</h3> <p class="">
</a></div> Link your online forms to <span class="backends-cycler">Google Sheets</span> and receive form submissions in your favorite spreadsheet tool.
</p>
<div class="navbar-menu"> <p class="call-to-action">
<%= link_to "Signup", signup_url, class: 'button is-rounded has-mustard-bg has-text-white a-menu' %>
<div class="navbar-end"> or try our <%= link_to "Demo", demo_url %>
<a class="a-menu is-size-7 navbar-item"> </p>
home </div>
</a> </div>
<a class="a-menu is-size-7 navbar-item"> </section>
about <!-- END Hero -->
</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 --> <!-- Twitter Feed -->
<section id="twitter-feed" class="section has-white-mustard-gradient"> <section id="twitter-feed" class="section has-white-mustard-gradient">