FM / dist

/var/www/cobraambalaj/node_modules/shards-ui/dist/

/var/www/cobraambalaj/node_modules/shards-ui/dist

Name	Size	Mode	Actions
css/	-	0755	rm
images/	-	0755	rm
js/	-	0755	rm
agency-landing.html	14258	0644	edit dl rm
app-promo.html	16134	0644	edit dl rm
shards-demo.html	77662	0644	edit dl rm

Edit: /var/www/cobraambalaj/node_modules/shards-ui/dist/shards-demo.html (77662B)

<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Shards Demo - A free and modern UI toolkit for web makers</title>
  <meta name="description" content="A free and modern UI toolkit for web makers based on the popular Bootstrap 4 framework.">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/shards.min.css?v=3.0.0">
  <link rel="stylesheet" href="css/shards-demo.min.css?v=3.0.0">
</head>

<img src="images/demo/shard-1-5x-3.png" alt="Shard" class="shard">

<div class="welcome d-flex justify-content-center flex-column">
    <div class="inner-wrapper mt-auto mb-auto">
      <h1 class="slide-in">Shards</h1>
      <p class="slide-in">A modern UI toolkit for web makers.</p>
      <div class="action-links slide-in">
        <a href="https://designrevision.com/downloads/shards" class="btn btn-primary btn-pill align-self-center mr-2">
          <i class="fa fa-download mr-1"></i> Download Now</a>
        <a href="#" data-scroll-to="#introduction" id="scroll-to-content" class="btn btn-outline-light btn-pill align-self-center">Learn More</a>
      </div>
    </div>
    <div class="product-by">
      <a href="https://designrevision.com" target="_blank">
        <p>A Product By</p>
        <img src="https://dgc2qnsehk7ta.cloudfront.net/general/designrevision-logo.png" alt="DesignRevision - Making powerful tools for web professionals">
      </a>
    </div>
  </div>

<div class="page-content">
    
    <div class="content clearfix">

<div id="introduction" class="container mb-5">
        <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
          <p class="lead">Shards is a modern design system based on Bootstrap 4 that comes packed with
            <b>10 extra custom components</b> and
            <b>two pre-built landing pages</b>. It’s also lightweight with its stylesheet weighting only
            <b>~13kb minified and gzipped</b>.</p>
          <div class="social-actions">
            <div class="fb-like" data-href="https://www.facebook.com/designrevision" data-layout="button_count" data-action="like" data-size="large"
              data-show-faces="false" data-share="false"></div>
            <div class="fb-share-button" data-href="https://designrevision.com/download/shards" data-layout="button" data-size="large"
              data-mobile-iframe="true">
              <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdesignrevision.com%2Fdownload%2Fshards&amp;src=sdkpreparse">Share</a>
            </div>
            <a href="https://twitter.com/DesignRevision?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false" data-size="large"
              data-show-screen-name="false">Follow</a>
            <a class="twitter-share-button" href="https://twitter.com/share" data-size="large" data-text="I'm in love with Shards, a free Bootstrap 4 UI kit"
              data-url="https://designrevision.com/downloads/shards" data-hashtags="ui,design,web,bootstrap" data-via="DesignRevision">
              Tweet
            </a>
            <a class="github-button" href="https://github.com/designrevision/shards-ui" data-icon="octicon-star" data-show-count="true"
              data-size="large" aria-label="Star designrevision/s on GitHub">Star</a>
          </div>
        </div>
      </div>

<div id="colors" class="container mb-5">

<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
          <h3 class="mb-4">Colors</h3>
          <p>We've enhanced Bootstrap’s semantic color selection with brighter color variations in order to improve the contrast
            and accessibility.</p>
        </div>

<div class="example col-md-10 ml-auto mr-auto">
          <div class="row">
            <div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
              <div class="color">
                <div class="swatch" style="background: #0067f4"></div>
                <span class="title">Primary</span>
                <span class="hex-value">#0067f4</span>
              </div>
            </div>

<div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
              <div class="color">
                <div class="swatch" style="background: #5A6169"></div>
                <span class="title">Secondary</span>
                <span class="hex-value">#5A6169</span>
              </div>
            </div>

<div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
              <div class="color">
                <div class="swatch" style="background: #17c671"></div>
                <span class="title">Success</span>
                <span class="hex-value">#17c671</span>
              </div>
            </div>

<div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
              <div class="color">
                <div class="swatch" style="background: #00b8d8"></div>
                <span class="title">Info</span>
                <span class="hex-value">#00b8d8</span>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
              <div class="color">
                <div class="swatch" style="background: #ffb400"></div>
                <span class="title">Warning</span>
                <span class="hex-value">#ffb400</span>
              </div>
            </div>

<div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
              <div class="color">
                <div class="swatch" style="background: #c4183c"></div>
                <span class="title">Danger</span>
                <span class="hex-value">#c4183c</span>
              </div>
            </div>

<div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
              <div class="color">
                <div class="swatch" style="background: #e9ecef"></div>
                <span class="title">Light</span>
                <span class="hex-value">#e9ecef</span>
              </div>
            </div>

</div>

<div id="typography" class="container mb-5">
        <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
          <h3 class="mb-4">Typography</h3>
          <p>Shards uses Poppins as its primary typeface for headings and the system’s UI font with a Roboto-first fallback
            (only on non-Apple devices) for the remaining content.</p>
        </div>

