Add Carousels and dark color demo #403

2 files changed, 46 insertions, 1 deletions

diff --git a/docs/src/contents/carousels.pug b/docs/src/contents/carousels.pug
index c9c0045..5d09532 100644
--- a/docs/src/contents/carousels.pug
+++ b/docs/src/contents/carousels.pug
@@ -36,4 +36,43 @@ p Carousels are slideshows for cycling images. It is built in pure CSS.
         label.nav-item.text-hide.c-hand(for="slide-1") 1
         label.nav-item.text-hide.c-hand(for="slide-2") 2
         label.nav-item.text-hide.c-hand(for="slide-3") 3
-        label.nav-item.text-hide.c-hand(for="slide-4") 4
\ No newline at end of file
+        label.nav-item.text-hide.c-hand(for="slide-4") 4
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <div class="carousel">
+        <!-- carousel locator -->
+        <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
+        <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
+        <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">
+        <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden="">
+        
+        <!-- carousel container -->
+        <div class="carousel-container">
+          <!-- carousel item -->
+          <figure class="carousel-item">
+            <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
+            <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper">
+          </figure>
+          <figure class="carousel-item">
+            <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
+            <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+          </figure>
+          <figure class="carousel-item">
+            <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
+            <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper">
+          </figure>
+          <figure class="carousel-item">
+            <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
+            <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper">
+          </figure>
+        </div>
+        <!-- carousel navigation -->
+        <div class="carousel-nav">
+          <label class="nav-item text-hide c-hand" for="slide-1">1</label>
+          <label class="nav-item text-hide c-hand" for="slide-2">2</label>
+          <label class="nav-item text-hide c-hand" for="slide-3">3</label>
+          <label class="nav-item text-hide c-hand" for="slide-4">4</label>
+        </div>
+      </div>
\ No newline at end of file
diff --git a/docs/src/contents/colors.pug b/docs/src/contents/colors.pug
index fad27c9..adede92 100644
--- a/docs/src/contents/colors.pug
+++ b/docs/src/contents/colors.pug
@@ -9,6 +9,8 @@ p Color utilities are used for changing colors for text, link and background.
     p
       span.text-secondary secondary color
     p
+      span.text-dark dark color
+    p
       span.text-gray gray color
     p
       span.text-light.bg-dark.p-1.rounded light color
@@ -24,6 +26,7 @@ pre.code(data-lang='HTML')
     :highlight(lang="html")
       <span class="text-primary">primary color</span>
       <span class="text-secondary">secondary color</span>
+      <span class="text-dark">dark color</span>
       <span class="text-gray">gray color</span>
       <span class="text-light">light color</span>
       <span class="text-success">success color</span>
@@ -37,6 +40,8 @@ pre.code(data-lang='HTML')
     p
       a.text-secondary.p-1(href="#colors") secondary link
     p
+      a.text-dark.p-1(href="#colors") dark link
+    p
       a.text-gray.p-1(href="#colors") gray link
     p
       a.text-light.bg-dark.p-1.rounded(href="#colors") light link
@@ -52,6 +57,7 @@ pre.code(data-lang='HTML')
     :highlight(lang="html")
       <a class="text-primary" href="#">primary color</a>
       <a class="text-secondary" href="#">secondary color</a>
+      <a class="text-dark" href="#">dark color</a>
       <a class="text-gray" href="#">gray color</a>
       <a class="text-light" href="#">light color</a>
       <a class="text-success" href="#">success color</a>