adding bubbles

NiallNiall · NiallNiall · commit c5a019335a7f · 2015-12-31T15:07:10.000Z
diff --git a/_layouts/vertical.html b/_layouts/vertical.html
@@ -0,0 +1,46 @@
+{% include head.html %}
+
+  <body class="{{ page.layout }}">
+
+    {% include header.html %}
+
+    <section class="hero-container {{ page.colour }}">
+      <div class="hero-inner grid">
+        <h1 class="hero-title col-1-1">{% if page.hero-title %}{{page.hero-title}}{% else %}{{page.title}}{% endif %}</h1>
+        {% if page.hero-subtitle %}
+          <p class="hero-summary col-1-1">{{page.hero-subtitle}}</p>
+        {% endif %}
+        {% if page.hero-btn %}
+          <a href="{{page.hero-btn-url}}" class="btn btn-primary btn-block" data-sr="scale up 20%, vF 0">{{page.hero-btn}}</a>
+        {% endif %}
+      </div>
+      <div class="grid">
+        <div class="vert-bubble"></div>
+        <div class="vert-bubble"></div>
+        <div class="vert-bubble"></div>
+      </div>
+    </section>
+
+    {% include footer.html %}
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script>window.jQuery || document.write('<script src="js/vendor/jquery-2.1.1.min.js""><\/script>')</script>
+    <script type="text/javascript" src="{{ site.baseurl }}/js/vendor/jquery.lazyload.min.js"></script>
+    <script type="text/javascript" src="{{ site.baseurl }}/js/vendor/scrollReveal.min.js"></script>
+    <script type="text/javascript" src="{{ site.baseurl }}/js/main.js"></script>
+    <script>
+      jQuery(function ($) {
+        $("img.lazy").lazyload({
+          threshold : 600
+          });
+        $("#gif1").attr("src","second.jpg");
+      });
+    </script>
+    <script>
+
+    </script>
+
+    <!-- /scripts-->
+
+  </body>
+</html>
diff --git a/_sass/pages/_vertical.scss b/_sass/pages/_vertical.scss
@@ -0,0 +1,11 @@
+//===============================================================================
+// Vertical
+//===============================================================================
+.vert-bubble {
+  background: $pink;
+  height: 100px;
+  width: 100px;
+  display: inline-block;
+  border-radius: 400px;
+  border: solid darken($pink, 10%) 8px;
+}
diff --git a/css/main.scss b/css/main.scss
@@ -73,6 +73,9 @@
 // INVITE: Styles for the invite pages
 @import "pages/_invite.scss";
 
+// INVITE: Styles for the invite pages
+@import "pages/_vertical.scss";
+
 // IE 8
 // ===================================================
 @import "shared/_ie.scss";
diff --git a/vertical-health.md b/vertical-health.md
@@ -0,0 +1,20 @@
+---
+layout: vertical
+title: Health
+permalink: /health/
+group: nav
+colour: aqua
+
+## Hero Content
+hero-title: Health
+hero-subtitle: At Pebble, we specialise in building solutions for Health. We believe there’s an exciting transformation ahead driven by three main themes
+hero-btn:
+hero-btn-url:
+
+
+
+---
+
+
+
+Using iterative approaches, shortening feedback loops and identifying success metrics at each step, we provide critical advice on how to supercharge technology delivery and generate novel solutions to business problems.