<div class="example col-md-10 ml-auto mr-auto">
          <table class="table table-striped table-responsive-md">
            <thead>
              <tr>
                <th>Type</th>
                <th>Example</th>
                <th>Font</th>
                <th>Font Size</th>
                <th>Line Height</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Heading 1</td>
                <td>
                  <h1>ABCabc</h1>
                </td>
                <td>Poppins Semibold</td>
                <td>3.052 REM</td>
                <td>3 REM</td>
              </tr>
              <tr>
                <td>Heading 2</td>
                <td>
                  <h2>ABCabc</h2>
                </td>
                <td>Poppins Medium</td>
                <td>2.441 REM</td>
                <td>2.25 REM</td>
              </tr>
              <tr>
                <td>Heading 3</td>
                <td>
                  <h3>ABCabc</h3>
                </td>
                <td>Poppins Medium</td>
                <td>1.953 REM</td>
                <td>2.25 REM</td>
              </tr>
              <tr>
                <td>Paragraph</td>
                <td>
                  <p>ABCabc</p>
                </td>
                <td>System UI / Roboto</td>
                <td>1 REM</td>
                <td>1.5</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

<div class="py-5">
        
        <div id="icon-packs" class="container mb-5">
          <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto mb-5">
            <h2 class="text-center mb-4">Icon Packs 🦄</h2>
            <p class="text-center">Shards supports by default both
              <b>Material</b> and
              <b>FontAwesome</b> packs. Icons can be placed in almost any element without the need of modifying the kit.</p>
          </div>
        </div>

<div class="icons-example clearfix mb-5">
          <div class="icons-example-wrapper material-icons col-md-6 float-left">
            <div class="material-icons col-lg-3 col-md-3 col-sm-12 d-table text-center ml-auto mr-auto py-5">
              <img class="mb-4" src="images/demo/material-icons.svg" alt="Shards supports the Material Icons pack by default.">
              <h2 class="text-light mb-2">Material Icons</h2>
              <h5 class="text-muted mb-0">Over 900+ Icons</h5>
            </div>
          </div>

<div class="icons-example-wrapper font-awesome col-md-6 float-left">
            <div class="material-icons col-lg-3 col-md-3 col-sm-12 d-table text-center mr-auto ml-auto py-5">
              <img class="mb-4" src="images/demo/fontawesome-icons.svg" alt="Shards supports the FontAwesome Icons pack by default.">
              <h2 class="text-light mb-2">Font Awesome</h2>
              <h5 class="text-muted mb-0">Over 600+ Icons</h5>
            </div>
          </div>
        </div>
      </div>

<div id="forms" class="container mb-5">
        <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
          <h3 class="mb-4">Form Controls</h3>
          <p>All form controls are improved with micro-transitions and shadows that bring depth and improve the overall user
            experience.
          </p>
        </div>

<div class="example col-lg-8 col-md-10 ml-auto mr-auto">
          <h5>Simple Forms</h5>

<div class="row mb-5">
            <div class="col-md-12">
              <form>
                <div class="row">
                  <div class="form-group col-md-6">
                    <label for="form1-name" class="col-form-label">Name</label>
                    <input type="text" class="form-control" id="form1-name" placeholder="Name">
                  </div>
                  <div class="form-group col-md-6">
                    <label for="form1-email" class="col-form-label">Email</label>
                    <input type="email" class="form-control" id="form1-email" placeholder="Email">
                  </div>
                </div>

<div class="row">
                  <div class="col-md-6 mb-4">
                    <label for="form1-password">Password</label>
                    <input type="password" class="form-control" id="form1-password" placeholder="Password" required>
                  </div>
                  <div class="col-md-3 mb-4">
                    <label for="form1-state">State</label>
                    <select class="custom-select" id="form1-state">
                      <option value="" selected>Choose One</option>
                      <option value="1">California</option>
                      <option value="2">Virginia</option>
                      <option value="3">Texas</option>
                      <option value="4">Florida</option>
                    </select>
                  </div>

<h5 class="mb-4">Using Icons</h5>
          <p>Form controls can be stylised by utilizing icons from either supported packs. They can be placed inside default
            or seamlessly integrated input group addons.</p>

<div class="row mb-2">
            <div class="col-12">
              <h6 class="text-muted">Seamless</h6>
              <form>
                <div class="row">
                  <div class="form-group col-md-6">
                    <div class="input-group input-group-seamless">
                      <span class="input-group-prepend">
                        <span class="input-group-text">
                          <i class="fa fa-user"></i>
                        </span>
                      </span>
                      <input type="text" class="form-control" id="form1-username" placeholder="Username">
                    </div>
                  </div>
                  <div class="form-group col-md-6">
                    <div class="input-group input-group-seamless">
                      <input type="password" class="form-control" id="form2-password" placeholder="Password">
                      <span class="input-group-append">
                        <span class="input-group-text">
                          <i class="fa fa-lock"></i>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>

<div class="row mb-2">
            <div class="col-12">
              <h6 class="text-muted">Default</h6>
              <form>
                <div class="row">
                  <div class="form-group col-md-6">
                    <div class="input-group">
                      <span class="input-group-prepend">
                        <span class="input-group-text">
                          <i class="fa fa-user"></i>
                        </span>
                      </span>
                      <input type="text" class="form-control" id="form2-username" placeholder="Username">
                    </div>
                  </div>
                  <div class="form-group col-md-6">
                    <div class="input-group">
                      <input type="password" class="form-control" id="form3-password" placeholder="Password">
                      <span class="input-group-append">
                        <span class="input-group-text">
                          <i class="fa fa-lock"></i>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>

<div class="example col-lg-8 col-md-10 ml-auto mr-auto">
          <div class="container">
            <div class="row">
              <h5 class="mb-4 w-100">Custom Controls</h5>
              <p class="mb-5">The default custom form fields are improved and extended. One of the new additions being the
                <strong>toggle switch</strong> control.</p>
            </div>

