Home features section

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

@@ -29,6 +29,139 @@
 
 </header>
 
+
+
+
+<!--Projects section v.3-->
+<section class="section extra-margins">
+
+  <!--Section heading-->
+  <h2 class="section-heading h1 mt-5"><strong>Our best projects</strong></h2>
+  <!--Section description-->
+  <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+  <!--Grid row-->
+  <div class="row">
+
+    <!--Grid column-->
+    <div class="col-lg-6 col-xl-5 pr-lg-5 pb-5">
+
+      <!--Image-->
+      <img src="https://mdbootstrap.com/img/Photos/Others/img (31).jpg" alt="Sample project image" class="img-fluid z-depth-2">
+
+    </div>
+    <!--Grid column-->
+
+    <!--Grid column-->
+    <div class="features col-lg-6 col-xl-7 pl-lg-5 pb-4">
+
+      <!--Grid row-->
+      <div class="feature-item row mb-3">
+        <div class="col-1 mr-1">
+          <i class="fa fa-bank fa-lg cyan-text"></i>
+        </div>
+        <div class="col-10">
+          <h5 class="feature-title font-bold">Safety</h5>
+          <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda voluptate velit.</p>
+        </div>
+      </div>
+      <!--Grid row-->
+
+      <!--Grid row-->
+      <div class="feature-item row mb-3">
+        <div class="col-1 mr-1">
+          <i class="fa fa-code fa-lg red-text"></i>
+        </div>
+        <div class="col-10 ">
+          <h5 class="feature-title font-bold">Technology</h5>
+          <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda voluptate velit.</p>
+        </div>
+      </div>
+      <!--Grid row-->
+
+      <!--Third row-->
+      <div class="feature-item row">
+        <div class="col-1 mr-1">
+          <i class="fa fa-money fa-lg brown-text"></i>
+        </div>
+        <div class="col-10">
+          <h5 class="feature-title font-bold">Finance</h5>
+          <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda voluptate velit.</p>
+        </div>
+      </div>
+      <!--/Third row-->
+
+    </div>
+    <!--Grid column-->
+
+  </div>
+  <!--Grid row-->
+
+  <hr>
+
+  <!--Grid row-->
+  <div class="row pt-5">
+
+    <!--Grid column-->
+    <div class="features col-lg-6 col-xl-7 mb-3">
+
+      <!--Grid row-->
+      <div class="feature-item row mb-3">
+        <div class="col-1 mr-1">
+          <i class="fa fa-eye fa-lg light-green-text"></i>
+        </div>
+        <div class="col-10">
+          <h5 class="feature-title font-bold">Followers</h5>
+          <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda voluptate velit.</p>
+        </div>
+      </div>
+      <!--Grid row-->
+
+      <!--Grid row-->
+      <div class="feature-item row mb-3">
+        <div class="col-1 mr-1">
+          <i class="fa fa-heart-o fa-lg pink-text"></i>
+        </div>
+        <div class="col-10">
+          <h5 class="feature-title font-bold">Entertainment</h5>
+          <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda voluptate velit.</p>
+        </div>
+      </div>
+      <!--Grid row-->
+
+      <!--Third row-->
+      <div class="feature-item row mb-3">
+        <div class="col-1 mr-1">
+          <i class="fa fa-smile-o fa-lg amber-text"></i>
+        </div>
+        <div class="col-10">
+          <h5 class="feature-title font-bold">Communication</h5>
+          <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda voluptate velit.</p>
+        </div>
+      </div>
+      <!--/Third row-->
+
+    </div>
+    <!--Grid column-->
+
+    <!--Grid column-->
+    <div class="col-lg-6 col-xl-5 mb-3">
+
+      <!--Image-->
+      <img src="https://mdbootstrap.com/img/Photos/Others/img (30).jpg" alt="Sample project image" class="img-fluid z-depth-2">
+
+    </div>
+    <!--Grid column-->
+
+  </div>
+  <!--Grid row-->
+
+</section>
+<!--Projects section v.3-->
+
+
+<hr>
+
 <!--Main Navigation-->
 <main>
   <div class="container">

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

@@ -31,6 +31,24 @@ body {
   align-items: center;
 }
 
+.extra-margins {
+  width: 98%;
+  padding-left: 3%;
+  padding-right: 5%;
+
+}
+
+.features {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.feature-item {
+  padding-top: 2%;
+}
+
 
 
 

src/app/components/opCommercial/op-commercial/op-commercial.component.ts

@@ -71,6 +71,10 @@ export class OpCommercialComponent implements OnInit, OnDestroy {
   goToEnCart(idOp) {
     this.router.navigate(['/EnvoyerCarte', idOp]);
   }
+
+  sectionToImage() {
+  }
+
   ngOnInit() {
   }
   ngOnDestroy() {}