Updated Features Section

- used cards
- updated browser color

_config.yml

@@ -47,7 +47,7 @@ faviconPng: "/img/vocaluxe_icon.png"
 ##############################
 # Color the browser elements #
 ##############################
-color-browser: "#000000"
+color-browser: "#2C3E50"
 apple-status-bar-style: "black"
 
 ################

_includes/about.html

@@ -1,25 +1,24 @@
 <!-- About Section -->
 <section id="{{ page.section-type }}">
-    <div class="container">
-        <div class="row">
-            <h1 class="title">{{ page.title }}</h1>
-            <h2 class="subtitle">{{ page.subtitle }}</h2>
-
-            {% for feature in site.data.features %}
-            <div class="col-md-3 col-sm-6">
-                <div class="feature">
-                    <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 class="container">
+    <div class="row">
+      <h1 class="title">{{ page.title }}</h1>
+      <h2 class="subtitle">{{ page.subtitle }}</h2> {% for feature in site.data.features %}
+      <div class="col-md-3 flex-box-col">
+        <div class="card hover-card dark-text">
+          <img src="{{site.baseurl}}/img/features/{{ feature.image }}" class="img-responsive" alt="">
+          <div class="hover-overlay blue-bg">
+            <div class="overlay-background">
+              <div class="overlay-content">
+                <h4>{{ feature.title }}</h4>
+                <p>{{ feature.description }}</p>
+              </div>
             </div>
-            {% endfor %}
+          </div>
         </div>
+      </div>
+      {% endfor %}
     </div>
+  </div>
 </section>
 <!-- About Section End -->

_includes/head.html

@@ -5,7 +5,6 @@
     <meta name="description" content="{{site.description}}">
     <meta name="author" content="{{site.author}}">
     <meta name="keywords" content="{{site.keywords}}">
-    <meta name="theme-color" content="#2C3E50">
     <link rel="canonical" href="{{page.url | replace:'index.html','' | prepend: site.baseurl}}">
     <title>{{site.title}}{% if page.title %} | {{page.title}}{% endif %}</title>
 

_layouts/index.html

@@ -5,13 +5,13 @@
 <html lang="{{ site.lang }}">
 
   {% include head.html %}
-  
+
   <body data-spy="scroll" data-offset="20" data-target="#navbar">
-      
+
       {% include navigation.html %}
-      
+
       {% include hero_area.html %}
-      
+
         {% for p in site.pages_list %}
           {% for page in site.pages %}
             {% if p[1] == page.section-type %}
@@ -19,10 +19,10 @@
             {% endif %}
           {% endfor %}
         {% endfor %}
-      
+
       {% include js.html %}
 
-  </body>  
+  </body>
 </html>
 
 <!-- Index Layout End -->

css/main.css

@@ -1,4 +1,6 @@
-/****COLORS****/
+@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
+
+/****Colors****/
 .blue-text {
   color: #428bca;
 }
@@ -76,12 +78,13 @@
 }
 /*************/
 
-@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
+/***General***/
+
 body {
   font-family: 'Lato', sans-serif;
   font-size: 14pt;
   font-weight: 400;
-  color: #2C3E50
+  color: #2C3E50;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -145,13 +148,24 @@ a:hover {
   color: #fff;
 }
 
+.content-section {
+  text-align: center;
+}
+
 #about,
 #songs {
   background: #2C3E50;
   color: #fff;
 }
 