<div class="row mb-5">
              <div class="custom-controls-example col-md-3 col-sm-3 col-xs-12 pl-0">
                <h6 class="text-muted mb-2">Checkboxes</h6>
                <fieldset>
                  <div class="custom-control custom-checkbox d-block my-2">
                    <input type="checkbox" class="custom-control-input" id="customCheck1">
                    <label class="custom-control-label" for="customCheck1">Pizza</label>
                  </div>
                </fieldset>

<fieldset>
                  <div class="custom-control custom-checkbox d-block my-2">
                    <input type="checkbox" class="custom-control-input" id="customCheck2" checked>
                    <label class="custom-control-label" for="customCheck2">Pasta</label>
                  </div>
                </fieldset>

<fieldset disabled>
                  <div class="custom-control custom-checkbox d-block my-2">
                    <input type="checkbox" class="custom-control-input" id="customCheck3">
                    <label class="custom-control-label" for="customCheck3">Burgers</label>
                  </div>
                </fieldset>

<fieldset disabled>
                  <div class="custom-control custom-checkbox d-block my-2">
                    <input type="checkbox" class="custom-control-input" id="customCheck4" checked>
                    <label class="custom-control-label" for="customCheck4">Tacos</label>
                  </div>
                </fieldset>
              </div>
              <div class="custom-controls-example col-md-3 col-sm-3 col-xs-12">
                <h6 class="text-muted mb-2">Radio Buttons</h6>
                <fieldset>
                  <div class="custom-control custom-radio d-block my-2">
                    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                    <label class="custom-control-label" for="customRadio1">Cookies</label>
                  </div>
                </fieldset>

<fieldset>
                  <div class="custom-control custom-radio d-block my-2">
                    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" checked>
                    <label class="custom-control-label" for="customRadio2">Pancakes</label>
                  </div>
                </fieldset>

<fieldset disabled>
                  <div class="custom-control custom-radio d-block my-2">
                    <input type="radio" id="customRadio3" name="customRadioDisabled" class="custom-control-input">
                    <label class="custom-control-label" for="customRadio3">Chocolate</label>
                  </div>
                </fieldset>

<fieldset disabled>
                  <div class="custom-control custom-radio d-block my-2">
                    <input type="radio" id="customRadio4" name="customRadioDisabled" class="custom-control-input" checked>
                    <label class="custom-control-label" for="customRadio4">Pancakes</label>
                  </div>
                </fieldset>
              </div>
              <div class="custom-controls-example col-md-4 col-sm-4 col-xs-12 pl-5">
                <h6 class="text-muted mb-1">Toggles</h6>
                <fieldset>
                  <div class="custom-control custom-toggle d-block my-2">
                    <input type="checkbox" id="customToggle1" name="customToggle1" class="custom-control-input">
                    <label class="custom-control-label" for="customToggle1">Rockets</label>
                  </div>
                </fieldset>

<fieldset>
                  <div class="custom-control custom-toggle d-block my-2">
                    <input type="checkbox" id="customToggle2" name="customToggle2" class="custom-control-input" checked>
                    <label class="custom-control-label" for="customToggle2">Lasers</label>
                  </div>
                </fieldset>

<fieldset disabled>
                  <div class="custom-control custom-toggle d-block my-2">
                    <input type="checkbox" id="customToggle4" name="customToggle4" class="custom-control-input" checked>
                    <label class="custom-control-label" for="customToggle4">Ultron</label>
                  </div>
                </fieldset>
              </div>
              <div class="custom-controls-example col-md-2 col-sm-2 col-xs-12 pl-3">
                <h6 class="text-muted mb-1">Sizes</h6>

<fieldset>
                  <div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
                    <input type="checkbox" id="customToggle1sm" name="customToggle1sm" class="custom-control-input">
                    <label class="custom-control-label" for="customToggle1sm">Rockets</label>
                  </div>
                </fieldset>

<fieldset>
                  <div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
                    <input type="checkbox" id="customToggle2sm" name="customToggle2sm" class="custom-control-input" checked>
                    <label class="custom-control-label" for="customToggle2sm">Lasers</label>
                  </div>
                </fieldset>

<fieldset disabled>
                  <div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
                    <input type="checkbox" id="customToggle4" name="customToggle4" class="custom-control-input" checked>
                    <label class="custom-control-label" for="customToggle4">Ultron</label>
                  </div>
                </fieldset>
              </div>
            </div>
            <div class="row mb-5">
              <div class="col-md-6 pl-0 custom-dropdown-example">
                <h6 class="text-muted mb-3">Custom Dropdown</h6>
                <fieldset>
                  <select class="custom-select w-100" required>
                    <option value="">Select Favourite Number</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                  </select>
                </fieldset>
              </div>

<div class="col-md-6 pl-0">
                <h6 class="text-muted mb-3">Custom File Input</h6>
                <fieldset>
                  <div class="custom-file w-100">
                    <input type="file" class="custom-file-input" id="customFile">
                    <label class="custom-file-label" for="customFile">Choose file...</label>
                  </div>
                </fieldset>
              </div>
            </div>
          </div>

<div class="row">
            <div class="col-12">
              <h5 class="mb-4">Validation</h5>
              <p class="mb-4">Form validation is also improved to match the new overall form feel, while following the same interaction principles
                for consistency.</p>
              <form class="was-validated">
                <div class="row">
                  <div class="col-md-6 mb-3">
                    <label for="form-2-first-name">First name</label>
                    <input type="text" class="form-control is-valid" id="form-2-first-name" placeholder="First name" value="Catalin" required>
                  </div>
                  <div class="col-md-6 mb-3">
                    <label for="form-2-last-name">Last name</label>
                    <input type="text" class="form-control is-valid" id="form-2-last-name" placeholder="Last name" value="Vasile" required>
                  </div>
                </div>

