hero img, intro boxes

README.md

@@ -9,7 +9,9 @@ The source code behind OTS' main web site.
 
 This project is built with the help of
 
- * bootstrap
+ * [Bourbon](http://bourbon.io)
+ * [Bitter](bitters.bourbon.io)
+ * [Flexbox Grid](http://flexboxgrid.com/)
  * jekyll
 
 In order to be able to compile the site on your own computer, you can install

_layouts/landing.html

@@ -16,9 +16,9 @@ <h2>{{page.tagline}}</h2>
 	    </div>
 	  </div>
 
-	  <div class="container">
+	  <section class="section-bkg container">
 	      {{ content }}
-	  </div>
+	  </section>
 	</div>
 
 

_sass/_layout.scss

@@ -25,6 +25,14 @@ header {
 	}
 }
 
+.section-bkg {
+	margin-top: 50px;
+	margin-bottom: 50px;
+	h2 {
+		font-weight: 200;
+    font-size: 3rem;
+	}
+}
 
 footer {
 	padding: 2em 3em 0.5em 3em;

_sass/base/_base.scss

@@ -12,3 +12,5 @@
 @import "media";
 @import "tables";
 @import "typography";
+@import "icons";
+@import "utility";

_sass/base/_layout.scss

@@ -12,3 +12,7 @@ html,
 body {
   height: 100%;
 }
+
+a {
+	cursor: pointer;
+}

_sass/base/_utility.scss

@@ -0,0 +1,10 @@
+
+// shapes
+.u-circle-centered {
+	border-radius: 50%;
+	background-color: $brand-color;
+	width: 150px;
+	height: 150px;
+	margin: 0 auto;
+	margin-bottom: 20px;
+}

_sass/base/icons.scss

@@ -0,0 +1,20 @@
+$svg-path: "/assets/statics/svg/";
+
+
+.i-idea-baloons {
+	background-image: url(#{$svg-path}chat.svg);
+	width: 100px;
+	height: 100px;
+}
+
+.i-world-connections {
+	background-image: url(#{$svg-path}world-connection.svg);
+	width: 120px;
+	height: 120px;
+}
+
+.i-people-chat {
+	background-image: url(#{$svg-path}people-chat.svg);
+	width: 80px;
+	height: 80px;
+}

_sass/layouts/landing.scss

@@ -3,23 +3,61 @@
 		background: transparent;
 		position: absolute;
 		width: 100%;
-		margin-top: 0;
+		margin-top: 10px;
 	}
 	.jumbo {
 		margin-top: 0;
 		height: 80vh;
 		min-height: 350px;
 		background-size: cover;
+		background-position-y: 20%;
 		.container {
-			color: $brand-color;
+			color: $white;
 			text-align: center;
 			position: absolute;
-			top: 50%;
+			top: 40%;
 			left: 50%;
 			transform: translate(-50%, -50%);
+			text-shadow: -1px 1px 3px rgba($white, 0.6);
 			h1, h2 {
 				padding: 0;
 			}
+			h1 {
+				font-size: 4rem;
+    		margin-bottom: 20px;
+			}
+		}
+	}
+
+	.intro {
+		text-align: center;
+		p {
+			text-align: center;
+		}
+
+		h2 {
+	    margin-bottom: 10px;
+	    padding-bottom: 10px;
+		}
+		.intro__boxes {
+			margin-top: 60px;
+			.intro__boxes__box {
+				padding: 0 10px;
+	    	display: inline-block;
+	    	color: $brand-color-black;
+	    	.u-circle-centered {
+	    		display: flex;
+			    justify-content: center;
+			    align-items: center;
+	    	}
+	    	h3 {
+	    		font-weight: 200;
+	    	}
+	    	span {
+	    		display: inline-block;
+			    margin-top: -5px;
+				}
+			}
 		}
 	}
 }