Jump to content

Sinmaster1701

Member
  • Posts

    4
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Sinmaster1701's Achievements

Level 2

Level 2 (2/20)

0

Reputation

  1. That was the answer I needed. Thanks all!
  2. 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>
  3. I cannot answer this question, but instead want to know if anyone can help with the coding of this already amazing code. I want to be able to have different colors for each tab. In the picture I have show I have 4 different tabs. How would I go about this please???
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.