<div class="row">
                  <div class="col-md-6 mb-3">
                    <label for="form-2-city">City</label>
                    <input type="text" class="form-control is-invalid" id="form-2-city" placeholder="City" required>
                    <div class="invalid-feedback">
                      Invalid city
                    </div>
                  </div>
                  <div class="col-md-3 mb-3">
                    <label for="form-2-state">State</label>
                    <input type="text" class="form-control is-invalid" id="form-2-state" placeholder="State" required>
                    <div class="invalid-feedback">
                      Invalid state
                    </div>
                  </div>
                  <div class="col-md-3 mb-3">
                    <label for="form-2-zip">Zip</label>
                    <input type="text" class="form-control is-invalid" id="form-2-zip" placeholder="Zip" required>
                    <div class="invalid-feedback">
                      Invalid ZIP code
                    </div>
                  </div>
                </div>

<div class="row mb-2">
                  <div class="col-md-6 mb-3">
                    <label for="form-file-4">Photo ID Scan</label>
                    <div class="custom-file w-100">
                      <input type="file" class="custom-file-input" id="customFile2" required>
                      <label class="custom-file-label" for="customFile2">Choose file...</label>
                    </div>
                  </div>
                  <div class="col-md-6 mb-3">
                    <label class="d-block" for="form-3-select">Favourite Number</label>
                    <select class="custom-select w-100" id="form-3-select" required>
                      <option value="">Invalid select menu</option>
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                    </select>
                  </div>
                </div>

<div class="row">
                  <div class="col-md-6">
                    <div class="custom-control custom-checkbox mb-3">
                      <input type="checkbox" class="custom-control-input" id="form-3-terms" required>
                      <label class="custom-control-label" for="form-3-terms">Do you agree to our terms & conditions?</label>
                    </div>
                  </div>

<div class="col-md-6">
                    <div class="custom-controls-stacked d-block">
                      <div class="custom-control custom-radio mb-1">
                        <input type="radio" id="radioStacked1" name="radio-stacked" class="custom-control-input" required>
                        <label class="custom-control-label" for="radioStacked1">Subscribe me</label>
                      </div>
                      <div class="custom-control custom-radio">
                        <input type="radio" id="customRadio5" name="radio-stacked" class="custom-control-input" required>
                        <label class="custom-control-label" for="customRadio5">Don't subscribe me</label>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

<div id="sliders" class="container mb-5" style="padding-bottom: 1px">
        <div class="my-5">
          <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
            <h3 class="mb-4">Sliders</h3>
            <p>Sliders are also a new custom control and can be integrated almost anywhere with minimal markup
              <i>(a single element)</i> and extended customisation options via JavaScript.</p>
          </div>

<div id="datepickers" class="container">
        <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
          <h3 class="mb-4">Datepickers</h3>
          <p>Datepickers are also available and similar to slider controls they are
            <strong>very easy to create</strong>, being based on a single input element. Datepickers are customisable as well, letting
            you create complex configurations with range selections for example.</p>
        </div>

<div class="example col-lg-8 col-md-10 ml-auto mr-auto">
          <div class="row">
            <div class="col-lg-4 col-md-12">
              <div class="form-group">
                <label for="datepicker-example-1">Date of Birth</label>
                <div class="input-group with-addon-icon-left">
                  <input type="text" class="form-control" id="datepicker-example-1" placeholder="Date of Birth">
                  <span class="input-group-append">
                    <span class="input-group-text">
                        <i class="fa fa-calendar"></i>
                    </span>
                  </span>
                </div>
              </div>
            </div>
            <div class="col-lg-8 col-md-12">
              <div class="form-group">
                <label>Employment Period</label>
                <div class="input-daterange input-group" id="datepicker-example-2">
                  <span class="input-group-prepend">
                    <span class="input-group-text">
                      <i class="fa fa-calendar"></i>
                    </span>
                  </span>
                  <input type="text" class="input-sm form-control" name="start" placeholder="Start Date"/>
                  <span class="input-group-middle"><span class="input-group-text">-</span></span>
                  <input type="text" class="input-sm form-control" name="end" placeholder="End Date" />
                  <span class="input-group-append">
                    <span class="input-group-text">
                      <i class="fa fa-calendar"></i>
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

<div id="cards" class="container mb-2" style="padding-bottom: 1px">
        <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
          <h3 class="mb-4">Cards</h3>
          <p>We wanted cards to stand out and bring depth without changing their original structure. All of this while allowing
            them to play well with the other components.</p>
        </div>

<div class="example col-md-12 ml-auto mr-auto">
          <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
              <div class="card">
                <img class="card-img-top" src="images/demo/stock-photos/3.jpg" alt="Card image cap">
                <div class="card-body">
                  <h4 class="card-title">Sample Card Title</h4>
                  <p class="card-text">He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed
                    in his length hid...</p>
                  <a href="#" class="btn btn-primary">Read More</a>
                </div>
              </div>
            </div>

<div class="col-lg-4 col-md-6 col-sm-12 mb-4 sm-hidden">
              <div class="card">
                <img class="card-img-top" src="images/demo/stock-photos/1.jpg" alt="Card image cap">
                <div class="card-body">
                  <h4 class="card-title">Sample Card Title</h4>
                  <p class="card-text">He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed
                    in his length hid...</p>
                  <a href="#" class="btn btn-primary">Read More</a>
                </div>
              </div>
            </div>

