<section class="section">   
  
  <h1>COMPARE</h1>
  
  <article class="shoedetails shoedetails-1">
    <div class="shoeimage"></div>
    <h1>Nike Air Max</h1>
    <h2>89</h2>    
    <div class="bar bar--pink" data-label="comfort" data-progress="62"><span class="bar__progress"></span></div>
    <div class="bar bar--pink" data-label="size" data-progress="35"><span class="bar__progress"></span></div>
    <div class="bar bar--pink" data-label="durability" data-progress="90"><span class="bar__progress"></span></div>
    <div class="bar" data-label="fit" data-progress="55"><span class="bar__progress"></span></div>
    <div class="bar" data-label="agility" data-progress="70"><span class="bar__progress"></span></div>    
  </article>
  
  <article class="shoedetails shoedetails-2">
    <div class="shoeimage"></div>
    <h1>Nike Air Max</h1>
    <h2>75</h2>
    <div class="bar" data-progress="70"><span class="bar__progress"></span></div>
    <div class="bar" data-progress="42"><span class="bar__progress"></span></div>
    <div class="bar bar--green" data-progress="95"><span class="bar__progress"></span></div>
    <div class="bar" data-progress="50"><span class="bar__progress"></span></div>
    <div class="bar" data-progress="80"><span class="bar__progress"></span></div>
  </article>
  
</section>
* {
  box-sizing:border-box;
}

@import "compass";

body {
  background:#111c3a;
  font-family: 'Lato', sans-serif;
}

.section {
  background-color: rgb(73,65,46);
@include filter-gradient(#49412e, #151132, horizontal);
@include background-image(radial-gradient(center, ellipse cover, rgba(73,65,46,1) 0%,rgba(21,17,50,1) 100%));
  height:90vh;
  width:90vw;
  max-width:1650px;
  margin:5vh auto;
  padding-top:150px;
  overflow:hidden;

  box-shadow:0px 0px 55px 25px rgba(#000,0.5);
  
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  
  > h1 {
    color:#fff;
    position:absolute;
    z-index:99;
    left:60px;
    top:40px;
    letter-spacing:12px;
  }
  
  &::after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    mix-blend-mode: difference;
    background: #32265F;
    opacity: 0.6;
  }
  &::before {
    content:'';
    background-color: rgb(80,68,44);
    @include filter-gradient(#50442c, #141031, horizontal);
    @include background-image(radial-gradient(center, ellipse cover,  rgba(80,68,44,1) 0%,rgba(20,16,49,1) 100%));
    position:absolute;
    z-index:2;
    top:-80%;
    left:0;
    width:100%;
    height:180%;    
  }
}

.shoedetails {
  flex:1 0 50%;  
  position:relative;
  
  h1 {
    position: relative;
    z-index: 88;    
    color:#fff;
    mix-blend-mode: overlay;
  }
  
  h2 {
    position:absolute;
    top:-50%;
    right:50%;
    margin-right:-150px;
    width:450px;
    height:450px;
    text-align:center;
    z-index:4;
    font-size:365px;
    margin:0 -225px 0;
    opacity:0.25;
    border:3px dashed #FF1579;
    border-radius:50%;
    mix-blend-mode: overlay;    
  }
}

.shoedetails-1 {
  padding-right:20px;
  .bar {
    border-radius:0px 20px 20px 0px;
    &::after {right:0;}
  }  
  h1 {
    text-align:right;
  }
  h2 {
    text-shadow:-50px 50px 65px rgba(255,255,255,0.95);
  }
}

.shoedetails-2 {
  padding-left:20px;
  .bar {
    border-radius:20px 0px 0px 20px;
    .bar__progress {left:0;}
  }
  h2 {
    text-shadow:50px 50px 65px rgba(255,255,255,0.95);
  }
}

.shoeimage {
  display:block;
  position:absolute;
  width:640px;
  height:480px;
  max-width:100%;
  bottom:0%;
  left:50%;
  transform:translate(-50%,20%) rotate(10deg);
  background:url('https://watb.co.uk/wp-content/uploads/2015/11/trainers.png');
  mix-blend-mode:overlay;
  opacity:0.65;
  z-index:4;
}

.bar {
  @include filter-gradient(#f66f1e, #fad761, horizontal);
  @include background-image(linear-gradient(left,  rgba(235,182,39,0.11) 0%,rgba(250,215,97,0.1) 100%));
  
  display:block;
  position:relative;
  z-index:5;
  width:100%;
  margin:25px 0 55px;
  height:20px;   
  mix-blend-mode:color-dodge;
  
  &::before {
    content:attr(data-label);
    position:absolute;
    display:block;
    top:calc(100% + 10px);
    left:40px;
    color:#fff;
    z-index:99;
    text-transform:capitalize;
    font-weight:700;
    font-size:18px;
    opacity:0.5;
  }
  
  .bar__progress {
    @include background-image(linear-gradient(left,  rgba(246,111,30,1) 0%,rgba(250,215,97,1) 100%));   
    border-radius:20px;
    box-shadow:0px 0px 2px 2px rgba(#000,0.2);
    position:absolute;
    display:block;
    top:0;
    right:0;
    width:50%;
    height:100%;
    transition:width 1s 0.3s ease;
  }
  

}

.bar--pink {
  @include background-image(linear-gradient(left,  rgba(239,24,115,0.1) 0%,rgba(253,87,91,0.1) 100%)); 
  .bar__progress {
    @include background-image(linear-gradient(left,  rgba(239,24,115,1) 0%,rgba(253,87,91,1) 100%));       
  }
}

.bar--green {
  @include background-image(linear-gradient(left,  rgba(159,230,45,0.1) 0%,rgba(163,214,77,0.1) 100%)); 
  .bar__progress {
    @include background-image(linear-gradient(left,  rgba(159,230,45,1) 0%,rgba(163,214,77,1) 100%));       
  }
}

$(document).ready(function() {
   
  $( ".bar" ).each(function( index ){    
    
    var progress = $(this).data('progress');
    $(this).children('.bar__progress').css('width', progress + '%');
    
  });

});

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:400,700

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js