Gears - 1

gears-1.markdown

Gears - 1

A Pen by Gary Wong on CodePen.

License.

index.html

<div class="csg-home-hero">
  <div class="csg-inner">
    <img src="http://centurionsg.wpengine.com/wp-content/uploads/2019/10/centurion-hero-bg-2o.png">
    <div class="csg-circle csg-c-sea">
      <a href="/strategic-equipment-advisors">
        <svg viewBox="0 0 100 100">
          <text x="50" y="41%" text-anchor="middle" >Strategic</text>
          <text x="50" y="55%" text-anchor="middle" >Equipment</text><text x="50" y="69%" text-anchor="middle" >Advisors</text></svg></a>
    </div>
    <div class="csg-circle csg-c-eds">
      <a href="/equipment-disposition-services">       
        <svg viewBox="0 0 100 100">
          <text x="50" y="40%" text-anchor="middle" >Equipment</text>
          <text x="50" y="55%" text-anchor="middle" >Disposition</text><text x="50" y="70%" text-anchor="middle" >Services</text></svg></a>    
    </div>
    <div class="csg-circle csg-c-pas">
      <a href="professional-asset-services">
        <svg viewBox="0 0 100 100">
          <text x="50" y="40%" text-anchor="middle" >Professional</text>
          <text x="50" y="55%" text-anchor="middle" >Asset</text><text x="50" y="70%" text-anchor="middle" >Services</text></svg></a>
    </div>   
    <div class="csg-circle csg-c-pc">
      <a href="/partner-in-process-change-the-world">
        <svg viewBox="0 0 100 100">
          <text x="50" y="32%" text-anchor="middle" >Partner In</text>
          <text x="50" y="45%" text-anchor="middle">The Process</text>
          <text x="50" y="60%" text-anchor="middle">Change The</text>
          <text x="50" y="73%" text-anchor="middle">World</text>          
        </svg></a>     
    </div>
    <div class="csg-circle csg-c-cca">
      <a href="/centurion-credit-advantage">
        <svg viewBox="0 0 100 100">
          <text x="50" y="40%" text-anchor="middle" >Centurion</text>
          <text x="50" y="55%" text-anchor="middle" >Credit</text><text x="50" y="70%" text-anchor="middle" >Advantage</text></svg> 
      </a>  
    </div>  
    <div class="csg-circle csg-c-des">
      <a href="/direct-equipment-sales">
        <svg viewBox="0 0 100 100">
          <text x="50" y="40%" text-anchor="middle" >Direct</text>
          <text x="50" y="55%" text-anchor="middle" >Equipment</text><text x="50" y="70%" text-anchor="middle" >Sales</text></svg> 
      </a>  
    </div>        
  </div>
</div>

style.css

div.csg-home-hero, div.csg-home-hero * {
  box-sizing: border-box;
  font-family: "Open Sans",sans-serif;
  font-weight: bold;
}
.csg-home-hero {  
  background-color: #a9c6ce;
  position: relative;
  /*font-size: 1vw;*/
}
.csg-home-hero a {
  text-decoration: none;
}
.csg-inner {
  width: 100%;
  border: 0px solid blue;
  position: relative;
}
.csg-inner img{
  width: 100%;
}
.csg-circle {
  border-radius:50%;
  border: 2px solid white;/*#1c374b;*/
  position: relative;
  background-color: #1c374c;  
  transition: transform .5s;
  line-height:1.2;
  font-family: arial,helvetica,serif;
  font-size: 15px;  
}
.csg-circle:hover {
  transform: rotate(15deg);
  background-color: #d4d5a3;
}
/*
.csg-circle span,
.csg-circle svg {
  color: white;
  text-align: center;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  position: relative;
  padding: 10%;
  text-transform: uppercase;
}
*/
.csg-circle svg {
  text-transform: uppercase;
  width: 100%;
}
.csg-circle svg text {
  fill: white;
}
.csg-circle:hover svg text,
.csg-circle:hover span {
  color: #1c374c;
  fill: #1c374c;
}
.csg-c-sea {
  width: calc(14.7% - 4px);
  height: calc(29.5% - 4px);
  top: 14.6%;
  left: 3.7%;
  position: absolute;
  font-size: 10px;
}
.csg-c-eds {
  width: calc(100% * (264 / 1300) - 4px);
  height: calc(100% * (264 / 650) - 4px);
  top: 34.5%;
  left: 25%;
  position: absolute;
  font-size: 10px;
}
.csg-c-pas {
  width: calc(100% * (196 / 1300) - 4px);
  height: calc(100% * (196 / 650) - 4px);
  left: calc(100% * (692 / 1300));
  top: calc(100% * (79 / 650));
  position: absolute;
  font-size: 10px;
}
.csg-c-pc {
  width: calc(100% * (234 / 1300) - 4px);
  height: calc(100% * (234 / 650) - 4px);
  left: calc(100% * (1039 / 1300));
  top: calc(100% * (165 / 650));
  position: absolute;
  font-size: 10px;
}
.csg-c-cca {
  width: calc(100% * (125.8 / 1300) - 4px);
  height: calc(100% * (125.8 / 650) - 4px);
  left: calc(100% * (889 / 1300));
  top: calc(100% * (384 / 650));
  position: absolute;
  font-size: 10px;
}
.csg-c-des {
  width: calc(100% * (180 / 1300) - 4px);
  height: calc(100% * (180 / 650) - 4px);
  left: calc(100% * (662 / 1300));
  top: calc(100% * (459 / 650));
  position: absolute;
  font-size: 10px;
}
@media (min-width:1300px) {
  .csg-home-hero {
    height: 650px;
  }
  .csg-inner {
    width: 1300px;
    height: 650px;
    border: 0px solid blue;
    margin: 0 auto;
  }
}