<div class="col-lg-4 col-md-6 col-sm-12 mb-4 sm-hidden">
              <div class="card">
                <img class="card-img-top" src="images/demo/stock-photos/2.jpg" alt="Card image cap">
                <div class="card-body">
                  <h4 class="card-title">Sample Card Title</h4>
                  <p class="card-text">He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed
                    in his length hid...</p>
                  <a href="#" class="btn btn-primary">Read More</a>
                </div>
              </div>
            </div>

<div class="col-lg-4 col-md-6 col-sm-12 d-none sm-hidden last">
              <div class="card">
                <img class="card-img-top" src="images/demo/stock-photos/2.jpg" alt="Card image cap">
                <div class="card-body">
                  <h4 class="card-title">Sample Card Title</h4>
                  <p class="card-text">He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed
                    in his length hid...</p>
                  <a href="#" class="btn btn-primary">Read More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

<div id="buttons" class="container">
        <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
          <h3 class="mb-4">Buttons</h3>
          <p>Two new button modifiers are introduced in Shards that allow you to create
            <strong>pill-shaped</strong> and
            <strong>squared</strong> buttons for both filled and outlined variations for an extended range of possible combinations.</p>
        </div>

<div class="example example-buttons">
          <div class="col-md-9 ml-auto mr-auto">
            <h5 class="text-muted mb-4">Normal</h5>
          </div>

<div class="row mb-4">
            <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
              <button type="button" class="btn btn-primary">Primary</button>
              <button type="button" class="btn btn-secondary">Secondary</button>
              <button type="button" class="btn btn-success">Success</button>
              <button type="button" class="btn btn-danger">Danger</button>
              <button type="button" class="btn btn-warning">Warning</button>
              <button type="button" class="btn btn-info">Info</button>
              <button type="button" class="btn btn-light">Light</button>
              <button type="button" class="btn btn-dark">Dark</button>
            </div>
          </div>

<div class="mb-5 row">
            <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
              <button type="button" class="btn btn-outline-primary">Primary</button>
              <button type="button" class="btn btn-outline-secondary">Secondary</button>
              <button type="button" class="btn btn-outline-success">Success</button>
              <button type="button" class="btn btn-outline-danger">Danger</button>
              <button type="button" class="btn btn-outline-warning">Warning</button>
              <button type="button" class="btn btn-outline-info">Info</button>
              <button type="button" class="btn btn-outline-light">Light</button>
              <button type="button" class="btn btn-outline-dark">Dark</button>
            </div>
          </div>

<div class="col-md-9 ml-auto mr-auto">
            <h5 class="text-muted mb-4">Squared</h5>
          </div>

<div class="mb-4 row">
            <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
              <button type="button" class="btn btn-primary btn-squared">Primary</button>
              <button type="button" class="btn btn-secondary btn-squared">Secondary</button>
              <button type="button" class="btn btn-success btn-squared">Success</button>
              <button type="button" class="btn btn-danger btn-squared">Danger</button>
              <button type="button" class="btn btn-warning btn-squared">Warning</button>
              <button type="button" class="btn btn-info btn-squared">Info</button>
              <button type="button" class="btn btn-light btn-squared">Light</button>
              <button type="button" class="btn btn-dark btn-squared">Dark</button>
            </div>
          </div>

<div class="mb-5 row">
            <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
              <button type="button" class="btn btn-outline-primary btn-squared">Primary</button>
              <button type="button" class="btn btn-outline-secondary btn-squared">Secondary</button>
              <button type="button" class="btn btn-outline-success btn-squared">Success</button>
              <button type="button" class="btn btn-outline-danger btn-squared">Danger</button>
              <button type="button" class="btn btn-outline-warning btn-squared">Warning</button>
              <button type="button" class="btn btn-outline-info btn-squared">Info</button>
              <button type="button" class="btn btn-outline-light btn-squared">Light</button>
              <button type="button" class="btn btn-outline-dark btn-squared">Dark</button>
            </div>
          </div>

<div class="col-md-9 ml-auto mr-auto">
            <h5 class="text-muted mb-4">Pill-shaped</h5>
          </div>

<div class="mb-4 row">
            <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
              <button type="button" class="btn btn-primary btn-pill">Primary</button>
              <button type="button" class="btn btn-secondary btn-pill">Secondary</button>
              <button type="button" class="btn btn-success btn-pill">Success</button>
              <button type="button" class="btn btn-danger btn-pill">Danger</button>
              <button type="button" class="btn btn-warning btn-pill">Warning</button>
              <button type="button" class="btn btn-info btn-pill">Info</button>
              <button type="button" class="btn btn-light btn-pill">Light</button>
              <button type="button" class="btn btn-dark btn-pill">Dark</button>
            </div>
          </div>

<div class="mb-5 row">
            <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
              <button type="button" class="btn btn-outline-primary btn-pill">Primary</button>
              <button type="button" class="btn btn-outline-secondary btn-pill">Secondary</button>
              <button type="button" class="btn btn-outline-success btn-pill">Success</button>
              <button type="button" class="btn btn-outline-danger btn-pill">Danger</button>
              <button type="button" class="btn btn-outline-warning btn-pill">Warning</button>
              <button type="button" class="btn btn-outline-info btn-pill">Info</button>
              <button type="button" class="btn btn-outline-light btn-pill">Light</button>
              <button type="button" class="btn btn-outline-dark btn-pill">Dark</button>
            </div>
          </div>

<div class="col-md-9 ml-auto mr-auto">
            <h5 class="text-muted mb-4">Using Icons</h5>
          </div>

