CodePen Embed - Zippz Styleguide

<!-- Side navigation -->
<div class="sidenav d-none d-md-block">
  <img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/Zippz_Dark_Logo.svg">
  <a href="#logo">Logos</a>
  <a href="#headers">Header Styles</a>
  <a href="#paragraphs">Paragraph Styles</a>
  <a href="#buttons">Button Styles</a>
   <a href="#colors">Colors</a>
</div>
<div class="main">
<div class="container mt-5 mb-5">
  <div class="logo-box row mb-5">
    <p id="logo" class="subtitle border-bottom col-md-12 pl-md-0 mb-5">Logos</p>
    <div class="logo-1 col-md-5">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/Zippz_Dark_Logo.svg">
    </div>
    <div class="logo-2 offset-md-2 col-md-5">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/Zippz_Light-Logo.svg">

    </div>

  </div>

  <div class="header-styles mt-5 row">
    <div class="col-md-12 ">
      <p  id="headers" class="subtitle border-bottom">Header Titles </p>
      <h1>H1 Title <span class="d-none d-lg-inline">/ Lato Light (300)</span></h1>
      <h2>H2 Title <span class="d-none d-lg-inline">/ Lato Light (300)</span></h2>
      <h3>H3 Title <span class="d-none d-lg-inline">/ Lato Light (300)</span></h3>
      <h4>H4 Title <span class="d-none d-lg-inline">/ Lato Regular (400)</span></h4>
      <h5>H5 Title <span class="d-none d-lg-inline">/ Lato Regular (400)</span></h5>
      <h6>H6 Title <span class="d-none d-lg-inline">/ Lato Regular (400)</span></h6>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 mt-5">
      <p id="paragraphs" class="subtitle border-bottom">Paragraph Styles</p>
      <div class="style-box">
        <h6 class="bold">Lead Paragraph</h6>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis pretium dolor, eu condimentum ex convallis at.</p>
      </div>

      <div class="style-box">
        <h6 class="bold">Body Copy - 1</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis pretium dolor, eu condimentum ex convallis at. In hac habitasse platea dictumst. Maecenas viverra lacus neque, at malesuada dui ultricies vel. Morbi sed vestibulum justo,
          at mattis lorem. Nulla dignissim, augue finibus pellentesque feugiat, lacus neque pretium sem, sit amet dapibus mauris odio eu nisi. Etiam venenatis ultricies commodo. Integer turpis diam, sollicitudin vitae tortor sodales, rhoncus lacinia leo.
          Nam vulputate laoreet felis a sollicitudin. Nullam semper efficitur imperdiet. Proin tempus arcu ac odio interdum iaculis. Sed nec rhoncus erat, at dignissim mauris. Vestibulum id turpis et velit vestibulum commodo sed in ante. Aliquam vel est
          et ex consectetur mollis. Maecenas hendrerit suscipit libero quis imperdiet. Sed arcu risus, dictum non sapien a, blandit cursus tellus. Ut lacinia porta arcu vel vestibulum.</p>
      </div>

      <div class="style-box">
        <h6 class="bold">Body Copy - 2</h6>
        <p class="body-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis pretium dolor, eu condimentum ex convallis at. In hac habitasse platea dictumst. Maecenas viverra lacus neque, at malesuada dui ultricies vel. Morbi sed vestibulum justo,
          at mattis lorem. Nulla dignissim, augue finibus pellentesque feugiat, lacus neque pretium sem, sit amet dapibus mauris odio eu nisi. Etiam venenatis ultricies commodo. Integer turpis diam, sollicitudin vitae tortor sodales, rhoncus lacinia leo.
          Nam vulputate laoreet felis a sollicitudin. Nullam semper efficitur imperdiet. Proin tempus arcu ac odio interdum iaculis. Sed nec rhoncus erat, at dignissim mauris. Vestibulum id turpis et velit vestibulum commodo sed in ante. Aliquam vel est
          et ex consectetur mollis. Maecenas hendrerit suscipit libero quis imperdiet. Sed arcu risus, dictum non sapien a, blandit cursus tellus. Ut lacinia porta arcu vel vestibulum.</p>
      </div>

      <div class="style-box">
        <h6 class="bold">Caption Copy</h6>
        <p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis pretium dolor, eu condimentum ex convallis at. In hac habitasse platea dictumst. Maecenas viverra lacus neque, at malesuada dui ultricies vel. Morbi sed vestibulum justo,
          at mattis lorem. Nulla dignissim, augue finibus pellentesque feugiat, lacus neque pretium sem, sit amet dapibus mauris odio eu nisi. Etiam venenatis ultricies commodo. Integer turpis diam, sollicitudin vitae tortor sodales, rhoncus lacinia leo.
          Nam vulputate laoreet felis a sollicitudin. Nullam semper efficitur imperdiet. Proin tempus arcu ac odio interdum iaculis. Sed nec rhoncus erat, at dignissim mauris. Vestibulum id turpis et velit vestibulum commodo sed in ante. Aliquam vel est
          et ex consectetur mollis. Maecenas hendrerit suscipit libero quis imperdiet. Sed arcu risus, dictum non sapien a, blandit cursus tellus. Ut lacinia porta arcu vel vestibulum.</p>
      </div>
    </div>
  </div>

  <div class="row ">
    <div class="col-md-12 ">
      <p id="buttons" class="subtitle border-bottom">Button Styles</p>
    </div>
    <div class="col-md-10 offset-md-1 mt-5 mb-4">
      <h3 class="text-center"> Have you ever had adverse reactions to CBD or THC?</h3>
    </div>
    <div class="col-md-6 offset-md-3 mb-5">
      <div class="common_form">
        <div class="button_group" data-children-count="3">
          <input type="radio" id="badreaction1" name="badreaction" value="no" required="" data-bouncer-target="#error">
          <label for="badreaction1">No</label>
          <input type="radio" id="badreaction2" name="badreaction" value="yes" required="">
          <label for="badreaction2">Yes</label>
          <input type="radio" id="badreaction3" name="badreaction" value="maybe" required="">
          <label for="badreaction3">Unsure</label>
        </div>
      </div>
      <!--end common form -->
    </div>
    
    <!-- End Col -->
  </div>
  <!-- End Row -->
  
  <div class="row mt-5 d-flex">
    <div class="col-md-12 text-center mb-5 ">
    <a class="button cta-btn-solid pink-bg btn-shadow" href="#"><span>CTA Button</span></a>
      </div>   
    
   
    
    <div class="col-md-4 text-center mt-4 align-self-center">
    <a class="button large-button pink-bg btn-shadow" href="#"><span>Large </span></a>
      </div>    
    <div class="col-md-4 text-center mt-4 align-self-center">
    <a class="button medium-button pink-bg btn-shadow" href="#"><span>Medium </span></a>
      </div>  
     <div class="col-md-4 text-center mt-4 align-self-center">
    <a class="button small-button pink-bg btn-shadow" href="#"><span>Small</span></a>
      </div> 
       <div class="col-md-4 text-center mt-4 align-self-center">
    <a class="button large-button purple-bg btn-shadow" href="#"><span>Large </span></a>
      </div>    
    <div class="col-md-4 text-center mt-4 align-self-center">
    <a class="button medium-button purple-bg btn-shadow" href="#"><span>Medium </span></a>
      </div>  
     <div class="col-md-4 text-center mt-4 align-self-center">
    <a class="button small-button purple-bg btn-shadow" href="#"><span>Small</span></a>
      </div>
       <div class="col-md-4 text-center mt-4 align-self-center">
    <a class="button large-button navy-bg btn-shadow" href="#"><span>Large </span></a>
      </div>    
    <div class="col-md-4 text-center mt-4 align-self-center">
    <a class="button medium-button navy-bg btn-shadow" href="#"><span>Medium </span></a>
      </div>  
     <div class="col-md-4 text-center mt-4 align-self-center">
    <a class="button small-button navy-bg btn-shadow" href="#"><span>Small</span></a>
      </div>
       <div class="col-md-8 offset-md-2 text-center mt-5 pt-5 mb-5 ">
    <a class="button full-width-button pink-bg btn-shadow" href="#"><span>Full Width</span></a>
      </div>  
    
  </div>
  <div class="row mt-5 d-flex">
    <div class="col-md-4 text-center mt-4 align-self-center">
    <a class="button large-button outline-dark " href="#"><span>Large </span></a>
      </div>    
    <div class="col-md-4 text-center mt-4 align-self-center">
    <a class="button medium-button outline-dark" href="#"><span>Medium </span></a>
      </div>  
     <div class="col-md-4 text-center mt-4 align-self-center">
    <a class="button small-button outline-dark " href="#"><span>Small</span></a>
      </div>
    </div>
     <div class="row mt-5 mb-5 d-flex navy-bg py-5">
    <div class="col-md-4 text-center mt-4 mb-3 align-self-center">
    <a class="button large-button outline-light " href="#"><span>Large </span></a>
      </div>    
    <div class="col-md-4 text-center mt-4  mb-3 align-self-center">
    <a class="button medium-button outline-light" href="#"><span>Medium </span></a>
      </div>  
     <div class="col-md-4 text-center mt-4  mb-3 align-self-center">
    <a class="button small-button outline-light " href="#"><span>Small</span></a>
      </div>
      
  </div>
       
       
      
    <div class="col-md-12 ">
      <p id="colors" class="subtitle border-bottom mb-5 mt-5">Colors</p>
    </div>
   <div class="row mt-5">
    <div class="col-md-6">
      <div class="color-box purple-bg d-flex align-items-center"><div class="inner text-center">#6b4dff</div></div>
      <div class="row"><div class="col-6 pr-0">
        <div class="color-box-sm purple-bg-120 d-flex align-items-center "><div class="inner text-center">#8871fe</div>
      </div>
         </div>   
        <div class="col-6 pl-0">
        <div class="color-box-sm purple-bg-80 d-flex align-items-center "><div class="inner text-center">#523dc6</div>
      </div>
         </div></div>
