TKW 3.0

TKW 3.0 Demo Template

by kidsysco

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">TKW v 3.0</a>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <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="#AboutUs">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#GetStarted">Get Started</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#Connect">Connect</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#RolePlayingNotes">Role Playing Notes</a>
      </li>
    </ul>
  </div>
</nav>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">


      <img class="first-slide" src="https://i.imgur.com/bicXcrs.jpg"...

CSS

/* your custom CSS */

</style> <!-- access to the HEAD element --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style>
/* GLOBAL STYLES
-------------------------------------------------- */


/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */


/* Carousel base class */

.carousel {
  margin-bottom: 4rem;
}


/* Since positioning the image, we need to help out the caption */

.carousel-caption {
  z-index: 10;
  bottom: 3rem;
  display: block!important;
  min-width: 150px;
}


/* Declare heights because of positioning of img element */

.carousel-item {
  height: 32rem;
  background-color: #777;
}

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 44rem;
}

.carousel-item h1 {
  font-size: 3.3em;
  margin: 0;
}


/* MARKETING CONTENT
-------------------------------------------------- */


/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
}

.marketing h2 {
  font-weight: normal;
}

.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}

.rounded-circle {
  margin-bottom: 12px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0;
  /* Space out the Bootstrap <hr> more */
}


/* Thin out the marketing headings */

.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}

.first-slide {
  top: -60px;
}


/* custom CSS  */

.get-started li {
  margin-bottom: 12px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media(min-width:576px) {
  .carousel-item > img {
    height: 54rem;
    top: -60px;
  }
}

@media(min-width:768px) {}

@media(min-width:992px) {}

@media(min-width:1000px) {
  .carousel-item > img {
    height:...

JavaScript

$(document).on('click','.navbar-collapse',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});