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="shutter_btn_holder">
    <div class="lines">
    </div>
    <div class="line_circle"></div>
  </div>  
  <h1>instax</h1>
  <div class="square_top">
    <h2>SQ</h2>

  </div>
    <h2 id="one">1</h2>

    <div class="lens_left">
      <div class="inner_square">
        <div class="white_inner_square"></div>
      </div>
    </div>
  <div class="black_thing"></div>
  <div class="flash">
    <div class="flash_middle">
      <div class="flash_lines">
        <div class="flash_lines_left"></div>
        <div class="flash_lines_right"></div>        
      </div>
    </div>
    <div class="flash_shape_middle"></div>
    <div class="flash_left"></div>
    <div class="flash_right"></div>
  </div>
  <div class="flash_block">
  </div>
  <div class="lens_ring circle">
    <div class="ring_one circle">
      <div class="ring_two circle">
        <div class="ring_three circle">
          <div class="circles">
            <div class="circle circle_top"></div>            
            <div class="circle circle_btm"></div>
          </div>
          <div class="right_clear_circle"></div>
          <div class="center_circle">
            <div class="center_circle_border">
              <div class="square">
                <div class="inner_square">
                  <div class="sq_circle">
                    <div class="reflection"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>  
      </div>     
    </div>
     
  </div>
</div>

              
            
!

CSS

              
                $t: transparent;
$bk: #fff;
$pink:#F60C46;
$bk:#685BC6;
$camera: #DACFCB;

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

