Xbox One Controller

index.html

<div id="controller">
  <div class="top_left"></div>
  <div class="top_right"></div>
  <div class="top_shape"></div>
  <div class="corners">
    <div class="right"></div>
  </div>
  <div class="logo">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 746 746">
      <defs>
        <style>
          .a {
            fill: url(#a);
          }

          .b {
            fill: url(#b);
          }

          .c {
            fill: url(#c);
          }

          .d {
            fill: url(#d);
          }

          .e {
            fill: url(#e);
          }

          .f {
            fill: url(#f);
          }
        </style>
        <radialGradient id="a" cx="373" cy="373" r="373" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#4d4d4d" />
          <stop offset="1" />
        </radialGradient>
        <linearGradient id="b" x1="60.97" y1="336.01" x2="685.97" y2="336.01" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#fff" />
          <stop offset="0.87" stop-color="#fff" />
        </linearGradient>
        <linearGradient id="c" x1="60.47" y1="417.76" x2="289.47" y2="417.76" xlink:href="#b" />
        <linearGradient id="d" x1="495.93" y1="458.63" x2="590.14" y2="407.31" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#fff" />
          <stop offset="1" stop-color="#fff" />
        </linearGradient>
        <linearGradient id="e" x1="269.47" y1="210.6" x2="306.24" y2="166.18" xlink:href="#b" />
        <linearGradient id="f" x1="471.09" y1="210.68" x2="415.94" y2="163.96" xlink:href="#d" />
      </defs>
      <title>Untitled-3</title>
      <circle class="a" cx="373" cy="373" r="373" />
      <polygon class="b" points="685.97 558.25 374.97 352.74 373.47 353.73 373.47 353.24 371.97 352.25 60.97 557.75 289.97 277.75 130.48 113.78 371.38 221.06 373.47 220.15 373.47 220.63 375.56 221.56 616.46 114.27 456.97 278.25 685.97 558.25" />
      <polygon class="c" points="289.47 277.75 289.47 406.76 60.47 557.75 289.47 277.75" />
      <polyline class="d" points="685.47 557.75 456.47 277.75 456.47 406.59" />
      <polyline class="e" points="130.47 113.75 373.47 349.75 373.47 221.75" />
      <polyline class="f" points="375.47 221.75 616.47 113.75 375.47 349.75" />
    </svg>
  </div>
  <div class="main_logo_cont">
    <div class="middle"></div>
  </div>
<div class="bumpers">
  
</div>
  <div class="buttons_joysticks">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="button_dpad">
    <div class="inner">
      <div class="up_down"></div>
      <div class="left_right"></div>
    </div>
  </div>
  <div class="buttons_middle">
    <div class="view">
      <div class="rect"></div>
      <div class="rect"></div>
    </div>
    <div class="menu"></div>
  </div>
  <div class="buttons_letters">
    <div class="btn-y">
      <div class="shadow"></div>
      <div class="y">Y</div>
    </div>
    <div class="btn-x">
      <div class="shadow"></div>
      <div class="x">X</div>
    </div>
    <div class="btn-a">
      <div class="shadow"></div>
      <div class="a">A</div>
    </div>
    <div class="btn-b">
      <div class="shadow"></div>
      <div class="b">B</div>
    </div>
  </div>
  <div class="over_bottom"></div>
  <div class="bottom"></div>
  <div class="bottom_middle"></div>
</div>

style.scss

$t: transparent;
$bk: #FF4C4D;
$white:#fff;

@mixin for-phone-only {
  @media (max-width: 599px) {
    @content;
  }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) {
    @content;
  }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) {
    @content;
  }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) {
    @content;
  }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) {
    @content;
  }
}

*{
  box-sizing: border-box;
}
body{ 
   @include for-phone-only {
    font-size: 6px;
     
  }  
  font-family: "Mukta", sans-serif;
  font-size: 10px;     
  background: 
    $bk,
    ;       
  background-repeat: no-repeat;
  background-position: 50% 4%;
}
#controller { 
  width: 68em;
  height: 45em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:
// BUTTONS    
 // RIGHT    
rgba(pink,.0)
    // $cbk
   ;
  background-repeat: no-repeat;

  &:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background:  
      
//  TOP MIDDLE
    linear-gradient(
      rgba($white,1) 45%, rgba($white,1) 41%
    ) 
    50% 8% / 40% 8em,         
    linear-gradient(
      rgba($bk,1) 45%, rgba($bk,1) 41%
    ) 
    0% 0% / 100% 10em,         
    linear-gradient(
      to bottom,
      rgba(#a9a9a9,.3), rgba($white,1) 
    ) 
    50% 6.5% / 40% 2em,
      
    linear-gradient(
      rgba($bk,1) 45%, rgba($bk,1) 41%
    ) 
    13.2% 0% / 100% 2.2em,        
      
// TOP LEFT     
     
    radial-gradient(
       93% 98% at 50% 100%,
      
        rgba(#fff,1) 50%,
        rgba($t,.0) 52% 
      )
      28%  1% / 6.5em 5em, 
 
// BOTTOM PINK LINE      
    linear-gradient(
      rgba($bk,1) 45%, rgba($bk,1) 41%
    ) 
    13.2% 100% / 100% 1.1em,  

// // END BOTTOM    
// RIGHT           
    radial-gradient(
       93% 98% at 0% 20%,
      
        rgba(#EFEFEF,.0) 50%,
        rgba($bk,1) 52% 
      )
      110%  125% / 15em 22em,     
// HAS SHADOW      
    linear-gradient(
      -107deg,
      rgba($bk,.5) 45%, rgba(#333,.2) 45%,
      rgba(#333, 0) 50%
    )
     100% 79.5% / 13em 45em,   
    linear-gradient(
      -107deg,
      rgba($bk,1) 45%, 
      rgba(#EFEFEF,.0) 41%
    )
     100% 79.5% / 13em 45em,      
// LEFT    
    radial-gradient(
       93% 98% at 100% 20%,
      
        rgba($t,.0) 50%,
        rgba($bk,1) 52% 
      )
      -10%  125% / 15em 22em, 
// HAS SHADOW      
    linear-gradient( 
      107deg,
      rgba($bk,.5) 45%, rgba(#333,.2) 45%,
      rgba(#333, 0) 50%
    )
     0% 79.5% / 13em 45em,     
    linear-gradient(
      107deg,
      rgba($bk,1) 45%, rgba($t,.0) 41%
    )
     0% 79.5% / 13em 45em,   
      rgba($white,1)  
      ;
    background-repeat: no-repeat;

  }

}

.top_left{
  width: 13em;
  height: 13em;
  position: absolute;
  top: 7%;
  left: 29%;
  border-radius: 50%;
  transform: translate(-50%,0) rotate(-23deg);  
  background: 
  
    radial-gradient(
       93% 98% at 50% 100%,
       
        rgba($t,0) 50%,
        rgba(#fff,.5) 52% 
      )
      28%  1% / 15em 5em,  
    
    ;  
  background-repeat: no-repeat;
  z-index: 2;
  &:after{
    content: "";
  width: 19em;
  height: 13.5em;
  position: absolute;
  top: -4%;
  left: 32%;
  border-radius: 50%;
  transform: translate(-50%,0) rotate(-8deg);   
  background: 
    radial-gradient(
      rgba($white,1) 42%, $t 80%)   28%  4% / 22em 10em,      
    radial-gradient($t 3%,rgba(#a9a9a9,.8) 42%, $t 80%)   28%  1% / 100% 7em,  
    $white
    ;  
  background-repeat: no-repeat;    
  }
}
.top_right{
  width: 10em;
  height: 10em;
  position: absolute;
  top: 7.5%;
  left: 75%;
  border-radius: 50%;
  border: 2px solid orange;
  // transform-origin: top left;
  transform: translate(-50%,0) rotate(23deg);  
  background:     
  
    radial-gradient(
       93% 98% at 50% 100%,
       
        rgba($t,0) 50%,
        rgba(#fff,.5) 52% 
      )
      28%  1% / 15em 5em,          
    ;  
  background-repeat: no-repeat;
  z-index: 2;
  &:after{
  content: "";
  width: 15em;
  height: 11em;
  position: absolute;
  top: -4%;
  left: 38%;
  border-radius: 50%;
  transform: translate(-50%,0) rotate(-10deg);    
  background:    
    radial-gradient(
      rgba($white,1) 42%, $t 80%)   28%  4% / 22em 10em,    
    radial-gradient($t 3%,rgba(#a9a9a9,.8) 42%, $t 80%)   28%  1% / 17em 7em, 
    $white
    ;  
  background-repeat: no-repeat;    
  }
  &:before{
  content: "";
  width: 19em;
  height: 13.5em;
  position: absolute;
  top: -4%;
  left: 40%;
  border-radius: 50%;
  transform: translate(-50%,0) rotate(-10deg);    
  background:    
    radial-gradient(
      rgba($white,1) 42%, $t 80%)   28%  4% / 22em 10em,      
    radial-gradient($t 3%,rgba(#a9a9a9,.8) 42%, $t 80%)   28%  1% / 17em 7em, 
    $white
    ;  
  background-repeat: no-repeat;    
  }  
}

.top_shape{
  z-index: 3;
  width: 14em;
  height: 6.4em;
  position: absolute;
  top: 6.2%;
  left: 49.5%;
  border-radius: 20px;
  transform: translate(-50%,0);
  background: 
    linear-gradient(to bottom,
      rgba($white,1) 4%, $t 13%
      ),
      rgba($white,1),    
    rgba(#f5f5f5,1);
  background-repeat: no-repeat; 
  &:after{
    content: '';
    width: 8em;
    height: 6.4em;
    position: absolute;
    top: 3%;
    left: 15.5%;
    border-radius: 20px;
    transform: translate(-50%,0) skew(40deg);
    background: 
      linear-gradient(to right,
      rgba(#A9A9A9,.2) 4%, $t 13%,
        #f5f5f5
      ),
      rgba(#f5f5f5,1),      
      ;
    background-repeat: no-repeat;    
  }
  &:before{
    content: '';
    width: 8em;
    height: 6.4em;
    position: absolute;
    top: 3%;
    left: 84%;
    border-radius: 20px;
    transform: translate(-50%,0) skew(-40deg);
    background: 
      linear-gradient(to left,
      rgba(#A9A9A9,.2) 4%, $t 13%,
        #f5f5f5
      ),
      rgba(#f5f5f5,1),      
      ;
    background-repeat: no-repeat;    
  }  
}

.over_bottom{
  z-index: 2;
  width: 27em;
  height: 14.5em;
  position: absolute;
  top: 85.5%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(#B9B9B9,1);  
  border-radius: 20px;
  background-repeat: no-repeat;
  &:after{
    content: '';
    width: 20em;
    height: 14.5em;
    position: absolute;
    top: -.3%;
    left: 91%;
    transform: translate(-50%,0%) skew(40deg);
    background:       
      
      linear-gradient(to left,
      #A9A9A9 1%, $t 3%
      ),
      rgba(#B9B9B9,1); 
    border-radius: 20px;
    background-repeat: no-repeat;    
  }
  &:before{
    content: '';
    width: 20em;
    height: 14.5em;
    position: absolute;
    top: -.3%;
    left: 10%;
    transform: translate(-50%,0%) skew(-40deg);
    background: 
      linear-gradient(to right,
      #A9A9A9 1%, $t 3%
      ),
      rgba(#B9B9B9,1);  
    border-radius: 20px;
    background-repeat: no-repeat;    
  }
}

.bottom{
  z-index: 2;
  width: 28em;
  height: 13em;
  position: absolute;
  top: 85.5%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: $bk;  
  border-radius: 20px;
  background-repeat: no-repeat;
  &:after{
    content: '';
    width: 15em;
    height: 13em;
    position: absolute;
    top: 0%;
    left: 92%;
    transform: translate(-50%,0%) skew(40deg);
    background: $bk;  
    border-radius: 20px;
    background-repeat: no-repeat;    
  }
  &:before{
    content: '';
    width: 15em;
    height: 13em;
    position: absolute;
    top: 0%;
    left: 8.5%;
    transform: translate(-50%,0%) skew(-40deg);
    background: $bk;  
    border-radius: 20px;
    background-repeat: no-repeat;    
  }  
}
.buttons_letters{
  width: 15em;
  height: 15em;
  position: absolute;
  top: 11%;
  left: 62.5%;
  background-repeat: no-repeat;
  z-index: 3;
  .btn-y{
    position: absolute;
    width: 4em;
    height: 4em;
    border:1px solid #333;
    background: 
    radial-gradient(
       93% 98% at 100% 20%,
      
        rgba(#F7F7F7,.3) 50%, 
        rgba($bk,0) 52% 
      )
      110%  125% / 100% 100%,  
      #333;
    background-repeat: no-repeat;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 10%;
    left: 39%;
    .shadow{
    position: absolute;
    width: 4em;
    height: 4em;
    background: gray; 
    z-index:-1;
    border-radius: 50%;
    top: .2em;
      left: -.2em;
    }
  .y{
    // top: 7%;
    // left: 43%;
    position: absolute;
    font-size: 4em;
    color: #FDE51F;
  }    
  }
  .btn-x{
    border:1px solid #333;
    position: absolute;
    width: 4em;
    height: 4em;
    background: 
      radial-gradient(
        93% 98% at 113% 20%,

        rgba(#F7F7F7,.3) 50%, 
        rgba($bk,0) 52% 
      )
      130%  125% / 100% 100%,  
      #333;
    background-repeat: no-repeat;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 37%;
    left: 10%;
    .shadow{
    position: absolute;
    width: 4em;
    height: 4em;
    background: gray; 
    z-index:-1;
    border-radius: 50%;
    top: .2em;
      left: -.2em;
    }
  .x{
    // top: 7%;
    // left: 43%;
    position: absolute;
    font-size: 4em;
    color: #1AA4EE;
  }    
  }  
  .btn-a{
    position: absolute;
    width: 4em;
    height: 4em;
    border:1px solid #333;
    background: 
    radial-gradient(
       93% 98% at 100% 10%,
      
        rgba(#F7F7F7,.3) 50%, 
        rgba($bk,0) 52% 
      )
      110%  125% / 100% 100%,  
      #333;
    background-repeat: no-repeat;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 66%;
    left: 39%;
    .shadow{
    position: absolute;
    width: 4em;
    height: 4em;
    background: gray; 
    z-index:-1;
    border-radius: 50%;
    top: .2em;
      left: -.2em;
    }
  .a{
    // top: 7%;
    // left: 43%;
    position: absolute;
    font-size: 4em;
    color: #99CA63;
  }    
  }  
  .btn-b{
    position: absolute;
    width: 4em;
    height: 4em;
    border:1px solid #333;
    background: 
    radial-gradient(
       93% 98% at 80% 20%,
      
        rgba(#F7F7F7,.3) 50%, 
        rgba($bk,0) 52% 
      )
      110%  125% / 100% 100%,  
      #333;
    background-repeat: no-repeat;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 37%;
    left: 67%;
    .shadow{
    position: absolute;
    width: 4em;
    height: 4em;
    background: gray; 
    z-index:-1;
    border-radius: 50%;
    top: .2em;
      left: -.2em;
    }
  .b{
    // top: 7%;
    // left: 43%;
    position: absolute;
    font-size: 4em;
    color: #E52A27;
  }    
  }    

}
.buttons_joysticks{
  z-index: 3;
  width: 50em;
  height: 24em;
  position: absolute;
  top: 42%;
  left: 50%;
  transform:translate(-50%,-50%);
  background-repeat: no-repeat;
  .left{
    width: 9em;
    height: 9em;
    position: absolute;
    top: 4.5%;
    left: 8.2%;
    border-radius: 50%;
    background: 
    radial-gradient(
       100% 100% at 50% 50%,
      rgba(#eee,.2) 30%,
      rgba(#252525,1) ,
        rgba(#eee,.2) 50%, 
        rgba($bk,0) 51% 
      )
      50%  50% / 6.8em 6.8em,      
    radial-gradient(
       100% 100% at 50% 50%,
        rgba(#252525,1) 50%, 
        rgba($bk,0) 51% 
      )
      50%  50% / 7.8em 7.8em,  
      rgba(#fff,.4);
    background-repeat: no-repeat;
      box-shadow:  
        0px 0px 15px 10px rgba(0,0,0,0.2),
        ;
    &:after{
      content: '';
      width: 5.7em;
      height: 5.7em;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      border-radius: 50%;
      background: 
      
    radial-gradient(
       100% 100% at 50% 50%,
      rgba(#333,.7) 30%,
      rgba(#252525,1) ,
        rgba(#eee,.2) 50%, 
        rgba($bk,0) 51% 
      )
      50%  50% / 5.7em 5.7em,   
        conic-gradient(from 90deg, #909090, #333, #909090, #333, #909090),    
    radial-gradient(
       100% 100% at 50% 50%,
      rgba(	#696969,1) 50%, 
        rgba($bk,.5) 51% 
      )
      50%  50% / 7.5em 7.5em,         
        ;
      position: absolute;
      
    }
  }
  .right{
    width: 9em;
    height: 9em;
    position: absolute;
    top: 44%;
    left: 58%;
    border-radius: 50%;
    background: 
    radial-gradient(
       100% 100% at 50% 50%,
      rgba(#eee,.2) 30%,
      rgba(#252525,1) ,
        rgba(#eee,.2) 50%, 
        rgba($bk,0) 51% 
      )
      50%  50% / 6.8em 6.8em,      
    radial-gradient(
       100% 100% at 50% 50%,
        rgba(#252525,1) 50%, 
        rgba($bk,0) 51% 
      )
      50%  50% / 7.8em 7.8em,  
      rgba(#fff,.4);
    background-repeat: no-repeat;
      box-shadow:  
        0px 0px 15px 10px rgba(0,0,0,0.2),
        ;
    &:after{
      content: '';
      width: 5.7em;
      height: 5.7em;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      border-radius: 50%;
      background: 
      
    radial-gradient(
       100% 100% at 50% 50%,
      rgba(#333,.7) 30%,
      rgba(#252525,1) ,
        rgba(#eee,.2) 50%, 
        rgba($bk,0) 51% 
      )
      50%  50% / 5.7em 5.7em,   
        conic-gradient(from 90deg, #909090, #333, #909090, #333, #909090),    
    radial-gradient(
       100% 100% at 50% 50%,
      rgba(	#696969,1) 50%, 
        rgba($bk,.5) 51% 
      )
      50%  50% / 7.5em 7.5em,         
        ;
      position: absolute;
      
    }
  }  
}
.button_dpad{
  z-index: 3;
  width: 12em;
  height: 12em;
  position: absolute;
  top: 51%;
  left: 38%;
  transform:translate(-50%,-50%); 
  display: flex;
  justify-content: center;
  align-items: center;
  .inner{
    position: relative;
    width: 11.5em;
    height: 11.5em;
    border-radius: 50%;
    background:     
      radial-gradient(
       100% 100% at 50% 50%,
        rgba(#fff,.1) 20%,
      rgba(	#E8E8E8,.9), 
      );
    background-repeat: no-repeat;
    .up_down{
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 3.5em;
      height: 9.7em;
      background: rgba(#282828,1);
      border-radius: 8px;
      &:after{
      content: '';
      width: 2.8em;
      border-radius: 8px;
      height: 9em; 
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background: 
    radial-gradient(
       93% 98% at 100% 50%,
      
        rgba(#d9d9d9,.051) 50%,
        rgba(#d9d9d9,.08) 52% 
      )
      -22%  125% / 3em 3em,        
      linear-gradient(
        to right,
        rgba(#fff,.45),
      rgba(#242424,.00), 
      
    )
     100% 0% / .1em 1em,          
        linear-gradient(
          to right,
          #989898 5%, rgba(#636363,.3) 6% ),        
      linear-gradient(
        -120deg,
      rgba($t,0) 45%, 
      rgba(#000,1) 41%
    )
     0% 5% / 1em 2.4em,         
      linear-gradient(
        120deg,
      rgba(#000,1) 45%, 
      rgba($t,0) 41%
    )
     0% 93% / 1em 2em, 
        
      linear-gradient(
      rgba(#000,1) 45%, 
      rgba(#000,1) 41%
    )
     0% 50% / 1em 4em,  
      linear-gradient(
       150deg,
        rgba(#fff,.3),
        rgba(#000,.3) ,
        rgba(#333,.3) ,
      rgba(#242424,.00), 
      
    )
     190% 15% / 3em 3em,         
        ;
        background-repeat: no-repeat;
      }
    }
    .left_right{
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%); 
      width: 9.7em;
      height: 3.5em;
      background: 
         
        linear-gradient(#333,#333) 60% 000% / 1.5em .22em, 
        linear-gradient(#313131,#313131) 60% 100% / 1.5em .4em,         
        linear-gradient(
          to right,
       #0A0A0A 50%, rgba(#585858,1)
        )
        ;
      background-repeat: no-repeat;
      border-radius: 8px;
     &:after{
      content: '';
      width: 9.2em;
      border-radius: 8px;
      height: 3em; 
      position: absolute;
       border-left: 2px solid #333;
       border-right: 3px solid #000;
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background:  
        linear-gradient(
          rgba(#fff,.2),
          rgba(#fff,.2)) 
        70% 0% / .3em .2em,         
        linear-gradient(
          rgba(#fff,.2),
          rgba(#fff,.2)) 
        100% 100% / 1.5em .2em,        
        linear-gradient(
          rgba(#fff,.2),
          rgba(#fff,.2)) 
        21% 100% / 1.5em .2em, 
      linear-gradient(
        to right,
        rgba(#fff,.14),
      rgba(#fff,.0), 
      
    )
     100% 500% / 4.6em 3em,        
      linear-gradient(
        to left,
        rgba(#0A0A0A,.6),
      rgba(#d9d9d9,.0), 
      
    )
     100% 500% / 1em 3em,           
      linear-gradient(
        to right,
        rgba(#fff,.4) 10%,
      rgba(#d9d9d9,.0), 
      
    )
     0% 50% / 1em 3em,                     
      linear-gradient(
        -120deg,
      rgba($t,0) 45%, 
      rgba(#000,1) 41%
    )
     0% 5% / 1em 2.4em,         
      linear-gradient(
        120deg,
      rgba(#000,1) 45%, 
      rgba($t,0) 41%
    )
     0% 93% / 1em 2em, 
        
      linear-gradient(
      rgba(#000,1) 45%, 
      rgba(#000,1) 41%
    )
     0% 50% / 1em 4em,          
        ;
        background-repeat: no-repeat;
      }
    }    
  }
}
.buttons_middle{
  .view{
    z-index: 3;
    width: 2.8em;
    height: 2.8em;
    background: rgba(red,.0);
    border:1.3px solid black;
    position:absolute;
    top: 24.6%;
    left: 40.9%;
    border-radius: 50%;
    box-shadow: -2px 4px 2px  rgba(#000,.2);
    .rect{
      z-index: 3;
      width: 1.3em;
      height: .9em;
      border:1.5px solid #000;
      position:absolute;
      top: 25%;
      left: 23%;
      &:nth-of-type(2){
      width: 1.4em;
      height: 1.4em;;
        background: #fff;
        border: none;
      top: 35%;
      left: 30%; 
        border-radius: 50%;
        &:before{
      width: 1em;
      height: .6em;
      border:1.5px solid #000;               top: 10%;
      left: 8%; 
          content: '';
          position: absolute;

          background: #fff;
          
        }
      }
    }
  }
  .menu{
    z-index: 3;
    width: 2.8em;
    height: 2.8em;
    border:1.3px solid black;
    position:absolute;
    top: 24.6%;
    left: 54.9%;
    border-radius: 50%;
    box-shadow: -2px 4px 2px  rgba(#000,.2);
    background:       
      linear-gradient(
        to right,
        rgba(#000,1),
      rgba(#000,1), 
      
    )
     50% 28% / 1.2em .2em, 
      linear-gradient(
        to right,
        rgba(#000,1),
      rgba(#000,1), 
      
    )
     50% 47% / 1.2em .2em,    
      linear-gradient(
        to right,
        rgba(#000,1),
      rgba(#000,1), 
      
    )
     50% 70% / 1.2em .2em,       
      ;
    background-repeat: no-repeat;
  }  
}

.bumpers_blockers_top{
  position:absolute;
  width: 61em;
  top: 8%;
  height:  15em;
  left:50%;
  transform: translate(-50%,-50%);
  .left{
  width: 20em; 
  height: 15em;
  position:absolute;
  transform-origin: bottom left;
  transform: rotate(-17deg);
  top: -3.6%;
  left: 15%;
  background: 
    radial-gradient(
      120% 100% at 50% 100%,
      // orange,
      rgba(#333,1) 50%, 
      rgba($t,.0) 52% 
    ) 
    100%  81% / 14em 10em,          
    radial-gradient(
      120% 100% at 50% 100%,
      // orange,
      rgba(#333,1) 50%, 
      rgba($t,.0) 52% 
    )
    0%  50% / 17em 10em, 
    ;
  background-repeat: no-repeat;    
  }
  .right{
  width: 20em; 
  height: 15em;
  position:absolute;
  transform-origin: bottom left;
  transform: rotate(16deg);
  // top: -5%;
  top: -35.5%;
  left: 58%;
  background: 
    radial-gradient(
      120% 112% at 50% 100%,
      // orange,
      rgba(#333,1) 50%, 
      rgba($t,.0) 52% 
    ) 
    100%  70% / 14em 10em,     
    radial-gradient(
      120% 100% at 50% 100%,
      // orange,
      rgba(#333,1) 50%, 
      rgba($t,.0) 52% 
    ) 
    24%  44.5% / 16em 10em,          
    radial-gradient(
      120% 100% at 50% 100%,
      // orange,
      rgba(#333,1) 50%, 
      rgba($t,.0) 52% 
    )
    0%  50% / 17em 10em, 
    ;
  background-repeat: no-repeat;    
  }  
  .middle{
    width: 18em; 
    height: 10em;

    position:absolute;
    top: 20%;
    left:50%;
    transform: translate(-50%,0);
    background: 
     linear-gradient(
      rgba(#333,1) 45%, rgba(#333,1) 41%
    )
     0% 33% / 18em 4em, 
      ;
    background-repeat: no-repeat;
    
  }
}
.bumpers_blockers_bottom{
  .left{
  width: 20em; 
  height: 15em;
  position:absolute;
  transform-origin: bottom left;
  transform: rotate(-17deg);
  // top: -5%;
  top: -3.6%;
  left: 15%;
  background: 
    radial-gradient(
      120% 100% at 50% 100%,
      // orange,
      rgba($white,1) 50%, 
      rgba($t,.0) 52% 
    ) 
    100%  75% / 13em 10em,     
    radial-gradient(
      120% 100% at 50% 100%,
      // orange,
      rgba($white,1) 50%, 
      rgba($t,.0) 52% 
    ) 
    24%  44.5% / 16em 10em,     
    radial-gradient(
      120% 100% at 50% 100%,
      // orange,
      rgba($white,1) 50%, 
      rgba($t,.0) 52% 
    )
    58%  44.5% / 13em 10em,     
    radial-gradient(
      120% 100% at 50% 100%,
      // orange,
      rgba($white,1) 50%, 
      rgba($t,.0) 52% 
    )
    0%  50% / 17em 10em, 
    ;
  background-repeat: no-repeat;    
  }
  .right{
  width: 20em; 
  height: 15em;
  position:absolute;
  transform-origin: bottom left;
  transform: rotate(16deg);
  // top: -5%;
  top: -15.5%;
  left: 58%;
  background: 
    radial-gradient(
      120% 100% at 50% 100%,
      // orange,
      rgba($white,1) 50%, 
      rgba($t,.0) 52% 
    ) 
    100%  75% / 13em 10em,     
    radial-gradient(
      120% 100% at 50% 100%,
      // orange,
      rgba(#fff,1) 50%, 
      rgba($t,.0) 52%  
    ) 
    24%  44.5% / 16em 10em,     
    radial-gradient(
      120% 100% at 50% 100%,
      // orange,
      rgba($white,1) 50%, 
      rgba($t,.0) 52% 
    )
    58%  44.5% / 13em 10em,     
    radial-gradient(
      120% 100% at 50% 100%,
      // orange,
      rgba($white,1) 50%, 
      rgba($t,.0) 52% 
    )
    0%  50% / 17em 10em, 
    ;
  background-repeat: no-repeat;    
  }  
  .middle{
    width: 18em; 
    height: 10em;
    position:absolute;
    top: 2%;
    left:50%;
    transform: translate(-50%,0);
    background: 
     linear-gradient(
      rgba($white,1) 45%, rgba($white,1) 41%
    )
     0% 33% / 18em 4em, 
      ;
    background-repeat: no-repeat;
    
  }
}
.main_logo_cont{
  width: 20em;
  height: 8em;
  position: absolute;
  top:6%;
  left: 35%;
  transfrom: translate(-50%,-50%);
  z-index:4;

  .middle{
    width: 14em;
    height: 5em;
    position: absolute;
    top: 14%; 
    left: 85.6%;
    transform: translate(-50%-50%);
    background: 
     
     linear-gradient(
      rgba($white,1) 60%, rgba(#333,.1) 
    )
     58% 100% / 92% 2em, 
      rgba($white,.2)
      ;
    background-repeat: no-repeat;
    border-radius: 15px;
  }
}

.logo{
  width: 5em;
  height: 5em;
  position: absolute;
  z-index:5;
  left: 50%;
  top:11.7%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background-repeat: no-repeat;
  
  svg{
    position: absolute;
    top: 10%;
  }
}


.bottom_middle{
  width: 100%;
  height: 8em;
  position: absolute;
  top: 106%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 4; 
  // border:1px solid green;
  background: 
    linear-gradient(
      to bottom,
      rgba($bk,1), rgba($bk,1) 
    ) 
    50% 6.5% / 100% 100%,    
   
    ;
  background-repeat: no-repeat;
}

xbox-one-controller.markdown

Xbox One Controller

A Pen by mycooldj.eth on CodePen.

License.