Krank Golf graph

by 517Design

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <!-- chart container  -->
    <div class="container">
      <div class="page-container chart">
        <!-- chart -->
        <h2 class="kg-center kg-dkblue graph-h2 mb-05em">
          Click on the zone that matches your driver Swing Speed or Average Distance.</h2>
        <h3 class="kg-center fw-400 kg-dkrblue graph-h3 mobile-mb-1 mb-05em">Krank Golf is committed to all golfer's swing speeds.<br>
          Choose which driver <span class="br-desk"><br></span>is best for you!</h3>
        <div class="outer">
          <h3 class="kg-center fw-400 kg-dkrblue graph-h3 virt-type">Swing Speed</h3>

          <div class="pro">
            <a href="#"><img src="https://thankyou.krankgolf.com/wp-content/uploads/2020/12/pro-chart.png" alt="Krank Golf Pro Driver swing speed chart" /></a>
          </div>
          <div class="x">
            <a href="#"><img src="https://thankyou.krankgolf.com/wp-content/uploads/2020/12/x-chart.png" alt="Krank Golf Formula X High-Core Driver swing speed chart" /></a>
          </div>
          <div class="xx">
            <a href="#"><img src="https://thankyou.krankgolf.com/wp-content/uploads/2020/12/xx-chart.png" alt="Krank Golf Formula XX Super High-Cor Driver swing speed chart" /></a>
          </div>
        </div>
        <h3 class="kg-center fw-400 kg-dkrblue add graph-h3">Average Driving Distance</h3>
        <!-- End chart  -->
      </div>
    </div>
    <!--  End chart container  -->
  </body>

</html>

CSS

/* type
=======================================================*/
p, h1, h2, h3, h4, h5, h6 {font-family: 'Prompt', sans-serif;}
.fw-400 {font-weight: 400 !important;}
.fw-600 {font-weight: 600 !important;}
.kg-dkblue {color: #0a3a6d;}
.kg-dkrblue {color: #022F53;}
.kg-center {text-align: center;}
.virt-type {position: absolute;bottom: 38%;left: -66px;transform-origin: 0 0;transform: rotate(270deg);}
h2.graph-h2 {font-size: 3.25rem;line-height: 1.1;}
h3.graph-h3 {font-size: 2.125rem;line-height: 1.3;margin-block-start: 8px;}

/* margins and padding
=======================================================*/
.mb-05em {margin-bottom: .5em;}

/* divs
=======================================================*/
.container {display: flex;justify-content: center;max-width: 1200px;margin: 0 auto;}
.outer {width: 1000px;display: flex;justify-content: center;position: relative;margin: 0 auto;}

/* images
=======================================================*/
.outer img {max-width: 100%;}
.pro {max-width: 100%;}
.x {max-width: 72.55%;z-index: 25;position: absolute;bottom: 0px;left: 0;}
.x:hover, .pro:hover {opacity: .6;}
.xx {max-width: 58.25%;z-index: 50;bottom: 0;left: 0;position: absolute;}
.xx:hover {opacity: 0.5;}

/* MEDIA QUERIES
=======================================================*/
  
@media (max-width: 1199px) {
  .outer {width: 850px;right: -10px;}
  .virt-type {left: -58px;}
  h3.add {margin-left: 5%;}
  h3.graph-h3 {margin-block-start: 6px;}
}

@media (max-width: 1024px) {
  .virt-type {bottom: 33%;}
}
  
@media (max-width: 960px) {
  .outer {width: 750px;}
  .virt-type {bottom: 30%;}
}
  
@media (max-width: 860px) {
  .outer {width: 650px;}
  h2.graph-h2 {font-size: 2.8rem;padding: 0 5%;}
  h3.add {margin: 8px auto 60px 7%;}
  h3.mobile-mb-1 {font-size: 1.8rem;}
  .virt-type {bottom: 23%;}
}

@media (max-width: 768px) {
  h2.graph-h2 {padding: 0;}
  h3.add, h3.virt-type {font-size: 1.8rem;}
  h3.add {margin: 6px auto 60px 8%;}
  .virt-type {left:...