A Pen by frank.

index.html

	<div class="row">
			<h3 class="h3">Sports Specific Yoga</h3>
            <div class="col-md-4">
                <ul class="hoverTab nav nav-tabs nav-stacked">
                  <li class="active"><a href="#intro2" data-toggle="tab">Ashtanga Yoga</a></li>
                  <li><a href="#profile2" data-toggle="tab">Iyengar Yoga</a></li>
                  <li><a href="#hatha2" data-toggle="tab">Anusara Yoga </a></li>
                  <li><a href="#bikram2" data-toggle="tab">Bikram yoga</a></li>
                </ul>
            </div>

                <!-- Tab panes -->
                <div class="col-md-8 tab-content">
                    <div class="tab-pane fade in active" id="intro2">
						   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla odio ligula, eget sagittis nulla ultricies ac. Donec molestie, mauris nec cursus condimentum, nisl mi consequat leo, sit amet feugiat tortor libero ac nibh nullam.<</p>
                        <figure>
                               <img class="img-thumbnail" src="http://placehold.it/300x150">
                        </figure>
                    </div>
                    <div class="tab-pane fade in" id="profile2">
                            <figure>
                                <img class="img-thumbnail" src="http://placehold.it/300x150">
                               </figure>
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla odio ligula, eget sagittis nulla ultricies ac. Donec molestie, mauris nec cursus condimentum, nisl mi consequat leo, sit amet feugiat tortor libero ac nibh nullam.</p>
                    </div>
                    <div class="tab-pane fade in" id="hatha2">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla odio ligula, eget sagittis nulla ultricies ac. Donec molestie, mauris nec cursus condimentum, nisl mi consequat leo, sit amet feugiat tortor libero ac nibh nullam.</p>
                            <figure>
                               <img class="img-thumbnail" src="http://placehold.it/300x150">
                               </figure>
                    </div>
                    <div class="tab-pane fade in" id="bikram2">
                            <figure>
                                <img class="img-thumbnail" src="http://placehold.it/300x150">
                               </figure>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla odio ligula, eget sagittis nulla ultricies ac. Donec molestie, mauris nec cursus condimentum, nisl mi consequat leo, sit amet feugiat tortor libero ac nibh nullam.</p>
                    </div>
                </div>
                <!--end of the tab panes-->
			</div>
          <div class="clearfix"></div>
                              
 

script.js

$('.hoverTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

style.less

.h3{
  text-align:center;
  text-transform:uppercase;
  background-color:rgb(18, 180, 221);
  padding:10px;
  font-weight:bold;
  color:#fefefe;
}
.wp-caption {}
.wp-caption-text {}
.gallery-caption {}
.bypostauthor {}
.alignright {}
.alignleft {}
.aligncenter {}
.sticky{}
body{
  width:480px;
margin:0 auto;}

//styling th input buttons
input[type="submit"]:hover {
/*background: rgb(12, 122, 150);*/
}
input[type="submit"] {
padding: 1em;
border-radius: 0px;
background: rgb(18, 180, 221);
text-align: center;
text-decoration: none;
font: bold 1.25em/1 "Open Sans", sans-serif;
letter-spacing: 1px;
color: rgb(255, 255, 255);
text-transform: uppercase;
text-shadow: 0px -1px 0px rgb(12, 122, 150);
transition: all .2s ease;
}
[type*="submit"] {
display: inline-block;
position: relative;
margin-right: 1em;
margin-bottom: 1em;
}


/*wordpress calendar*/

#wp-calendar {
  margin: 10px;
  color: hsl(0, 0%, 60%);
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12px;
}
#wp-calendar caption {
  margin-bottom: 10px;
}
thead tr > th,
tbody tr > td {
  width: 30px;
  height: 30px;
  
    
  text-align: center;
}
thead tr > th {
  border-left: 1px solid;
  border-right: 1px solid;
  border-color: hsl(0, 0%, 85%);
  
  color: hsl(0, 51%, 53%);
  font-size: 11px;
}
thead tr > th:first-child,
tbody tr > td:first-child {
  border-left: none;
}
thead tr > th:last-child,
tbody tr > td:last-child {
  border-right: none;
}
tbody tr:last-child td {
  border-bottom: none;
}
tbody tr > td {
  border: 1px solid;
  border-color: hsl(0, 0%, 85%);
}
tbody tr > td#today {  
  color: hsl(0, 0%, 20%);
  font-weight: 600;
}
tbody tr > td.planned:after {
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background-color: hsl(0, 51%, 53%);
  transform: translate(22px, -20px);
  
  content: '';
  font-size: 8px;
  color: white;
}
tfoot tr > td {
  padding: 5px 0 0 0;
  font-size: 11px;
}
tfoot tr > td a {
  color: hsl(0, 0%, 60%);
  text-decoration: none;
}
.red {
  background-color: red;
}

