Site URL: https://www.sinsfunfactory.com/
Hi there and good day. On my site SinsFunFactory.com I have this code block with code for the Slide Tabs, image below, that I need help editing. What I want to be able to do is either have each tab be a different color or have a banner image. If anyone has the time in helping me with this I would greatly appreciate it. Here is the code I am using:
<!-- Source: https://codepen.io/skkhan/pen/MWWdXbb -->
<!-- Tweak by @tuanphan -->
<ul class="main-box">
<li class="box active"><span>Monday Night Raw</span>
<div class="detail active">
<p> <a href="/wwe">11/25/2022</a>
<p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
</p>
</div>
</li>
<li class="box"><span>NXT 2.0</span>
<div class="detail">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
</p>
</div>
</li>
<li class="box"><span>Friday Night Smackdown</span>
<div class="detail">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
</p>
</div>
</li>
<li class="box"><span>Premium Live Enents</span>
<div class="detail">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
</p>
</div>
</li>
</ul>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
body
.main-box
{
display: flex;
background: #bdc2c9;
margin: 20px auto 20px auto;
padding:0;
width: 991px;
}
.box
{
height: 600px;
padding:15px;
border-right: 1px solid white;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}
.detail
{
width: 90%; 5px;
height: 100%;
position: absolute;
right: 0;
top:0;
background: #8da2c2;
color:black;
opacity: 0;
padding:30px;
box-sizing:border-box;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.box.active
{
width: 500% !important;
}
.box.active .detail
{
opacity: 1;
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
transform: none;
}
.box span {
writing-mode: vertical-rl;
font-size: 20px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-transform: uppercase;
letter-spacing: 4px;
width: 40px;
transform: rotate(180deg);
font-weight: 400;
cursor: pointer;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
.box.active span
{
left:25px;
right:auto;
margin:0;
font-weight:600
}
.box p
{
line-height: 23px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var getslide = $('.main-box li').length - 1;
var slidecal = 30/getslide+'%';
$('.box').css({"width": slidecal});
$('.box').click(function(){
$('.box').removeClass('active');
$(this).addClass('active');
});
</script>