-/**Navigation**/
+#download,
+#help {
+  background: #EEEEEE;
+}
+
+/*************/
+
+/****Navbar***/
 
 .navbar {
   margin-bottom: 0;
@@ -183,7 +197,6 @@ a:hover {
 .navbar-default .navbar-nav li a:hover,
 .navbar-default .navbar-nav li a:focus {
   color: #fff;
-  font-weight: 100;
 }
 
 .navbar-default .navbar-nav>.active,
@@ -269,6 +282,7 @@ a:hover {
   }
 }
 
+/*************/
 
 /**Hero area**/
 
@@ -324,145 +338,13 @@ a:hover {
   padding: 25px 0;
 }
 
-/*Scroll Top*/
+/**************/
 
-.to-top i {
-  padding: 10px 15px;
-  margin: 10px;
-  background: transparent;
-  color: #34495e;
-  border: 2px solid #34495e;
-}
-
-.to-top i:hover {
-  background: #34495e;
-  color: #fff;
-  -webkit-transition: all 0.2s linear;
-  -moz-transition: all 0.2s linear;
-  -o-transition: all 0.2s linear;
-  transition: all 0.2s linear;
-}
-
-#download,
-#help {
-  background: #EEEEEE;
-}
-
-#copyright {
-  background: #F1F1F1;
-  color: #333;
-}
-
-#copyright a {
-  color: #333;
-}
-
-
-/*Feature Section*/
-
-.feature {
-  padding: 0px;
-  position: relative;
-  overflow: hidden;
-  height: 250px;
-  background-color: #fff;
-  margin-bottom: 30px;
-  border-radius: 7px;
-}
-
-.feature:hover .caption {
-  opacity: 1;
-  transform: translateY(-250px);
-  -webkit-transform: translateY(-250px);
-  -moz-transform: translateY(-250px);
-  -ms-transform: translateY(-250px);
-  -o-transform: translateY(-250px);
-}
-
-.feature img {
-  z-index: 4;
-  height: 100px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 50px;
-}
-
-.feature .caption {
-  position: absolute;
-  top: 242px;
-  -webkit-transition: all 0.4s ease-in-out;
-  -moz-transition: all 0.4s ease-in-out;
-  -o-transition: all 0.4s ease-in-out;
-  -ms-transition: all 0.4s ease-in-out;
-  transition: all 0.4s ease-in-out;
-  width: 100%;
-}
-
-.feature .blur {
-  background-color: #428bca;
-  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%;
-  font-size: 12pt;
-}
-
-.feature .caption-text p {
-  padding: 25px 15px;
-  font-weight: 100;
-  -webkit-transition: all 0.3s linear;
-  -moz-transition: all 0.3s linear;
-  -o-transition: all 0.3s linear;
-  transition: all 0.3s linear;
-}
-
-.feature:hover .caption-text p {
-  padding-top: 10px;
-  -webkit-transition: all 0.3s linear;
-  -moz-transition: all 0.3s linear;
-  -o-transition: all 0.3s linear;
-  transition: all 0.3s linear;
-}
-
-.feature .caption-text h4 {
-  font-size: 20pt;
-  color: #2C3E50;
-  padding: 0px;
-  margin-top: -40px;
-  -webkit-transition: all 0.27s ease-in-out;
-  -moz-transition: all 0.27s ease-in-out;
-  -o-transition: all 0.27s ease-in-out;
-  transition: all 0.27s ease-in-out;
-}
-
-.feature:hover .caption-text h4 {
-  margin-top: 40px;
-  color: #fff;
-  -webkit-transition: all 0.27s ease-in-out;
-  -moz-transition: all 0.27s ease-in-out;
-  -o-transition: all 0.27s ease-in-out;
-  transition: all 0.27s ease-in-out;
-}
-
-.content-section {
-  text-align: center;
-}
-
-
-/*Download Section*/
+/***Download***/
 
 #download .card {
   color: #fff;
+  text-align: center;
 }
 
 #download .card h2 {
@@ -473,7 +355,12 @@ a:hover {
 #download .card p {
   font-size: 14pt;
   margin-bottom: 10px;
-  font-weight: 400;
+}
+
+#download .card .release-date {
+  font-size: 11pt;
+  margin-top: 10px;
+  margin-bottom: 0px;
 }
 
 .dark-bg .release-date a {
@@ -492,12 +379,6 @@ a:hover {
   text-align: center;
 }
 
-.card .release-date {
-  font-size: 11pt;
-  margin-top: 10px;
-  margin-bottom: 0px;
-}
-
 .btnDownload {
   margin: 5px;
 }
@@ -551,6 +432,53 @@ a:hover {
   margin-top: 40px;
 }
 
+/**************/
+
+/***Features***/
+
+#about .card {
+  height: 250px;
+  background-color: #fff;
+  margin: 0 0 30px 0;
+  padding: 0;
+}
+
+#about .card img {
+  z-index: 4;
+  height: 100px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 50px;
+}
+
+#about .card .overlay-content p {
+  padding: 0 15px;
+}
+
+#about .card .overlay-content h4 {
+  font-size: 20pt;
+  color: #2C3E50;
+  padding: 0px;
+  margin-top: -70px;
+  margin-bottom: 70px;
+  -webkit-transition: all 0.27s ease-in-out;
+  -moz-transition: all 0.27s ease-in-out;
+  -o-transition: all 0.27s ease-in-out;
+  transition: all 0.27s ease-in-out;
+}
+
+#about .card:hover .overlay-content h4 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  color: #fff;
+  -webkit-transition: all 0.27s ease-in-out;
+  -moz-transition: all 0.27s ease-in-out;
+  -o-transition: all 0.27s ease-in-out;
+  transition: all 0.27s ease-in-out;
+}
+
+/**************/
+
 /*****Help*****/
 
 #help .card,
@@ -603,32 +531,3 @@ a:hover {
 }
 
 /**************/
-
-/*****Songs****/
-
-
-/**************/
-.stamp {
-  position: absolute;
-  display: inline-block;
-  color: red;
-  padding: 15px;
-  background-color: #fff;
-  box-shadow: inset 0px 0px 0px 10px red;
-  transform: rotate(30deg);
-  margin-top: 20%;
-  margin-left: 20%;
-  font-size: 25px;
-  width: 65%;
-}
-
-.stamp:after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-image: url("../img/stamp.jpg");
-  mix-blend-mode: lighten;
-}