<div class="mb-4 row">
            <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
              <button type="button" class="btn btn-pill btn-primary">
                <i class="fa fa-download mr-1"></i> Download</button>
              <button type="button" class="btn btn-pill btn-secondary">
                <i class="fa fa-lock mr-1"></i>Authorize</button>
              <button type="button" class="btn btn-pill btn-success">
                <i class="fa fa-check mr-1"></i>Success</button>
              <button type="button" class="btn btn-pill btn-danger">
                <i class="fa fa-remove mr-1"></i>Delete</button>
              <button type="button" class="btn btn-pill btn-info">
                <i class="fa fa-envelope mr-1"></i> Message</button>
              <button type="button" class="btn btn-pill btn-warning">
                <i class="fa fa-star mr-1"></i>Favourite</button>
            </div>
          </div>

<div class="mb-5 row">
            <div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
              <button type="button" class="btn btn-pill btn-outline-primary">
                <i class="fa fa-download mr-1"></i> Download</button>
              <button type="button" class="btn btn-pill btn-outline-secondary">
                <i class="fa fa-lock mr-1"></i>Authorize</button>
              <button type="button" class="btn btn-pill btn-outline-success">
                <i class="fa fa-check mr-1"></i>Success</button>
              <button type="button" class="btn btn-pill btn-outline-danger">
                <i class="fa fa-remove mr-1"></i>Delete</button>
              <button type="button" class="btn btn-pill btn-outline-info">
                <i class="fa fa-envelope mr-1"></i> Message</button>
              <button type="button" class="btn btn-pill btn-outline-warning">
                <i class="fa fa-star mr-1"></i>Favourite</button>
            </div>
          </div>
        </div>
      </div>

<div id="progress-bars" class="container">
        <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
          <h3 class="mb-4">Progress Bars</h3>

<p>In addition to the default styles Shards allows you to adjust the width and add labels to your progress bars.</p>
        </div>

<div class="example col-lg-9 col-md-12 ml-auto mr-auto px-0">
          <div class="row">
            <div class="col-md-6 pb-widths">
              <h6 class="text-muted">Widths</h6>
              <div class="progress progress-sm mb-4">
                <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="progress mb-4">
                <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="progress progress-lg">
                <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>

<div class="col-md-6">
              <h6 class="text-muted">Labels</h6>
              <div class="progress mb-4">
                <div class="progress-bar bg-success" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
              </div>

<div id="modals" class="container">
        <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
          <h3 class="mb-4">Modals</h3>
          <p>Display confirmation messages, forms or any type of content to your users using beautiful and non-disruptive modals.</p>
        </div>

<div class="mb-5">
          
          <button type="button" class="btn btn-primary btn-pill btn-lg d-table ml-auto mr-auto" data-toggle="modal" data-target="#exampleModal">
            ✋ Click Me!
          </button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">🤔 Think about it</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  Triggering this action might affect you later.
                  <strong>Do you still want to continue?</strong>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Nope</button>
                  <button type="button" class="btn btn-success" data-dismiss="modal">Yep</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

<div id="badges" class="container">
        <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
          <h3 class="mb-4">Badges</h3>
          <p>Badges are similar to buttons and are available in all theme colors with filled and outlined modes and also with
            three variation styles: rounded, pill-shaped and squared.</p>
        </div>

<div class="example col-md-10 ml-auto mr-auto mb-5 pb-4">
          <div class="row mb-3">
            <div class="d-table ml-auto mr-auto">
              <span class="badge mr-3 badge-primary">Primary</span>
              <span class="badge mr-3 badge-outline-secondary">Secondary</span>
              <span class="badge mr-3 badge-pill badge-success">Success</span>
              <span class="badge mr-3 badge-pill badge-outline-danger">Danger</span>
              <span class="badge mr-3 badge-squared badge-warning">Warning</span>
              <span class="badge mr-3 badge-squared badge-outline-info">Info</span>
            </div>
          </div>
        </div>
      </div>

<div id="popups-popovers" class="container">
        <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
          <h3 class="mb-4">Tooltips & Popovers</h3>
          <p>Don't let your uses guess by attaching tooltips and popoves to any element. Just make sure you enable them first
            via JavaScript.</p>
        </div>

<div class="col-lg-6 col-md-12 mb-3">
                <h5 class="text-muted mb-4 d-block">Tooltips</h5>

<button type="button" class="btn btn-primary mr-1" data-toggle="tooltip" data-placement="top" title="I'm on top! 👆">Top</button>

<button type="button" class="btn btn-primary mr-1" data-toggle="tooltip" data-placement="bottom" title="I'm at the bottom! 👇">
                  Bottom
                </button>
                
                <button type="button" class="btn btn-primary mr-1" data-toggle="tooltip" data-placement="Left" title="I'm on the left! 👈">
                  Left
                </button>

<button type="button" class="btn btn-primary mr-1" data-toggle="tooltip" data-placement="right" title="I'm on the right! 👉">
                  Right
                </button>
              </div>

<div class="col-lg-6 col-md-12">
                <h5 class="text-muted mb-4">Popovers</h5>
                
                <button type="button" class="btn btn-secondary mr-1" data-container="body" data-toggle="popover" data-placement="top" data-content="On top of things!">
                  Top
                </button>

<button type="button" class="btn btn-secondary mr-1" data-container="body" data-toggle="popover" data-placement="bottom"
                  data-content="🙃 I'm down here!">
                  Bottom
                </button>

<button type="button" class="btn btn-secondary mr-1" data-container="body" data-toggle="popover" data-placement="left" data-content="Oh! What's left then? 🤔">
                  Left
                </button>

<button type="button" class="btn btn-secondary mr-1" data-container="body" data-toggle="popover" data-placement="right" data-content="I'm always right! 😎">
                  Right
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

<div id="alerts">
        <div class="container">
          <div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
            <h3 class="mb-4">Alerts</h3>
          </div>
        </div>

