diff --git a/dist/index.html b/dist/index.html
index 6369b81..a7fcca3 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.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-bs-spy="scroll" data-bs-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/less-styles.css"><link rel="stylesheet" href="css/styles.css"><title>Gulp4 get Start | Bootstrap 4 Layouts</title></head><body data-bs-spy="scroll" data-bs-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-bs-toggle="collapse" data-bs-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 ms-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-bs-toggle="modal" data-bs-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-bs-toggle="modal" data-bs-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-bs-toggle="modal" data-bs-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-bs-toggle="modal" data-bs-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-bs-toggle="modal" data-bs-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-bs-toggle="modal" data-bs-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-bs-toggle="modal" data-bs-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-bs-toggle="modal" data-bs-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-bs-toggle="modal" data-bs-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-bs-toggle="modal" data-bs-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-bs-toggle="modal" data-bs-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-bs-toggle="modal" data-bs-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 me-0 me-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 me-0 me-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 me-0 me-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 g-0"><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 id="carouselExampleIndicators" class="carousel slide"><div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button></div><div class="carousel-inner"><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></div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span></button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span></button></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 my-4"><section class="layout-cards container"><div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4"><div class="col"><section class="h-100 card rounded-4 animated fadeInLeft"> <img class="layout-image card-img-top rounded-top-4 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></div><div class="col"><section class="h-100 card rounded-4 animated fadeInDown"> <img class="layout-image card-img-top rounded-top-4 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></div><div class="col"><section class="h-100 card rounded-4 animated fadeInRight"> <img class="layout-image card-img-top rounded-top-4 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></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="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script><script src="js/script.min.js"></script></body></html>
\ No newline at end of file