body{
  font-family: arial;
  font-size: 1.5vmin;
  background-size: 1100px;
  background-size: 117em;
  background-position: 55% -4%;
  background-repeat: no-repeat;
  background-color: $bk;
}
.camera {
  &:after{
    border-radius: 1em;
    content: '';
    position:absolute;
    width:81%;
    left:59%;
    transform:translate(-50%,0%);
    height:.7em;
    background: 
      linear-gradient(
      to top, 
        rgba(#626262, .8),
        rgba($t,.0)
      )
      ;
    bottom:0%;
    border-radius:.5em; 

  }
  &:before{
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    content: '';
    position:absolute;
    width:100%;
    // left:50%;
    height:.9em;
    top:0;
    background: 
      linear-gradient(
      to bottom, 
        rgba(#fff, .3),
        rgba(#626262, .14),
        rgba($t,.0)
      )
      ;
    bottom:0;
  }  
  h1{ 
    color:#BFB6B0;
    letter-spacing:-2px;
    font-size: 4em;
    position:absolute;
    @include abs;
    top:7.5%;
    left:56%;
    font-weight:bold;
    &:after{
      content: 'instax';
      position: absolute;
        @include abs;
      color:#D4CCC8;
      top:54%;
      left:50%
    }
    &:before{
      content: 'instax';
      position: absolute;
        @include abs;
      // color:#BFB6B0;
      color:#E0D8D2;
      color:rgba(#fff,.6);
      top:56%;
      left:50%;
      font-size:1.8;
    }    
  }
  .square_top{
    width:3.3em;
    height:3.3em;
    position:absolute;
    @include abs;
    top:15%;
    left:56%;
    background: #D4CCC8;
    border-radius: .23em;
box-shadow: inset 2px 2px 2px rgba(#b4adaa,.8), 
            inset -2px -2px 2px rgba(#f4ebe6,.6);
    h2{
      color:rgba(#000,.1);
      font-family: 'Oxygen', sans-serif;
      font-size:1.9em;
      font-weight:bold;
      position:absolute;
      @include abs;
      top:40%;
    &:after{
      content: 'SQ';
      position: absolute;
        @include abs;
      color:#EFE7E1;
      color:#DED6CF;
      top:49%;
      left:50%
    } 
    &:before{
      content: 'SQ';
      position: absolute;
        @include abs;
      color:rgba(#fff,.5);
      top:58%;
      left:50%
    }        
    }
  }
  #one{
    font-weight:bold;
   content: 'instax';
    color:#BFB6B0;
    font-size:2.8em;
    position:absolute;
    @include abs;
    top:15%;
    left:61%;
    &:before{
      content: '1';
      position: absolute;
        @include abs;
      // color:#BFB6B0;
      color:rgba(#fff,.7);
      top:55%;
      left:45%
    }        
    &:after{
      content: '1';
      position: absolute;
        @include abs;
      color:#D4CCC8;
      top:51%;
      left:45%
    }    
  }
  border-top-right-radius: 1em;
  border-top-left-radius: 1em;
  width: 57.5em;
  height: 54.5em;
  position: absolute;
  top: 49.6%;
  left: 50%;
  border-bottom-left-radius:1em;
  border-bottom-right-radius:1em;
  transform: translate(-50%, -50%);
 
  background:
    linear-gradient(
    #DAD2CC 49%,
      #DAD2CC 51%,
    )
    100% 0% / 100% 100%,      
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(red,.5) 50%,
      rgba(blue,1) 51%
      )
      55% 0% / 22em 22em,     
    ;
  background-repeat: no-repeat;
  .lens_left{
    width: 7.5em;
    height: 7.4em;
    border-radius: 1em;
    position: absolute;    
  background:
    linear-gradient(
      to bottom,
    rgba(red,.0),
      rgba(#fff,.3),
    )
    00% 100% /100% 50% ,     
    linear-gradient(
      to right,
    rgba(red,.0),
      rgba(#fff,.2),
    )
    00% 0% /100% 100% ,   
    linear-gradient(
      120deg,
      rgba($t,.0) 35%,
    rgba(#4D4D4D,.2),
      rgba($t,.0) 65%,
    )
    2em 0% / 100% 50% , 
//     top left shadow
    linear-gradient(
      45deg,
      rgba(#DAD2CC,.0) 35%,
    rgba(#4D4D4D,.1),
      rgba(#DAD2CC,.0) 65%,
    )
    -2em 0% / 100% 50% ,   
//     bottom left shadow
    linear-gradient(
      -45deg,
      rgba(#DAD2CC,.0) 35%,
    rgba(#4D4D4D,.25),
      rgba(#DAD2CC,.0) 65%,
    )
    -2em 100% / 100% 50% ,  
    linear-gradient(
      to right, 
    rgba(#4D4D4D,.35),
      rgba($t,0),
    )
    0% 0% / 30% 100%,    
    linear-gradient(
    rgba(black,.25),
      #DAD2CC 45%,
    )
    0% 0% / 97.5% 100%,
 
    ;
    background-repeat:no-repeat;
    @include abs;

    left:11%;
    top:12%;
    .inner_square{
      width: 4em;  
      height:4em;
      position:absolute;
      @include abs;
      background:
        linear-gradient(
          to right,
          rgba(#111116,0),
          rgba(#fff,.1) 15%,
          rgba(#111116,0) 20%,
        )
        100% 0% / 97.5% 100%,          
        linear-gradient(
          to left,
          rgba(#323339,.8) 15%,
          rgba(#111116,0) 45%,
        )
        100% 0% / 97.5% 100%,        
        linear-gradient(
          -20deg,
          rgba(#29282F,.8),
          rgba(#111116,1) 45%,
        )
        100% 0% / 97.5% 100%
       ;      
      top:54%;
      left:47%;
      border-radius:.7em;
      background-repeat:no-repeat;
      .white_inner_square{
        width:
          .6em;
        height:.5em;
        position:absolute;
        @include abs;
        left:51%;
        border-radius:.15em;
        background: #f3f3f3;
        border-bottom:.3em solid #000;
        border-top:.2em solid #000;
        &:before{
          content: '';
          position:absolute;
          width:1.8em;
          height:1.8em;
          background:
     radial-gradient(
        100% 100% at 50% 50%, 
        rgba(#d2d2d2, .1),     
        rgba(#E9E1DC, .2) 50%
      ) 
      50% -1.4em/200% 4em,          
            ;
          @include abs;
          left:48%;
          border-radius:3em;
        }
      }
    }
  } 
  .black_thing{
    position:absolute;
width: 5.5em;
        height: 2.4em;
      top: 12.5%;
      left:22.5%;
        transform: translate(-50%,-50%) scale(.7);
        transform: translate(-50%,-50%) rotate(90deg) scale(.7);    
        background:
    linear-gradient(
      to right,
    rgba(#323339,.5) 49%,
      rgba(#323339,.7) 51%,
      rgba(#323339,.5),
    )
    50% 5% / 3.5em .1em,   
    linear-gradient(
      to right,
    #323339 49%,
      #323339 51%,
    )
    50% 100% / 2.7em 2.2em,            
    radial-gradient(
        100% 100% at 50% 50%,
        rgba(#323339,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(#323339,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;
  }

    .flash{
      width: 14em;
      height: 7.4em;
      position: absolute;
      @include abs;
      top: 8.5%;
      left: 87.5%;
      background:
    radial-gradient(
        100% 100% at 0% 50%,
        rgba($t,0) 50%,
      rgba($camera,1) 51%
      )
      156% 0% / 7.5em 7.4em,          
    radial-gradient(
        100% 100% at 100% 50%,
        rgba($t,.0) 50%,
      rgba($camera,1) 51%
      )
      -57% 0% / 7.5em 7.4em, 
        #7F8477
        ;
      background-repeat: no-repeat;
    
      .flash_shape_middle{
        height:7.6em;
        width: 8em;
        position:absolute;
        @include abs;
        z-index:1;
        background:
          linear-gradient(
            to right,
            $t 10%,
          #444841,
            #444841,
            $t 90%
          )
          50% 3% / 2.4em .6em,   
          linear-gradient(
            to right,
            #444841 10%,
            $t 12%,
           $t 22%,
          #444841 23%,
            #444841 77%,
            $t 78%,
            $t 88%,
            #444841 90%,

          )
          10% 97% / 1.8em .6em,   
          linear-gradient(
            to right,
            #444841 10%,
            $t 12%,
           $t 22%,
          #444841 23%,
            #444841 77%,
            $t 78%,
            $t 88%,
            #444841 90%,

          )
          85% 97% / 1.8em .6em,           
        linear-gradient(
        to bottom,
          rgba(#33343A,.2) 1%,
          rgba(#BFBBB3,1)4%,
          rgba(#BFBBB3,1),
          rgba(#33343A,.2)5%,
          rgba(#BFBBB3,1)6%,
          $t 9%,
          $t 93%,
          rgba(#BFBBB3,1)90%,
          rgba(#33343A,.2) 93%,
          rgba(#BFBBB3,1) 95%,
          rgba(#33343A,.2) 100%
        ),
          
          #83877C;
        background-repeat: no-repeat;

      }
      .flash_middle{
        width:9.5em;
        height: 5.7em;
        position: absolute;
        
        @include abs;
        border-radius: .6em;
        background: #D7D7D4;
        z-index:2;
        .flash_lines{
          width: 9.4em;
          height: 4.2em;
          position:absolute;
          border-left:2px solid #D7D7D4;
          display: flex;
          @include abs;
          left:46%;
          top:47%;
          &:before{
            content: '';
              width: 100%;
            height:100%;
            position: absolute;
            background:
              linear-gradient(
                to right,
                $t, 
                rgba(#C4C8BE,.3) 10%,
                rgba(#717879,.3) 12%,
                rgba(#717879,.3)14%,
                $t 17%,
                rgba(#BDB5B0,.3) 40%,
                
                rgba(#656B6F,.3) 45%,
                rgba(#787878,.55),
                rgba(#717879,.3),
                rgba(#717879,.3),
                rgba(#f2f2f2,.3) 80%,
                rgba(#f2f2f2,.3) 83%,
                $t 85%,
                rgba(#656B6F,.5)
              )
              ;
          }
          .flash_lines_left{
            width: 50%;
            height: 100%;
            background:
            repeating-linear-gradient(
              rgba($t,.12) .2em,
              $t .4em,
              rgba($t,.12) .4em 
            );
          }
          .flash_lines_right{
            width: 50%;
            height: 100%;
            background:
            repeating-linear-gradient(
              rgba($t,.4) .1em,
              $t .2em,
              rgba($t,.4) .3em 
            );
          }          
        }
      }
      .flash_left{
        width: 7.4em;
        height:7.4em;
        border:1px solid yellow;
        border:1px solid #ABA5A0;
        border-radius: 50%;
        position: absolute;
        border-right: 0;
        box-shadow: -2px -2px 0px	#B0B0B0;
        background:
    radial-gradient(
        100% 100% at 50% 50%,

      rgba(#83877C,1) 42%,
      rgba(#33343A,.2) 43%,
      rgba(#BFBBB3,1),
      rgba(#BFBBB3,1) 48%,
        rgba(#33343A,.2) 50%,
      )           
          
          ;
        &:before{
          content:'';
          width: 100%;
          height:100%;
          position: absolute;
          border-radius: inherit;
          background:
          linear-gradient(
          #7E816E 49%,
            #7E816E 51%,
          )
          0% 50% / .4em 2em,          
            ;
          background-repeat: no-repeat;
        }
      }
      .flash_right{
        left: 47%;
        position: absolute;
        width: 7.4em;
        height:7.4em;
        border:1px solid yellow;
        border:1px solid #ABA5A0;
        border-left: 0;
        border-radius: 50%;
        background:
    radial-gradient(
        100% 100% at 50% 50%,

      rgba(#83877C,1) 42%,
      rgba(#33343A,.2) 43%,
      rgba(#BFBBB3,1),
      rgba(#BFBBB3,1) 48%,
        rgba(#33343A,.2) 50%,
      )           
          
          ;   
        &:before{
          content:'';
          width: 100%;
          height:100%;
          position: absolute;
          border-radius: inherit;
          background:
          linear-gradient(
          #7E816E 49%,
            #7E816E 51%,
          )
          100% 50% / .4em 2em,              
            ;
          background-repeat: no-repeat;
        }        
      }      
    }  
  .lens_ring{
    position: absolute;
    width: 42em;
    height: 42em;
    background:#E0D8D2;
    
    border-radius: 50%;
    @include abs;
    top: 60%;
    left:56%;
//     ring shadow
    box-shadow: 
          inset 2px 2px 5px 0px
      rgba(#fff,.7),
      
      inset -1px 0px 5px 0px
      rgba(#232323,.5), 
      
      2px 2px 5px 0px
      rgba(#232323,.2),
       -2px -2px 5px 0px
      rgba(#F1E9E3,.5),
      5px 10px 55px 5px rgba(#000,.3) 
      ;
    .ring_one{
      position: absolute;
      @include abs;
      width: 37em;
      height:37em;
      border:.2em solid #2D251F;
      .ring_two{
        @include abs;
        width: 33em;
        height:33em;
        position: absolute;
        border:.1em solid #2D251F;
        .ring_three{
          @include abs;
          width: 29em;
          height:29em;
          position: absolute;
          background:#323339;
          .circles{
            width: 3em;
            height:6em;
            position:absolute;
            @include abs;
            left:14%;
            top: 50.5%;
            background:
            radial-gradient(
                100% 100% at 50% 50%,
                rgba(#0D0C0F,1) 50%,
              rgba($t,0) 51%
              )
              50% 85% / 2.3em 2.3em, 
              ;
            background-repeat: no-repeat;
            .circle_top{
              width: 2.3em;
              height:2.3em;
              position:absolute;
              @include abs;
              top: 25%;
              box-shadow: 
                inset 1px 2px 3px #26232b               
                ;
            background: 
            radial-gradient(
                100% 100% at 50% 50%,
                rgba(#312F37,1) 50%,
              rgba($t,0) 51%
              )
              50% 85% / 2em 2em,
              
              #222325;     
              background-repeat: no-repeat;
            }            
            .circle_btm{
              width: 2.3em;
              height:2.3em;
              background: #0D0C0F;
              position:absolute;
              @include abs;
              top: 73%;
              box-shadow: 
                inset 1px 2px 3px #26232b               
                ;
            }
          }
          .right_clear_circle{
            width: 5em;
            height: 5em;
            border-radius:1.5em;
            background: 
              linear-gradient(
                -45deg,
            rgba( #414449,.8),
                rgba( #414449,.4),
                rgba(#A5A5A5,.15) 60%,
              )
             120% 120% / 100% 100%,               
              linear-gradient(
              #DAD2CC 49%,
                #DAD2CC 51%,
              )
              100% 0% / 97.5% 100%,               
              
              ;
            position: absolute;
            background-repeat: no-repeat;
            @include abs;
            z-index: 10;
            left: 87%;
            &:after{
              width: 4.95em;
              height:4.7em;
            border-radius:1.5em;
              border:1px solid #000;
              border-left:.1em solid #000;
              border-top:.2em solid #000;
              border-right:.15em solid #000;   
              content: '';
              position: absolute;
              @include abs;
              left:51%;
              background: rgba(#232323,.0);
            }
          }
          .center_circle{
            width: 13.5em;
            height:13.5em;
            position: absolute;
            @include abs;
            left: 51%;
            top:50.5%;
            border-radius: 50%;
            // #212327
            background:
              
              linear-gradient(
                to bottom,
                #212327,
                #353539 75%,
                rgba(#6E6D72,.5),
              )
              100% 0% / 97.5% 100%, 
              #212327
            ;
            &:after{
              width: 100%;
              height: 100%;
              content: '';
              position: absolute;
              @inlcude abs;
              border-radius: inherit;
              background:
              -webkit-radial-gradient(
                50% 0%,
                48% 50%, 
                rgba(0, 0, 0, 0.2) 0%,
                rgba(255, 255, 255, 0) 100%
              ),                
              -webkit-radial-gradient(
                50% 100%, 52% 50%, 
                rgba(255, 255, 255, 0.12) 0%, 
                rgba(255,255,255,0)
                100%),   
              -webkit-radial-gradient(
                50% 100%, 82% 50%, 
                rgba(255, 255, 255, 0.05) 0%, 
                rgba(255,255,255,0)
                100%),                 
                ;
            }
            .center_circle_border{
              width: 10em;
              height: 10em;
              position: absolute;
              @include abs;
              border:.3em solid #222428;
              border-radius: 50%;
              background:
                    radial-gradient(
                      100% 100% at 50% 50%, 
                      rgba($t, .0) 30%,     
                      rgba(#2F3135, .05) 50%
                    ) 
                    50% 50%/105% 110%,                 
                    radial-gradient(
                      100% 100% at 50% 50%, 
                      rgba($t, .0) 30%,     
                      rgba(#1D1C21, .45) 50%
                    ) 
                    50% 50%/105% 110%,                   
                #2F3135;
              .square{
                width: 7.7em;
                height:7.7em;
                position: absolute;
                @include abs;
                border-radius: 20%;
                background:
               
//                   btm
              -webkit-radial-gradient(
                50% 110%, 53% 50%, 
                rgba(#fff, 0.18) 0%, 
                rgba(#fff, 0.2),
                rgba(255,255,255,0)
                100%),            
//                   top
              -webkit-radial-gradient(
                50% 0%,
                57% 50%, 
                rgba(0, 0, 0, 0.354) 0%,
                rgba(255, 255, 255, 0) 100%
              ),            
      //     left 
          -webkit-radial-gradient(
            0% 50%, 25% 50%, 
            rgba(#323135, 0.5) 0%, 
            // yellow 50%,
            rgba(255,255,255,0)100%),                  
              -webkit-radial-gradient(
                100% 50%, 45% 50%, 
                rgba(#4B4C50, 0.4) 0%, 
                rgba(255,255,255,0)
                100%),                     
              -webkit-radial-gradient(
                50% 100%, 52% 50%, 
                rgba(#232323, 0.02) 0%, 
                rgba(255,255,255,0)
                100%),   
              -webkit-radial-gradient(
                50% 100%, 82% 50%, 
                rgba(#fff, 0.04) 0%, 
                rgba(255,255,255,0)
                100%),                    
                  linear-gradient(
                    to right, 
                    rgba(#fff,.02),
                    rgba(#333235,.0),
                    rgba(#333235,.0),
                    rgba(#fff,.02),
                  )
                  0% 0% / 100% 100%,                  
                  linear-gradient(
                    to right, 
                    rgba(#333237,.8),
                    rgba(#333235,.8),
                    rgba(#333235,.8),
                    rgba(#3A3E41,.8),
                  )
                  0% 0% / 100% 100%,                     
                  #212327
                ;     
                background-repeat: no-repeat;
                &:after{
                  width:100%;
                  content: '';
                  height: 100%;
                  position: absolute;
                  border-radius: inherit;
                  background:
                   
              -webkit-radial-gradient(
                50% 0%,
                80% 60%, 
                rgba(#000, 0.45) 0%,
                rgba(255, 255, 255, 0) 100%
              ),                          
                    
                    ;
                  background-repeat: no-repeat;
                }
                .inner_square{
                  width: 5.8em;
                  height:5.8em;   
                  // border:1px solid $pink;
                  border-radius: 10%;
                  position: absolute;
                  border: 1px solid #38383A;
                  border-top: 0;
                  background:
                    radial-gradient(
                      100% 100% at 50% 50%, 
                      rgba($t, .0) 40%,     
                      rgba(#1D1C21, .8) 50%
                    ) 
                    50% 50%/125% 110%,                    
                    radial-gradient(
                      100% 100% at 50% 50%, 
                      rgba($t, .0) 40%,     
                      rgba(#1D1C21, .8) 50%
                    ) 
                    50% 50%/125% 110%,             
                    #2E2E32;
                  background-repeat: no-repeat;
                  @include abs;
                  .sq_circle{
                    border:3px solid #0D0D0F;
                    width: 5em;
                    height:5em;
                    position: absolute;
                    @include abs;
                    border-radius: 50%;
                    background:
                       
                    radial-gradient(
                      100% 100% at 50% 50%, 
                      rgba(#0C0B0E, .5) 49%,     
                      rgba(#0C0B0E, .85) 50%
                    ) 
                    50% 50%/105% 110%,                            
                      // red,
                      #0D0D0F
                      ;
                    &:before{
                      content: '';
                      width: 4.7em;
                      height: 4.7em;
                      position: absolute;
                      border-radius: inherit;
                      border:1px solid $t;
                      border-bottom: .3em solid #292A2E;
                      transform: rotate(-50deg);
                      background: 
                  linear-gradient(
                    to top, 
                    rgba(#fff,.08),
                    rgba(#333235,.0),
                    rgba(#333235,.0),
                    rgba(#fff,.02),
                  )
                  0% 0% / 100% 100%,   
                        #0C0C0E
                        ;
                    }                    
                    .reflection{
                      width: 3em;
                      height:3em;
                      position: absolute;
                      @include abs;
                      border-radius: 20%;
                      background: 
                    radial-gradient(
                      50% 150% at 50% 50%, 
                      rgba($t, .3) 40%,   
                      // rgba(#000,.0),
                      rgba(#f2f2f2, .05) 55%
                    ) 
                    50% 20%/100% 100%,                         
                      linear-gradient(
                        -10deg, 
                        rgba(#fff,.05),
                        rgba(#fff,.1) 85%,
                        rgba(#fff,.2)
                      )
                      0% 0% / 100% 100%,
                        $t
                        
                        ;
                      background-repeat: no-repeat;
                      overflow: hidden;
                    &:before{
                      content: '';
                      width: 3em;
                      height: 3em;
                      position: absolute;
                      border-radius: inherit;
                      transform: rotate(4deg);

                      background: 
                      linear-gradient(
                        -10deg, 
                        rgba(#fff,.1),
                        rgba(#fff,.2) 85%,
                        rgba(#fff,.4)
                      )
                      -.2em 0% / 1.2em 100%,  
                        ;
                       background-repeat: no-repeat;
                    }                       
                    }
                  }
                }
              }
            }
          }
        }        
      }
    }
    
  }
    .shutter_btn_holder{
      z-index:20;
    width:12.3em;
    height:42em;
    position: absolute;
    @include abs;
    left:8%;
    top:61.5%;
    border-top-left-radius: .8em;
    border-top-right-radius: 1em;
    border-bottom-left-radius:1em;
    border-bottom-right-radius:4em;
    bottom:0;
    background:
      radial-gradient(
        100% 100% at 50% 90%, 
        rgba($t, .0) 40%,     
        rgba(#E9E1DC, 1) 50%
      ) 
      50% -1.4em/200% 4em,      
      #DED6CF;
    background-repeat: no-repeat;
    &:before{
      border-top-left-radius: .8em;
      border-top-right-radius: 1em;   
      border-bottom-right-radius:1em;
      content:'';
      width: 100%;
      height:100%;      
      position: absolute;
      background:
        linear-gradient(
        to right, 
          rgba(#fff,.1),
          rgba(#232323,.1)
        )
        ;
    }
      .line_circle{
        width:6.5em;
        height:6.5em;
        border:1px solid rgba(#232323,.6);
        position:absolute;
        border-radius:50%;
        @include abs;
        top:21%;
        left:55%;
        
      }
  &:after{
    content: '';
    position:absolute;
    width:100%;
    left:0%;
    height:.7em;
    background: 
      linear-gradient(
      to top, 
        rgba(#626262, .8),
        rgba($t,.0)
      )
      ;
    bottom:0;
    border-radius:.5em;
  }      
    .lines{
      width:12.3em;
      height: 81%;
      
      border-top:2px solid rgba(#f2f2f2,.6);
      position: absolute;
      @include abs;
      top: 49%;
      left: 49%;
      border-top-left-radius: .5em;
      border-top-right-radius: .5em;
      background: 
        repeating-linear-gradient(
          90deg,
          #E0D7D1 3px,
          rgba(#232323,.05) 1px,
          #E0D7D1 1em,
        ),    
        
        ;
      &:before{
        content:'';
        width: 100%;
        height:.3em;
      border-top-left-radius: .5em;
      border-top-right-radius: .5em;        
        background: 
        repeating-linear-gradient(
          90deg,
          #E0D7D1 3px,
          rgba(#232323,.07) 1px,
          #E0D7D1 1em,
          // rgba(#232323,.05) 
        ),            
          ;
        position: absolute;
        bottom: 0;
        
      }
      &:after{
        content:'';
        width: 100%;
        height:100%;    
        background: 
       linear-gradient(
          to left,
          rgba(#727272,0.1)5%,
          $t 15%,
        ),            
       linear-gradient(
          to left,
          rgba(#232323,.1),
          rgba(#fff,.00),
        ),            
          ;
        position: absolute;
        bottom: 0;
        
      }      
    }
  }
}
        .flash_block{
          width:15em;
          height:8.5em;
          border-top-right-radius:1em;
          position:absolute;
          top:.4em;
         right:0;
          background:
            // green,
    linear-gradient(
      to right,
    #D6CEC8 49%,
      #D6CEC8 51%,
    )
    100% 0% / 2.5em .7em,               
    linear-gradient(
      to right,
    #D6CEC8 49%,
      #D6CEC8 51%,
    )
    0% 0% / 2.6em .7em,              
    linear-gradient(
      to right,
    #D6CEC8 49%,
      #D6CEC8 51%,
    )
    0% 0% / 1em 2.4em,                
    linear-gradient(
      to right,
    #D6CEC8 49%,
      #D6CEC8 51%,
    )
    0% 100% / 1em 2.7em,              
    linear-gradient(
      to right,
    #D6CEC8 49%,
      #D6CEC8 51%,
    )
    100% 100% / 2.7em .7em,  
            
                        
    linear-gradient(
      to right,
    #D6CEC8 49%,
      #D6CEC8 51%,
    )
    0% 100% / 3.4em .7em,  
            
            ;
          background-repeat:no-repeat;
        }  
.circle{
  border-radius: 50%;
}
.bk {
  background-image: none;
}

.opacity {
  opacity: 0.5;
}

              
            
!

JS

              
                
              
            
!
999px

Console