Landing Page Boilerplate

voteamerica · Aug 1, 2016 · 9dd616b · 9dd616b
1 parent a2d0a44
commit 9dd616b
Show file tree

Hide file tree

Showing 11 changed files with 350 additions and 2 deletions.
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+landing.adrienjoly.com
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Adrien Joly
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
diff --git a/README.md b/README.md
@@ -1 +1,30 @@
-# voteamerica.github.com
+# landing-page-boilerplate
+
+A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. using Github Pages).
+Relies on Mailchimp (for user email subscriptions) and Google Analytics (for stats).
+
+# Features
+
+- Static HTML page => no fancy hosting needed (Github Pages does it for free)
+- Light source code => fast to load
+- Reponsive design
+- User emails are submitted to the Mailchimp list of your choice, so you can contact them when needed.
+
+# How to use
+
+- Fork this project to your own Github account;
+- Change the name, description and link, on the page of your freshly forked project on Github;
+- Make sure it's published, by opening `<your_github_username>.github.io/<your_fork_name>`;
+- Update the following lines in index.html:
+  - enter the title of your page/product into the `<title>` and `<h1>` elements;
+  - update the baseline of your page/product into the first `<p>` element;
+  - update the content of all the `<meta>` elements;
+  - update the `action` attribute of the `<form>` element, so that it leads to your own [Mailchimp](http://mailchimp.com) list;
+  - update the `UA-1858235-15` code with your own Google Analytics code;
+  - replace `favicon.ico` with your own; ([ICO Converter](http://www.icoconverter.com/) can help)
+- Replace the [default background image](https://www.pexels.com/photo/dawn-landscape-mountains-nature-1852/) with your own in `/res/background.jpg`;
+- If you want to use Github Pages as hosting platform and that your custom domain name links to it, set your custom domain name in the `CNAME` file; (read more [here](https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages/))
+- Go to your subdomain, hard-refresh a few times (or wait 24 hours), to make sure that it works;
+- Submit your own email in the subscription form to make sure that it works;
+- Go to your Google Analytics dashboard to make sure that your page view was taken into account;
+- Enjoy your free landing page! :-)
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -1 +1,70 @@
-<h1>Hello World!</h1>
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Your free landing page</title>
+    <meta name="description" content="A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. using Github Pages). Relies on Mailchimp (for user email subscriptions) and Google Analytics (for stats)." property="description">
+    <meta name="keywords" content="landing page, free, product page, startup, github, template, boilerplate" property="keywords">
+    <meta name="viewport" content="width=device-width, initial-scale=1" property="viewport">
+    <meta name="og:title" content="Fork to get your free landing page" property="og:title">
+    <meta name="og:description" content="A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. using Github Pages). Relies on Mailchimp (for user email subscriptions) and Google Analytics (for stats)." property="og:description">
+    <meta name="og:image" content="" property="og:image">
+    <link rel="icon" href="favicon.ico">
+    <link type="text/css" rel="stylesheet" href="./res/bootstrap.min.css">
+    <link type="text/css" rel="stylesheet" href="./res/styles.css">
+  </head>
+  <body>
+    <div class="bg-image"></div>
+    <div>
+      <div id="loading" class="loading-state" style="display: none;"></div>
+      <div>
+        <section>
+          <div class="floating-signup__wrap col-xs-12 col-md-6 col-xs-offset-0 col-md-offset-3 floaty-vertical--middle floaty-horizontal--center floaty-unfloat-at--xs">
+            <div class="floating-signup rel">
+              <div class="container-fluid rel">
+                <div class="row">
+                  <div class="user-signup__intro">
+                    <h1 style="text-align: center;">Your free landing page</h1>
+                    <p style="text-align: center;">
+                      <img src="/res/spacer.png" alt="" class="spacer insert--image wrap-off-align-center"><br>
+                    </p>
+                    <p style="text-align: center;">Would you like a free landing page like this one for your upcoming startup product?</p>
+                    <p style="text-align: center;">
+                      <img src="/res/clean-hr.png" alt="" class="clean-hr insert--image wrap-off-align-center">
+                      <span style="font-size: 14px;">Enter your email address if you don't want to do it yourself:</span>
+                    </p>
+                  </div>
+                </div>
+                <div class="row">
+                  <form class="form form-horizontal user-signup__form" name="form" novalidate="" action="//adrienjoly.us12.list-manage.com/subscribe/post?u=c1cfafd58fc9699f6d5a661e2&amp;id=a586ea22ee" method="POST">
+                    <div class="mt-table--full">
+                      <div class="mt-td--centered-vertical user-signup__col-1">
+                        <div class="user-signup__form-group m-lg-v form-group col-sm-12">
+                          <input type="email" name="EMAIL" class="form-control form-control__input user-signup__email" pattern="/^[a-zA-Z0-9+-_]+(\.[_a-zA-Z0-9+]+)*@[a-zA-Z0-9+-_]+(\.[a-zA-Z0-9+-_]+)*(\.[a-zA-Z]+)$/" placeholder="Email" aria-required="true" required="required">
+                        </div>        
+                      </div>
+                      <div class="mt-td--centered-vertical user-signup__col-2">
+                        <div class="user-signup__form-group m-lg-v form-group text-center">
+                          <button type="submit" class="btn btn-default submit user-signup__submit"><span>SUBMIT</span></button>
+                        </div>
+                      </div>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+    <a href="https://github.com/adrienjoly/landing-page-boilerplate"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+      ga('create', 'UA-1858235-15', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
diff --git a/res/background.jpg b/res/background.jpg
diff --git a/res/bootstrap.min.css b/res/bootstrap.min.css
diff --git a/res/clean-hr.png b/res/clean-hr.png
diff --git a/res/loading.gif b/res/loading.gif
diff --git a/res/spacer.png b/res/spacer.png
diff --git a/res/styles.css b/res/styles.css
@@ -0,0 +1,222 @@
+@import  "//fonts.googleapis.com/css?family=Montserrat";
+
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  min-height: 100%;
+  font-family: "Montserrat",sans-serif;
+  line-height: 1.42857;
+  font-size: 17px;
+  background-color: rgba(0,0,0,1);
+  color: #FFF;
+  word-wrap: normal;
+}
+
+a,a:visited,a:active,a:hover {
+  color: #FFF;
+  text-decoration: underline;
+}
+
+section {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  position: relative;
+}
+
+.bg-image {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  z-index: 0;
+}
+
+.form-horizontal .form-group {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.form-horizontal .btn {
+  display: block;
+  margin: 0 auto;
+}
+
+.user-signup__submit {
+  line-height: .5em;
+}
+
+.user-signup__form {
+  margin-left: -5px;
+}
+
+.user-signup__form-group {
+  padding: 0 0 0 5px;
+  position: relative;
+}
+
+@media all and (max-width: 767px) {
+  .form-horizontal .mt-table,.form-horizontal .mt-table--full,.form-horizontal .mt-table--centered,.form-horizontal .mt-table--full,.form-horizontal .mt-td--centered-vertical {
+    display: block;
+  }
+}
+
+@media all and (min-width: 768px) {
+  .form-horizontal .user-signup__col-2 {
+    width: 1%;
+  }
+}
+
+.floating-signup__wrap {
+  position: fixed;
+  z-index: 5;
+  padding: 10px;
+}
+
+.floating-signup {
+  position: relative;
+  padding: 10px 20px;
+}
+
+.floaty-vertical--middle {
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+@media all and (max-width: 480px) {
+  .floaty-unfloat-at--xs.floating-signup__wrap {
+    position: static;
+    display: block;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    float: none;
+  }
+}
+
+.insert--image {
+  display: block;
+  position: relative;
+}
+
+.insert--image.wrap-off-align-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.spacer {
+  z-index: 0;
+  width: 2.52px;
+  margin-bottom: -15px;
+  margin-top: -15px;
+}
+
+.clean-hr {
+  z-index: 0;
+  width: 100%;
+  max-width: 579.5px;
+  margin-top: 28px;
+  margin-bottom: 28px;
+}
+
+.m-lg-v {
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+.mt-table,.mt-table--full {
+  display: table;
+}
+
+.mt-table--full {
+  width: 100%;
+}
+
+.mt-td,.mt-td--centered-vertical {
+  display: table-cell;
+}
+
+.mt-td--centered-vertical {
+  vertical-align: middle;
+}
+
+.loading-state {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background: url(/res/loading.gif) 50% 45% no-repeat;
+}
+
+.rel {
+  position: relative;
+}
+
+.bg-image {
+  /* photo from: https://www.pexels.com/photo/dawn-landscape-mountains-nature-1852/ */
+  background-image: url(/res/background.jpg);
+  background-attachment: scroll;
+  background-position: 50% 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  opacity: .69;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+.form-control__input {
+  border-width: 0;
+  border-radius: 0;
+  font-size: 14px;
+  height: 50px;
+}
+
+.user-signup__submit {
+  border-width: 0;
+  border-radius: 0;
+  font-size: 14px;
+  padding-right: 20px;
+  padding-left: 20px;
+  height: 50px;
+  background-color: #00a651;
+  color: #FFF;
+}
+
+.user-signup__submit:hover {
+  background-color: #1cd861;
+  color: #FFF;
+}
+
+@media all and (min-width:481px) {
+  p {
+    font-size: 22px;
+  }
+
+  h1 {
+    font-size: 60px;
+  }
+}
+
+@media all and (min-width:769px) {
+  p {
+    font-size: 22px;
+  }
+
+  h1 {
+    font-size: 75px;
+  }
+}