</div>
     <div class="col-md-6">
      <div class="color-box navy-bg d-flex align-items-center"><div class="inner text-center">#35365c</div></div>
      <div class="row"><div class="col-6 pr-0">
        <div class="color-box-sm navy-bg-120 d-flex align-items-center "><div class="inner text-center">#5d5e7d</div>
      </div>
         </div>   
        <div class="col-6 pl-0">
        <div class="color-box-sm navy-bg-80 d-flex align-items-center "><div class="inner text-center">#292a48</div>
      </div>
         </div>
        </div>
       </div>
         
     </div>
  <div class="row mt-5">
    <div class="col-md-4">
      <div class="color-box pink-bg d-flex align-items-center"><div class="inner text-center">#e93d77</div></div>
      <div class="row"><div class="col-6 pr-0">
        <div class="color-box-sm pink-bg-120 d-flex align-items-center "><div class="inner text-center">#ed6492</div>
      </div>
         </div>   
        <div class="col-6 pl-0">
        <div class="color-box-sm pink-bg-80 d-flex align-items-center "><div class="inner text-center">#b52f5d</div>
      </div>
         </div></div>
</div>
     <div class="col-md-4 ">
      <div class="color-box mag-bg d-flex align-items-center"><div class="inner text-center">#b536c3</div></div>
      <div class="row"><div class="col-6 pr-0">
        <div class="color-box-sm mag-bg-120 d-flex align-items-center "><div class="inner text-center">#c45ecf</div>
      </div>
         </div>   
        <div class="col-6 pl-0">
        <div class="color-box-sm mag-bg-80 d-flex align-items-center "><div class="inner text-center">#8d2a98</div>
      </div>
         </div>
        </div>
       </div>
     <div class="col-md-4 ">
      <div class="color-box gray-bg d-flex align-items-center"><div class="inner text-center">#f1f1f2</div></div>
      <div class="row"><div class="col-6 pr-0">
        <div class="color-box-sm gray-bg-120 d-flex align-items-center "><div class="inner text-center">#f4f4f5</div>
      </div>
         </div>   
        <div class="col-6 pl-0">
        <div class="color-box-sm gray-bg-80 d-flex align-items-center "><div class="inner text-center">#bbbbbc</div>
      </div>
         </div>
        </div>
       </div>
    
         </div>
