Tutorials landing page Fixes

Author: rakeshAlgo

preview-src/book-reader-icon.svg

@@ -4,17 +4,41 @@
 :!sectids:
 
 
+= Couchbase Tutorials
+++++
+<div class="card-row">
+++++
+
+[.column]
+====== {empty}
+[.content]
+The Couchbase SDK allows applications to access a Couchbase cluster. It offers traditional synchronous APIs as well as scalable asynchronous APIs to maximize performance
+
+[.column]
+====== {empty}
+[.media-left]
+icon:book-reader[set= fas]
+
+++++
+</div>
+++++
+
+
+== Tutorials
+++++
+<div class="card-row two-column-row">
+++++
 [.column]
 [.data-filter-column]
 ====== {empty}
 ++++
-<div data-level="advanced" data-category="advanced java swift javascript developer" class="sub-heading two-column-heading">
+<div  data-category="advanced java swift javascript developer" class="sub-heading two-column-heading">
 <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
 <div class="filter-info">
 <h5 >
 <img src="_/img/landing-page-icon/advanced-icon.svg" alt="" />
 Advanced</h5>
-<span data-role="advanced">Developer</span>
+<span>Developer</span>
 </div>
 </div>
 ++++
@@ -59,7 +83,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="intermediate" data-category="intermediate c# node Python devOps"  class="sub-heading two-column-heading">
+    <div  data-category="intermediate c# node Python devOps"  class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -101,7 +125,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="intermediate" data-category="intermediate .net developer" class="sub-heading two-column-heading">
+    <div  data-category="intermediate .net developer" class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -142,7 +166,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="beginner" data-category="beginner ascidoc java php architect" class="sub-heading two-column-heading">
+    <div data-category="beginner ascidoc java php architect" class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -184,7 +208,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="intermediate" data-category="intermediate react developer" class="sub-heading two-column-heading">
+    <div  data-category="intermediate react developer" class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -225,7 +249,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 [.data-filter-column]
 ====== {empty}
 ++++
-    <div data-level="advanced" data-category="advanced angular react vue architect" class="sub-heading two-column-heading">
+    <div  data-category="advanced angular react vue architect" class="sub-heading two-column-heading">
         <h3 class="text-color-brand-blue-secondary">Lorem ipsum</h3>
         <div class="filter-info">
         <h5 >
@@ -259,6 +283,10 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan mi a ligu
 * React
 * Vue
 
+++++
+</div>
+++++
+
 ++++
 </div>
 ++++

preview-src/landing-page-tutorials.adoc

@@ -154,6 +154,11 @@
   padding: 0;
 }
 
+.media-left .icon {
+  font-size: 90px;
+  color: var(--color-brand-blue-secondary);
+}
+
 .doc.landing-page-doc .column .paragraph,
 .doc.landing-page-doc .column .videoblock,
 .doc.landing-page-doc .column .imageblock {

src/css/landing-page.css

@@ -1,33 +1,6 @@
 
-  <main class="article" data-ceiling="topbar">
-    <article class="doc landing-page-doc">
-      {{!-- <h1 class="page"> Couchbase Tutorials </h1>
-      <div class="card-row">
-        <div class="column">
-          <div class="paragraph">
-            <p>
-
-             The Couchbase SDK allows applications to access a Couchbase cluster. It offers traditional synchronous APIs as well as scalable asynchronous APIs to maximize performance.
-
-            </p>
-          </div>
-        </div>
-        <div class="column">
-          <figure class="media-left">
-            <img src="_/img/landing-page-icon/book-reader-icon.svg" alt="" />
-          </figure>
-        </div>
-      </div>
-      <div class="heading">
-        <h2> Tutorials </h2>
-      </div> --}}
-
-      <div class="card-row two-column-row ">
-{{{page.contents}}}
-      </div>
-      {{!-- <div class="no-record hide">
-        <h3> No Record found  </h3>
-      </div> --}}
-
-    </article>
-  </main>
+<main class="article" data-ceiling="topbar">
+<article class="doc landing-page-doc">
+{{{page.contents}}
+</article>
+</main>