Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="camera">
  <div class="back"></div>
  <div class="top_middle">
    
    <div class="top_left">
      <div class="body">
        <div class="border"></div>
        <div class="middle"></div>        
      </div>
    </div>
    <div class="plus_button">
      <div class="inner">
        <h1>
          <i class="fas fa-plus"></i></h1>
      </div>
    </div>
    <div class="under_plus">
      <div class="inner"></div>
    </div>
     <div class="red_button_container">
       <div class="red_button"></div>
  </div>
    <div class="lens">
      <div class="lens_1">
        <div class="lens_2">
          <div class="lens_3">
            <div class="lens_4">
<!--       green goes here         -->
              <div class="lens_5">
                <div class="lens_6">
                  <div class="lens_7"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="under_lens">
      <div class="inner"></div>
    </div>
    <div class="rainbow"></div>
    <div class="top_right">
      <div class="viewfinder">
        <div class="inner_1">
          <div class="inner_2">
            <div class="inner_3">
              <div class="hole"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="shadows_middle"></div>
      <div class="shadows_left"></div>
      <div class="shadows_left_corner"></div>
      <div class="shadows_right"></div>
      <div class="shadows_right_corner"></div>      
    </div>
    <div class="middle_right">
      <div class="middle">
        <div class="circle"></div>
      </div>
      <p class="minus">
        <i class="fas fa-minus"></i>
      </p>
      <p class="plus">
        <i class="fas fa-plus"></i>
      </p>
    </div>
    <div class="text">
      <h1>One</h1>
      <h1>Step</h1>
      <h1><i class="fas fa-plus"></i></h1>
    </div>
 </div>
  <div class="bottom">
    <div class="top">
      <div class="left"></div>
      <div class="middle">
        <div class="switch">
          <div class="switch_btn"></div>
        </div>
      </div>
      <div class="right"></div>
    </div>
    <div class="btm">
      <h1>Polaroid</h1>
      <h1>I-TYPE CAMERA</h1>
      <div class="logo"></div>
    </div>
  </div>
  <div class="under_btm"></div>
  <div class="corners">
    <div class="corner_left"></div>
    <div class="corner_right"></div>
  </div>
</div>
              
            
!

CSS

              
                $t: transparent;
$bk: #B0C8C1;
$pink:#F60C46;

@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

