Manger Cycle

by Dhruvang Gajjar

HTML

<div class="container1">
  <div class="ele" id="one"><label style="color:#fff;" class="text2line" for="tab-one">Select A Top Team</label></div>
    <div class="ele" id="two"><label style="color:#fff;" class="text2line" for="tab-two">Get Off To A Great Start</label></div>
    <div class="ele" id="three"><label style="color:#fff;" class="text2line" for="tab-train">Train For Success</label></div>
    <div class="ele" id="four"><label style="color:#fff;" class="text2line" for="tab-manage">Manage Work For Results</label></div>
   <div class="ele" id="five"><label style="color:#fff;" class="text1line" for="tab-grow">Grow Careers</label></div>
    <div class="ele" id="six"><label style="color:#fff;" class="text2line" for="tab-build">Build A Deep Bench</label></div>
    <div class="arrow"></div>
  <div class="circle"><a style="color:#fff;" class="textcircle">Manager</a></div>
</div>
<br style="line-height:400px;"/>
<div class="top"> 
   <p> 
      <span style="font-family: verdana;"><strong>Click the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>&quot; to expand and the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>&quot; to collapse</strong></span></p> 
</div> 
<div class="wrapper">
  
  
  
  <div class="tab">
    <input name="tabs" class="input" id="tab-one" type="checkbox"/>
         <label class="label" for="tab-one">Select A Top Team</label>
         <div class="tab-content">
            <div class="container">
              
              <p>Content goes here</p>
              
            </div>
         </div>
  </div>
  
  
  
  <div class="tab">
    <input name="tabs" class="input" id="tab-two" type="checkbox" />
    <label class="label" for="tab-two">Get Off To A Great Start</label>
    <div class="tab-content">
      <div class="container">
        
        <p>Content goes here</p>
        
      </div>
    </div>
  </div>

<div class="tab">
    <input name="tabs" class="input"...

CSS

.container1 {
  width: 250px;
  height: 250px;
  position: absolute;
  left: 0px;
  right: 0px;
  margin: auto;
  transform:scale(0.85);
}

.ele, .arrow, .circle {
   position: absolute;
   left: 0px;
   right: 0px;
   top: 0px;
   bottom: 0px;
   margin: auto;
}

#one {
    transform: rotate(0deg) translateY(-130px) rotate(0deg);
}
#two {
    transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}
#three {
    transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}
#four {
    transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}
#five {
    transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}
#six {
    transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}


.ele {
  display: inline-block;
  background-color: #1f497d;
  width: 105px;
  height: 50px;
  border-width: 2px;
  border-style: solid;
  border-color: #ededed;
  border-radius: 7px;
  box-shadow: 0px 1px 5px #888888;
  z-index:3;
}

.ele:hover {
  cursor:pointer;
  transform:scale(1.019);
  border-color:f4f4f4;
  background-color:#214d84;
  box-shadow: 0px 2px 9px #888888;
  zoom:1.02;
}

.circle {
  background-color: #006850;
  width: 85px;
  height: 85px;
  border-width: 3px;
  border-style: solid;
  border-color: #fefefe;
  border-radius: 50%;
  box-shadow: 0px 1px 5px #888888;
}

.arrow {
  color: #cccfd7;
  width: 250px;
  height: 250px;
  border: 17px solid;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  left: -17px;
}

#two:hover ~ .arrow {
  border-top-color: #006850;
  transform: rotate(24deg);
}
#three:hover ~ .arrow {
  border-top-color: #006850;
  transform: rotate(66deg);
}
#four:hover ~ .arrow {
  border-top-color: #006850;
  border-right-color: #006850;
  transform: rotate(25deg);
}
#five:hover ~ .arrow {
  border-top-color: #006850;
  border-right-color: #006850;
  border-bottom-color: #006850;
  transform: rotate(26deg);
}
#six:hover ~ .arrow {
  border-top-color: #006850;
  border-right-color: #006850;
  border-bottom-color:...