JKGgdq

index.jade

doctype html
html
  head
    title= Robosane
    link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic')
    link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Ubuntu:700')
  body
    nav.navbar.navbar-default.navbar-fixed-top.topnav(role="navigation")
        .container.topnav
          .navbar-header
            button.navbar-toggle(type="button", data-toggle="collapse", data-target="#bs-example-navbar-collapse-1")
              span.sr-only Toggle navigation
              span.icon-bar
              span.icon-bar
              span.icon-bar
            div(style="display:block; position: fixed;")
              a(href="#")
                img(src="https://robosane.net/images/headers/RobosaneTail.svg", width="60px", height="auto")
            a.topnav.navbar-brand(style="padding-left: 80px; text-transform: lowercase;", href="/")
              | Robosane
          #bs-example-navbar-collapse-1.collapse.navbar-collapse
            .subnav
              ul.nav.nav-pills.menu
                li.current.active
                  a(href="#top") My Servers
                li
                  a(href="#") Main Site
                li
                  a(href="#") Support
                li
                  a(href="#") Forums

    div.content-section-a
      div.container
        div.col-md-2
          block content
            p Hello
        div.col-md-10
          block content
            p Hello

JKGgdq.markdown

JKGgdq

A Pen by Ben Klein on CodePen.

License.

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

style.css

/*!
 * Robosane Joomla Template Theeem CSS.
 */

body,
html {
    width: 100%;
    height: 100%;
    background-color: #F8F8F8;
}
body,
h1, h2, h3, h4, h5, h6 {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

p > img {
  display: block;
  max-width: 100%;
  height: auto;
}

.btn {
  white-space: normal;
}

.cbMenu > li > a {
  background-color: #fff;
}

.topnav {
    /*font-size: 14px;*/
    background-color: #000;
    text-transform: uppercase;
    font-family: "Ubuntu","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}
.topnav > .navbar {
  margin-bottom: 0;
}

.lead {
    font-size: 18px;
    font-weight: 400;
}

.intro-message {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
}
.intro-message > h1 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 5em;
}
.intro-divider {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.intro-message > h3 {
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

.items-more {
  padding-top: 6%;
  padding-bottom: 6%;
  font-size: 14px;
}

@media(max-width:767px) {
    .intro-message {
        padding-bottom: 15%;
    }

    .intro-message > h1 {
        font-size: 3em;
    }

    ul.intro-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.intro-social-buttons > li:last-child {
        margin-bottom: 0;
    }

    .intro-divider {
        width: 100%;
    }
}

.network-name {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
}

.content-section-a {
    padding: 50px 0;
    background-color: #f8f8f8;
    /* Pretending to be a col-md-8 */
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 100px;
    /* Fix long URLs from breaking out of their containers. */
    word-wrap: break-word;
}

.section-heading {
    margin-bottom: 30px;
}
.section-heading-spacer {
    float: left;
    width: 200px;
    border-top: 3px solid #e7e7e7;
}

.banner h2 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 3em;
}
.banner ul {
    margin-bottom: 0;
}

.banner-social-buttons {
    float: right;
    margin-top: 0;
}

@media(max-width:1199px) {
    ul.banner-social-buttons {
        float: left;
        margin-top: 15px;
    }
}

@media (max-width: 767px) {
    .banner h2 {
        margin: 0;
        text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
        font-size: 3em;
    }

    ul.banner-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.banner-social-buttons > li:last-child {
        margin-bottom: 0;
    }
}

footer {
    padding: 50px 0;
    background-color: #f8f8f8;
}

@media (min-width: 768px) {
  .form-horizontal .control-label {
    display: inline;
  }
  .form-horizontal .controls {
    display: inline;
  }
}

p.copyright {
    margin: 15px 0 0;
}

.pagination {
  list-style: none;
  display: inline;
}

.pagination ul {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        margin-left: 0;
        margin-bottom: 0;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.pagination ul > li {
        display: inline;
}
.pagination ul > li > a,
.pagination ul > li > span {
        float: left;
        padding: 4px 12px;
        line-height: 18px;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ddd;
        border-left-width: 0;
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
        background-color: #f5f5f5;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
        color: #999;
        cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
        color: #999;
        background-color: transparent;
        cursor: default;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
        border-left-width: 1px;
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
        border-top-left-radius: 4px;
        -webkit-border-bottom-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        border-bottom-left-radius: 4px;
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        border-top-right-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        border-bottom-right-radius: 4px;
}

ul.unstyled, ol.unstyled {
  margin-left: 0px;
  list-style: none;
  text-align: -webkit-match-parent;
  padding-left: 0px;
}

.well {
        min-height: 20px;
        padding: 19px;
        margin-bottom: 20px;
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

/* Joomla Specific Tweaks */
/* Login form input alignment: */
form#login-form > div > div,
form#login-form > div > div > div,
form#login-form > div > div > div > div,
form#login-form #form-login-submit .btn-primary,
form#login-form > .logout-button,
form#login-form > .logout-button > .btn-primary {
    width: 100%;
}
form#login-form * {
    display: inline-block;
}
form#login-form .userdata > ul > li {
    display: list-item;
}
form#login-form input {
    float: right;
    right: 8px;
}
form#login-form .btn-primary {
    font-weight: bold;
}

