diff --git a/dist/css/animate.css b/dist/css/animate.css
index d2c9714..17d1084 100644
--- a/dist/css/animate.css
+++ b/dist/css/animate.css
@@ -1 +1 @@
-.animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}@keyframes a{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}.bounce{animation-name:a;transform-origin:center bottom}@keyframes b{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{animation-name:b}@keyframes c{0%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}.pulse{animation-name:c}@keyframes d{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.rubberBand{animation-name:d}@keyframes e{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}.shake{animation-name:e}@keyframes f{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.headShake{animation-timing-function:ease-in-out;animation-name:f}@keyframes g{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.swing{transform-origin:top center;animation-name:g}@keyframes h{0%{transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{transform:scaleX(1)}}.tada{animation-name:h}@keyframes i{0%{transform:translateZ(0)}15%{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:translateZ(0)}}.wobble{animation-name:i}@keyframes j{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{animation-name:j;transform-origin:center}@keyframes k{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}.bounceIn{animation-duration:.75s;animation-name:k}@keyframes l{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:translateZ(0)}}.bounceInDown{animation-name:l}@keyframes m{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:translateZ(0)}}.bounceInLeft{animation-name:m}@keyframes n{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:translateZ(0)}}.bounceInRight{animation-name:n}@keyframes o{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}.bounceInUp{animation-name:o}@keyframes p{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{animation-duration:.75s;animation-name:p}@keyframes q{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{animation-name:q}@keyframes r{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{animation-name:r}@keyframes s{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{animation-name:s}@keyframes t{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{animation-name:t}@keyframes u{0%{opacity:0}to{opacity:1}}.fadeIn{animation-name:u}@keyframes v{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}.fadeInDown{animation-name:v}@keyframes w{0%{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:translateZ(0)}}.fadeInDownBig{animation-name:w}@keyframes x{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translateZ(0)}}.fadeInLeft{animation-name:x}@keyframes y{0%{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:translateZ(0)}}.fadeInLeftBig{animation-name:y}@keyframes z{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:translateZ(0)}}.fadeInRight{animation-name:z}@keyframes A{0%{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:translateZ(0)}}.fadeInRightBig{animation-name:A}@keyframes B{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:translateZ(0)}}.fadeInUp{animation-name:B}@keyframes C{0%{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:translateZ(0)}}.fadeInUpBig{animation-name:C}@keyframes D{0%{opacity:1}to{opacity:0}}.fadeOut{animation-name:D}@keyframes E{0%{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{animation-name:E}@keyframes F{0%{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{animation-name:F}@keyframes G{0%{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{animation-name:G}@keyframes H{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{animation-name:H}@keyframes I{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{animation-name:I}@keyframes J{0%{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{animation-name:J}@keyframes K{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{animation-name:K}@keyframes L{0%{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{animation-name:L}@keyframes M{0%{transform:perspective(400px) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95);animation-timing-function:ease-in}to{transform:perspective(400px);animation-timing-function:ease-in}}.animated.flip{backface-visibility:visible;animation-name:M}@keyframes N{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.flipInX{backface-visibility:visible!important;animation-name:N}@keyframes O{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.flipInY{backface-visibility:visible!important;animation-name:O}@keyframes P{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{animation-duration:.75s;animation-name:P;backface-visibility:visible!important}@keyframes Q{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{animation-duration:.75s;backface-visibility:visible!important;animation-name:Q}@keyframes R{0%{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg);opacity:1}to{transform:translateZ(0);opacity:1}}.lightSpeedIn{animation-name:R;animation-timing-function:ease-out}@keyframes S{0%{opacity:1}to{transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{animation-name:S;animation-timing-function:ease-in}@keyframes T{0%{transform-origin:center;transform:rotate(-200deg);opacity:0}to{transform-origin:center;transform:translateZ(0);opacity:1}}.rotateIn{animation-name:T}@keyframes U{0%{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}to{transform-origin:left bottom;transform:translateZ(0);opacity:1}}.rotateInDownLeft{animation-name:U}@keyframes V{0%{transform-origin:right bottom;transform:rotate(45deg);opacity:0}to{transform-origin:right bottom;transform:translateZ(0);opacity:1}}.rotateInDownRight{animation-name:V}@keyframes W{0%{transform-origin:left bottom;transform:rotate(45deg);opacity:0}to{transform-origin:left bottom;transform:translateZ(0);opacity:1}}.rotateInUpLeft{animation-name:W}@keyframes X{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}to{transform-origin:right bottom;transform:translateZ(0);opacity:1}}.rotateInUpRight{animation-name:X}@keyframes Y{0%{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate(200deg);opacity:0}}.rotateOut{animation-name:Y}@keyframes Z{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{animation-name:Z}@keyframes ab{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{animation-name:ab}@keyframes bb{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{animation-name:bb}@keyframes cb{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}.rotateOutUpRight{animation-name:cb}@keyframes db{0%{transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.hinge{animation-duration:2s;animation-name:db}@keyframes eb{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.jackInTheBox{animation-name:eb}@keyframes fb{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}.rollIn{animation-name:fb}@keyframes gb{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{animation-name:gb}@keyframes hb{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{animation-name:hb}@keyframes ib{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{animation-name:ib}@keyframes jb{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{animation-name:jb}@keyframes kb{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{animation-name:kb}@keyframes lb{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{animation-name:lb}@keyframes mb{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{animation-name:mb}@keyframes nb{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{animation-name:nb}@keyframes ob{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{animation-name:ob}@keyframes pb{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{animation-name:pb}@keyframes qb{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{animation-name:qb}@keyframes rb{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInDown{animation-name:rb}@keyframes sb{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInLeft{animation-name:sb}@keyframes tb{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInRight{animation-name:tb}@keyframes ub{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInUp{animation-name:ub}@keyframes vb{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}.slideOutDown{animation-name:vb}@keyframes wb{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}.slideOutLeft{animation-name:wb}@keyframes xb{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}.slideOutRight{animation-name:xb}@keyframes yb{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slideOutUp{animation-name:yb}
\ No newline at end of file
+:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animated{animation-duration:var(--animate-duration);animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.repeat-1{animation-iteration-count:var(--animate-repeat)}.animated.repeat-2{animation-iteration-count:calc(var(--animate-repeat) * 2)}.animated.repeat-3{animation-iteration-count:calc(var(--animate-repeat) * 3)}.animated.delay-1s{animation-delay:var(--animate-delay)}.animated.delay-2s{animation-delay:calc(var(--animate-delay) * 2)}.animated.delay-3s{animation-delay:calc(var(--animate-delay) * 3)}.animated.delay-4s{animation-delay:calc(var(--animate-delay) * 4)}.animated.delay-5s{animation-delay:calc(var(--animate-delay) * 5)}.animated.faster{animation-duration:calc(var(--animate-duration)/2)}.animated.fast{animation-duration:calc(var(--animate-duration) * .8)}.animated.slow{animation-duration:calc(var(--animate-duration) * 2)}.animated.slower{animation-duration:calc(var(--animate-duration) * 3)}@media (prefers-reduced-motion:reduce),print{.animated{animation-duration:1ms!important;transition-duration:1ms!important;animation-iteration-count:1!important}.animated[class*=Out]{opacity:0}}@keyframes a{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:translateZ(0)}}.fadeInUp{animation-name:a}@keyframes b{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}.fadeInDown{animation-name:b}@keyframes c{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translateZ(0)}}.fadeInLeft{animation-name:c}@keyframes d{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:translateZ(0)}}.fadeInRight{animation-name:d}
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
index 823397e..4dca18f 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><script defer src="js/lib/fontawesome-all.min.js"></script><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/gulpGetStart/assets/images/favicon.ico"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/animate.css"><link rel="stylesheet" href="css/less-styles.css"><link rel="stylesheet" href="css/styles.css"><title>Gulp4 get Start | Bootstrap 4 Layouts</title></head><body data-spy="scroll" data-target=".site-nav" data-offset="55"><header id="page-hero" class="site-header d-flex flex-column align-content-between"><nav class="site-nav family-sans navbar navbar-expand-md navbar-dark fixed-top"><div class="container-fluid"> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myTogglerNav" aria-controls="myTogglerNav" aria-label="Toggle Navigation"><span class="navbar-toggler-icon"></span></button> <a class="navbar-brand font-weight-bold" href="#page-hero"><svg xmlns="http://www.w3.org/2000/svg" width="252.54" height="153.16" viewBox="0 0 252.54 153.16" style="
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><script defer src="js/lib/fontawesome-all.min.js"></script><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/gulpGetStart/assets/images/favicon.ico"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/assets/images/favicon.ico"><link rel="stylesheet" href="css/bootstrap.css"><link rel="stylesheet" href="css/animate.css"><link rel="stylesheet" href="css/less-styles.css"><link rel="stylesheet" href="css/styles.css"><title>Gulp4 get Start | Bootstrap 4 Layouts</title></head><body data-spy="scroll" data-target=".site-nav" data-offset="55"><header id="page-hero" class="site-header d-flex flex-column align-content-between"><nav class="site-nav family-sans navbar navbar-expand-md navbar-dark fixed-top"><div class="container-fluid"> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myTogglerNav" aria-controls="myTogglerNav" aria-label="Toggle Navigation"><span class="navbar-toggler-icon"></span></button> <a class="navbar-brand font-weight-bold" href="#page-hero"><svg xmlns="http://www.w3.org/2000/svg" width="252.54" height="153.16" viewBox="0 0 252.54 153.16" style="
           width: 56px;
           height: auto;
-      "><script xmlns="" type="text/javascript"></script><g fill="#FFF" stroke="#FFF" stroke-miterlimit="10"><path d="M67.53 79.12c-.17.26-.5 1.08-.95 2.45-.46 1.38-1.02 3.1-1.68 5.2-.66 2.07-1.38 4.4-2.14 6.97l-2.37 7.88c-.9 2.68-1.6 5.3-2.4 7.88l-2 6.98-1.5 5.22-.7 2.5c-.3.83-.6 1.75-1.1 2.77-.5 1-1.1 1.97-1.7 2.88-.7.9-1.4 1.67-2.2 2.27-.8.6-1.6.9-2.5.9-1.4 0-2.4-.48-3.1-1.4-.7-.95-1-2.66-1-5.16v-2.26c0-.83.4-2.4 1-4.68.6-2.3 1.3-4.88 2.2-7.76.8-2.9 1.8-5.88 2.7-8.97l2.7-8.4c-2.4 2.6-4.9 5.2-7.6 7.7-2.7 2.6-5.5 4.9-8.3 6.9-2.9 2-5.8 3.7-8.7 5-2.9 1.3-5.7 1.9-8.4 1.9-3.1 0-5.7-.7-7.9-2.1-2.2-1.4-4.1-3.1-5.5-5.3s-2.5-4.7-3.2-7.4C.8 98.5.4 95.7.4 93v-1c0-.3.04-.63.1-.94.24-5 .95-10.1 2.1-15.34 1.2-5.28 2.7-10.5 4.6-15.7 1.9-5.2 4.1-10.3 6.6-15.26C16.4 40 19.1 35.3 22 30.9s6.02-8.5 9.3-12.2c3.3-3.72 6.67-6.92 10.14-9.6 3.46-2.7 6.96-4.8 10.5-6.3 3.5-1.5 7-2.3 10.46-2.3 4 0 7.86 1.1 11.6 3.27C77.7 6 81.2 9.5 84.48 14.4c.74 1.1 1.2 2.2 1.4 3.32.2 1.1.3 2.17.3 3.15 0 2.34-.55 4.2-1.67 5.54-1.1 1.4-2.4 2-4 2-1.4 0-2.7-.7-3.9-2.2-1.2-1.5-2.6-3.6-4-6.3-1.4-2.5-2.9-4.3-4.6-5.4-1.7-1.1-3.5-1.6-5.5-1.6-3.1 0-6.3 1.3-9.8 3.9-3.5 2.6-6.9 5.9-10.3 10.1-3.4 4.2-6.7 9-9.8 14.4-3.1 5.4-5.9 10.9-8.3 16.6-2.4 5.7-4.3 11.2-5.7 16.7-1.4 5.5-2.1 10.4-2.1 14.8 0 1.5.1 3 .3 4.5.2 1.6.6 2.9 1.1 4.2s1.3 2.3 2.3 3.1c1 .8 2.2 1.2 3.6 1.2 1.6 0 3.5-.5 5.5-1.6 2.1-1.1 4.2-2.5 6.4-4.3 2.2-1.8 4.5-3.8 6.7-6s4.4-4.5 6.3-6.8c1.9-2.3 3.7-4.5 5.1-6.6 1.5-2.1 2.6-3.9 3.4-5.5L63 53c.74-1.97 1.7-3.38 2.93-4.2 1.2-.84 2.43-1.26 3.7-1.26.6 0 1.23.1 1.85.3.6.2 1.18.52 1.67.96.5.4.87 1 1.16 1.7.3.7.5 1.5.5 2.5 0 2.5-.2 4.86-.6 7.04-.4 2.2-1 4.3-1.7 6.4-.6 2.05-1.4 4.14-2.2 6.25-.8 2.1-1.6 4.3-2.4 6.6zm83.03 15.28c-1.93 2.6-4.18 5.14-6.74 7.6-2.57 2.48-5.22 4.68-7.94 6.6-2.72 1.92-5.4 3.47-8.03 4.64-2.64 1.17-5 1.75-7.1 1.75s-3.83-.7-5.15-2.1c-1.32-1.4-1.98-3.8-1.98-7.2 0-2.4.36-5.2 1.06-8.4-1.14 2-2.57 4.1-4.28 6.1-1.7 2.1-3.67 4-5.86 5.7-2.2 1.7-4.66 3.1-7.38 4.1-2.72 1-5.68 1.6-8.9 1.6-1.43 0-2.83-.2-4.17-.6-1.4-.4-2.6-1-3.6-1.9-1-.9-1.8-2.1-2.5-3.6-.6-1.5-.9-3.4-.9-5.6l.2-2.4c.2-1.5.7-4 1.7-7.3s2.4-7.6 4.4-12.9c2-5.3 4.7-11.6 8.3-19.1.9-2 1.9-3.4 3.2-4.3 1.2-.9 2.5-1.3 3.9-1.3.6 0 1.2.1 1.9.3.6.1 1.2.4 1.8.8.6.4 1 .9 1.4 1.5.3.5.5 1.2.5 2 0 .5-.1 1-.2 1.4-.3.9-.7 2-1.4 3.4l-2.6 4.94c-1 1.8-2 3.8-3.1 5.92-1.1 2.13-2.1 4.4-3 6.62-.9 2.3-1.7 4.65-2.4 7-.7 2.4-1.1 4.7-1.2 6.9 0 1 .2 1.8.6 2.6.4.8 1.2 1.2 2.2 1.2 2.8 0 5.6-.9 8.2-2.8 2.6-1.87 5-4.2 7.2-6.98 2.2-2.8 4.2-5.8 6-9 1.8-3.2 3.2-6.1 4.4-8.74.8-1.77 1.6-3.67 2.2-5.7.6-2 1.3-3.9 2.1-5.6.7-1.7 1.6-3.16 2.6-4.3.9-1.14 2.1-1.7 3.6-1.7s2.8.6 3.7 1.8c.9 1.2 1.4 2.6 1.4 4.3 0 .9-.3 2.2-.9 3.8-.6 1.6-1.3 3.5-2.2 5.6l-2.9 6.77c-1.1 2.4-2 4.8-2.9 7.3-.9 2.45-1.7 4.9-2.3 7.24-.6 2.4-.9 4.6-.9 6.6 0 1.9 1 2.8 2.9 2.8 1.4 0 3.1-.4 5.1-1.4 2-.9 4.1-2.2 6.3-3.9 2.2-1.7 4.4-3.7 6.6-6 2.2-2.3 4.2-4.74 5.9-7.4l.7 10.6z"></path><path d="M152.6 90.5c-.48 1.2-.95 2.6-1.4 4.18-.47 1.58-.7 3-.7 4.25 0 .78.13 1.4.4 1.87.26.47.76.7 1.5.7.93 0 2.08-.32 3.47-.97 1.38-.65 2.87-1.5 4.47-2.58 1.6-1.06 3.28-2.28 5-3.66 1.74-1.4 3.47-2.9 5.18-4.3 1.7-1.5 3.34-3 4.9-4.5 1.56-1.5 2.96-2.9 4.2-4.1.34-.4.75-.6 1.24-.8.48-.2.9-.3 1.25-.3.9 0 1.6.3 2.2 1.1.6.7.9 1.7.9 2.9 0 1.1-.3 2.3-.9 3.6-.6 1.3-1.7 2.6-3.2 3.9-2.8 3-5.6 5.9-8.5 8.7-2.8 2.7-5.7 5.2-8.5 7.3-2.8 2.1-5.6 3.7-8.4 5-2.8 1.2-5.5 1.8-8.1 1.8-1.8 0-3.3-.3-4.5-.9-1.2-.6-2.1-1.4-2.9-2.4-.7-1-1.2-2.2-1.5-3.5-.3-1.4-.4-2.8-.4-4.3 0-2.6.3-5.2 1-7.9s1.4-5.2 2.3-7.4c1.6-4.1 3.1-8.1 4.7-12.1l4.4-11L170.6 15c.75-2 1.8-3.42 3.15-4.3 1.36-.8 2.7-1.2 4.07-1.2 1.4 0 2.6.4 3.74 1.3 1.1.86 1.7 2.3 1.7 4.27 0 .93-.2 1.92-.55 2.96-.4 1-.8 2.14-1.4 3.33-1.1 2.42-2.4 5.4-3.9 8.94l-5 11.6c-1.7 4.15-3.5 8.5-5.3 13l-5.4 13.2c-1.8 4.28-3.4 8.3-4.9 12.14l-3.9 9.93z"></path><path d="M245.9 76.4c.63-.43 1.2-.77 1.73-1.03.52-.26 1.03-.4 1.5-.4.97 0 1.7.44 2.18 1.3.5.86.8 1.9.8 3.16 0 1.35-.3 2.73-.9 4.13-.6 1.4-1.4 2.58-2.6 3.5-4.7 4.17-8.9 7.97-12.5 11.4-3.7 3.43-7.1 6.38-10.4 8.85-3.3 2.5-6.5 4.4-9.6 5.8-3.1 1.4-6.4 2.1-10 2.1-3.3 0-5.9-.7-7.7-2.2-1.8-1.4-2.7-3.4-2.7-6v-.6c0-.1.1-.4.1-.6.2-1.5.9-3.3 2.1-5.4 1.2-2 2.6-4.1 4.3-6.3s3.5-4.4 5.4-6.6c1.9-2.2 3.6-4.3 5.3-6.3 1.6-2 2.9-3.8 4-5.5 1.1-1.6 1.6-3 1.6-4 0-.6-.2-1.1-.62-1.5-.47-.3-1.2-.5-2.2-.5-1.8 0-3.6.5-5.46 1.4-1.9.9-3.76 2.2-5.6 3.7-1.8 1.6-3.6 3.3-5.32 5.3s-3.3 4.1-4.9 6.2c-1.5 2.2-2.9 4.3-4.2 6.5-1.2 2.2-2.3 4.2-3.2 6l-1.1 2.4-1.5 3.6-1.8 4-1.7 3.9-1.4 3.3c-.4 1-.7 1.6-.9 2-.2.5-.5 1.4-1 2.7l-1.8 4.58-2.1 5.5-2 5.4-1.7 4.58c-.5 1.3-.8 2.18-.9 2.65-.5 1.3-1 2.6-1.6 3.8-.6 1.2-1.25 2.23-2.02 3.14-.76.9-1.64 1.65-2.63 2.2-1 .5-2.1.8-3.3.8-1.6 0-2.9-.4-3.9-1.12-1-.7-1.6-2.2-1.6-4.3 0-1 .1-2.1.4-3.2.2-1.1.6-2.12 1-3.2.3-1.1.8-2.1 1.2-3.1.4-1 .8-2 1.1-2.96 2.3-5.2 4.75-10.4 7.2-15.66s4.8-10.4 7.1-15.5c2.26-5.1 4.35-10.1 6.3-15.1 1.9-4.9 3.5-9.66 4.8-14.2l1.4-3.96c.6-1.7 1.3-3.4 2.1-5s1.7-3.1 2.7-4.3c1-1.2 2.1-1.83 3.2-1.83 1.8 0 3.07.4 3.86 1.2.8.88 1.2 2 1.2 3.6 0 .3-.04.8-.13 1.5-.1.7-.2 1.4-.36 2.15l-.43 2.1c-.1.7-.3 1.2-.4 1.5 1.6-1.76 3.4-3.5 5.28-5.25 1.9-1.73 3.9-3.3 5.9-4.7s4.1-2.6 6.2-3.45c2.1-.9 4.2-1.35 6.3-1.35 1.5 0 2.9.2 4.36.6 1.4.42 2.7 1.03 3.8 1.84 1.17.8 2.08 1.8 2.78 3 .7 1.2 1.05 2.63 1.05 4.24 0 2.13-.56 4.4-1.6 6.8-1.1 2.44-2.4 4.9-4.06 7.3-1.6 2.46-3.37 4.84-5.26 7.15-1.9 2.3-3.6 4.4-5.3 6.3l-4.2 4.9c-1.1 1.3-1.7 2.2-1.72 2.7 0 .6.2 1.1.6 1.5s1.1.6 2 .6c.78 0 1.88-.45 3.3-1.3 1.48-.9 3.5-2.3 6.1-4.36 2.6-2.1 5.96-4.8 9.97-8.3 4-3.46 9-7.8 14.87-13.07z"></path></g></svg> Get Start</a><div class="collapse navbar-collapse" id="myTogglerNav"><div class="navbar-nav ml-auto font-weight-regular text-uppercase"> <a class="nav-item nav-link" href="#page-hero">home</a> <a class="nav-item nav-link" href="#page-multicolumn">columns</a> <a class="nav-item nav-link" href="#page-media">media</a> <a class="nav-item nav-link" href="#page-photogrid">grid</a> <a class="nav-item nav-link" href="#page-carousel">carousel</a> <a class="nav-item nav-link" href="#page-nested">nested</a> <a class="nav-item nav-link" href="#page-icons">icons</a> <a class="nav-item nav-link" href="#page-floater">floater</a> <a class="nav-item nav-link" href="#page-cards">cards</a></div></div></div></nav><section class="layout-hero jumbotron jumbotron-fluid d-flex align-items-center mt-5 text-reverse"><div class="container text-center"><div class="row justify-content-center"><div class="col-11 col-sm-10 col-md-8 animated fadeInUp"><h3 class="page-section-title text-reverse">Gulp4 get Start</h3><p class="page-section-text lead"> A Getting start Gulp Workflow boilerplate to speed up your Front end Development by automating almost everything in your workflow.</p> <a class="btn btn-outline-light" target="_blank" href="https://github.com/kathirr007/gulpGetStart">Github Repo</a></div></div></div></section></header><article id="page-multicolumn" class="page-section vertical-padding"><header class="page-section-header container"><h2 class="page-section-title display-4 pt-4 text-center">Multi-column</h2><p class="page-section-text lead mx-md-5">This layout uses multiple column rules so that how many columns each group takes depends on the width of the browser, by also using the <code>justify-content-center</code> class on the row, using less than 12 columns results in a centered set of columns. The rules used are <code>col-10</code> <code>col-md-6</code> <code>col-lg-4</code> <code>col-xl-3</code>.</p></header><section class="layout-multicolumn container family-sans text-uppercase text-center py-4"><div class="row justify-content-center py-2"><section class="photo-modal mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/6/cba.png&text=one" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/abc.png&text=one" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/6/fed.png&text=two" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/def.png&text=two" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/c/fed.png&text=three" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/cba.png&text=three" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/d/547.png&text=four" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/547.png&text=four" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/e/784.png&text=five" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/784.png&text=five" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/453/874.png&text=six" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/587.png&text=six" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/143/254.png&text=seven" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/dea.png&text=seven" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/789/101.png&text=eight" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/789.png&text=eight" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/980/810.png&text=nine" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/810.png&text=nine" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/457/bfc.png&text=ten" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/bfc.png&text=ten" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/578/fac.png&text=eleven" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/fac.png&text=eleven" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/687/420.png&text=twelve" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/420.png&text=twelve" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section></div></section></article><article id="page-media" class="page-section vertical-padding"><header class="page-section-header container text-center"><h2 class="page-section-title display-4 pt-4 text-center">Media</h2><p class="page-section-text lead mx-md-5 ">A quick way two column pattern that shows an image next to a photo. In bootstrap 4, you gain the ability to center elements using flexbox classes. A couple of things to watch out for is that these will always render as single columns and can sometimes be too wide, so these particular media elements are inside an 8 column grid.</p></header><section class="layout-media container my-5"><div class="row justify-content-md-center"><div class="animated-group col-lg-8 invisible"><section class="media mb-4"> <img class="layout-image align-self-center mb-3 mb-sm-0 mr-0 mr-sm-3 img-fluid rounded" src="https://craftypixels.com/placeholder-image/80/6/c.png&text=0-1" alt="Photo Sample"><div class="media-body"><h4 class="layout-title">Media One</h4><p class="layout-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum at voluptatibus incidunt, quia sapiente sequi quis quae atque quas id quam ab nobis iste eius, accusamus et officia laudantium! Ducimus.</p></div></section><section class="media mb-4"> <img class="layout-image align-self-center mb-3 mb-sm-0 mr-0 mr-sm-3 img-fluid rounded" src="https://craftypixels.com/placeholder-image/80/6/c.png&text=0-2" alt="Photo Sample"><div class="media-body"><h4 class="layout-title">Media Two</h4><p class="layout-text">Possimus beatae magnam illum necessitatibus laudantium illo aspernatur ducimus eveniet? Voluptas labore similique aut quam quibusdam eius voluptatum dolores quas molestiae suscipit numquam veniam, nemo totam incidunt ullam pariatur perspiciatis.</p></div></section><section class="media mb-4"> <img class="layout-image align-self-center mb-3 mb-sm-0 mr-0 mr-sm-3 img-fluid rounded" src="https://craftypixels.com/placeholder-image/80/6/c.png&text=0-3" alt="Photo Sample"><div class="media-body"><h4 class="layout-title">Media Three</h4><p class="layout-text">Quis at impedit repellat ipsam ad reiciendis beatae odio explicabo amet fuga nostrum animi nisi unde ab sint, sequi est officia. Maiores, fuga aliquid pariatur dignissimos eum vitae ex suscipit.</p></div></section></div></div></section></article><article id="page-photogrid" class="page-section"><header class="page-section-header text-center container"><h2 class="page-section-title display-4 pt-4">Photo Grid</h2><p class="page-section-text lead mx-md-5 ">A photo grid creates an edge to edge layout with a grid of photos.</p></header><section class="layout-photogrid"><div class="row justify-content-center no-gutters"><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=01" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=02" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=03" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=04" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=05" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=06" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=07" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=08" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=09" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=10" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=11" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=12" alt="sample image"></section></div></section></article><article id="page-carousel" class="page-section"><section id="layout-carousel" class="layout-carousel carousel slide" data-ride="carousel"><div class="carousel-inner"><ol class="carousel-indicators"><li data-target="#layout-carousel" data-slide-to="0"></li><li data-target="#layout-carousel" data-slide-to="1" class="active"></li><li data-target="#layout-carousel" data-slide-to="2"></li></ol><div class="carousel-item active"> <img class="img-fluid" src="https://craftypixels.com/placeholder-image/16:9x1600/A/B.png&text=one" alt="Photo Sample"></div><div class="carousel-item"> <img class="img-fluid" src="https://craftypixels.com/placeholder-image/16:9x1600/B/C.png&text=two" alt="Photo Sample"></div><div class="carousel-item"> <img class="img-fluid" src="https://craftypixels.com/placeholder-image/16:9x1600/D/E.png&text=three" alt="Photo Sample"></div> <a class="carousel-control-prev" href="#layout-carousel" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"><span class="sr-only">Previous</span></span></a> <a class="carousel-control-next" href="#layout-carousel" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"><span class="sr-only">Previous</span></span></a></div></section></article><article id="page-nested" class="page-section text-reverse"><section class="layout-nested container-fluid vertical-padding"><div class="row align-items-center justify-content-center"><section class="col-sm-9 col-md-5 col-lg-12 text-center text-lg-left"><div class="row align-items-center justify-content-center"><div class="col-lg-2 text-lg-right"> <img class="layout-image img-circle img-fluid rounded-circle py-3" src="https://craftypixels.com/placeholder-image/200/9/c.png&text=01" alt="Photo placeholder"></div><div class="col-lg-6"><h2 class="layout-title pt-3">Nested</h2><p class="layout-text">Fuga possimus aliquam repudiandae, aspernatur quam velit cupiditate nihil beatae eum ipsa consequuntur itaque doloremque! Consequatur consequuntur nesciunt perferendis in illum excepturi nisi, eius totam ducimus nemo. Libero, accusantium tempore?</p></div></div></section><section class="col-sm-9 col-md-5 col-lg-12 text-center text-lg-left"><div class="row align-items-center justify-content-center"><div class="col-lg-2 text-lg-right"> <img class="layout-image img-circle img-fluid rounded-circle" src="https://craftypixels.com/placeholder-image/200/9/c.png&text=02" alt="Photo placeholder"></div><div class="col-lg-6"><h2 class="layout-title pt-3">Nested</h2><p class="layout-text">Fuga possimus aliquam repudiandae, aspernatur quam velit cupiditate nihil beatae eum ipsa consequuntur itaque doloremque! Consequatur consequuntur nesciunt perferendis in illum excepturi nisi, eius totam ducimus nemo. Libero, accusantium tempore?</p></div></div></section></div></section></article><article id="page-icons" class="page-section"><div class="layout-iconcolumns container py-5"><div class="row text-center"><section class="col-md-4 my-3"><div class="icon layout-icon"><i class="fas fa-anchor"></i></div><h3 class="layout-title">Icon One</h3><p class="layout-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis doloremque possimus dignissimos illo praesentium id consectetur tempora dolorum! Vel sapiente vitae, deserunt minima et rem accusamus?</p></section><section class="col-md-4 my-3"><div class="icon layout-icon"><i class="fas fa-bed"></i></div><h3 class="layout-title">Icon Two</h3><p class="layout-text">Dolorem repudiandae ipsa fugit distinctio modi earum dicta eum tenetur, vel temporibus laudantium totam libero odit ex labore commodi maiores molestias. Quo, hic maxime. Accusantium impedit dolorem cum error?</p></section><section class="col-md-4 my-3"><div class="icon layout-icon"><i class="fas fa-beer"></i></div><h3 class="layout-title">Icon Three</h3><p class="layout-text">Et, alias asperiores? Repellat repudiandae, eum temporibus quibusdam iure, recusandae illo nesciunt, doloremque eligendi maiores tempora eos aliquid minus iusto ipsum facere. Minus, vitae autem dolores vero dolore?</p></section></div></div></article><article id="page-floater" class="page-section vertical-padding"><section class="layout-floater container text-reverse"><div class="row align-items-center justify-content-center"><div class="col-8 col-md-4 img-container"> <img class="layout-image img-fluid" src="https://placeimg.com/640/480/any" alt="Photo Sample"></div><div class="col-10 col-md-6 align-self-center"><div class="my-5 text-center text-md-left pl-md-5"><h2 class="layout-title">Floater Title</h2><p class="layout-text ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga ex delectus sunt natus doloremque praesentium aspernatur, totam tempora officia, sed fugit? Libero voluptatem nulla mollitia, amet dolor iste magni.</p></div></div></div></section></article><article id="page-cards" class="page-section"><section class="layout-cards container"><div class="row justify-content-center"><div class="col-12 col-lg-10"><div class="card-deck"><section class="card my-3"> <img class="layout-image card-img-top img-fluid" src="https://craftypixels.com/placeholder-image/16:9x400/6/C.png&text=Card-1" alt="Photo Sample"><div class="card-body"><h4 class="layout-title card-title">Card Title</h4><p class="layout-text card-text ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint dolorem dolores consequatur ducimus nisi quos saepe error quo praesentium, recusandae aliquam repudiandae.</p></div></section><section class="card my-3"> <img class="layout-image card-img-top img-fluid" src="https://craftypixels.com/placeholder-image/16:9x400/6/C.png&text=Card-2" alt="Photo Sample"><div class="card-body"><h4 class="layout-title card-title">Card Title</h4><p class="layout-text card-text ">Impedit autem ea delectus repudiandae iste commodi a natus aspernatur culpa accusantium, hic, ullam molestiae ratione perspiciatis sit?</p></div></section><section class="card my-3"> <img class="layout-image card-img-top img-fluid" src="https://craftypixels.com/placeholder-image/16:9x400/6/C.png&text=Card-3" alt="Photo Sample"><div class="card-body"><h4 class="layout-title card-title">Card Title</h4><p class="layout-text card-text ">Magnam dolorem consectetur, soluta omnis quis eveniet dignissimos dolores mollitia sunt praesentium quo fugiat? Eius ab in mollitia minus ad quisquam eum!</p></div></section></div></div></div></section></article><footer class="site-footer bg-reverse"><div class="layout-social container py-5 d-flex justify-content-center"><a target="_blank" aria-label="Follow on Twitter" class="text-reverse px-2" href="https://twitter.com/kathirr007"><i class="fab fa-twitter"></i></a><a target="_blank" aria-label="Send a Message" class="text-reverse px-2" href="https://wa.me/8553340791?text=Hi there..."><i class="fab fa-whatsapp-square"></i></a><a target="_blank" aria-label="Like on Facebook" class="text-reverse px-2" href="https://www.facebook.com/kathirr007"><i class="fab fa-facebook"></i></a><a target="_blank" aria-label="Connect with LinkedIn" class="text-reverse px-2" href="https://linkedin.com/in/kathirr007"><i class="fab fa-linkedin"></i></a><a target="_blank" aria-label="Fork on Github" class="text-reverse px-2" href="https://github.com/kathirr007"><i class="fab fa-github"></i></a></div></footer><article id="site-modal" class="modal fade"><div class="modal-dialog modal-lg"><div class="modal-content"> <img data-dismiss="modal" class="img-fluid" src="#" alt="Modal Photo"></div></div></article><script src="js/lib/jquery.min.js"></script><script src="js/lib/bootstrap.bundle.min.js"></script><script src="js/script.min.js"></script></body></html>
\ No newline at end of file
+      "><script xmlns="" type="text/javascript"></script><g fill="#FFF" stroke="#FFF" stroke-miterlimit="10"><path d="M67.53 79.12c-.17.26-.5 1.08-.95 2.45-.46 1.38-1.02 3.1-1.68 5.2-.66 2.07-1.38 4.4-2.14 6.97l-2.37 7.88c-.9 2.68-1.6 5.3-2.4 7.88l-2 6.98-1.5 5.22-.7 2.5c-.3.83-.6 1.75-1.1 2.77-.5 1-1.1 1.97-1.7 2.88-.7.9-1.4 1.67-2.2 2.27-.8.6-1.6.9-2.5.9-1.4 0-2.4-.48-3.1-1.4-.7-.95-1-2.66-1-5.16v-2.26c0-.83.4-2.4 1-4.68.6-2.3 1.3-4.88 2.2-7.76.8-2.9 1.8-5.88 2.7-8.97l2.7-8.4c-2.4 2.6-4.9 5.2-7.6 7.7-2.7 2.6-5.5 4.9-8.3 6.9-2.9 2-5.8 3.7-8.7 5-2.9 1.3-5.7 1.9-8.4 1.9-3.1 0-5.7-.7-7.9-2.1-2.2-1.4-4.1-3.1-5.5-5.3s-2.5-4.7-3.2-7.4C.8 98.5.4 95.7.4 93v-1c0-.3.04-.63.1-.94.24-5 .95-10.1 2.1-15.34 1.2-5.28 2.7-10.5 4.6-15.7 1.9-5.2 4.1-10.3 6.6-15.26C16.4 40 19.1 35.3 22 30.9s6.02-8.5 9.3-12.2c3.3-3.72 6.67-6.92 10.14-9.6 3.46-2.7 6.96-4.8 10.5-6.3 3.5-1.5 7-2.3 10.46-2.3 4 0 7.86 1.1 11.6 3.27C77.7 6 81.2 9.5 84.48 14.4c.74 1.1 1.2 2.2 1.4 3.32.2 1.1.3 2.17.3 3.15 0 2.34-.55 4.2-1.67 5.54-1.1 1.4-2.4 2-4 2-1.4 0-2.7-.7-3.9-2.2-1.2-1.5-2.6-3.6-4-6.3-1.4-2.5-2.9-4.3-4.6-5.4-1.7-1.1-3.5-1.6-5.5-1.6-3.1 0-6.3 1.3-9.8 3.9-3.5 2.6-6.9 5.9-10.3 10.1-3.4 4.2-6.7 9-9.8 14.4-3.1 5.4-5.9 10.9-8.3 16.6-2.4 5.7-4.3 11.2-5.7 16.7-1.4 5.5-2.1 10.4-2.1 14.8 0 1.5.1 3 .3 4.5.2 1.6.6 2.9 1.1 4.2s1.3 2.3 2.3 3.1c1 .8 2.2 1.2 3.6 1.2 1.6 0 3.5-.5 5.5-1.6 2.1-1.1 4.2-2.5 6.4-4.3 2.2-1.8 4.5-3.8 6.7-6s4.4-4.5 6.3-6.8c1.9-2.3 3.7-4.5 5.1-6.6 1.5-2.1 2.6-3.9 3.4-5.5L63 53c.74-1.97 1.7-3.38 2.93-4.2 1.2-.84 2.43-1.26 3.7-1.26.6 0 1.23.1 1.85.3.6.2 1.18.52 1.67.96.5.4.87 1 1.16 1.7.3.7.5 1.5.5 2.5 0 2.5-.2 4.86-.6 7.04-.4 2.2-1 4.3-1.7 6.4-.6 2.05-1.4 4.14-2.2 6.25-.8 2.1-1.6 4.3-2.4 6.6zm83.03 15.28c-1.93 2.6-4.18 5.14-6.74 7.6-2.57 2.48-5.22 4.68-7.94 6.6-2.72 1.92-5.4 3.47-8.03 4.64-2.64 1.17-5 1.75-7.1 1.75s-3.83-.7-5.15-2.1c-1.32-1.4-1.98-3.8-1.98-7.2 0-2.4.36-5.2 1.06-8.4-1.14 2-2.57 4.1-4.28 6.1-1.7 2.1-3.67 4-5.86 5.7-2.2 1.7-4.66 3.1-7.38 4.1-2.72 1-5.68 1.6-8.9 1.6-1.43 0-2.83-.2-4.17-.6-1.4-.4-2.6-1-3.6-1.9-1-.9-1.8-2.1-2.5-3.6-.6-1.5-.9-3.4-.9-5.6l.2-2.4c.2-1.5.7-4 1.7-7.3s2.4-7.6 4.4-12.9c2-5.3 4.7-11.6 8.3-19.1.9-2 1.9-3.4 3.2-4.3 1.2-.9 2.5-1.3 3.9-1.3.6 0 1.2.1 1.9.3.6.1 1.2.4 1.8.8.6.4 1 .9 1.4 1.5.3.5.5 1.2.5 2 0 .5-.1 1-.2 1.4-.3.9-.7 2-1.4 3.4l-2.6 4.94c-1 1.8-2 3.8-3.1 5.92-1.1 2.13-2.1 4.4-3 6.62-.9 2.3-1.7 4.65-2.4 7-.7 2.4-1.1 4.7-1.2 6.9 0 1 .2 1.8.6 2.6.4.8 1.2 1.2 2.2 1.2 2.8 0 5.6-.9 8.2-2.8 2.6-1.87 5-4.2 7.2-6.98 2.2-2.8 4.2-5.8 6-9 1.8-3.2 3.2-6.1 4.4-8.74.8-1.77 1.6-3.67 2.2-5.7.6-2 1.3-3.9 2.1-5.6.7-1.7 1.6-3.16 2.6-4.3.9-1.14 2.1-1.7 3.6-1.7s2.8.6 3.7 1.8c.9 1.2 1.4 2.6 1.4 4.3 0 .9-.3 2.2-.9 3.8-.6 1.6-1.3 3.5-2.2 5.6l-2.9 6.77c-1.1 2.4-2 4.8-2.9 7.3-.9 2.45-1.7 4.9-2.3 7.24-.6 2.4-.9 4.6-.9 6.6 0 1.9 1 2.8 2.9 2.8 1.4 0 3.1-.4 5.1-1.4 2-.9 4.1-2.2 6.3-3.9 2.2-1.7 4.4-3.7 6.6-6 2.2-2.3 4.2-4.74 5.9-7.4l.7 10.6z"></path><path d="M152.6 90.5c-.48 1.2-.95 2.6-1.4 4.18-.47 1.58-.7 3-.7 4.25 0 .78.13 1.4.4 1.87.26.47.76.7 1.5.7.93 0 2.08-.32 3.47-.97 1.38-.65 2.87-1.5 4.47-2.58 1.6-1.06 3.28-2.28 5-3.66 1.74-1.4 3.47-2.9 5.18-4.3 1.7-1.5 3.34-3 4.9-4.5 1.56-1.5 2.96-2.9 4.2-4.1.34-.4.75-.6 1.24-.8.48-.2.9-.3 1.25-.3.9 0 1.6.3 2.2 1.1.6.7.9 1.7.9 2.9 0 1.1-.3 2.3-.9 3.6-.6 1.3-1.7 2.6-3.2 3.9-2.8 3-5.6 5.9-8.5 8.7-2.8 2.7-5.7 5.2-8.5 7.3-2.8 2.1-5.6 3.7-8.4 5-2.8 1.2-5.5 1.8-8.1 1.8-1.8 0-3.3-.3-4.5-.9-1.2-.6-2.1-1.4-2.9-2.4-.7-1-1.2-2.2-1.5-3.5-.3-1.4-.4-2.8-.4-4.3 0-2.6.3-5.2 1-7.9s1.4-5.2 2.3-7.4c1.6-4.1 3.1-8.1 4.7-12.1l4.4-11L170.6 15c.75-2 1.8-3.42 3.15-4.3 1.36-.8 2.7-1.2 4.07-1.2 1.4 0 2.6.4 3.74 1.3 1.1.86 1.7 2.3 1.7 4.27 0 .93-.2 1.92-.55 2.96-.4 1-.8 2.14-1.4 3.33-1.1 2.42-2.4 5.4-3.9 8.94l-5 11.6c-1.7 4.15-3.5 8.5-5.3 13l-5.4 13.2c-1.8 4.28-3.4 8.3-4.9 12.14l-3.9 9.93z"></path><path d="M245.9 76.4c.63-.43 1.2-.77 1.73-1.03.52-.26 1.03-.4 1.5-.4.97 0 1.7.44 2.18 1.3.5.86.8 1.9.8 3.16 0 1.35-.3 2.73-.9 4.13-.6 1.4-1.4 2.58-2.6 3.5-4.7 4.17-8.9 7.97-12.5 11.4-3.7 3.43-7.1 6.38-10.4 8.85-3.3 2.5-6.5 4.4-9.6 5.8-3.1 1.4-6.4 2.1-10 2.1-3.3 0-5.9-.7-7.7-2.2-1.8-1.4-2.7-3.4-2.7-6v-.6c0-.1.1-.4.1-.6.2-1.5.9-3.3 2.1-5.4 1.2-2 2.6-4.1 4.3-6.3s3.5-4.4 5.4-6.6c1.9-2.2 3.6-4.3 5.3-6.3 1.6-2 2.9-3.8 4-5.5 1.1-1.6 1.6-3 1.6-4 0-.6-.2-1.1-.62-1.5-.47-.3-1.2-.5-2.2-.5-1.8 0-3.6.5-5.46 1.4-1.9.9-3.76 2.2-5.6 3.7-1.8 1.6-3.6 3.3-5.32 5.3s-3.3 4.1-4.9 6.2c-1.5 2.2-2.9 4.3-4.2 6.5-1.2 2.2-2.3 4.2-3.2 6l-1.1 2.4-1.5 3.6-1.8 4-1.7 3.9-1.4 3.3c-.4 1-.7 1.6-.9 2-.2.5-.5 1.4-1 2.7l-1.8 4.58-2.1 5.5-2 5.4-1.7 4.58c-.5 1.3-.8 2.18-.9 2.65-.5 1.3-1 2.6-1.6 3.8-.6 1.2-1.25 2.23-2.02 3.14-.76.9-1.64 1.65-2.63 2.2-1 .5-2.1.8-3.3.8-1.6 0-2.9-.4-3.9-1.12-1-.7-1.6-2.2-1.6-4.3 0-1 .1-2.1.4-3.2.2-1.1.6-2.12 1-3.2.3-1.1.8-2.1 1.2-3.1.4-1 .8-2 1.1-2.96 2.3-5.2 4.75-10.4 7.2-15.66s4.8-10.4 7.1-15.5c2.26-5.1 4.35-10.1 6.3-15.1 1.9-4.9 3.5-9.66 4.8-14.2l1.4-3.96c.6-1.7 1.3-3.4 2.1-5s1.7-3.1 2.7-4.3c1-1.2 2.1-1.83 3.2-1.83 1.8 0 3.07.4 3.86 1.2.8.88 1.2 2 1.2 3.6 0 .3-.04.8-.13 1.5-.1.7-.2 1.4-.36 2.15l-.43 2.1c-.1.7-.3 1.2-.4 1.5 1.6-1.76 3.4-3.5 5.28-5.25 1.9-1.73 3.9-3.3 5.9-4.7s4.1-2.6 6.2-3.45c2.1-.9 4.2-1.35 6.3-1.35 1.5 0 2.9.2 4.36.6 1.4.42 2.7 1.03 3.8 1.84 1.17.8 2.08 1.8 2.78 3 .7 1.2 1.05 2.63 1.05 4.24 0 2.13-.56 4.4-1.6 6.8-1.1 2.44-2.4 4.9-4.06 7.3-1.6 2.46-3.37 4.84-5.26 7.15-1.9 2.3-3.6 4.4-5.3 6.3l-4.2 4.9c-1.1 1.3-1.7 2.2-1.72 2.7 0 .6.2 1.1.6 1.5s1.1.6 2 .6c.78 0 1.88-.45 3.3-1.3 1.48-.9 3.5-2.3 6.1-4.36 2.6-2.1 5.96-4.8 9.97-8.3 4-3.46 9-7.8 14.87-13.07z"></path></g></svg> Get Start</a><div class="collapse navbar-collapse" id="myTogglerNav"><div class="navbar-nav ml-auto font-weight-regular text-uppercase"> <a class="nav-item nav-link" href="#page-hero">home</a> <a class="nav-item nav-link" href="#page-multicolumn">columns</a> <a class="nav-item nav-link" href="#page-media">media</a> <a class="nav-item nav-link" href="#page-photogrid">grid</a> <a class="nav-item nav-link" href="#page-carousel">carousel</a> <a class="nav-item nav-link" href="#page-nested">nested</a> <a class="nav-item nav-link" href="#page-icons">icons</a> <a class="nav-item nav-link" href="#page-floater">floater</a> <a class="nav-item nav-link" href="#page-cards">cards</a></div></div></div></nav><section class="layout-hero jumbotron jumbotron-fluid d-flex align-items-center mt-5 text-reverse"><div class="container text-center"><div class="row justify-content-center"><div class="col-11 col-sm-10 col-md-8 animated fadeInUp"><h3 class="page-section-title text-reverse">Gulp4 get Start Boilerplate</h3><p class="page-section-text lead"> A Getting start Gulp Workflow boilerplate to speed up your Front end Development by automating almost everything in your workflow.</p> <a class="btn btn-outline-light" target="_blank" href="https://github.com/kathirr007/gulpGetStart">Github Repo</a></div></div></div></section></header><article id="page-multicolumn" class="page-section vertical-padding"><header class="page-section-header container"><h2 class="page-section-title display-4 pt-4 text-center">Multi-column</h2><p class="page-section-text lead mx-md-5">This layout uses multiple column rules so that how many columns each group takes depends on the width of the browser, by also using the <code>justify-content-center</code> class on the row, using less than 12 columns results in a centered set of columns. The rules used are <code>col-10</code> <code>col-md-6</code> <code>col-lg-4</code> <code>col-xl-3</code>.</p></header><section class="layout-multicolumn container family-sans text-uppercase text-center py-4"><div class="row justify-content-center py-2"><section class="photo-modal mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/6/cba.png&text=one" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/abc.png&text=one" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/6/fed.png&text=two" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/def.png&text=two" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/c/fed.png&text=three" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/cba.png&text=three" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/d/547.png&text=four" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/547.png&text=four" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/e/784.png&text=five" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/784.png&text=five" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/453/874.png&text=six" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/587.png&text=six" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/143/254.png&text=seven" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/dea.png&text=seven" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/789/101.png&text=eight" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/789.png&text=eight" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/980/810.png&text=nine" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/810.png&text=nine" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/457/bfc.png&text=ten" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/bfc.png&text=ten" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/578/fac.png&text=eleven" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/fac.png&text=eleven" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section><section class="photo-modal text-center mb-5 col-10 col-md-6 col-lg-4 col-xl-3"> <a data-toggle="modal" data-target="#site-modal" data-highres="https://craftypixels.com/placeholder-image/16:9x1600/687/420.png&text=twelve" href="#"><img class="layout-image img-fluid rounded" src="https://craftypixels.com/placeholder-image/16:9x400/6/420.png&text=twelve" alt="sample image"></a><h5 class="layout-title mt-1">Text Heading</h5></section></div></section></article><article id="page-media" class="page-section vertical-padding"><header class="page-section-header container text-center"><h2 class="page-section-title display-4 pt-4 text-center">Media</h2><p class="page-section-text lead mx-md-5 ">A quick way two column pattern that shows an image next to a photo. In bootstrap 4, you gain the ability to center elements using flexbox classes. A couple of things to watch out for is that these will always render as single columns and can sometimes be too wide, so these particular media elements are inside an 8 column grid.</p></header><section class="layout-media container my-5"><div class="row justify-content-md-center"><div class="animated-group col-lg-8 invisible"><section class="media mb-4"> <img class="layout-image align-self-center mb-3 mb-sm-0 mr-0 mr-sm-3 img-fluid rounded" src="https://craftypixels.com/placeholder-image/80/6/c.png&text=0-1" alt="Photo Sample"><div class="media-body"><h4 class="layout-title">Media One</h4><p class="layout-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum at voluptatibus incidunt, quia sapiente sequi quis quae atque quas id quam ab nobis iste eius, accusamus et officia laudantium! Ducimus.</p></div></section><section class="media mb-4"> <img class="layout-image align-self-center mb-3 mb-sm-0 mr-0 mr-sm-3 img-fluid rounded" src="https://craftypixels.com/placeholder-image/80/6/c.png&text=0-2" alt="Photo Sample"><div class="media-body"><h4 class="layout-title">Media Two</h4><p class="layout-text">Possimus beatae magnam illum necessitatibus laudantium illo aspernatur ducimus eveniet? Voluptas labore similique aut quam quibusdam eius voluptatum dolores quas molestiae suscipit numquam veniam, nemo totam incidunt ullam pariatur perspiciatis.</p></div></section><section class="media mb-4"> <img class="layout-image align-self-center mb-3 mb-sm-0 mr-0 mr-sm-3 img-fluid rounded" src="https://craftypixels.com/placeholder-image/80/6/c.png&text=0-3" alt="Photo Sample"><div class="media-body"><h4 class="layout-title">Media Three</h4><p class="layout-text">Quis at impedit repellat ipsam ad reiciendis beatae odio explicabo amet fuga nostrum animi nisi unde ab sint, sequi est officia. Maiores, fuga aliquid pariatur dignissimos eum vitae ex suscipit.</p></div></section></div></div></section></article><article id="page-photogrid" class="page-section"><header class="page-section-header text-center container"><h2 class="page-section-title display-4 pt-4">Photo Grid</h2><p class="page-section-text lead mx-md-5 ">A photo grid creates an edge to edge layout with a grid of photos.</p></header><section class="layout-photogrid"><div class="row justify-content-center no-gutters"><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=01" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=02" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=03" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=04" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=05" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=06" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=07" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=08" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=09" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=10" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=11" alt="sample image"></section><section class="photo-modal text-center col-12 col-sm-6 col-md-4 col-lg-3"> <img class="layout-image img-fluid" src="https://craftypixels.com/placeholder-image/16:9x600/6/C.png&text=12" alt="sample image"></section></div></section></article><article id="page-carousel" class="page-section"><section id="layout-carousel" class="layout-carousel carousel slide" data-ride="carousel"><div class="carousel-inner"><ol class="carousel-indicators"><li data-target="#layout-carousel" data-slide-to="0"></li><li data-target="#layout-carousel" data-slide-to="1" class="active"></li><li data-target="#layout-carousel" data-slide-to="2"></li></ol><div class="carousel-item active"> <img class="img-fluid" src="https://craftypixels.com/placeholder-image/16:9x1600/A/B.png&text=one" alt="Photo Sample"></div><div class="carousel-item"> <img class="img-fluid" src="https://craftypixels.com/placeholder-image/16:9x1600/B/C.png&text=two" alt="Photo Sample"></div><div class="carousel-item"> <img class="img-fluid" src="https://craftypixels.com/placeholder-image/16:9x1600/D/E.png&text=three" alt="Photo Sample"></div> <a class="carousel-control-prev" href="#layout-carousel" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"><span class="sr-only">Previous</span></span></a> <a class="carousel-control-next" href="#layout-carousel" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"><span class="sr-only">Previous</span></span></a></div></section></article><article id="page-nested" class="page-section text-reverse"><section class="layout-nested container-fluid vertical-padding"><div class="row align-items-center justify-content-center"><section class="col-sm-9 col-md-5 col-lg-12 text-center text-lg-left"><div class="row align-items-center justify-content-center"><div class="col-lg-2 text-lg-right"> <img class="layout-image img-circle img-fluid rounded-circle py-3" src="https://craftypixels.com/placeholder-image/200/9/c.png&text=01" alt="Photo placeholder"></div><div class="col-lg-6"><h2 class="layout-title pt-3">Nested</h2><p class="layout-text">Fuga possimus aliquam repudiandae, aspernatur quam velit cupiditate nihil beatae eum ipsa consequuntur itaque doloremque! Consequatur consequuntur nesciunt perferendis in illum excepturi nisi, eius totam ducimus nemo. Libero, accusantium tempore?</p></div></div></section><section class="col-sm-9 col-md-5 col-lg-12 text-center text-lg-left"><div class="row align-items-center justify-content-center"><div class="col-lg-2 text-lg-right"> <img class="layout-image img-circle img-fluid rounded-circle" src="https://craftypixels.com/placeholder-image/200/9/c.png&text=02" alt="Photo placeholder"></div><div class="col-lg-6"><h2 class="layout-title pt-3">Nested</h2><p class="layout-text">Fuga possimus aliquam repudiandae, aspernatur quam velit cupiditate nihil beatae eum ipsa consequuntur itaque doloremque! Consequatur consequuntur nesciunt perferendis in illum excepturi nisi, eius totam ducimus nemo. Libero, accusantium tempore?</p></div></div></section></div></section></article><article id="page-icons" class="page-section"><div class="layout-iconcolumns container py-5"><div class="row text-center"><section class="col-md-4 my-3"><div class="icon layout-icon"><i class="fas fa-anchor"></i></div><h3 class="layout-title">Icon One</h3><p class="layout-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis doloremque possimus dignissimos illo praesentium id consectetur tempora dolorum! Vel sapiente vitae, deserunt minima et rem accusamus?</p></section><section class="col-md-4 my-3"><div class="icon layout-icon"><i class="fas fa-bed"></i></div><h3 class="layout-title">Icon Two</h3><p class="layout-text">Dolorem repudiandae ipsa fugit distinctio modi earum dicta eum tenetur, vel temporibus laudantium totam libero odit ex labore commodi maiores molestias. Quo, hic maxime. Accusantium impedit dolorem cum error?</p></section><section class="col-md-4 my-3"><div class="icon layout-icon"><i class="fas fa-beer"></i></div><h3 class="layout-title">Icon Three</h3><p class="layout-text">Et, alias asperiores? Repellat repudiandae, eum temporibus quibusdam iure, recusandae illo nesciunt, doloremque eligendi maiores tempora eos aliquid minus iusto ipsum facere. Minus, vitae autem dolores vero dolore?</p></section></div></div></article><article id="page-floater" class="page-section vertical-padding"><section class="layout-floater container text-reverse"><div class="row align-items-center justify-content-center"><div class="col-8 col-md-4 img-container"> <img class="layout-image img-fluid" src="https://placeimg.com/640/480/any" alt="Photo Sample"></div><div class="col-10 col-md-6 align-self-center"><div class="my-5 text-center text-md-left pl-md-5"><h2 class="layout-title">Floater Title</h2><p class="layout-text ">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga ex delectus sunt natus doloremque praesentium aspernatur, totam tempora officia, sed fugit? Libero voluptatem nulla mollitia, amet dolor iste magni.</p></div></div></div></section></article><article id="page-cards" class="page-section"><section class="layout-cards container"><div class="row justify-content-center"><div class="col-12 col-lg-10"><div class="card-deck"><section class="card my-3 animated fadeInLeft"> <img class="layout-image card-img-top img-fluid" src="https://craftypixels.com/placeholder-image/16:9x400/6/C.png&text=Card-1" alt="Photo Sample"><div class="card-body"><h4 class="layout-title card-title">Card Title</h4><p class="layout-text card-text ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint dolorem dolores consequatur ducimus nisi quos saepe error quo praesentium, recusandae aliquam repudiandae.</p></div></section><section class="card my-3 animated fadeInDown"> <img class="layout-image card-img-top img-fluid" src="https://craftypixels.com/placeholder-image/16:9x400/6/C.png&text=Card-2" alt="Photo Sample"><div class="card-body"><h4 class="layout-title card-title">Card Title</h4><p class="layout-text card-text ">Impedit autem ea delectus repudiandae iste commodi a natus aspernatur culpa accusantium, hic, ullam molestiae ratione perspiciatis sit?</p></div></section><section class="card my-3 animated fadeInRight"> <img class="layout-image card-img-top img-fluid" src="https://craftypixels.com/placeholder-image/16:9x400/6/C.png&text=Card-3" alt="Photo Sample"><div class="card-body"><h4 class="layout-title card-title">Card Title</h4><p class="layout-text card-text ">Magnam dolorem consectetur, soluta omnis quis eveniet dignissimos dolores mollitia sunt praesentium quo fugiat? Eius ab in mollitia minus ad quisquam eum!</p></div></section></div></div></div></section></article><footer class="site-footer bg-reverse"><div class="layout-social container py-5 d-flex justify-content-center"><a target="_blank" aria-label="Follow on Twitter" class="text-reverse px-2" href="https://twitter.com/kathirr007"><i class="fab fa-twitter"></i></a><a target="_blank" aria-label="Send a Message" class="text-reverse px-2" href="https://wa.me/8553340791?text=Hi there..."><i class="fab fa-whatsapp-square"></i></a><a target="_blank" aria-label="Like on Facebook" class="text-reverse px-2" href="https://www.facebook.com/kathirr007"><i class="fab fa-facebook"></i></a><a target="_blank" aria-label="Connect with LinkedIn" class="text-reverse px-2" href="https://linkedin.com/in/kathirr007"><i class="fab fa-linkedin"></i></a><a target="_blank" aria-label="Fork on Github" class="text-reverse px-2" href="https://github.com/kathirr007"><i class="fab fa-github"></i></a></div></footer><article id="site-modal" class="modal fade"><div class="modal-dialog modal-lg"><div class="modal-content"> <img data-dismiss="modal" class="img-fluid" src="#" alt="Modal Photo"></div></div></article><script src="js/lib/jquery.min.js"></script><script src="js/lib/bootstrap.bundle.min.js"></script><script src="js/script.min.js"></script></body></html>
\ No newline at end of file
diff --git a/dist/js/script.min.js b/dist/js/script.min.js
index 2242eed..5555127 100644
--- a/dist/js/script.min.js
+++ b/dist/js/script.min.js
@@ -1 +1 @@
-"use strict";$(function(){var a=55;$(window).on("activate.bs.scrollspy",function(){var a=$(".site-nav").find("a.active").attr("href");"#page-hero"!==a?$("header nav").addClass("inbody"):$("header nav").removeClass("inbody"),$("#page-media .animated-group").css("visibility: hidden;"),"#page-media"===a&&$("#page-media .animated-group").addClass("animated fadeInRight")}),$("#site-modal").on("show.bs.modal",function(a){$(this).find(".modal-content img").attr("src",$(a.relatedTarget).data("highres"))}),$(".navbar-nav a:not(.dropdown-toggle)").click(function(){if(location.pathname.replace(/^\//,"")===this.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var e=$(this.hash);if(e=e.length?e:$("[name=".concat(this.hash.slice(1),"]")),e.length)return $("html,body").animate({scrollTop:e.offset().top-a},500),!1}})});
\ No newline at end of file
+"use strict";$(function(){var a=55;$(window).on("activate.bs.scrollspy",function(){var a=$(".site-nav").find("a.active").attr("href");"#page-hero"!==a?$("header nav").addClass("inbody"):$("header nav").removeClass("inbody"),$("#page-media .animated-group").css("visibility: hidden;"),"#page-media"===a&&$("#page-media .animated-group").addClass(" animated fadeInRight")}),$("#site-modal").on("show.bs.modal",function(a){$(this).find(".modal-content img").attr("src",$(a.relatedTarget).data("highres"))}),$(".navbar-nav a:not(.dropdown-toggle)").click(function(){if(location.pathname.replace(/^\//,"")===this.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var e=$(this.hash);if(e=e.length?e:$("[name=".concat(this.hash.slice(1),"]")),e.length)return $("html,body").animate({scrollTop:e.offset().top-a},500),!1}})});
\ No newline at end of file