Added feature-section

_data/features.json

@@ -0,0 +1,36 @@
+[{
+	"title": "Multi language support",
+	"image": "",
+	"description": "Vocaluxe supports many different languages - If your language isn't avaialable just start translating it!"
+},
+{
+	"title": "Party modes",
+	"image": "partymode.png",
+	"description": "Singing some challenging rounds against your friends or in teams on a big party - Vocaluxe offers several party modes"
+},
+{
+	"title": "Medleys and duets",
+	"image": "medley.png",
+	"description": ""
+},
+{
+	"title": "Profiles",
+	"image": "player.png",
+	"description": ""
+},
+{
+	"title": "Webcam and WiiMote",
+	"image": "",
+	"description": ""
+},
+{
+	"title": "Smartphone control",
+	"image": "",
+	"description": ""
+},
+{
+	"title": "Songs",
+	"image": "songs.png",
+	"description": ""
+}
+]

_includes/about.html

@@ -5,11 +5,20 @@
 			<h1 class="title">{{ page.title }}</h1>
 			<h2 class="subtitle">{{ page.subtitle }}</h2>
 
-			<div class="col-md-8 col-sm-12">
+			{% for feature in site.data.features %}
-				<p>
+			<div class="col-md-3 col-sm-6">
-					{{ page.content | markdownify }}
+				<div class="feature">
-				</p>
+					<img src="{{site.baseurl}}/img/features/{{ feature.image }}" class="img-responsive" alt="">
+					<div class="caption">
+						<div class="blur"></div>
+						<div class="caption-text">
+							<h4>{{ feature.title }}</h4>
+							<p>{{ feature.description }}</p>
+						</div>
+					</div>
+				</div>
 			</div>
+			{% endfor %}
 		</div>
 	</div>
 </section>

_includes/hero_area.html

@@ -7,7 +7,7 @@
 				<h1 class="title">{{site.title}}</h1>
 				<h2 class="subtitle">{{site.subtitle}}</h2>
 
-				<img class="col-md-6 col-sm-6 col-xs-12 animated fadeInLeft" src="img/screenshot_sing.png" alt="">
+				<img class="col-md-6 col-sm-6 col-xs-12 animated fadeInLeft" src="{{site.baseurl}}/img/screenshot_sing.png" alt="">
 
 				<div class="col-md-6 col-sm-6 col-xs-12 animated fadeInRight delay-0-5">
 				<p>{{ site.description }}</p>

css/main.css

@@ -181,10 +181,7 @@ a:hover {
   background-image: radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
   color: #fff;
 }
-#about p {
+
-  line-height: 30px;
-  font-size: 17px;
-}
 #contact {
   background: #f1f1f1;
 }
@@ -274,3 +271,59 @@ a:hover {
 #copyright a {
   color: #333;
 }
+
+.feature {
+	padding: 0px;
+	position: relative;
+	overflow: hidden;
+	height: 200px;
+	background-color: #000000;
+	margin-bottom: 30px;
+}
+
+.feature:hover .caption {
+	opacity: 1;
+	transform: translateY(-150px);
+	-webkit-transform: translateY(-150px);
+	-moz-transform: translateY(-150px);
+	-ms-transform: translateY(-150px);
+	-o-transform: translateY(-150px);
+}
+
+.feature img{
+	z-index: 4;
+}
+
+.feature .caption{
+	position: absolute;
+	top:150px;
+	-webkit-transition:all 0.3s ease-in-out;
+	-moz-transition:all 0.3s ease-in-out;
+	-o-transition:all 0.3s ease-in-out;
+	-ms-transition:all 0.3s ease-in-out;
+	transition:all 0.3s ease-in-out;
+	width: 100%;
+}
+
+.feature .blur{
+	background-color: rgba(0,0,0,0.7);
+	height: 300px;
+	z-index: 5;
+	position: absolute;
+	width: 100%;
+}
+
+.feature .caption-text{
+	z-index: 10;
+	color: #fff;
+	position: absolute;
+	height: 300px;
+	text-align: center;
+	top:-20px;
+	width: 100%;
+}
+
+.feature .caption-text h4 {
+	padding:15px;
+	margin-top:15px;
+}