/* news posts archive page */

article {
  padding: 5px 10px;
  background-color: rgba(204, 26, 124, 0.050000000000000044);
  color: #ed3b9d;
}
article header {
  border-bottom: 2px solid rgba(204, 26, 124, 0.050000000000000044);
}
article header h1 {
  text-transform: uppercase;
  color: #660d3e;
}

/*if using the slider this will remover the icon*/
img[src*="edit_icon.png"]{display:none;}

/*recent posts widget*/
#rps .window,
#rps .window .slide{
    width:100% !important;
    height:auto;
}

/*yoga with Dee animating*/
.square {
    width: 250px;
    height: 250px;
    -webkit-transition: all .4s cubic-bezier(.5, .35, .15, 1.4) !important;
    transition: all .4s cubic-bezier(.5, .35, .15, 1.4) !important;
}
.outer {
    margin: auto;
    position: relative;
    top: 50%;z-index: 1;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.inner{
    position: absolute;
    top: 0;left: 0;
    font-size: 200px;
    font-weight: 900;
    line-height: 250px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
}
.inner:nth-child(1){
    background: #ff726b
}
.inner:nth-child(2){
    background: #334D5C
}
.inner:nth-child(3){
    background: #2ecc71
}
.inner:nth-child(4){
    background: #45B29D
}
.inner:nth-child(5){
    background: #EFC94C
}
.inner:nth-child(6){
    background: #EB6841
}
.inner:nth-child(7){
    background: #3498DB
}
.inner:nth-child(8){
    background: #8E44AD
}
.inner:nth-child(9){
    background: #212121
}
li span{
    width: 100%;
    height: 25px;
    position: absolute;
    bottom: 10px;left: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 25px;
}
span em{
    opacity: 0.2;
}
.behind{
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}
.current{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    z-index: 2;
    opacity: 1;
    visibility: visible;
}
.forward{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    z-index: 3;
    opacity: 0;
    visibility: hidden;
}

/* -- copyable codes end -- */


/*end of yoga with Dee animating*/

/*folding image and share buttons*/

h1 {
    margin:80px 0 30px;
    text-align:center;
    color:#1E1F22;
}
article#homeImage {
    width:100%;
    background:rgba(255,255,255,0.65);
    /*margin:0 auto 50px;*/
    border-radius:1px;
    box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
    margin-top: -27px;
}
.entry-thumb {
    background:#1E1F22;
    border-radius:3px 3px 0 0;
    height:359px;
    position:relative;
}
.entry-thumb .part {
    background:url('http://localhost/wordpress/wp-content/uploads/2014/02/home-image.jpg') no-repeat;
    background-size:100% auto;
    width:100%;
    height: 120px;
    position:relative;
    transition:.3s all ease-in-out;
    z-index:100;
}
.entry-thumb .part-2 {
    background-position:0 -120px;
}
.entry-thumb .part-3 {
    background-position:0 -180px;
}
.entry-thumb .part-4 {
    background-position:0 -300px;
}
.entry-thumb .part:nth-child(odd) {
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    transform-origin: top;
}
.entry-thumb .part:nth-child(even) {
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    transform-origin: bottom;
    height:60px;
}
.entry-thumb .part:nth-child(even)::before {
    position:absolute;
    display:block;
    content:"";
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.4);
    visibility:hidden;
    opacity:0;
    transition:.4s all;
}
.entry-thumb:hover .part:nth-child(odd) {
    -webkit-transform:perspective(800px) rotateX(25deg);
    -moz-transform:perspective(800px) rotateX(25deg);
    transform:perspective(800px) rotateX(25deg);
}
.entry-thumb:hover .part:nth-child(even) {
    -webkit-transform:perspective(800px) rotateX(-60deg);
    -moz-transform:perspective(800px) rotateX(-60deg);
    transform:perspective(800px) rotateX(-60deg);
    margin-top:-32px;
}
.entry-thumb:hover .part:nth-child(even)::before {
    opacity:1;
    visibility:visible;
}
.entry-thumb .share_bar {
    position:absolute;
    bottom:17px;
    /* padding: 0 150px; */
    list-style-type:none;
    margin:0;
}
.entry-thumb .share_bar li {
    float:left;
    margin-right:20px;
    width:83px;
    white-space:nowrap;
}
.entry-thumb .share_bar li:nth-child(3) {
    width:87px;
}
.entry-thumb .share_bar li:last-child {
    width: 58px;
    margin-right: 0;
}
.entry-content {
    padding:20px 90px 40px;
}
.entry-content h2 {
    color:#1E1F22;
}
.entry-content p {
    line-height:1.8;
}

