Merge pull request #24 from jamesjose03/jkj-csscomponents

Add pagination component

Author: rubenshibu

css/pagination.css

@@ -0,0 +1,22 @@
+/* James K Jose */
+.pagination-jkj {
+    display: inline-block;
+  }
+  
+  .pagination-jkj a {
+    color: black;
+    float: left;
+    padding: 8px 16px;
+    text-decoration: none;
+  }
+  
+  .pagination-jkj a.active {
+    background-color: #4CAF50;
+    color: white;
+    border-radius: 5px;
+  }
+  
+  .pagination-jkj a:hover:not(.active) {
+    background-color: #ddd;
+    border-radius: 5px;
+  }

pages/pagination.html

@@ -147,6 +147,51 @@ <h2>
           </div>
         </div>
 
+        <div class="row">
+          <div class="col-lg-6">
+            <div class="component">
+              <div class="card magictime">
+                <div class="card-title tonal">
+                  <strong>Pagination</strong>
+                </div>
+                <div class="card-content">
+                  
+                  <div class="pagination-jkj">
+                    <a href="#">&laquo;</a>
+                    <a href="#">1</a>
+                    <a href="#" class="active">2</a>
+                    <a href="#">3</a>
+                    <a href="#">4</a>
+                    <a href="#">5</a>
+                    <a href="#">6</a>
+                    <a href="#">&raquo;</a>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-6">
+            <div class="component">
+              <div class="card magictime">
+                <div class="card-title tonal">
+                  <strong>Creator</strong>
+                </div>
+                <div class="card-content">
+                  <div class="creater-name">
+                    <h2>
+                      <b>Name:</b>
+                      <span>
+                        <a href="https://github.com/jamesjose03">James Kaviyil Jose</a>
+                      </span>
+                    </h2>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+