<div class="mb-5">
          
          <div class="alert alert-info alert-dismissible fade show" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <i class="fa fa-info"></i>
            <strong>Hey!</strong> I think you should know this.
          </div>

<div class="alert alert-success alert-dismissible fade show" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <i class="fa fa-check"></i>
            <strong>Yay!</strong> Everything is fine!
          </div>

<div class="alert alert-warning alert-dismissible fade show" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <i class="fa fa-warning"></i>
            <strong>Oops!</strong> Something might be wrong
          </div>

<div class="alert alert-danger alert-dismissible fade show" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <i class="fa fa-exclamation-circle"></i>
            <strong>On no!</strong> Something really bad happened!
          </div>
        </div>
      </div>
    </div>

<div id="navbars" class="my-5">
      <div class="section-title container ml-auto mr-auto">
        <div class="col-lg-8 col-md-10 ml-auto mr-auto mb-5">
          <h3 class="mb-4">Navbars</h3>
          <p>Create beautiful, bold and responsive navbars using the same Bootstrap 4 markup structure you already know and
            love.
          </p>
        </div>
      </div>

<div class="example">
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
          <img src="images/demo/shards-logo.svg" alt="Example Navbar 1" class="mr-2" height="30">
          <a class="navbar-brand" href="#">Shards</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-1" aria-controls="navbarNavDropdown-1"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown-1">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  Services
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Design</a>
                  <a class="dropdown-item" href="#">Development</a>
                  <a class="dropdown-item" href="#">Marketing</a>
                </div>
              </li>
            </ul>

<li class="nav-item">
                <a class="nav-link" href="#">
                  <i class="fa fa-github"></i>
                </a>
              </li>
            </ul>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg navbar-dark bg-secondary mb-4">
          <img src="images/demo/shards-logo.svg" alt="Example Navbar 1" class="mr-2" height="30">
          <a class="navbar-brand" href="#">Shards</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-2" aria-controls="navbarNavDropdown-2"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse mr-auto" id="navbarNavDropdown-2">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink-2" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  Services
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-2">
                  <a class="dropdown-item" href="#">Design</a>
                  <a class="dropdown-item" href="#">Development</a>
                  <a class="dropdown-item" href="#">Marketing</a>
                </div>
              </li>
            </ul>

<li class="nav-item">
                <a class="nav-link" href="#">
                  <i class="fa fa-github"></i>
                </a>
              </li>
            </ul>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg navbar-dark bg-success mb-4">
          <img src="images/demo/shards-logo.svg" alt="Example Navbar 1" class="mr-2" height="30">
          <a class="navbar-brand" href="#">Shards</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-3" aria-controls="navbarNavDropdown-3"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse mr-auto" id="navbarNavDropdown-3">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink-3" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  Services
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-3">
                  <a class="dropdown-item" href="#">Design</a>
                  <a class="dropdown-item" href="#">Development</a>
                  <a class="dropdown-item" href="#">Marketing</a>
                </div>
              </li>
            </ul>

<li class="nav-item">
                <a class="nav-link" href="#">
                  <i class="fa fa-github"></i>
                </a>
              </li>
            </ul>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg navbar-dark bg-warning mb-4">
          <img src="images/demo/shards-logo.svg" alt="Example Navbar 1" class="mr-2" height="30">
          <a class="navbar-brand" href="#">Shards</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-4" aria-controls="navbarNavDropdown-4"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown-4">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink-4" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  Services
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-4">
                  <a class="dropdown-item" href="#">Design</a>
                  <a class="dropdown-item" href="#">Development</a>
                  <a class="dropdown-item" href="#">Marketing</a>
                </div>
              </li>
            </ul>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>

<li class="nav-item">
                <a class="nav-link" href="#">
                  <i class="fa fa-github"></i>
                </a>
              </li>
            </ul>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg navbar-dark bg-danger mb-4">
          <img src="images/demo/shards-logo.svg" alt="Example Navbar 1" class="mr-2" height="30">
          <a class="navbar-brand" href="#">Shards</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-5" aria-controls="navbarNavDropdown-5"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse mr-auto" id="navbarNavDropdown-5">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink-5" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  Services
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-5">
                  <a class="dropdown-item" href="#">Design</a>
                  <a class="dropdown-item" href="#">Development</a>
                  <a class="dropdown-item" href="#">Marketing</a>
                </div>
              </li>
            </ul>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>

<li class="nav-item">
                <a class="nav-link" href="#">
                  <i class="fa fa-github"></i>
                </a>
              </li>
            </ul>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
          <img src="images/demo/shards-logo.svg" alt="Example Navbar 1" class="mr-2" height="30">
          <a class="navbar-brand" href="#">Shards</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-6" aria-controls="navbarNavDropdown-6"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse mr-auto" id="navbarNavDropdown-6">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink-6" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  Services
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-6">
                  <a class="dropdown-item" href="#">Design</a>
                  <a class="dropdown-item" href="#">Development</a>
                  <a class="dropdown-item" href="#">Marketing</a>
                </div>
              </li>
            </ul>

<li class="nav-item">
                <a class="nav-link" href="#">
                  <i class="fa fa-github"></i>
                </a>
              </li>
            </ul>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
          <img src="images/demo/shards-logo-black.svg" alt="Example Navbar 1" class="mr-2" height="30">
          <a class="navbar-brand" href="#">Shards</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown-7" aria-controls="navbarNavDropdown-7"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown-7">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="https://designrevision.com" id="navbarDropdownMenuLink-7" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  Services
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-7">
                  <a class="dropdown-item" href="#">Design</a>
                  <a class="dropdown-item" href="#">Development</a>
                  <a class="dropdown-item" href="#">Marketing</a>
                </div>
              </li>
            </ul>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>

