<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<ul class="post-it">
<li><a href="#">SUNDAY</a></li>
<li><a href="#">MONDAY</a></li>
<li><a href="#">TUESDAY</a></li>
<li><a href="#">WENDSDAY</a></li>
<li><a href="#">THURSDAY</a></li>
<li class="active"><a href="#">FRIDAY</a></li>
<li><a href="#">SATERDAY</a></li>
</ul>
* {
margin:0; padding:0;
}
body {
background: #ddd;
}
/**
* Nav
*/
.post-it {
padding-left: 100px;
padding-top: 100px;
margin-bottom: -20px;
}
.post-it > li{
list-style: none;
float: left;
width: 120px;
overflow: hidden;
text-decoration: none;
position: relative;
margin-left: -55px;
box-shadow: 2px 0px 1px rgba(0,0,0,0.5);
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
transform: rotate(-40deg);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.post-it > li.active {
z-index: 2;
}
.post-it > li:hover,
.post-it > li:focus,
.post-it > li.active {
box-shadow: 10px 0px 6px rgba(0,0,0,0.5);
-webkit-transform: rotate(-40deg) scalex(.95);
-mox-transform: rotate(-40deg) scalex(.95);
-o-transform: rotate(-40deg) scalex(.95);
transform: rotate(-40deg) scalex(.95);
}
.post-it > li > a {
color: rgba(255,255,255,0.5);
display: block;
width: 100%;
padding: 10px 20px;
white-space:nowrap;
font-family: Impact "Trebuchet MS" ;
text-decoration: none;
background: rgba(0,0,0, .4);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.post-it > li > a:hover,
.post-it > li > a:focus,
.post-it > li.active > a {
color: white;
background: rgba(255,255,255,0);
}
.post-it > li:nth-child(1) {
background: #FF0000;
}
.post-it > li:nth-child(2) {
background: #FF3300;
}
.post-it > li:nth-child(3) {
background: #FFCC00;
}
.post-it > li:nth-child(4) {
background: #009933;
}
.post-it > li:nth-child(5) {
background: #0066CC;
}
.post-it > li:nth-child(6) {
background: #000099;
}
.post-it > li:nth-child(7) {
background: #9900CC;
}
.post-it > li:nth-child(8) {
background: #000000;
}
.post-it::after {
content: "";
display:block;
clear:both;
}
@media (max-width: 400px) {
.post-it {
padding-left: 0px;
padding-top: 0px;
margin-left: 0px;
margin-bottom: 10px;
}
.post-it > li {
clear: both;
width: 100%;
margin-left:0;
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.post-it > li:hover,
.post-it > li:focus {
box-shadow: 0px -6px 10px rgba(0,0,0,0.5);
}
.post-it > li > a {
text-align: center;
padding-left: 0px;
}
.post-it .active {
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
}
}
/**
* Note
*/
.note {
background: #fff;
height: 200px;
padding-top: 30px;
position: relative;
}