</div>     
<!-- End Container -->
  
  </div><!-- End Main -->

body {
  font-family: "Lato", sans-serif;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
input,
select,
textarea {
  color: #35365c;
}
h1,
h2,
h3 {
  font-weight: 300;
}
h4,
h5,
h6 {
  font-weight: 400;
}

h1 {
  font-size: 6rem;
}
h2 {
  font-size: 3.75rem;
}
h3 {
  font-size: 3rem;
}
h4 {
  font-size: 2.25rem;
}
h5 {
  font-size: 1.5rem;
}
h6 {
  font-size: 1.25rem;
}
p {
  font-size: 1rem;
  line-height: 2;
  font-weight: 400;
  color: #5d5e7d;
}
a:hover {color:inherit;}
.body-2 {
  font-size: 0.875rem;
  line-height: 1.8;
}

.lead {
  font-size: 1.25;
  line-height: 2;
  font-weight: 400;
}

.caption {
  font-size: 0.75rem;
  line-height: 1.6;
}

.subtitle {
  font-size: 1rem;
  color: #e93d77;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 700;
}

.pink-bg {
  background-color: #e93d77;
  color: #ffffff !important;
}

.pink-bg-120 {
  background-color: #ed6492;
  color: #ffffff !important;
}

.pink-bg-80 {
  background-color: #b52f5d;
  color: #ffffff !important;
}

.purple-bg {
  background-color: #6b4dff;
  color: #ffffff !important;
}

.purple-bg-120 {
  background-color: #8871fe;
  color: #ffffff !important;
}

.purple-bg-80 {
  background-color: #523dc6;
  color: #ffffff !important;
}

.navy-bg {
  background-color: #35365c;
  color: #ffffff !important;
}
.navy-bg-120 {
  background-color: #5d5e7d;
  color: #ffffff !important;
}
.navy-bg-80 {
  background-color: #292a48;
  color: #ffffff !important;
}

.mag-bg {
  background-color: #b536c3;
  color: #ffffff !important;
}

.mag-bg-120 {
  background-color: #c45ecf;
  color: #ffffff !important;
}

.mag-bg-80 {
  background-color: #8d2a98;
  color: #ffffff !important;
}

.gray-bg {
  background-color: #f1f1f2;
  color: #35365c !important;
}

.gray-bg-120 {
  background-color: #f4f4f5;
  color: #35365c !important;
}

.gray-bg-80 {
  background-color: #bbbbbc;
  color: #35365c !important;
}


.outline-dark {
  color: #35365c;
  background:transparent;
  border: 3px solid #35365c
}

.outline-light {
  color: #fff;
  background:transparent;
  border: 3px solid #fff
}

/**** BUTTONS ****/
.button {
  border-radius: 200px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 250ms ease-out;
  transition: all 250ms ease-out;
 
}

.button:hover {
  text-decoration: none;
  
}
.button:before {
  -webkit-transition: all 250ms ease-out;
  transition: all 250ms ease-out;
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  background-color: rgba(0, 0, 0, 0.20);
  opacity: 0;
}
.button:hover::before {
  opacity: 1;
}

.button.outline-dark:hover::before, .button.outline-light:hover::before {
  opacity: 0;
}

.btn-shadow {
     -webkit-box-shadow: 0 8px 10px 1px rgba(53, 54, 92,0.14), 0 3px 14px 2px rgba(53, 54, 92,0.14), 0 5px 5px -3px rgba(53, 54, 92,0.14);
    box-shadow: 0 8px 10px 1px rgba(53, 54, 92,0.14), 0 3px 14px 2px rgba(53, 54, 92,0.14), 0 5px 5px -3px rgba(53, 54, 92,0.14);
}

.btn-shadow:hover {
 -webkit-box-shadow: 0 8px 20px 1px rgba(53, 54, 92,0.14), 0 3px 24px 2px rgba(53, 54, 92,0.14), 0 5px 5px -3px rgba(0,0,0,0.2);
    box-shadow: 0 8px 20px 1px rgba(53, 54, 92,0.14), 0 3px 24px 2px rgba(53, 54, 92,0.14), 0 5px 5px -3px rgba(0,0,0,0.2);
}
.button span {
  position: relative;
}

.cta-btn-solid {
  padding: 20px 100px;
  font-size: 1rem;
}
.full-width-button {
  display:block;
  padding: 20px 100px;
  font-size: 1rem;
  width:100%;
}

.large-button {
  padding: 15px 60px;
  font-size: 1rem;
}

.medium-button {
  padding: 12px 48px;
  font-size: .875rem;
}

.small-button {
  padding: 8px 24px;
  font-size: .75rem;
}

.border-bottom {
  border-bottom: 3px solid #f1f1f2 !important;
}

/******* PAGE STYLES DO NOT COPY *******/


.color-box {
  position: relative;
}
.color-box:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: calc((9 / 16) * 100%);
  }
  .color-box > .inner {
    position: absolute;
    font-size:.875rem;
    right: 0;
    font-weight:700;
    left: 0;
  
}

