A Pen by Rachel Blades

Thumbnail
This awesome code was written by 1bladesforhire, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1bladesforhire ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Rachel Blades</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul class="service_tabe_menu nav nav-tabs" role="tablist">
  <li role="presentation" class="current active"><a href="#first" aria-controls="first" role="tab" data-toggle="tab">FIRST</a></li>
  <li role="presentation"><a href="#second" aria-controls="second" role="tab" data-toggle="tab">SECOND</a></li>
  <li role="presentation"><a href="#third" aria-controls="third" role="tab" data-toggle="tab">THIRD</a></li>
</ul>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/1bladesforhire/a-pen-by-rachel-blades-gzmLjV */
.service .nav-tabs>li>a{
    text-align: center;
    color: #444444;
    width: 150px;
    height: 80px;
    margin-left:10px;
    background: url(../images/skmenubg.png) no-repeat top center;
    border:0px;
    transition: all 0.6s;
}
.service_tabe_menu.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus{
    background: cyan;
    width:150px;
    height: 80px;
    color:#fff;

}
.service_tabe_menu li a:hover{
   background: red;
   color:#fff;
}

ul.service_tabe_menu li.current a:active {
   background: green;
   color:#fff;
}

.service_tabe_menu li a i{
    font-size:2rem;
    margin-top:40px;
    margin-bottom:25px;
}

.service .tab-content{
    margin-top:100px;
}

Comments