.readmore > .btn:hover, .readmore > .btn:focus {
  color: #C00;
}

/* UDDEModule CSS */
#uddeim-modulenew,
#uddeim-module {
  font-size: 11px;
}
#uddeim-module p.uddeim-module-head,
#uddeim-modulenew p.uddeim-module-head,
#uddeim-module p.uddeim-module-body,
#uddeim-modulenew p.uddeim-module-body,
#uddeim-module p.uddeim-module-row,
#uddeim-modulenew p.uddeim-module-row {
  margin: 0;
}

/* Bootstrap Overrides */
/* Cuz bootstrap need a change. */
/* At least for my purposes. */
a {
  color: #C00;
}
p a {
  color: #00C;
}
a:hover, a:focus {
    color: #C00;
}

.menu a:hover, .menu a:focus {
  color: #ed2024;
}

.page-header {
  margin: 10px 0 10px;
}
.dropdown-header {
  background-color: #ed2024;
  border-radius: 0px;
}
.dropdown-menu {
  float: none;
  text-align: left;
  list-style: none;
  background-color: #ed2024;
  border-radius: 0px;
}
.dropdown-menu > li > a {
  color: #ddd;
  background-color: #222;
  padding: 3px 20px;
  font-weight: bold;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #ed2024;
  text-decoration: none;
  background-color: #222;
}

.nav {
  padding-top: 6px;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #222;
  border-color: #00f;
}
.nav > li > a {
  transition: all .2s ease;
  border-bottom: 4px solid transparent;
  color: #f8f8f8;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: transparent;
  border-bottom: 4px solid #ed2024;
}

.nav-stacked > li > a:hover,
.nav-stacked > li > a:focus {
  border-bottom: 4px solid transparent;
  border-left: 4px solid #ed2024;
}
.nav-pills {
  width: 100%;
  text-align: center;
}
.nav-pills > li {
  text-align: center;
  float: left;
}
.nav-pills > li > a {
  border-radius: 0px;
}
.nav-pills > li + li {
  margin-right: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #000;
  background-color: #ed2024;
}
.nav-pills > .active > a > .badge {
  color: #ed2024;
}

/* Fancy current page chevron */
li.active.current {
  position: relative;
  top: 0px;
  text-align: center;
  padding: 0px;
  margin-bottom: 0px;
  height: auto;
  width: auto;
}
li.active.current:before {
  z-index: -1;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 110%;
  width: 50%;
  width: calc(50% + 1px);
  background: #ed2024;
  -webkit-transform: skew(0deg, 20deg);
  -moz-transform: skew(0deg, 20deg);
  -ms-transform: skew(0deg, 20deg);
  -o-transform: skew(0deg, 20deg);
  transform: skew(0deg, 20deg);
}
li.active.current:after {
  z-index: -1;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 110%;
  width: 50%;
  background: #ed2024;
  -webkit-transform: skew(0deg, -20deg);
  -moz-transform: skew(0deg, -20deg);
  -ms-transform: skew(0deg, -20deg);
  -o-transform: skew(0deg, -20deg);
  transform: skew(0deg, -20deg);
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://raw.githubusercontent.com/Robosane/robosane-template/master/css/robosane.css" rel="stylesheet" />