<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<title>CodePen - KANSO BOOTSTRAP HTML/CSS UI Kit</title>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/arthurleonov/kanokit/master/system/prism.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/arthurleonov/kanokit/master/system/font-awesome.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/arthurleonov/kanokit/master/system/system.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/arthurleonov/kanokit/master/css/main.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style>
/*------------------------------------* $TABLE OF CONTENTS
based generally on Harry Roberts excellent CSS Guidelines https://github.com/csswizardry/CSS-Guidelines
To find what you are looking for just hit CTRL F based on the table of contents and it will take you there.
\*------------------------------------*/
/**
* SYSTEM SETTINGS...................
* LOGIN BOX.........................
* REGISTRATION BOX .................
* RESET BOX.........................
* POST ITEM ........................
* IMAGE ITEM........................
* PRODUCT ITEM......................
* RECENT POST ......................
* LIST .............................
* HEADER ...........................
* FOOTER ...........................
**/
/*------------------------------------*\ SYSTEM SETTINGS \*------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
body, html {
font-size: 14px;
background-color: #F5F5F5;
}
a {
color: #818490;
}
a:hover {
color: #3D404E;
}
.text-center {
text-align: center;
}
.topnav {
padding: 50px;
text-align: center;
}
.topnav__title {
display: block;
color: #77B34D;
}
.topnav__link {
padding-right: 15px;
}
.topnav__description {
display: block;
margin-top: 40px;
}
.topnav__svg {
width: 85px;
}
section {
margin-top: 100px;
}
section:first-of-type {
margin-top: 0;
}
h1, h2, h3, h4, h5 {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
color: #70727c;
}
p, span {
font-family: 'Open Sans', sans-serif;
color: #747A84;
}
/*------------------------------------*\ LOGIN BOX \*------------------------------------*/
.login {
background-color: #ffffff;
padding: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.login__title {
text-align: center;
}
.login__sociallogin {
padding: 15px 0;
border-bottom: 1px solid #DCE3EF;
text-align: center;
}
.login__sociallogin__svg:not(:last-child) {
border-right: 1px solid #DCE3EF;
}
.login__sociallogin img {
max-width: 180px;
}
.login__input {
width: 100%;
margin: 0 auto;
margin-top: 15px;
padding: 10px;
border: 1px solid #C9D2E0;
border-radius: 3px;
-webkit-transition: border 0.2s;
transition: border 0.2s;
color: #747A84;
}
.login__input:focus {
outline: 0;
border: 1px solid #96CA2D;
}
.login__loginbutton {
width: 100%;
margin: 10px 0;
padding: 10px;
border: none;
border-radius: 3px;
background-color: #96CA2D;
color: #fff;
font-weight: bold;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.login__loginbutton:hover, .login__loginbutton:focus {
background-color: #79A029;
outline: 0;
}
.login__forgotpassword {
font-size: 12px;
display: block;
text-align: center;
padding-top: 5px;
}
.login__checkbox {
display: none;
}
.login label {
cursor: pointer;
position: relative;
border-radius: 4px;
width: 25px;
height: 25px;
margin: 10px 0;
border: 1px solid #C8C9CE;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
font-size: 12pt;
color: #FFF;
display: block;
}
.login label.check {
border-radius: 5px;
}
.login label .fa {
position: absolute;
color: #70727c;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
line-height: 24px;
text-align: center;
}
.login label .labeltext {
padding-left: 28px;
width: 200px;
display: block;
font-size: 13px;
padding-top: 3px;
}
.login input:checked + label {
background: shade(#369, 15%);
}
.login input:checked + label .fa {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.login ::-webkit-input-placeholder {
color: #b0bed1;
}
.login :-moz-placeholder {
/* Firefox 18- */
color: #b0bed1;
}
.login ::-moz-placeholder {
/* Firefox 19+ */
color: #b0bed1;
}
.login :-ms-input-placeholder {
color: #b0bed1;
}
/*------------------------------------*\ REGISTER BOX \*------------------------------------*/
.register {
background-color: #ffffff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
text-align: center;
padding: 15px;
}
.register__input {
width: 100%;
margin: 0 auto;
margin-top: 15px;
padding: 10px;
border: 1px solid #C9D2E0;
border-radius: 3px;
color: #747A84;
-webkit-transition: border 0.2s;
transition: border 0.2s;
}
.register__input:focus {
outline: 0;
border: 1px solid #96CA2D;
}
.register__select {
width: 100%;
height: 40px;
margin: 0 auto;
position: relative;
margin-top: 15px;
padding: 2px;
border: 1px solid #C9D2E0;
border-radius: 3px;
color: #747A84;
-webkit-transition: border 0.2s;
transition: border 0.2s;
background-color: inherit;
overflow: hidden;
}
.register__select span {
position: absolute;
right: 7px;
width: 10px;
height: 8px;
top: 34%;
}
.register__select select {
-webkit-appearance: none;
appearance: none;
width: 120%;
background: none;
background: transparent;
border: none;
outline: none;
cursor: pointer;
padding: 7px 10px;
}
.register__select--inline {
width: inherit;
min-width: 31%;
display: inline-block;
margin-left: 2.5px;
margin-right: 2.5px;
}
@media only screen and (max-width: 1200px) {
.register__select--inline {
width: 100%;
display: block;
margin-left: inherit;
margin-right: inherit;
}
}
.register__regbutton {
width: 100%;
margin: 20px 0;
padding: 10px;
border: none;
border-radius: 3px;
background-color: #96CA2D;
color: #fff;
font-weight: bold;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.register__regbutton:hover {
background-color: #79A029;
}
.register__regbutton:focus {
outline: 0;
}
.register ::-webkit-input-placeholder {
color: #b0bed1;
}
.register :-moz-placeholder {
/* Firefox 18- */
color: #b0bed1;
}
.register ::-moz-placeholder {
/* Firefox 19+ */
color: #b0bed1;
}
.register :-ms-input-placeholder {
color: #b0bed1;
}
/*------------------------------------*\ RESET BOX \*------------------------------------*/
.reset {
padding: 15px;
background-color: #ffffff;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
text-align: center;
}
.reset__input {
width: 100%;
margin: 0 auto;
margin-top: 15px;
border: 1px solid #C9D2E0;
border-radius: 3px;
color: #747A84;
padding: 10px;
-webkit-transition: border 0.2s;
transition: border 0.2s;
}
.reset__input:focus {
outline: 0;
border: 1px solid #96CA2D;
}
.reset__submitbutton {
margin: 20px 0px;
width: 100%;
background-color: #96CA2D;
padding: 10px;
color: #fff;
border: none;
border-radius: 3px;
font-weight: bold;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.reset__submitbutton:hover {
background-color: #79A029;
}
.reset__submitbutton:focus {
outline: 0;
}
.reset ::-webkit-input-placeholder {
color: #b0bed1;
}
.reset :-moz-placeholder {
/* Firefox 18- */
color: #b0bed1;
}
.reset ::-moz-placeholder {
/* Firefox 19+ */
color: #b0bed1;
}
.reset :-ms-input-placeholder {
color: #b0bed1;
}
/*------------------------------------*\ POST ITEM \*------------------------------------*/
.postitem {
background-color: #ffffff;
margin-top: 30px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
}
.postitem__img {
display: block;
max-width: 100%;
height: auto;
}
.postitem__content {
padding: 15px;
}
.postitem__content__title {
margin-bottom: 0;
margin-top: 0;
}
.postitem__content__title a {
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.postitem__content__title a:hover, .postitem__content__title a:focus {
text-decoration: none;
color: #3D404E;
}
.postitem__content__info {
font-size: 11px;
color: #B7B5B5;
margin-top: 5px;
margin-bottom: 10px;
}
/*------------------------------------*\ IMAGE ITEM \*------------------------------------*/
.imageitem {
display: block;
position: relative;
height: 30rem;
width: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
background: url("https://cdn.rawgit.com/arthurleonov/kanokit/master/img/captinvanity.jpg") center center no-repeat;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.imageitem:hover {
-webkit-transform: translateY(-11px);
transform: translateY(-11px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
text-decoration: none;
color: inherit;
}
.imageitem:before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: inline-block;
background: -webkit-linear-gradient(top, transparent 35%, rgba(0, 0, 0, 0.68) 100%);
background: linear-gradient(to bottom, transparent 35%, rgba(0, 0, 0, 0.68) 100%);
}
.imageitem__title {
position: absolute;
bottom: 20px;
line-height: 40px;
left: 15px;
width: 100%;
color: white;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.imageitem__title:hover, .imageitem__title:focus {
color: #dddddd;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.23);
text-decoration: none;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
.imageitem__label {
position: absolute;
top: 15px;
right: 15px;
color: #ffffff;
background-color: #D95555;
opacity: 0.8;
padding: 19px 17px;
width: 60px;
height: 60px;
border-radius: 79%;
}
/*------------------------------------*\ PRODUCT ITEM \*------------------------------------*/
.productitem {
display: block;
padding: 15px;
background-color: #ffffff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
text-align: center;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.productitem:hover {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
text-decoration: none;
color: inherit;
}
.productitem__title {
display: block;
text-align: center;
}
.productitem__img {
display: block;
max-width: 100%;
height: auto;
}
.productitem__buybutton {
display: block;
width: 50%;
padding: 10px;
margin: 0 auto;
background-color: #96CA2D;
border: none;
border-radius: 3px;
color: #fff;
font-weight: bold;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.productitem__buybutton:hover {
background-color: #79A029;
}
.productitem__buybutton:focus {
outline: 0;
}
.productitem2 {
display: block;
padding: 15px;
background-color: #ffffff;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
text-align: center;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.productitem2:hover {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
text-decoration: none;
color: inherit;
}
.productitem2__img {
display: block;
max-width: 100%;
height: auto;
}
.productitem2__title {
text-decoration: none;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.productitem2__title:hover, .productitem2__title:focus {
color: #3D404E;
}
.productitem2__price {
display: block;
color: #539EDE;
font-weight: bold;
}
/*------------------------------------*\ RECENT POST \*------------------------------------*/
.recentpost {
background-color: #ffffff;
margin-top: 30px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
}
.recentpost__title {
margin-bottom: 10px;
padding: 15px;
margin-top: 0;
display: block;
border-bottom: 1px solid lightgrey;
}
.recentpost__img {
display: block;
max-width: 100%;
height: auto;
}
.recentpost__content {
padding: 10px 15px;
}
.recentpost__content__title {
margin-top: 0;
margin-bottom: 0;
}
.recentpost__content__author {
color: grey;
padding-top: 10px;
font-size: 11px;
}
/*------------------------------------*\ LIST \*------------------------------------*/
.list {
background-color: #ffffff;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
margin-bottom: 15px;
}
.list__title {
font-weight: bold;
color: grey;
padding-top: 10px;
border-bottom: 1px solid lightgrey;
}
.list__item {
border-bottom: 1px solid lightgrey;
}
.list__variable {
margin-top: 10px;
}
.list__circle {
background: lightgreen;
width: 30px;
height: 30px;
border-radius: 50%;
margin: 0 auto;
display: block;
margin-top: 5px;
margin-left: 15px;
}
.list__arrow {
font-size: 35px;
display: block;
padding-top: 2px;
text-align: right;
padding-right: 14px;
}
/*------------------------------------*\ HEADER \*------------------------------------*/
.header {
background-color: #CDE6F4;
padding: 50px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
background: url("https://cdn.rawgit.com/arthurleonov/kanokit/master/img/headerimg.jpg") center center no-repeat;
background-size: cover;
background-repeat: no-repeat;
}
.header__img {
display: block;
max-width: 100%;
height: auto;
float: right;
width: 320px;
}
.header__title {
font-size: 55px;
font-weight: bold;
color: #ffffff;
}
.header__content {
color: #ffffff;
}
.header__button {
background: none;
color: #ffffff;
font-weight: bold;
margin-top: 30px;
border: 1px solid #ffffff;
padding: 10px 30px;
border-radius: 6px;
}
/*------------------------------------*\ FOOTER \*------------------------------------*/
.footer {
background-color: #272727;
padding: 40px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);
}
.footer__logo {
line-height: 35px;
color: #b1b1b1;
}
.footer__title {
color: #b1b1b1;
border-bottom: 1px solid #b1b1b1;
padding-bottom: 10px;
margin-bottom: 0px;
}
.footer__list {
text-decoration: none;
list-style: none;
padding-left: 0px;
padding-top: 20px;
color: #b1b1b1;
}
.footer__link {
color: white;
margin-bottom: 5px;
display: inline-block;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.footer__link:hover {
text-decoration: none;
cursor: pointer;
color: #b1b1b1;
}
.footer .fa {
font-size: 40px;
padding: 12px 3px;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>UI Kit</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="topnav">
<img class="topnav__svg" src="https://cdn.rawgit.com/arthurleonov/kanokit/master/img/kano-icon-01.svg"/>
<h1 class="topnav__title">
Kanso HTML/CSS Responsive UI Kit
</h1>
<a href="#" class="topnav__link">Individual Elements</a>
<a href="#" class="topnav__link">Login/Register</a>
<a href="#" class="topnav__link">Header</a>
<a href="#" class="topnav__link">Post Elements</a>
<a href="#" class="topnav__link">Blog Elements</a>
<a class="topnav__description" href="https://github.com/arthurleonov/kanokit" target="_blank"><strong>Check out the github page for readme.</strong></strong></a>
</div>
<section class="row">
<!-- LOGIN BOX -->
<div class="col-md-4">
<div class="login">
<h2 class="login__title">
Login
</h2>
<div class="row login__sociallogin">
<div class="col-xs-6 login__sociallogin__svg">
<a href="#"><img src="https://cdn.rawgit.com/arthurleonov/kanokit/master/img/twittersignin.svg" /></a>
</div>
<div class="col-xs-6 login__sociallogin__svg">
<a href="#"><img src="https://cdn.rawgit.com/arthurleonov/kanokit/master/img/facebooksignin.svg" /></a>
</div>
</div>
<input class="login__input" type="text" name="username" placeholder="Username">
<input class="login__input" type="password" name="pw" placeholder="Password">
<input class="login__checkbox" checked="checked" id="remember_1" name="remember" type="checkbox">
<label class="remember" for="remember_1">
<i class="fa fa-check"></i>
<span class="labeltext">Remember me?</span>
</label>
<button class="login__loginbutton">Log in</button>
<a href="#" class="login__forgotpassword">Forgot your password?</a>
</div>
<div class="code_container">
<a class="code_button js-button" data-class="js-login">Show HTML Code</a>
<a href="https://github.com/arthurleonov/kanokit/blob/master/scss/components/login-box.scss" target="_blank" class="code_button">Go to Scss File</a>
</div>
</div>
<!-- END OF LOGIN BOX -->
<!-- REGISTRATION BOX -->
<div class="col-md-4">
<div class="register">
<h2 class="register__title">
Register your details
</h2>
<input class="register__input register__input--inline" type="text" name="fname" placeholder="First name">
<input class="register__input register__input--inline" type="text" name="fname" placeholder="Last name">
<input class="register__input" type="text" name="fname" placeholder="Email adress">
<div class="register__select">
<select>
<option value="tristan">Tristan Da Cunha</option>
<option value="island">Inhospitable Island</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
</select>
<span class="fa fa-caret-down"></span>
</div>
<div class="register__select">
<select>
<option value="tristan">Tristan Da Cunha</option>
<option value="island">Inhospitable Island</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
</select>
<span class="fa fa-caret-down"></span>
</div>
<div class="register__select register__select--inline">
<select>
<option value="jan">January</option>
<option value="feb">Febuary</option>
<option value="march">March</option>
</select>
<span class="fa fa-caret-down"></span>
</div>
<div class="register__select register__select--inline">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<span class="fa fa-caret-down"></span>
</div>
<div class="register__select register__select--inline">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<span class="fa fa-caret-down"></span>
</div>
<button class="register__regbutton">Log in</button>
</div>
<div class="code_container">
<a class="code_button js-button" data-class="js-register">Show HTML Code</a>
<a href="https://github.com/arthurleonov/kanokit/blob/master/scss/components/registration.scss" class="code_button" target="_blank" >Go to Scss File</a>
</div>
</div>
<!-- END OF REGISTRATION BOX -->
<!-- REGISTRATION BOX -->
<div class="col-md-4">
<div class="reset">
<h2 class="reset__title">
Reset your password
</h2>
<p>
We are sorry to hear you lost your password. Please enter your email below and we will sort it out
</p>
<input class="reset__input" type="text" name="email" placeholder="Enter your e-mail adress">
<button class="reset__submitbutton">Submit</button>
</div>
<div class="code_container">
<a class="code_button js-button" data-class="js-reset">Show HTML Code</a>
<a href="https://github.com/arthurleonov/kanokit/blob/master/scss/components/resetpassword.scss" class="code_button" target="_blank">Go to Scss File</a>
</div>
</div>
<!-- END OF REGISTRATION BOX -->
</section>
<pre class="js-markup js-login">
<span class="close-icon js-close fa fa-times"></span>
<code class="language-markup">
<div class="login">
<h2 class="login__title">
Login
</h2>
<div class="row login__sociallogin">
<div class="col-xs-6 login__sociallogin__svg">
<a href="#"><img src="img/twittersignin.svg" /></a>
</div>
<div class="col-xs-6 login__sociallogin__svg">
<a href="#"><img src="img/facebooksignin.svg" /></a>
</div>
</div>
<input class="login__input" type="text" name="username" placeholder="Username">
<input class="login__input" type="password" name="pw" placeholder="Password">
<input class="login__checkbox" checked="checked" id="remember_1" name="remember" type="checkbox">
<label class="remember" for="remember_1">
<i class="fa fa-check"></i>
<span class="labeltext">Remember me?</span>
</label>
<button class="login__loginbutton">Log in</button>
<a href="#" class="login__forgotpassword">Forgot your password?</a>
</div>
</code>
</pre>
<pre class="js-markup js-register">
<span class="close-icon js-close fa fa-times"></span>
<code class="language-markup">
<div class="register">
<h2 class="register__title">
Register your details
</h2>
<input class="register__input register__input--inline" type="text" name="fname" placeholder="First name">
<input class="register__input register__input--inline" type="text" name="fname" placeholder="Last name">
<input class="register__input" type="text" name="fname" placeholder="Email adress">
<div class="register__select">
<select>
<option value="tristan">Tristan Da Cunha</option>
<option value="island">Inhospitable Island</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
</select>
<span class="fa fa-caret-down"></span>
</div>
<div class="register__select">
<select>
<option value="tristan">Tristan Da Cunha</option>
<option value="island">Inhospitable Island</option>
<option value="usa">USA</option>
<option value="japan">Japan</option>
</select>
<span class="fa fa-caret-down"></span>
</div>
<div class="register__select register__select--inline">
<select>
<option value="jan">January</option>
<option value="feb">Febuary</option>
<option value="march">March</option>
</select>
<span class="fa fa-caret-down"></span>
</div>
<div class="register__select register__select--inline">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<span class="fa fa-caret-down"></span>
</div>
<div class="register__select register__select--inline">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<span class="fa fa-caret-down"></span>
</div>
<button class="register__regbutton">Log in</button>
</div>
</code>
</pre>
<pre class="js-markup js-reset">
<span class="close-icon js-close fa fa-times"></span>
<code class="language-markup">
<div class="reset">
<h2 class="reset__title">
Reset your password
</h2>
<p>
We are sorry to hear you lost your password. Please enter your email below and we will sort it out
</p>
<input class="reset__input" type="text" name="email" placeholder="Enter your e-mail adress">
<button class="reset__submitbutton">Submit</button>
</div>
</code>
</pre>
<section class="row">
<!-- PRODUCT ITEM-1 -->
<div class="col-md-4">
<a href="#" class="productitem">
<h1 class="productitem__title">
Round eye glasses
</h1>
<p class="productitem__content">
Human-centered design pitch deck agile food-truck user centered design
</p>
<img class="productitem__img" src="https://cdn.rawgit.com/arthurleonov/kanokit/master/img/2000x1000.jpg" />
<h1 class="productitem__content">
$500.00
</h1>
<button class="productitem__buybutton">Buy</button>
</a>
<div class="code_container">
<a class="code_button js-button" data-class="js-product1">Show HTML Code</a>
<a href="https://github.com/arthurleonov/kanokit/blob/master/scss/components/productitem.scss" class="code_button" target="_blank">Go to Scss File</a>
</div>
</div>
<!-- END OF PRODUCT ITEM -->
<!-- IMAGE ITEM -->
<div class="col-md-4">
<a href="#" class="imageitem">
<div class="imageitem__label">
Sale
</div>
<h1 class="imageitem__title">
Vanity
Black Sneakers
$300
</h1>
</a>
<div class="code_container">
<a class="code_button js-button" data-class="js-imageitem">Show HTML Code</a>
<a href="https://github.com/arthurleonov/kanokit/blob/master/scss/components/imageitem.scss" class="code_button" target="_blank">Go to Scss File</a>
</div>
</div>
<!-- END OF IMAGE ITEM -->
<!-- PRODUCT ITEM-2 -->
<div class="col-md-4">
<a href="#" class="productitem2">
<img class="productitem2__img" src="https://cdn.rawgit.com/arthurleonov/kanokit/master/img/bangolufsen.jpg" />
<h2 class="productitem2__title">
BeoPlay H8
<span class="productitem2__price">
$425.00
</span>
</h2>
<p>
Premium wireless, active noise cancellation on-ear headphone
</p>
</a>
<div class="code_container">
<a class="code_button js-button" data-class="js-product2">Show HTML Code</a>
<a href="https://github.com/arthurleonov/kanokit/blob/master/scss/components/productitem-2.scss" class="code_button" target="_blank">Go to Scss File</a>
</div>
</div>
<!-- END OF PRODUCT ITEM-2 -->
</section>
<pre class="js-markup js-product1">
<span class="close-icon js-close fa fa-times"></span>
<code class="language-markup">
<a href="#" class="productitem">
<h1 class="productitem__title">
Round eye glasses
</h1>
<p class="productitem__content">
Human-centered design pitch deck agile food-truck user centered design
</p>
<img class="productitem__img" src="img/2000x1000.jpg" />
<h1 class="productitem__content">
$500.00
</h1>
<button class="productitem__buybutton">Buy</button>
</a>
</code>
</pre>
<pre class="js-markup js-product2">
<span class="close-icon js-close fa fa-times"></span>
<code class="language-markup">
<div class="productitem2">
<img class="productitem2__img" src="img/bangolufsen.jpg" />
<h2 class="productitem2__title">
<a href="">
BeoPlay H8
<span class="productitem2__price">
$425.00
</span>
</a>
</h2>
<p>
Premium wireless, active noise cancellation
on-ear headphone
</p>
</div>
</code>
</pre>
<pre class="js-markup js-imageitem">
<span class="close-icon js-close fa fa-times"></span>
<code class="language-markup">
<a href="#" class="imageitem">
<div class="imageitem__label">
Sale
</div>
<h1 class="imageitem__title">
Vanity
Black Sneakers
$300
</h1>
</a>
</code>
</pre>
<section class="header row">
<div class="col-sm-7">
<h1 class="header__title">Actionable insight fund thinker </h1>
<p class="header__content">
Paradigm latte Steve Jobs bootstrapping entrepreneur big data disrupt waterfall is so 2000 and late.Long shadow minimum viable product sticky note waterfall is so 2000 and late unicorn grok minimum viable product fund.
</p>
<button class="header__button">Read More</button>
</div>
<div class="col-sm-5 hidden-sm hidden-xs">
<img class="header__img" src="https://cdn.rawgit.com/arthurleonov/kanokit/master/img/n6p_angled2.png" />
</div>
</section>
<div class="code_container">
<a class="code_button js-button" data-class="js-header">Show HTML Code</a>
<a href="https://github.com/arthurleonov/kanokit/blob/master/scss/components/header.scss" class="code_button" target="_blank">Go to Scss File</a>
</div>
<pre class="js-markup js-header">
<span class="close-icon js-close fa fa-times"></span>
<code class="language-markup">
<section class="header row">
<div class="col-sm-7">
<h1 class="header__title">Actionable insight fund thinker </h1>
<p class="header__content">
Paradigm latte Steve Jobs bootstrapping entrepreneur big data disrupt waterfall is so 2000 and late.Long shadow minimum viable product sticky note waterfall is so 2000 and late unicorn grok minimum viable product fund.
</p>
<button class="header__button">Read More </button>
</div>
<div class="col-sm-5 hidden-sm hidden-xs">
<img class="header__img" src="img/n6p_angled2.png" />
</div>
</section>
</code>
</pre>
<section class="row">
<!-- POST ITEM -->
<div class="col-md-8">
<div class="postitem">
<img class="postitem__img" src="https://cdn.rawgit.com/arthurleonov/kanokit/master/img/mb_ms_f1_rosberg_strogalski.jpg" />
<div class="postitem__content">
<h2 class="postitem__content__title">
<a href="#">
360 campaign quantitative
</a>
</h2>
<p class="postitem__content__info">
Date: <strong>2016/02/15</strong> Author: <strong>John Doe</strong>
</p>
<p>
Affordances sticky note pivot unicorn innovate integrate user centered design viral. Grok affordances cortado pivot physical computing convergence ship it engaging user story. Venture capital sticky note fund cortado ship it minimum viable product fund
unicorn food-truck disrupt.
</p>
</div>
</div>
<div class="code_container">
<a class="code_button js-button" data-class="js-postitem">Show HTML Code</a>
<a href="https://github.com/arthurleonov/kanokit/blob/master/scss/components/postitem.scss" class="code_button" target="_blank">Go to Scss File</a>
</div>
</div>
<!-- END OF POST ITEM -->
<!-- POPULAR POSTS -->
<div class="col-md-4">
<div class="recentpost">
<h2 class="recentpost__title">
Recent Posts
</h2>
<div class="row recentpost__content">
<div class="col-xs-5">
<img class="recentpost__img" src="https://cdn.rawgit.com/arthurleonov/kanokit/master/img/mb_ms_f1_rosberg_strogalski.jpg" />
</div>
<div class="col-xs-7">
<h4 class="recentpost__content__title">
<a href="#">
Thinker maker doer iterate personas user story
</a>
</h4>
<p class="recentpost__content__author">
Author: John Doe
</p>
</div>
</div>
<div class="row recentpost__content">
<div class="col-xs-5">
<img class="recentpost__img" src="https://cdn.rawgit.com/arthurleonov/kanokit/master/img/mb_ms_f1_rosberg_strogalski.jpg" />
</div>
<div class="col-xs-7">
<h4 class="recentpost__content__title">
<a href="#">
Thinker maker doer iterate personas user story
</a>
</h4>
<p class="recentpost__content__author">
Author: John Doe
</p>
</div>
</div>
<div class="row recentpost__content">
<div class="col-xs-5">
<img class="recentpost__img" src="https://cdn.rawgit.com/arthurleonov/kanokit/master/img/mb_ms_f1_rosberg_strogalski.jpg" />
</div>
<div class="col-xs-7">
<h4 class="recentpost__content__title">
<a href="#">
Thinker maker doer iterate personas user story
</a>
</h4>
<p class="recentpost__content__author">
Author: John Doe
</p>
</div>
</div>
</div>
<div class="code_container">
<a class="code_button js-button" data-class="js-popularpost">Show HTML Code</a>
<a href="https://github.com/arthurleonov/kanokit/blob/master/scss/components/recentposts.scss" class="code_button" target="_blank">Go to Scss File</a>
</div>
</div>
<!-- END OF POPULAR POSTS -->
</section>
<pre class="js-markup js-postitem">
<span class="close-icon js-close fa fa-times"></span>
<code class="language-markup">
<div class="postitem">
<img class="postitem__img" src="img/mb_ms_f1_rosberg_strogalski.jpg" />
<div class="postitem__content">
<h2 class="postitem__content__title">
<a href="#">
360 campaign quantitative
</a>
</h2>
<<p class="postitem__content__info">
Date: <strong>2016/02/15</strong> Author: <strong>John Doe</strong>
</p>
<p>
Affordances sticky note pivot unicorn innovate integrate user centered design viral. Grok affordances cortado pivot physical computing convergence ship it engaging user story. Venture capital sticky note fund cortado ship it minimum viable product fund
unicorn food-truck disrupt.
</p>
</div>
</div>
</code>
</pre>
<pre class="js-markup js-popularpost">
<span class="close-icon js-close fa fa-times"></span>
<code class="language-markup">
<div class="recentpost">
<h2 class="recentpost__title">
Recent Posts
</h2>
<div class="row recentpost__content">
<div class="col-xs-5">
<img class="recentpost__img" src="img/mb_ms_f1_rosberg_strogalski.jpg" />
</div>
<div class="col-xs-7">
<h4 class="recentpost__content__title">
<a href="#">
Thinker maker doer iterate personas user story
</a>
</h4>
<p class="recentpost__content__author">
Author: John Doe
</p>
</div>
</div>
</div>
</code>
</pre>
<section class="row">
<div class="col-xs-12">
<div class="list">
<div class="list__title hidden-xs">
<div class="row">
<div class="col-md-1 col-sm-1">
</div>
<div class="col-sm-5 col-md-3">
<p>
Name
</p>
</div>
<div class="col-md-4 col-sm-4 hidden-xs">
<p>
Occupation
</p>
</div>
<div class="col-md-3 hidden-sm hidden-xs">
<p>
Location
</p>
</div>
<div class="col-md-1">
</div>
</div>
</div>
<div class="list__item">
<div class="row">
<div class="col-sm-1 col-xs-2">
<span class="list__circle"></span>
</div>
<div class="col-sm-5 col-md-3 col-xs-8">
<p class="list__variable">
John Doe
</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-5 hidden-xs">
<p class="list__variable">
Developer
</p>
</div>
<div class="col-md-3 hidden-sm hidden-xs">
<p class="list__variable">
Vilnius
</p>
</div>
<div class="col-md-1 col-xs-2">
<i class="fa fa-angle-right list__arrow"></i>
</div>
</div>
</div>
<div class="list__item">
<div class="row">
<div class="col-sm-1 col-xs-2">
<span class="list__circle"></span>
</div>
<div class="col-sm-5 col-md-3 col-xs-8">
<p class="list__variable">
John Doe
</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-5 hidden-xs">
<p class="list__variable">
Developer
</p>
</div>
<div class="col-md-3 hidden-sm hidden-xs">
<p class="list__variable">
Vilnius
</p>
</div>
<div class="col-md-1 col-xs-2">
<i class="fa fa-angle-right list__arrow"></i>
</div>
</div>
</div>
<div class="list__item">
<div class="row">
<div class="col-sm-1 col-xs-2">
<span class="list__circle"></span>
</div>
<div class="col-sm-5 col-md-3 col-xs-8">
<p class="list__variable">
John Doe
</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-5 hidden-xs">
<p class="list__variable">
Developer
</p>
</div>
<div class="col-md-3 hidden-sm hidden-xs">
<p class="list__variable">
Vilnius
</p>
</div>
<div class="col-md-1 col-xs-2">
<i class="fa fa-angle-right list__arrow"></i>
</div>
</div>
</div>
</div>
</div>
<div class="code_container">
<a class="code_button js-button" data-class="js-list">Show HTML Code</a>
<a href="https://github.com/arthurleonov/kanokit/blob/master/scss/components/list.scss" class="code_button" target="_blank">Go to Scss File</a>
</div>
</section>
<pre class="js-markup js-list">
<span class="close-icon js-close fa fa-times"></span>
<code class="language-markup">
<div class="col-xs-12">
<div class="list">
<div class="list__title hidden-xs">
<div class="row">
<div class="col-md-1 col-sm-1">
</div>
<div class="col-sm-5 col-md-3">
<p>
Name
</p>
</div>
<div class="col-md-4 col-sm-4 hidden-xs">
<p>
Occupation
</p>
</div>
<div class="col-md-3 hidden-sm hidden-xs">
<p>
Location
</p>
</div>
<div class="col-md-1">
</div>
</div>
</div>
<div class="list__item">
<div class="row">
<div class="col-sm-1 col-xs-2">
<span class="list__circle"></span>
</div>
<div class="col-sm-5 col-md-3 col-xs-8">
<p class="list__variable">
John Doe
</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-5 hidden-xs">
<p class="list__variable">
Developer
</p>
</div>
<div class="col-md-3 hidden-sm hidden-xs">
<p class="list__variable">
Vilnius
</p>
</div>
<div class="col-md-1 col-xs-2">
<i class="fa fa-angle-right list__arrow"></i>
</div>
</div>
</div>
</div>
</code>
</pre>
<section class="row footer">
<div class="col-sm-3">
<h2 class="footer__logo">
KANSO<br />
HTML/CSS<br />
Responsive UI Kit
</h2>
</div>
<div class="col-sm-3">
<h4 class="footer__title">
Useful Links
</h4>
<ul class="footer__list">
<li>
<a class="footer__link" hred="#">
Home
</a>
</li>
<li>
<a class="footer__link" hred="#">
About us
</a>
</li>
<li>
<a class="footer__link" hred="#">
Shop
</a>
</li>
<li>
<a class="footer__link" hred="#">
Blog
</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h4 class="footer__title">
Contact Us
</h4>
<ul class="footer__list">
<li>
By Email:
<a class="footer__link" href="mailto:someone@example.com?Subject=Hello%20again">john@doe.com</a>
</li>
<li>
By Phone:
<a class="footer__link" href="tel:555-555-5555">555 2453 5467</a>
</li>
<li>
Our Adress is:
<a class="footer__link" href="#">55 Brick Lane, Shoreditch, London, United Kingdom</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h4 class="footer__title">
Follow US
</h4>
<a class="footer__link" href="#">
<i class="fa fa-facebook-square"></i>
</a>
<a class="footer__link" href="#">
<i class="fa fa-twitter-square"></i>
</a>
<a class="footer__link" href="#">
<i class="fa fa-linkedin-square"></i>
</a>
<a class="footer__link" href="#">
<i class="fa fa-youtube-square"></i>
</a>
</div>
</section>
<div class="code_container">
<a class="code_button js-button" data-class="js-footer">Show HTML Code</a>
<a href="https://github.com/arthurleonov/kanokit/blob/master/scss/components/footer.scss" class="code_button" target="_blank">Go to Scss File</a>
</div>
<pre class="js-markup js-footer">
<span class="close-icon js-close fa fa-times"></span>
<code class="language-markup">
<div class="col-sm-3">
<h2 class="footer__logo">
KANSO <br/>
HTML/CSS <br/>
Responsive UI Kit
</h2>
</div>
<div class="col-sm-3">
<h4 class="footer__title">
Useful Links
</h4>
<ul class="footer__list">
<li>
<a class="footer__link" hred="#">
Home
</a>
</li>
<li>
<a class="footer__link" hred="#">
About us
</a>
</li>
<li>
<a class="footer__link" hred="#">
Shop
</a>
</li>
<li>
<a class="footer__link" hred="#">
Blog
</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h4 class="footer__title">
Contact Us
</h4>
<ul class="footer__list">
<li>
By Email:
<a class="footer__link" href="mailto:someone@example.com?Subject=Hello%20again">john@doe.com</a>
</li>
<li>
By Phone:
<a class="footer__link" href="tel:555-555-5555">555 2453 5467</a>
</li>
<li>
Our Adress is:
<a class="footer__link" href="#">55 Brick Lane, Shoreditch, London, United Kingdom</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h4 class="footer__title">
Follow US
</h4>
<a class="footer__link" href="#">
<i class="fa fa-facebook-square"></i>
</a>
<a class="footer__link" href="#">
<i class="fa fa-twitter-square"></i>
</a>
<a class="footer__link" href="#">
<i class="fa fa-linkedin-square"></i>
</a>
<a class="footer__link" href="#">
<i class="fa fa-youtube-square"></i>
</a>
</div>
</code>
</pre>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/arthurleonov/kanokit/master/js/prism.js'></script>
<script src='https://cdn.rawgit.com/arthurleonov/kanokit/master/js/main.js'></script>
<script src='//codepen.io/assets/editor/live/css_live_reload_init.js'></script>
<script>
$(document).ready(function(){
codepre.init();
});
</script>
</body>
</html>
</body>
</html>