*{
  box-sizing: border-box;
}
body{
  background:$bk;
  font-size: 1vmin;
}
.camera {
  font-size: 1.15vmin;
  width: 66em;
  height: 55em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .back{
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;      
    width: 63.3em;
    height: 39.5em;
      position:absolute;
      content: '';
    top:-.6em;
    left: 50.1%;
    transform:translate(-50%,0%);
      background:
    linear-gradient(
      to bottom,
       rgba(#626265,1),
     rgba(#222126,.4)
    )
   100% 6% / 100% 2em,          
    linear-gradient(
      to left,
       rgba(#222126,1),
     rgba(#8D8D90,1)
    )
   100% 0% / .8em 100%,         
    linear-gradient(
      to right,
       rgba(#222126,1),
     rgba(#8D8D90,1)
    )
   0% 0% / .8em 100%,         
    linear-gradient(
      to right,
      rgba(#000,.3) 5%,
       rgba(#8D8D90,1),
     rgba(#8D8D90,1),
      rgba(#000,.3) 95%,
    )
   10.8% 0% / 100% 3.5em,               
    linear-gradient(
      to bottom,
       rgba(#8D8D90,1),
     rgba(#8D8D90,1)
    )
   10.8% 0% / 100% 100%,                    
        #222126 
        ;
      background-repeat: no-repeat;    
  }
  .top_middle{ 
    position: absolute;
    width: 62em;
    height: 34.8em;
    border-top:2px solid #363838;
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;
    top: 0%;
    left: 50%;
    transform:translate(-50%,0%);
    background:
        linear-gradient(
          to top,
        rgba(#fff,.08) 1%,
          rgba(#fff,.0) 5%,
        )
        100% 100% / 100% 100%,       
      rgba(#28272B,1);
    background-repeat: no-repeat;
    .top_left{
      width: 11.3em;
      height: 19.4em;
      border-right: 2px solid #A6A89E;
      border-bottom: 2px solid #A6A89E;
      border-left: 2px solid #A6A89E;
      border-top: 2px solid #5B5D5C;
        box-shadow:
    0 0 0 1px rgba(#282828, .7),
    0 0 0 2px rgba(#000, .5)
          ;
      border-radius: 1.4em;
      position: absolute;
      top: 2.7em;
      left: 2.8em;
      background:
        linear-gradient(
          to top,
        rgba(#000,1),
          rgba(#232323,0),
        )
        0% 0% /100% .3em,          
        linear-gradient(
          to right,
        rgba(#000,1),
          rgba(#232323,0),
        )
        0% 100% /.5em 100%,         
        #565656;
      background-repeat: no-repeat;
      .body{
        overflow: hidden;
      width: 10.1em;
      height: 18.1em;   
        border-radius: inherit;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
      background: 
        linear-gradient(
        to bottom,
          rgba(#fff,1)60%,
          rgba(gray,.5)
        )
        
        ;
      background-size: 100% .2em; 
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);        
      &:before{
        content: '';
        width: 100%;
        height: 11.7em;
        position: absolute;
        top:52%;
        left:50%;
        transform: translate(-50%,-50%);
      background: 
        linear-gradient(
        to bottom,
          rgba(#232323,1)55%,
          rgba(#fff,.5)
        );     
        background-size: 100% .3em;
      }    
      &:after{
        content: '';
        width: 60%; 
        height: 120%;
        position: absolute;
        top:52%;
        left:50%;
        transform: translate(-50%,-50%);
        background: 
    linear-gradient(
    #E0E0E0 49%,
      $t 51%,
    )
    50% 0% / 95% 5em, 
    linear-gradient(
      to top,
    #E0E0E0 49%,
      $t 51%,
    )
    50% 100% / 95% 5.5em,           
          #fff
          ;
      background-repeat: no-repeat;        
      }   
        
        
        }
      .middle{
        z-index: 5;
        width: 50%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
        background: 
        linear-gradient(
          to right,
          #DFDFDF 20%,
        #fff 45%,
          #DFDFDF 50%,
        )
        ,            
        // #fff
          ;
        background-size: .5em 100%;
      &:before{
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top:52%;
        left:50%;
        transform: translate(-50%,-50%);
        background: 
    linear-gradient(
    #c7c7c7 48%,
      #232323,
      $t 53%,
    )
    50% 5% / 95% .5em,           
    linear-gradient(
    #E0E0E0 49%,
      $t 51%,
    )
    50% 0% / 95% 2.5em, 
          
    linear-gradient(
      to top,
    #bababa 29%,
      $t 31%,
    )
    50% 100% / 95% 3em,           

          ;  
      background-repeat: no-repeat;
      }   
      &:after{
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top:52%;
        left:50%;
        transform: translate(-50%,-50%);
        background: 
    linear-gradient(
      #888888,
      #888888 53%,
    )
    50% 50% / .15em 88%,   
    linear-gradient(
      #888888,
      #888888 53%,
    )
    50% 50% / .4em 88%,          

          ;  
      background-repeat: no-repeat;
      }         
      }
      } 
    .red_button_container{
      width: 8.3em;
      height: 8.3em;
      position: absolute;
      top: 73.7%;
      left: 9.7%;
      transform:translate(-50%,0%); 
      border-radius: 50%;
      border: 10px solid #2D292B;
      border: 4px solid #3A3537;
      box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
    box-shadow:  
      4px 5px 4px rgba(0,0,0,0.9), 
      5px 5px 15px rgba(0,0,0,0.9),
      0 6px 6px rgba(0,0,0,0.33),
      ;       
      .red_button{
        width: 90%;
        height: 90%;
        position: absolute;
        border:2px solid #000;
        border-top: 4px solid #000;
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%);
        border-radius:50%;
        background:          
          #000;
        background-repeat: no-repeat;
        &:after{
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        border:1px solid #000;
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%);
        border-radius:50%;
        background: 
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#D10F00,1) 50%,
      rgba($t,.0) 51%
      )
      65% 50% / 90% 95%,           
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#fff,.5) 50%,
      rgba($t,.0) 51%
      )
      90% 50% / 90% 90%,              
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#D10F00,1) 50%,
      rgba($t,.0) 51%
      )
      50% 50% / 90% 95%,           
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#fff,.5) 50%,
      rgba($t,.0) 51%
      )
      0% 50% / 90% 90%,           
          #D10F00;
        background-repeat: no-repeat;          
        }
      }
    }
    .lens{
      overflow: hidden;
      width: 25.2em;
      height:25.2em;
      border-top:2px solid #ADACB1;
      border-bottom: 2px solid #211100;
      position: absolute;
      z-index: 1;
      top:40.5%;
      left:52.8%;
      transform: translate(-50%,-50%);
      border-radius: 50%;
    box-shadow:  
    0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),      
      4px 5px 4px rgba(0,0,0,0.9), 
      5px 5px 15px rgba(0,0,0,0.9),
      0 6px 6px rgba(0,0,0,0.33),
      0 6px 6px rgba(0,0,0,0.33),
      0px -4px 3px rgba(50, 50, 50, 0.55),
     -2px -2px 3px 5px rgba(#000, 0.15)
      ;         
      background:
//         full round shading
    radial-gradient(
        100% 100% at 50% 50%,
      $t 42%,
      rgba(#f2f2f2,.02) 44%,
      rgba(#f2f2f2,.01) 47%,
      rgba(#000,.2) 48%,
        rgba(blue,.0) 51%,
      rgba(red,0)
      )
      50% 50% / 100% 100%,        
//         right shading
    radial-gradient(
        100% 100% at 0% 50%,
      $t 42%,
      rgba(#f2f2f2,.08) 44%,
      rgba(#f2f2f2,.05) 47%,
      rgba(#000,.6) 48%,
        rgba(blue,.0) 51%,
      rgba(red,0)
      )
      12.8em 50% / 100% 110%,   
//         left shading
    radial-gradient(
        100% 100% at 100% 50%,
      $t 45%,
      rgba(#000,.3) 47%,
      rgba(#f2f2f2,.2) 48%,
        rgba(blue,.0) 50%,
      rgba(red,0)
      )
      -15.5em 50% / 120% 120%,         
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#2C2C30,.08) 10%,
      rgba(#2C2C30,.05) 40%,
      rgba(#2C2C30,1)70%,
      // red 
      // rgba($t,.0)
      )
      50% 50% / 100% 100%,          
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#fff,.08) 10%,
      rgba(#fff,.05) 40%,
      rgba(#fff,.02)70%,
      )
      50% 50% / 100% 100%,         
        #353438;
      background-repeat: no-repeat;
      .lens_1{
        width: 22em;
        height:22em;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;  
        background:
          #111316;
        background-repeat: no-repeat;
        &:before{
          @include center;
          z-index: 15;
          position: absolute;
          content: '';
          width: 150%;
          border:1px solid red;
          height:120%;
          background:
//             top:
          -webkit-radial-gradient(
            50% 0%,
            28% 50%, 
            rgba(#222427, 0.5) 0%,
            rgba(255, 255, 255, 0) 100%
          ),            
//             left
          -webkit-radial-gradient(
            0% 50%, 50% 27%, 
            rgba(#222427, 0.6) 0%, 
            rgba(255,255,255,0)100%), 
//             right
          -webkit-radial-gradient(
            100% 50%, 50% 45%, 
            rgba(#535558, 0.25) 0%, 
            rgba(255, 255,255,0)100%),  
//             btm
          -webkit-radial-gradient(
            50% 100%, 32% 50%,        
            rgba(#535558, 0.32) 0%, 
            rgba(255,255,255,0)
            100%),            
            ;
        }
        .lens_2{
          width: 93%;
          height:93%;
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%);
          border-radius: 50%;                   border-bottom:2px solid rgba(#ADACB1,.7);
          border-left:2px solid rgba(#ADACB1,.5);
          border-right:2px solid rgba(#ADACB1,.5);  
          background: 
            repeating-radial-gradient(
              circle at 50%, 
              #3F3F43 3px,
              #1E1D22 2px, 
              #414145 7px)            
            
            ;
          .lens_3{
          width: 64%;
          height:64%;
          border: 5px solid #232323;
          position: absolute;
          top:52%;
          left:50%;   
          transform: translate(-50%,-50%);
            border-radius: 50%;
    background: 
      radial-gradient(
        100% 100% at 50% 50%,
        rgba(#232323,1) 10%,
      rgba(#232323,.7) 40%,
      rgba(#232323,.8)70%,
      )
      50% 50% / 100% 100%;
            background-repeat: no-repeat;
          }
          .lens_4{
            width: 99%;
            height: 97%;
            background:#1C1B20;
            border-radius: inherit;
            position: absolute;
            top:51%;
            left:50%;
            transform: translate(-50%,-50%);
            .lens_5{
              width: 95%;
              height: 95%;
              border:0px solid #1C1B20;
              border-radius: inherit;
              border-left:2px solid #7C897C;
              border-right: 2px solid #7C897C;
              
              position: absolute;
              top:51%; 
              left:50%;
              transform: translate(-50%,-50%);
              background:
              linear-gradient(
                -20deg,
              #28272E 49%,
                $t 51%,
              )
              50% 100% / 100% 5.5em,                   
              radial-gradient(
                  100% 110% at 100% 50%, 
                // $t 30%,
                rgba(#396440,0)  49%,
                rgba(#396440,.6) 50%
                )
              -2.5em 50% / 70% 95%,                          
              radial-gradient(
                  100% 110% at 00% 50%, 
                  rgba($pink,.0) 45%,
                rgba(#396440,.6) 47%
                )
                6em 50% / 70% 95%,                 
                rgba(#28272E,1)
                ;
              background-repeat: no-repeat;
            .lens_6{
              width: 82%;
              height: 82%;
              border:1px solid #1C1B20;
              border-radius: inherit;
              position: absolute;
              top:51%; 
              left:50%;
              transform: translate(-50%,-50%);
              background:
                rgba(#1C1B20,1)  
                ;
              background-repeat: no-repeat;
            .lens_7{
              width: 75%;
              height: 75%;
              border:4px solid #070E10;
              // border:5px solid red;
              border-right: 1px solid #3D3B42;
              border-left: 1px solid #3D3B42;
              border-radius: inherit;
              position: absolute;
              top:51%; 
              left:50%;
              transform: translate(-50%,-50%);
              background:
              radial-gradient(
                  130% 100% at 50% 0%, 
                rgba(#070E10,0),
                
                rgba(red,0)  28%,
                rgba(#070E10,1) 40%,
                rgba($t,.0) 50%
                )
              50% 3em / 100% 100%,                  
                linear-gradient(
                  to right,
                  $t,
                #070E10,
                  #070E10,
                  $t
                )
                50% 53% / 3em 56%,                   
              radial-gradient(
                  180% 100% at 50% 50%, 
                rgba(#396440,0),
                
                rgba(#0A2220,.2)  25%,
                rgba(#070E10,1),
                rgba($t,.0) 50%
                )
              50% -3.2em / 100% 100%,
              radial-gradient(
                  130% 100% at 50% 50%, 
                rgba(#070E10,1),
                
                rgba(#070E10,1)  25%,
                rgba(#0A2220,0) 30%,
                rgba($t,.0) 50%
                )
              50% 3em / 100% 100%,
              radial-gradient(
                  100% 100% at 50% 50%, 
                rgba(#131313,.2) 45%,
                rgba(#fff,1)  49%,
                rgba(#131313,.2) 50%
                )
              50% 50% / 105% 115%,                  
              radial-gradient(
                  100% 100% at 50% 50%, 
                rgba(#131313,.7),
                rgba(#030305,.5)  49%,
                rgba(#3D3B42,.5) 50%
                )
              50% 50% / 90% 100%, 
               
                #396440
                ;
              background-repeat: no-repeat;
            }                
            }                
            }            
          }
        }
      }
    }
    .under_lens{
      border-radius: 50%;
      width: 4.2em;
      height: 4.2em;
      border-bottom: 3px solid #000;
      border-right: 1px solid rgba(#B5B4B8,.6);
    box-shadow:  
      -10px 10px 20px rgba(0,0,0,0.33), 
      0 6px 6px rgba(0,0,0,0.33),
      0 6px 6px rgba(0,0,0,0.33),
      0px -4px 3px rgba(50, 50, 50, 0.55),
     -5px -4px 3px 3px rgba(#000, 0.55)
      ;      
      position: absolute;
      top:72%;
      left:72%;
      transform: translate(-50%,-50%);
      background:      
        #27282C,
        #232227;
      background-repeat: no-repeat;
      .inner{
        width: 72%;
        height:72%;
        @include center;
        border-radius: inherit;
        background:#060606;
        background:
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#060606,1) 48%,
      rgba(#B5B4B8,.2) 55%
      )
      50% 50% / 90% 95%,          
          #B5B4B8;
        background-repeat: no-repeat;
      }
    }
    .rainbow{
      width: 6.5em;
      height:9em;
      position: absolute;
      top: 87%;
      left: 52.5%;
      transform: translate(-50%,-50%);
      z-index: 0;
      background: 
        linear-gradient(
        #E4341F 49%,
          #E4341F 51%,
        )
        0% 0% / 20% 100%,  
        linear-gradient(
        #FF9501 49%,
          #FF9501 51%,
        )
        20% 0% / 25% 100%,     
        linear-gradient(
        #FFC904 49%,
          #FFC904 51%,
        )
        45% 0% / 25% 100%,   
        linear-gradient(
        #1EB465 49%,
          #1EB465 51%,
        )
        68% 0% / 30% 100%,  
        linear-gradient(
        #03BCFF 49%,
          #03BCFF 51%,
        )
        100% 0% / 25% 100%,          
        ;
      background-repeat: no-repeat;
    }
    .plus_button{
      width: 3.5em;
      height:3.5em;
      border: 2px solid #000004;
      position: absolute;
      top: 14.5%;
      left:29%;
      border-radius: 5px;
      transform: translate(-50%,-50%);
      .inner{
        text-align:center;
        background:#0B0A0E;
        width: 100%;
        height: 100%;
        border-left: 1px solid rgba(#fff,.3);
        border-right: 1px solid rgba(#fff,.2);        
        h1{
          color:#96A2B1;
          font-size: 2.3em;
          font-weight: 600;
          position: absolute;
          top:50%;
          left:50%;
          transform: translate(-50%,-50%);
          
        }
      }
    }
    .under_plus{
      width:3em;
      height:3em;
      position: absolute;
      top: 30%;
      left:29%;
      border-radius: 50%;
      transform: translate(-50%,-50%);
      border-left:2px solid rgba(#fff,.5);
      border-top:2px solid rgba(#fff,.4);  
      .inner{
        width:2.7em;
        height:2.7em;
        border-radius: inherit;
        position: absolute;
        @include center;
        background:
        radial-gradient(
          100% 100% at 50% 50%,
           rgba(#fff,.55) 10%,
          rgba(#fff,.1) 12%,
          rgba(#000,.0) 21%
        )
          50% 0% / 100% 100%,          
        radial-gradient(
          100% 100% at 50% 50%,
           rgba(#000,.3),
          rgba(#000,.4) 50%,
          rgba(red,.8) 51%
        )
          50% 0% / 100% 100%,          
        radial-gradient(
          100% 100% at 50% 50%,
           rgba(#3f363f,.5),
          rgba(#161316,1) 50%,
          rgba(red,.0) 51%
        )
          50% 50% / 85% 85%,           
        radial-gradient(
          100% 100% at 50% 50%,
           rgba(#3f363f,.5),
          rgba(#161316,1) 50%,
          rgba(red,.0) 51%
        )
          50% 50% / 85% 85%,          
          #4E4E50;
        background-repeat: no-repeat;
      }
    }
    .top_right{
      width: 13em;
      height: 13.4em;
      border-top: 1px solid #858488;
      border-left: 1px solid #858488;
      border-right: 2px solid #181818;
      border-bottom: 1px solid #858488;
      position: absolute;
      top: 25%;
      left:87%;
      transform: translate(-50%,-50%);
      border-radius: 1.5em;
      box-shadow: 0px -3px 1px rgba(#181818, 0.75), 
        inset 0px 0px 15px 0px rgba(#181818,.4),
        inset 0px 0px 6px 0px rgba(#fff,.4)
        ;
      .viewfinder{
        width: 97%; 
        height:97%;
        border-radius: inherit;
        @include center;
        background:               
          #262628;
        background-repeat: no-repeat;
        border: 1px solid #3E3E3E;
     
        .inner_1{
          width: 83%; 
          height:81%;
          border-radius: inherit;
          position: absolute;
          top: 55%;
          left:47%;
          transform: translate(-50%,-50%);
          border: 2px solid #D2D2D2;       
          background:            
            linear-gradient(
            -30deg,
              #3D3C40,
              #A4A4A4,
              #CACACA,
            );
          &:before{
            content: '';
            width: 95%;
            height:98%;
            @include center;
            background:
               
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#131313,1) 50%,
      rgba($t,.0) 51%
      )
      50% -2.4em / 140% 95%,              
              #1C1C1C;
            background-repeat: no-repeat;
            border-radius: inherit;
          }
          .inner_2{
            width: 80%;
            height: 80%;
            border:1px solid white;
            border-radius: inherit;
            position: absolute;
            top:53%;
            left:50%;
            transform:translate(-50%,-50%);
            background:                
              linear-gradient(
              -30deg,
                #3D3C40,
                #A4A4A4,
                #CACACA,
            )50% 100% / 100% 100%;  
            background-repeat: no-repeat;
            &:before{
              border-radius: inherit;
              content: '';
              width: 90%;
              height: 90%;
              border:2px solid #1C1C1C;
              @include center;
            }                 
            .inner_3{
              width: 85%;
              height:85%;
              border-radius: inherit;
              @include center;
              background:
              radial-gradient(
                  100% 100% at 50% 50%,
                  rgba(#131313,1) 50%,
                rgba($t,.0) 51%
                )
                50% -1.3em / 140% 95%,                 
                
                #1C1C1C;
              background-repeat: no-repeat;
              .hole{
                width: 1.7em;
                height:1.7em;
                background:$pink;
                border-radius: 2px;
                position: absolute;
                top: 57%;
                left: 47%;
                transform: translate(-50%,-50%);
                background: #DDDDDB;
        &:before{
          z-index: 3;
          width: 87%;
          height:50%;
          content: '';
          position: absolute;
          top: -1.8em;
          left: .15em;
          background:            
    linear-gradient(
      to right,
      $t,
    rgba(#fff,.1) 20%,
      rgba(#fff,.15),
      rgba(#fff,.1),
      $t
    )
    50% 100% / 95% 100%,            
            
            ;
          background-repeat: no-repeat;
        }                
              }
            }
          }
        }

        &:before{
          z-index: 3;
          width: 100%;
          height: 100%;
          content: '';
          position: absolute;
          background: 

    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#000,.5) 48%,
      rgba($t,.0) 55%
      )
      50% -7em / 100% 95%,             
    linear-gradient(
      to right,
    rgba(#000,.4) 49%,
      rgba(#000,.4) 51%,
    )
    100% 50% / 12% 95%,              
            ;
          
          background-repeat: no-repeat;
        }
      }
        .shadows_middle{
          z-index: 8;
          position: absolute;
          width: 59%;
          height: 30%;
          top: 25%;
          left:47%;
          transform:translate(-50%,-50%);
          background:
    radial-gradient(
        105% 80% at 50% 100%,
        rgba($pink,.0) 25%,
      rgba(#fff,.3),
      rgba(#fff,.3),
      rgba(#fff,.0) 55%
      )
      50% -2em / 105% 100%,            
            ;
          background-repeat: no-repeat;
        }      
        .shadows_left{
          z-index: 8;
          position: absolute;
          width: 3em;
          height: 4.5em;
          top: 45%;
          left:70%;
          transform:translate(-50%,-50%) rotate(-10deg);
          background:
    radial-gradient(
        100% 120% at 00% 50%, 
        rgba($pink,.0) 45%,
      rgba(#1F1F1F,1) 47%
      )
      2em 50% / 70% 95%,              
    radial-gradient(
        100% 120% at 00% 50%,
        rgba(#1F1F1F,.7) 50%,
      rgba($t,.0) 51%
      )
      -.4em 50% / 90% 95%,            
          linear-gradient(
            65deg,
            $t,
          rgba(#E0E0E0,.2) ,
            rgba(#E0E0E0,.3),
            rgba(#E0E0E0,.2),
            $t
          )
          50% 100% / 100% 5.5em,               
            ;
          background-repeat: no-repeat;
        }     
        .shadows_left_corner{
          z-index: 8;
          position: absolute;
          width: 50%;
          height:50%;
          top: 70%;
          left:65%;
          transform:translate(-50%,-50%) rotate(45deg);
          background:
    -webkit-radial-gradient(100% 50%, 50% 15%, rgba(255, 255, 255, 0.5) 0%, rgba(
            255,
            255,
            255,
            0
          )
          100%),               
            ;
          background-repeat: no-repeat;
        }       
        .shadows_right{
          z-index: 8;
          position: absolute;
          width: 3em;
          height: 4.5em;
          top: 45%;
          left:20%;
          transform:translate(-50%,-50%) rotate(10deg);
          background:
    radial-gradient(
        100% 120% at 50% 50%, 
        rgba(#1F1F1F,.7) 45%, 
      rgba($t,.0) 47%
      )
      2.4em 50% / 70% 95%,                          
    radial-gradient(
        100% 120% at 00% 50%,
        rgba(#1F1F1F,.7) 50%,
      rgba($t,.0) 51%
      )
      -.4em 50% / 90% 95%,            
          linear-gradient(
            65deg,
            $t,
          rgba(#E0E0E0,.2) ,
            rgba(#E0E0E0,.3),
            rgba(#E0E0E0,.2),
            $t
          )
          50% 100% / 100% 5.5em,               
            ;
          background-repeat: no-repeat;
        }    
        .shadows_right_corner{
          z-index: 8;
          position: absolute;
          width: 50%;
          height:50%;
          top: 72%;
          left:30%;
          transform:translate(-50%,-50%) rotate(-45deg);
          background:
    -webkit-radial-gradient(0% 50%, 50% 15%, rgba(255, 255, 255, 0.5) 0%, rgba(
            255,
            255,
            255,
            0
          )
          100%),              
            ;
          background-repeat: no-repeat;
        }       
    }
    .middle_right{
      width: 12em;
      height:3em;
      position: absolute;
      left: 86.5%;
      top:51%;
      transform:translate(-50%,-50%);
      p{
      text-shadow: 
        -.04em -.04em -0px #535259,
        .04em .04em 0px #090809
        ; 
      color:#28272B;  
        font-size: 1.8em;
        font-weight: 200;  
        position: absolute;
        width: 1.5em;   
        top:50%;     
        transform:translate(-50%,-50%);           text-align:center;
      }    
      .plus{
        width: 1.5em;
        
        left: 90%;
      }
      .minus{
        left: 12%;
      }
      .middle{
        width: 5.5em;
        height: 2.2em;
        @include center;
        background:
    linear-gradient(
      to right,
    rgba(#323135,.5) 49%,
      rgba(#323135,.7) 51%,
      rgba(#2F2F33,.5),
    )
    50% 5% / 3.5em .1em,   
    linear-gradient(
      to right,
    #050507 49%,
      #050507 51%,
    )
    50% 100% / 2.7em 2.2em,            
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#050507,1) 50%,
      rgba($t,.0) 51%
      )
      .7% 50% /2.2em 2.2em, 
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#fff,.2) 50%,
      rgba($t,.0) 51%
      )
      0% 50% /2.2em 2.2em,           
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#050507,1) 50%,
      rgba($t,.0) 51%
      )
      98% 50% /2.2em 2.2em,
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#fff,.2) 50%,
      rgba($t,.0) 51%
      )
      100% 50% /2.2em 2.2em,           
          ;
        background-repeat: no-repeat;
        &:before{
          width: 75%;
          height:1em;
          content: '';
          position: absolute;
          box-shadow: 0 1px 1px -1px gray;
          top:75%;
          left:50%;
          transform:translate(-50%,-50%);
        } 
        .circle{
          width: 2em;
          height:2em;
          @include center;
          border-radius: 50%;
          background:#C0BFC3;
          &:before{
            content: '';
            width: 1.8em;
            height:1.85em;
            @include center;
            border-radius: 50%;
            background:
    linear-gradient(
      to bottom,
    #111015,
      rgba(#2F2F33,.2) 51%,
    ),
            #111015           
            ;
          background-repeat: no-repeat;
          }
        }
      }      
    }
    .text{
        width: 10em;
        height: 7em;
        position: absolute;
        top:85%;
        left:87%;
      transform: translate(-50%,-50%);
      h1{
        font-family: Arial;
        font-size:4em;
        color: #77767B;
        position:absolute;   
        letter-spacing: -1px;
      }
      h1:nth-of-type(1){
        left: .3em;
      }
      h1:nth-of-type(2){
        top: .7em;
      }
      h1:nth-of-type(3){
        color:#C14633;
        top: .8em;
        left:2.4em;
        font-size:3.3em;
      }           
    }
  }
  .bottom{
    width: 101%;
    height: 20.5em;
    position: absolute;
    top: 82%;
    left:50%;
    transform: translate(-50%,-50%);
    background:#25262A;
    &:before{
      position: absolute;
      content: '';
      width: 100%;
      height: inherit;
      z-index: 7;
      background: 
// shading
        // right
    linear-gradient(
      to left,
       rgba($t,.2) 11%,
       rgba(#929095,.15),
       rgba(#929095,.15),
     rgba($t,.0) 91%
    )
   99.5% 0% / 3em 20%,         
    linear-gradient(
      to left,
       rgba($t,.2) 11%,
       rgba(#929095,.4),
       rgba(#929095,.4),
     rgba($t,.0) 91%
    )
   99.5% 100% / 3em 80%,  
        // left
    linear-gradient(
      to right,
       rgba($t,.2) 11%,
       rgba(#929095,.15),
       rgba(#929095,.15),
     rgba($t,.0) 91%
    )
   .5% 0% / 3em 20%,           
    linear-gradient(
      to right,
       rgba($t,.2) 11%,
       rgba(#929095,.4),
       rgba(#929095,.4),
     rgba($t,.0) 91%
    )
   .5% 100% / 3em 80%,           
        
        ;
      background-repeat: no-repeat;
    }
    .top{
      width: 100%;
      height:4.2em;
      // border:1px solid yellow;
      background:#2E2D31;
      .left{
        position: absolute;
        z-index:1;
        width: 37.6%;
        height: inherit;
        // border:1px solid $pink;
        border-bottom-right-radius: 30px;
        border-bottom: 2px solid #000;
        border-right: 2px solid #000;
        box-shadow: 0 2px 2px -2px #8C8C90;        
        background:
          linear-gradient(
            -45deg,
            $t 45%,
          rgba(#000,.4) 49%,
            $bk 51%,
          )
          0% -2.8em / 2em 5.5em,             
          linear-gradient(
            to bottom,
          #9A9BA1,
            rgba(#9A9BA1,.4),
            rgba(#000,.2)70%,
            $t
          )
          50% 0% / 100% 1em,             
          #2E2D31;
          ;
        background-repeat: no-repeat;
        
      }
      .right{
        z-index:0;
        top:0%;
        left: 67.5%;
        position: absolute;
        width: 32.5%;
        height: 4.2em;
        // border:1px solid $pink;
        border-bottom-left-radius: 30px;
        border-bottom: 2px solid #000;
        border-left: 2px solid #000; 
        box-shadow: 0 2px 2px -2px #8C8C90;        
        background:
          linear-gradient(
            45deg,
            $t 45%,
          rgba(red,.0) 49%,
            $bk 51%,
          )
          100% -2.8em / 2em 5.5em,             
          linear-gradient(
            to bottom,
          #9A9BA1,
            rgba(#9A9BA1,.4),
            rgba(#000,.2)70%,
            $t
          )
          50% 0% / 100% 1em,             
          #2E2D31;
          ;
        background-repeat: no-repeat;
        
      }      
      .middle{
        z-index:0;
        width: 21em;
        height: 4.6em;
        position: absolute;
        top:0;
        left:52.5%;
        transform: translate(-50%, 0%);
        background:
//           left angle
          // black
          linear-gradient(
            80deg,
          $t 30%,
            rgba(#000,.5) 35%,
            rgba(#2E2D31,.2) 72%,
            $t 78%,
          )
          5.5% 0% / 3.5em 95%,              
          // white
          linear-gradient(
            80deg,
          #2E2D31 40%,
            rgba(#9A9BA1,.4),
            rgba(#9A9BA1,.4) 52%,
            $t 65%, 
          )
          3% 100% / 3em 88%,
          // white  2 (right)        
          linear-gradient(
            -79deg,
          $t 40%,
            rgba(#9A9BA1,.3),
            rgba(#9A9BA1,.3) 52%,
            rgba(#000,.2),
            #2E2D31 65%,
          )
          11% 100% / 2.7em 88%,           
       
//           right angle
          // black
          linear-gradient(
            -80deg,
          $t 30%,
            rgba(#000,.5) 35%,
            rgba(#2E2D31,.2) 72%,
            $t 78%,
          )
          94.5% 0% / 3.5em 95%,      
          // white          
          linear-gradient(
            -80deg,
          #2E2D31 40%,
            rgba(#9A9BA1,.4),
            rgba(#9A9BA1,.4) 52%,
            $t 65%,
          )
          97.3% 100% / 3em 88%, 
          // white  2 (right)        
          linear-gradient(
            79deg,
          $t 40%,
            rgba(#000,.2),
            rgba(#9A9BA1,.3),
            rgba(#9A9BA1,.3) 52%,
            #2E2D31 65%,
          )
          91% 100% / 2.7em 88%,           
          linear-gradient(
            to right,
          $t,
            rgba(#000,.4),
            rgba(#000,.2)70%,
            // red
          )
          95% 0% / 1.5em .7em,           
          linear-gradient(
            to right,
          $t,
            rgba(#000,.4),
            rgba(#000,.2)70%,
            // red
          )
          5% 0% / 1.5em .7em,           
          linear-gradient(
            to bottom,
          rgba(#9A9BA1,.3),
            rgba(#9A9BA1,.4),
            rgba(#000,.06)90%,
            $t
          )
          50% 0% / 17em .6em,             
          linear-gradient(
            to left,
            rgba(#9A9BA1,.2),
            rgba(#9A9BA1,.5),
            rgba(#000,.2)
          )
          96% 0% / 2em .5em,           
          linear-gradient(
            to bottom,
          #9A9BA1,
            rgba(#9A9BA1,.4),
            rgba(#000,.2)70%,
            $t
          )
          100% 0% / 1.5em 1em,     
          linear-gradient(
            to right,
            rgba(#9A9BA1,.0),
            rgba(#9A9BA1,.3),
            rgba(#000,.3)
          )
          4% 0% / 2em .6em,             
          linear-gradient(
            to bottom,
          #9A9BA1,
            rgba(#9A9BA1,.4),
            rgba(#000,.2)70%,
            $t
          )
          0% 0% / 2em 1em,           
          linear-gradient(
            to top,
            rgba(#9A9BA1,.4) 5%,
          rgba(#9A9BA1,.1),
            rgba(#000,.07),
            $t
          )
          50% 0% / 83% 100%,           
          #2E2D31
          ;
        background-repeat: no-repeat;
        
        .switch{
          width: 12.7em; 
          height: 3em;
          // border:1px solid yellow;
          position: absolute;
          @include center;
          left:54%;
          background:
    linear-gradient(
      to right,
    rgba(#d2d2d2,.05),
     rgba(#000,.1),
      rgba(#000,.7)
    )
    39% 50% / 89% 2.7em,   
    linear-gradient(
      to right,
    rgba(#06050A,1),
     rgba(#06050A,1),
      rgba(#06050A,1)
    )
    86% 50% / 2.3em 2.8em,              
    linear-gradient(
      to bottom,
    rgba(#000,.1),
     rgba(#000,.1),
      rgba(#000,.3)
    )
    45% 93% / 90% .2em,              
    linear-gradient(
      to bottom,
      #000 1%,
    #444348 2%,
      #444348 98%,
      #000 99%
    )
    45% 5% / 70% .2em,             
    linear-gradient(
      to bottom,
      #000 1%,
    #444348 2%,
      #444348 98%,
      #000 99%
    )
    43% 50% / 70% 2.8em,                   
    radial-gradient(
        100% 100% at 50% 50%,
      #0B0A0F 46%,
        rgba(#000,1) 50%,
      rgba($t,.0) 51%
      )
      100% 50% / 3em 2.8em,
    radial-gradient(
        100% 100% at 50% 50%,
      #444348 43%,
      rgba(#fff,.3),
        rgba(#000,1) 50%,
      rgba($t,.0) 51%
      )
      0% 50% / 3em 2.8em,   
            
            ;
          background-repeat: no-repeat;
          .switch_btn{
            width: 2.8em;
            height: 2.8em;
            @include center;
            border-radius: 50%;
            border-bottom:none;
            left: 75%;
            top: 37%;
            background:
    radial-gradient(
        100% 100% at 50% 50%,
     #2D2C31 44%,
        rgba(#06050A,.6) 48%,
      rgba($t,.0) 55%
      )
     50% 50% / 98% 100%,              
              #39383D;
            background-repeat: no-repeat;
  box-shadow: 0 2em 4em rgba(0,0,0,0.19), 0 .3em .3em rgba(0,0,0,0.23), 
    -.15em .2em 0 .2em rgba(#000, .8),
    .04em .1em 0 .1em rgba(#d2d2d2, .5),     
    0 .38em .28em rgba(0,0,0,0.50), 0 15px 5px rgba(0,0,0,0.42);  
            ;            
          }
        }
      }
    }
    .btm{
      width: 100%;
      height: 16.3em;
      position: absolute;
      background-repeat: no-repeat;
      background:
// btm shading 
    linear-gradient(
      to bottom,
      $t,
       rgba(#37383C,1),
     rgba(#37383C,1)
    )
   10.8% 100% / 100% .8em,         
    linear-gradient(
      to right,
       #000,
     rgba(#6C6D71,.8)
    )
   10.8% 0% / .3em 3.75em,          
    linear-gradient(
      to right,
       #000,
     rgba(#6C6D71,.8)
    )
   94% 0% / .3em 3.75em,         
//         right end
    linear-gradient(
      to left,
      #797A7F 5%,
       #797A7F,
       rgba(#242328,1) 8%,
     rgba(#2F3034,1) 41%
    )
   95% 32% / .8em 4.5em,            
    linear-gradient(
      to left,
      rgba(#797A7F,.4) 5%,
       rgba(#1B1C20,1) 8%,
     rgba(#1B1C20,1) 41%
    )
   95% 32% / 1em 4.5em,           
//         left end
    linear-gradient(
      to right,
      #797A7F 5%,
       #797A7F,
       rgba(#242328,1) 8%,
     rgba(#2F3034,1) 41%
    )
   9% 32% / .8em 4.5em,            
    linear-gradient(
      to right,
      #797A7F 5%,
       rgba(#1B1C20,1) 8%,
     rgba(#1B1C20,1) 41%
    )
   9% 32% / 1em 4.5em,          
//         l&r side blocks
    linear-gradient(
      -80deg,
       #05060A 38%,
     rgba(pink,.0) 41%
    )
    93.5% 28% / 2em 2em,          
    linear-gradient(
      80deg,
      #05060A 38%,
     rgba(pink,.0) 41%
    )
    10% 28% / 2em 2em,     
//         middle large rectangle        
    linear-gradient(
      to bottom,
      #0F0E13 40%,
    #323136 60%,
      #323136,
    )
    60% 28% / 55em 2em,
    linear-gradient(
      to right,
    rgba(#000,.3),
       rgba(#000,.0),
      rgba(#000,.3)
    )
    60% 38% / 53em 1em,         
    linear-gradient(
      to bottom,
      #05060A 40%,
    #05060A 60%,
      rgba(#323136,.5),
    )
    60% 35% / 53em 2em,          
//         main large rectangle
    linear-gradient(
      to bottom,
      #27282C 1%,
    #05060A 2%,
      #05060A 98%,
      #797A7F 99%
    )
    65.5% 32% / 57.4em 4.5em, 
        
        ;
      background-repeat: no-repeat;
      h1{
        font-family: Arial;
        font-size:4.4em;
        color: #77767B;
        color:#909291;
        position:absolute;   
        letter-spacing: -1px;
        font-weight: 600;
        @include center;
        top: 75%;
        left:53%;
        text-shadow: 
        .04em .04em 0px rgba(#000,.3);
        &:nth-of-type(2){
          width:10em;
          text-align:right;
          left: 81.3%;
          font-size:1.8em;
          letter-spacing: 0px;
          top:79%;
        }
      }  
      .logo{
        width: 4.7em;
        height: 5.4em;
        @include center;
        left: 17.5%;
        top: 70.5%;
        background: 
          linear-gradient(
            to bottom,
            #898A8B,
          #898A8B,
          )
          60% 5% / 100% .7em,           
          linear-gradient(
            to bottom,
            #898A8B,
          #898A8B,
          )
          60% 25% / 100% .7em,           
          linear-gradient(
            to bottom,
            #898A8B,
          #898A8B,
          )
          60% 45% / 100% .7em,           
          linear-gradient(
            to bottom,
            #898A8B,
          #898A8B,
          )
          60% 65% / 100% .7em,             
          linear-gradient(
            to bottom,
            #898A8B,
          #898A8B,
          )
          60% 100% / 100% 1.28em,            
          
          ;
        background-repeat: no-repeat;
      }
    }
  }
  .under_btm{
    width:100%;
    height: 1.5em;
    @include center;
    background:#1F2024;
    top:99.5%;
    &:before{
      content: '';
      position: absolute;
      width: 3em;
      height:4em;
      top: -65%;
      left:-1%;
      transform:rotate(-70deg);
      background:
//         btm left corner
    radial-gradient(
        100% 160% at 100% 50%,
        rgba($t,0) 48%,
      rgba($bk,1) 51%
      )
      .2em 0% / 100% 150%,         
        
        ;
      background-repeat: no-repeat;
    }
    &:after{
      content: '';
      position: absolute;
      width: 3em;
      height:4em;
      top: -90%;
      left:96%;
      transform:rotate(70deg);
      background:
//         btm left corner
    radial-gradient(
        100% 160% at 0% 50%,
        rgba($t,.0) 48%,
      rgba($bk,1) 51%
      )
      .2em 0% / 100% 150%,         
        
        ;
      background-repeat: no-repeat;
    }    
  }
  .corners{
    .corner_left{
      width:1.5em;
      height: 1.5em;
      position: absolute;
      top: 62.5%;
      left:-.4em;
      background: 
        linear-gradient(
          -45deg,
          $t 49%,
          rgba($bk,1) 51%,
        )
        50% 100% / 100% 100%,         
        ;
      background-repeat: no-repeat;
     
    }
    .corner_right{
      width:1.5em;
      height: 1.5em;
      position: absolute;
      top: 62.5%;
      left:98.5%;
      background: 
        linear-gradient(
          45deg,
          $t 49%,
          rgba($bk,1) 51%,
        )
        50% 100% / 100% 100%,         
        ;
      background-repeat: no-repeat;
     
    }    
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console