talksik/ucharify_landing
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding some form code for email submission

Browse Source
This commit is contained in:
Arjun Patel
2019-01-25 00:06:30 -08:00
parent 0fdcbd4f26
commit 92671aa50e
3 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+5 -1
View File
@@ -8,6 +8,7 @@
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i|PT+Serif:700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lato:400,400i|PT+Serif:700" rel="stylesheet">
<link rel="stylesheet" href="dist/css/style.css"> <link rel="stylesheet" href="dist/css/style.css">
<script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> </head>
<body class="is-boxed has-animations"> <body class="is-boxed has-animations">
<div class="body-wrap boxed-container"> <div class="body-wrap boxed-container">
@@ -48,7 +49,9 @@
<div class="hero-inner"> <div class="hero-inner">
<h1 class="hero-title h2-mobile mt-0 is-revealing">Landing template for startups</h1> <h1 class="hero-title h2-mobile mt-0 is-revealing">Landing template for startups</h1>
<p class="hero-paragraph is-revealing">Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever.</p> <p class="hero-paragraph is-revealing">Our landing page template works on all devices, so you only have to set it up once, and get beautiful results forever.</p>
<p class="hero-cta is-revealing"><a class="button button-secondary button-shadow" href="#">Get started now</a></p> <form id="email-form" class="hero-cta is-revealing">
<input class="email-input" placeholder="Enter email" />
<button class="button button-secondary button-shadow" href="#">Join List</button></form>
<div class="hero-media"> <div class="hero-media">
</div> </div>
</div> </div>
@@ -417,5 +420,6 @@
</footer> </footer>
</div> </div>
<script src="dist/js/main.min.js"></script> <script src="dist/js/main.min.js"></script>
<script src="dist/js/added.js"></script>
</body> </body>
</html> </html>
src/js/main.js
+9 -9
View File
@@ -1,13 +1,13 @@
(function () { (function() {
const doc = document.documentElement const doc = document.documentElement;
doc.classList.remove('no-js') doc.classList.remove('no-js');
doc.classList.add('js') doc.classList.add('js');
// Reveal animations // Reveal animations
if (document.body.classList.contains('has-animations')) { if (document.body.classList.contains('has-animations')) {
/* global ScrollReveal */ /* global ScrollReveal */
const sr = window.sr = ScrollReveal() const sr = (window.sr = ScrollReveal());
sr.reveal('.hero-title, .hero-paragraph, .hero-cta', { sr.reveal('.hero-title, .hero-paragraph, .hero-cta', {
duration: 1000, duration: 1000,
@@ -15,7 +15,7 @@
easing: 'cubic-bezier(0.5, -0.01, 0, 1.005)', easing: 'cubic-bezier(0.5, -0.01, 0, 1.005)',
origin: 'bottom', origin: 'bottom',
interval: 150 interval: 150
}) });
sr.reveal('.feature, .pricing-table', { sr.reveal('.feature, .pricing-table', {
duration: 600, duration: 600,
@@ -24,13 +24,13 @@
interval: 100, interval: 100,
origin: 'bottom', origin: 'bottom',
viewFactor: 0.5 viewFactor: 0.5
}) });
sr.reveal('.feature-extended-image', { sr.reveal('.feature-extended-image', {
duration: 600, duration: 600,
scale: 0.9, scale: 0.9,
easing: 'cubic-bezier(0.5, -0.01, 0, 1.005)', easing: 'cubic-bezier(0.5, -0.01, 0, 1.005)',
viewFactor: 0.5 viewFactor: 0.5
}) });
} }
}()) })();
src/scss/style.scss
+15 -17
View File
@@ -1,74 +1,72 @@
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Variables, functions and mixins # Variables, functions and mixins
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "abstracts/variables", @import 'abstracts/variables', 'abstracts/functions', 'abstracts/mixins',
"abstracts/functions", 'abstracts/include-media';
"abstracts/mixins",
'abstracts/include-media';
/*-------------------------------------------------------------- /*--------------------------------------------------------------
1.0 Normalize 1.0 Normalize
* normalize.css v7.0.0 | MIT License * normalize.css v7.0.0 | MIT License
* github.com/necolas/normalize.css * github.com/necolas/normalize.css
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "normalize"; @import 'normalize';
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Base # Base
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "base/base"; @import 'base/base';
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Typography # Typography
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "base/typography"; @import 'base/typography';
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Helpers # Helpers
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "base/helpers"; @import 'base/helpers';
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Buttons # Buttons
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "components/buttons"; @import 'components/buttons';
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Header # Header
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "layout/header"; @import 'layout/header';
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Hero # Hero
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "layout/hero"; @import 'layout/hero';
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Clients # Clients
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "layout/clients"; @import 'layout/clients';
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Features # Features
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "layout/features"; @import 'layout/features';
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Features extended # Features extended
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "layout/features-extended"; @import 'layout/features-extended';
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Pricing # Pricing
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "layout/pricing"; @import 'layout/pricing';
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Site content # Site content
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "layout/main"; @import 'layout/main';
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Footer # Footer
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@import "layout/footer"; @import 'layout/footer';