.color-box-sm {
  position: relative;
}
.color-box-sm:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: calc((9 / 16) * 70%);
  }
  .color-box-sm > .inner {
    position: absolute;
    font-size:.875rem;
    right: 0;
    font-weight:700;
    left: 0;
  
}
/* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 15%; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #f9f9f9; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
  padding: 20px 10px 20px 10%;
  text-decoration: none;
  font-size: 1rem;
  color: inherit;
  display: block;
  transition: all 250ms ease-in-out;
}

.sidenav a:hover,
.sidenav a.active {
  background: #485cc7;
  color: #ffffff;
}

.sidenav .logo {
  max-width: 150px;
  margin: 10% 8px 5% 10%;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Style page content */
.main {
  margin-left: 15%; /* Same as the width of the sidebar */
  max-width: 85%;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

@media screen and (max-width: 480px) {
  .main {
    max-width:100%;
    margin-left:0;
  }
}

.header-styles * > * {
  margin-bottom: 3%;
}
.style-box {
  padding: 3% 0;
}
.logo-box .logo-1 {
  padding: 5%;
  background: #f1f1f2;
}
.logo-box .logo-2 {
  padding: 5%;
  background: #35365c;
}

.bold {
  font-weight: 700;
}

/**** YOUR BUTTON STYLES ****/
input,
select,
textarea {
  color: inherit;
}

input,
select,
textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
}
   
   
.common_form .button_group {
  background: #ffffff;
   -webkit-box-shadow: 0 5px 20px 1px rgba(53, 54, 92,0.14), 0 3px 24px 2px rgba(53, 54, 92,0.12), 0 5px 5px -3px rgba(53, 54, 92,0.12);
    box-shadow:  0 5px 10px 1px rgba(53, 54, 92,0.14), 0 3px 24px 2px rgba(53, 54, 92,0.12), 0 5px 5px -3px rgba(53, 54, 92,0.12);
  display: flex;
  -webkit-display: flex;
  overflow: hidden;
  border-radius: 12px;
  text-align: center;
}