/*don't display the logo on the homepage*/
.home-page img.site-logo{display:none;}

/*styling the contact form*/
.modal-body{
    /* background-color:rgba(255,255,255,0.65); */
}


/*simple gallery*/
.galleryItem {
  float: left;
  width: 30%;
  height: 300px;
  margin-left: 10px;
  overflow: hidden;
  cursor: pointer;
}

.galleryItem:first-child {
  margin-left: 0;
}

.galleryOverlay {
  position: relative;
  width: 100%;
  height: 30px;
  padding: 10px;
  margin-top: -50px;
  color: #666;
  background: #FFF;
  overflow: hidden;
  z-index: 10;

  -webkit-box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.5);
  box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.5);
}

.galleryItemTitel {
  display: block;
  height: 40px;
  font-size: 22px;
  line-height: 30px;
  color: #000;
}

.clear {
  clear: both;
}
/*end of the simple gallery*/

/*style the su_carousel*/

div.su-carousel-slide{
    width:200px!important;
    /*height:auto !important;*/
}
/*end of style the su_carousel*/

/*modal contact form*/
span.wpcf7-form-control-wrap your-name{
    dsplay:block;
}

div.modal-content p span{
    text-tranform:uppercase !important;
    font-weight:bolder;
}
div.modal-content p:nth-of-type(1){
    display: inline-block;
    float:left;
}
div.modal-content p:nth-of-type(2){
    display: inline-block;
    float:right;
    clear: right;
}
div.modal-content p:nth-of-type(3){
    display:block;
    clear: both;
}
div.modal-content,
.modal-body{
    background-image: url("http://localhost/wordpress/wp-content/uploads/2014/02/pattern11.png");
    color:#3f47cc;
    margin:0 auto;
}

div.modal-content input[name="your-name"]{
    display:inline-block;
    float:left;
    line-height:2.5em;
    padding:0;
    clear: left;
}
div.modal-content input[name="your-email"]{
    display:inline-block;
    /* float:right; */
    line-height:2.5em;
}
div.modal-content input[name="your-subject"]{
    width:100%;
    display:block;
    line-height:2.5em;
}
textarea[name="your-message"]{
    width:100%;
    display:block;
}
div.modal-content input[type="submit"]{
}

/*modal header*/
h4.modal-title{
    text-align:center;
    text-transform:uppercase;
}

/*end of modal contact form*/
/*google map widegt*/

#map-widget{
  width:20em;
  height:20em;
  position:absolute;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
  overflow:hidden;
  box-shadow:0 0.1em 0.3em 0 rgba(0,0,0,0.7);
  border-radius:0.5em;
  border: 1em solid #fff;
}

#map-widget img{
  width:20em;
  height:20em;
}

#map-widget div{
  width:28.2em;
  height:28.2em;
  transform:rotate(-45deg);
  transform-origin:0 0;
  overflow:hidden;
  position:absolute;
  box-shadow:0 0.1em 0.3em 0 rgba(0,0,0,0.7);
}

#map-widget div img{
  transform:rotate(45deg);
  transform-origin:0 0;
  overflow:hidden;
  position:absolute;
  bottom:8.2em;
  left:0;
}
/*end of google map widegt*/

/*styling the accordion*/
#accordion .panel-heading{
    background-color:#db2187;
    color:#fefefe; 
    text-transform:uppercase;
}
/*end of styling the accordion*/
/*styling the tabs*/
.nav-tabs li{
    background-color:#db2187;
    color:#fefefe; 
}
.nav-tabs li.active{
    background-color:#fefefe;
}
.nav-tabs li.active a{
    color:#db2187; 
}
.nav-tabs a{color:#fefefe;}
.nav-tabs a:hover{color:#db2187;}
.nav-tabs a:active{color:#db2187;}


/*logo area of the site*/
header{
    background-color:rgba(255,255,255,0.65);
    padding:30px 0px;
}

uImGy.markdown

uImGy

A Pen by frank on CodePen.

License.