Version stable v2 presentation 21/09/2017

src/app/components/home/home.component.html

@@ -30,6 +30,48 @@
 </header>
 
 
+<!--Section: Features v.1-->
+<section class="section feature-box">
+
+  <!--Section heading-->
+  <h1 class="section-heading pt-4">Why is it so great?</h1>
+  <!--Section description-->
+  <p class="section-description lead grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
+
+  <!--Grid row-->
+  <div class="row features-big">
+
+    <!--Grid column-->
+    <div class="col-md-4 mb-r">
+      <i class="fa fa-area-chart red-text"></i>
+      <h5 class="feature-title">Analytics</h5>
+      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
+    </div>
+    <!--Grid column-->
+
+    <!--Grid column-->
+    <div class="col-md-4 mb-r">
+      <i class="fa fa-book cyan-text"></i>
+      <h5 class="feature-title">Tutorials</h5>
+      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
+    </div>
+    <!--Grid column-->
+
+    <!--Grid column-->
+    <div class="col-md-4 mb-r">
+      <i class="fa fa-coffee orange-text"></i>
+      <h5 class="feature-title">Relax</h5>
+      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
+    </div>
+    <!--Grid column-->
+
+  </div>
+  <!--Grid row-->
+
+</section>
+<!--Section: Features v.1-->
+
+<hr>
 
 
 <!--Projects section v.3-->
@@ -164,7 +206,7 @@
 
 <!--Main Navigation-->
 <main>
-  <div class="container">
+  <div class="container" id="footer-text">
 
     <!--Grid row-->
     <div class="row py-5 mt-4">
@@ -188,3 +230,106 @@
 
   </div>
 </main>
+
+
+<!--Footer-->
+<footer class="page-footer mdb-color center-on-small-only">
+
+  <!--Footer Links-->
+  <div class="container">
+    <div class="row">
+
+      <!--First column-->
+      <div class="col-md-3 offset-md-1">
+        <h5 class="title">Footer Content </h5>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </div>
+      <!--/.First column-->
+
+      <hr class="hidden-md-up">
+
+      <!--Second column-->
+      <div class="col-md-2 offset-md-1">
+        <h5 class="title">Links</h5>
+        <ul>
+          <li><a href="#!">Link 1</a></li>
+          <li><a href="#!">Link 2</a></li>
+          <li><a href="#!">Link 3</a></li>
+          <li><a href="#!">Link 4</a></li>
+        </ul>
+      </div>
+      <!--/.Second column-->
+
+      <hr class="hidden-md-up">
+
+      <!--Third column-->
+      <div class="col-md-2">
+        <h5 class="title">Links</h5>
+        <ul>
+          <li><a href="#!">Link 1</a></li>
+          <li><a href="#!">Link 2</a></li>
+          <li><a href="#!">Link 3</a></li>
+          <li><a href="#!">Link 4</a></li>
+        </ul>
+      </div>
+      <!--/.Third column-->
+
+      <hr class="hidden-md-up">
+
+      <!--Fourth column-->
+      <div class="col-md-2">
+        <h5 class="title">Links</h5>
+        <ul>
+          <li><a href="#!">Link 1</a></li>
+          <li><a href="#!">Link 2</a></li>
+          <li><a href="#!">Link 3</a></li>
+          <li><a href="#!">Link 4</a></li>
+        </ul>
+      </div>
+      <!--/.Fourth column-->
+
+    </div>
+  </div>
+  <!--/.Footer Links-->
+
+  <hr>
+
+  <!--Call to action-->
+  <div class="call-to-action">
+    <ul>
+      <li>
+        <h5>Register for free</h5>
+      </li>
+      <li><a href="" class="btn btn-danger waves-light" mdbRippleRadius>Sign up!</a></li>
+    </ul>
+  </div>
+  <!--/.Call to action-->
+
+  <hr>
+
+  <!--Social buttons-->
+  <div class="text-center mb-3">
+
+    <a class="btn-floating btn-small btn-fb waves-light" mdbRippleRadius><i class="fa fa-facebook"> </i></a>
+    <a class="btn-floating btn-small btn-tw waves-light" mdbRippleRadius><i class="fa fa-twitter"> </i></a>
+    <a class="btn-floating btn-small btn-gplus waves-light" mdbRippleRadius><i class="fa fa-google-plus"> </i></a>
+    <a class="btn-floating btn-small btn-li waves-light" mdbRippleRadius><i class="fa fa-linkedin"> </i></a>
+    <a class="btn-floating btn-small btn-git waves-light" mdbRippleRadius><i class="fa fa-github"> </i></a>
+    <a class="btn-floating btn-small btn-pin waves-light" mdbRippleRadius><i class="fa fa-pinterest"> </i></a>
+    <a class="btn-floating btn-small btn-ins waves-light" mdbRippleRadius><i class="fa fa-instagram"> </i></a>
+
+  </div>
+  <!--/.Social buttons-->
+
+  <!--Copyright-->
+  <div class="footer-copyright">
+    <div class="container-fluid">
+      © 2017 Copyright: <a href=""> XJC </a>
+
+    </div>
+  </div>
+  <!--/.Copyright-->
+
+</footer>
+<!--/.Footer-->
+

src/app/components/home/home.component.scss

@@ -38,11 +38,24 @@ body {
 
 }
 
+.feature-box {
+  width: 98%;
+  padding-left: 3%;
+  padding-right: 5%;
+}
+
 .features {
   align-items: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding-left: 10%;
+  padding-right: 10%;
+}
+
+#footer-text {
+  padding-left: 5%;
+  padding-right: 5%;
 }
 
 .feature-item {