.common_form .button_group > input[type="radio"]:checked + label {
  background: #485cc7;
  color: white;
}

.common_form input[type="checkbox"] + label,
.common_form input[type="radio"] + label {
  text-decoration: none;
  cursor: pointer;
  display: flex;
  -webkit-display: flex;
  justify-content: center;
  letter-spacing: 0;
  text-transform: none;
  min-width: 100px;
  padding: 1.5rem 3rem;

  position: relative;
}

.common_form .button_group > label {
  cursor: pointer;
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
  -webkit-flex-flow: column wrap;
  -webkit-align-items: center;
  background: #fff;
  margin: 0;

  line-height: 1rem;
  flex-direction: row;
  -webkit-flex-direction: row;
  text-align: center;
  margin: 0px;
  border-right: 1px solid #f1f1f2;
  transition: all 250ms ease-in-out;
}

.common_form .button_group > label:last-child {
  border-right: 0px;
}

.common_form label:hover {
  background-color: #485cc7;
  color: white;
}
.common_form label {
  color: inherit;
}

.common_form .button_group > input[type="radio"] {
  display: none;
}
.common_form input[type="checkbox"],
.common_form input[type="radio"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  display: block;
  float: left;
  margin-right: -2rem;
  opacity: 0;
  width: 1rem;
  z-index: -1;
}

@media screen and (min-width: 737px) {
  body label {
    display: none;
  }
}

@media screen and (min-width: 981px) {
  .common_form .button_group > label {
    padding: 1.5rem 3rem;
    line-height: 1.5rem;
    font-size: 1rem !important;
  }
}

$('.sidenav a').on("click", function(event){
  event.preventDefault(event);
   var target = $(this.getAttribute('href'));
    if( target.length ) {
        event.preventDefault();
        $('html, body').stop().animate({
            scrollTop: target.offset().top
        }, 1000);
    }
  $('.sidenav a').removeClass('active'); 
  $(this).addClass('active');
  
 
  
})

This Pen is owned by Gavin Simpson on CodePen.

See more by @simpson77 on CodePen

External CSS

External JavaScript