<div id="extras" class="mb-5 py-5">
      <div class="section-title container ml-auto mr-auto">
        <div class="col-lg-8 col-md-10 ml-auto mr-auto mb-5">
          <h1 class="mb-2 text-center">🎁</h1>
          <h3 class="mb-4 text-center">Extras</h3>
          <p class="text-center">That's not all! We've prepared
            <b>two free landing pages</b> built using mostly Shards and some custom styling to help you start your next project
            faster.
          </p>
        </div>
      </div>
      <div class="container">
        <div class="row">

<div class="col-md-4 mb-4 ml-auto">
            <div class="card">
              <img class="card-img-top" src="images/demo/shards-app-demo-page-demo.jpg" alt="Shards App Promo - Demo Landing Page">
              <div class="card-body py-3">
                <h6 class="text-center text-muted m-0">Mobile App Promo</h6>
              </div>
            </div>
            <a class="d-table ml-auto mr-auto mt-4" href="https://designrevision.com/demo/shards/extra/app-promo.html">
              <button class="btn btn-outline-primary btn-pill">View Demo</button>
            </a>
          </div>

<div class="col-md-4 mb-4 mr-auto">
            <div class="card">
              <img class="card-img-top" src="images/demo/shards-agency-landing-page-demo.jpg" alt="Shards Agency - Demo Landing Page">
              <div class="card-body py-3">
                <h6 class="text-center text-muted m-0">Agency Landing Page</h6>
              </div>
            </div>
            <a class="d-table ml-auto mr-auto mt-4" href="https://designrevision.com/demo/shards/extra/agency-landing.html">
              <button class="btn btn-outline-primary btn-pill">View Demo</button>
            </a>
          </div>
        </div>
      </div>
    </div>

<div id="documentation" class="bg-white">
      <div class="section-title container ml-auto mr-auto py-5">
        <div class="col-lg-8 col-md-10 ml-auto mr-auto py-5">
          <h1 class="mb-2 text-center">📘</h1>
          <h3 class="mb-4 text-center">Read the Docs</h3>
          <p class="text-center">Make sure you check out the documentation and learn more about all the available components and how to use them.</p>
          <a class="d-table ml-auto mr-auto" href="https://designrevision.com/docs/shards">
            <button class="btn btn-pill btn-outline-primary">
              <i class="fa fa-book mr-1"></i> Documentation</button>
          </a>
        </div>
      </div>
    </div>

<div class="footer-cta bg-dark">
      <div class="container my-5">
        <div class="py-5">
          <div class="text-center">
            <h1>🛠</h1>
            <h2 class="text-white">Build Something!</h2>
            <p class="text-muted col-lg-8 col-md-10 ml-auto mr-auto">What are you waiting for?
              <b>
                <u>Go ahead and build something!
                </u>
              </b> Can't wait to see what you come up with! If you like Shards, make sure you share it with your friends too!</p>
          </div>

<div class="share d-table d-sm-flex mx-auto justify-content-center mt-5">
            <a href="https://twitter.com/intent/tweet?url=https://designrevision.com/download/shards&text=I%27m+in+love+with+Shards%2C+a+free+Bootstrap+4+UI+kit+by+%40DesignRevision+%23ui+%23design+%23free+%23bootstrap"
              class="btn btn-pill d-table d-sm-inline-block mx-auto mx-sm-2 btn-primary mr-4 mb-3" title="Share Shards on Twitter">
              <i class="fa fa-twitter mr-1"></i> Share on Twitter</a>
            <a href="https://www.facebook.com/sharer/sharer.php?u=https://designrevision.com/download/shards" class="btn btn-pill d-table d-sm-inline-block mx-auto mx-sm-2 btn-primary mr-4 mb-3"
              title="Share on Facebook">
              <i class="fa fa-facebook mr-1"></i> Share on Facebook</a>
            <a href="https://www.linkedin.com/shareArticle?mini=true&title=Shards+%E2%80%94+A+free+and+modern+Bootstrap+4+UI+kit&url=https://designrevision.com/download/shards"
              class="btn btn-pill d-table d-sm-inline-block mx-auto mx-sm-2 btn-primary mr-4 mb-3" title="Share on LinkedIn">
              <i class="fa fa-linkedin mr-1"></i> Share on LinkedIn</a>
          </div>
        </div>
      </div>
    </div>

<footer class="main-footer py-5">
      <p class="text-muted text-center small p-0 mb-4">&copy; Copyright 2018 — DesignRevision</p>
      <div class="social d-table mx-auto">
        <a class="twitter mx-3 h4 d-inline-block text-secondary" href="https://twitter.com/DesignRevision" target="_blank">
          <i class="fa fa-twitter"></i>
          <span class="sr-only">View our Twitter Profile</span>
        </a>
        <a class="facebook mx-3 h4 d-inline-block text-secondary" href="https://www.facebook.com/designrevision" target="_blank">
          <i class="fa fa-facebook"></i>
          <span class="sr-only">View our Facebook Profile
            <span>
        </a>
        <a class="github mx-3 h4 d-inline-block text-secondary" href="https://github.com/designrevision" target="_blank">
          <i class="fa fa-github"></i>
          <span class="sr-only">View our GitHub Profile</span>
        </a>
      </div>
    </footer>
  </div>

<div id="fb-root"></div>
  <script>
    (function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s);
      js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10&appId=1662270373824826";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

</script>
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
    crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="js/shards.min.js"></script>
  <script src="js/demo.min.js"></script>

</body>

</html>

cmd: