Camera_Design/style.css
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400);
      
body{
    margin:0;
    padding:0;
    background-color:#333;
}

#camera , #panel{
    position:absolute;
    left:50%; 
    top:50%;
    width:300px; 
    height:300px;
    margin:-150px;  
    background:#FCD8D4;
    border:1px solid rgba(0,0,0,.2); 
    border-radius:50px;
    overflow:hidden;
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
}

#panel{
    box-shadow:inset 0px -3px 0px rgba(0,0,0,.2);
    -webkit-transform:rotate(-90deg) scale(0);
    -moz-transform:rotate(-90deg) scale(0);
    -ms-transform:rotate(-90deg) scale(0);
    -o-transform:rotate(-90deg) scale(0);
    transform:rotate(-90deg) scale(0);
}

#camera{
    z-index:2;
}

.btn{
    position:absolute;
    top:22px; 
    right:35px;
    width:40px;
    height:30px;
    background-color:#35D0BA;
    border-radius:15px;
    box-shadow:0px 3px 0px rgba(0,0,0,.4);
    transition:all .2 ease-in-out;
    -webkit-transition:all .2 ease-in-out;
    -moz-transition:all .2 ease-in-out;
    -ms-transition:all .2 ease-in-out;
    -o-transition:all .2 ease-in-out;
    animation:.5s btn;
    -webkit-animation:.5s btn;
    -moz-animation:.5s btn;
    -ms-animation:.5s btn;
    -o-animation:.5s btn;
    animation-iteration-count:5;
    -webkit-animation-iteration-count:5;
    -moz-animation-iteration-count:5;
    -ms-animation-iteration-count:5;
    -o-animation-iteration-count:5;
}
      
.btn:hover{
    cursor:pointer;
    margin-top:2px;
    box-shadow:0px 1px 0px rgba(0,0,0,.4);
}
      
.shadow{
    position:absolute;
    left:50%;
    top:50%;
    width:240px; 
    height:20px;
    margin:170px -120px 0px;       
    border-radius:50%;
    background-color:rgba(0,0,0,.3);
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -ms-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
}
      
.strip{
    height:110px;
    background-color:#EF4F4F;
    border-top:10px solid #f53b3b;
    border-bottom:10px solid #f53b3b;
    margin:80px 0px;
    box-shadow:0px 2px 0px rgba(0,0,0,.4);
}
      
.lens{
    position:absolute;
    top:50%; 
    left:50%;
    width:144px; 
    height:144px;
    margin:-90px;  
    border:18px solid #35D0BA;
    border-radius:50%;
    background-color:#111;
    box-shadow:0px 5px 0px rgba(0,0,0,.4);
}
      
.lens:before{
    content:'';
    position:absolute;
    width:50px; 
    height:50px;
    margin:27px;
    border:20px solid rgb(60, 60, 60);
    border-radius:50%;
    background:rgb(34, 34, 34);
}
      
.lens:after{
    content:'';
    position:absolute;
    width:8px; 
    height:8px;
    margin:57px;  
    border:11px solid rgb(22, 22, 22);
    border-radius:50%;
    background:rgb(131, 131, 131);  
}
      
.led{
    position: absolute;
    left: 35px; top: 30px;  
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 1px solid #FFC107;
    background-color: #F7FF56;
    box-shadow: inset 0px 1px 0px rgba(0,0,0,.1);
    -webkit-animation: led .8s infinite;
    -moz-animation: led .8s infinite;
    -ms-animation: led .8s infinite;
    -o-animation: led .8s infinite;
    animation: led .8s infinite;
}
      
.pic{
    top:50%; 
    left:50%;
    width:300px; 
    height:300px;
    overflow:hidden;
    box-shadow:0px 2px 0px rgba(0,0,0,.2);
}

img{
    height: 300px;
    width: 300px;
}

/* slide */
body.open > #panel{
    -webkit-transform-origin:0% 100%;
    -webkit-transform:rotate(0deg) scale(1);
    -moz-transform-origin:0% 100%;
    -moz-transform:rotate(0deg) scale(1);
    -ms-transform-origin:0% 100%;
    -ms-transform:rotate(0deg) scale(1);
    -o-transform-origin:0% 100%;
    -o-transform:rotate(0deg) scale(1);
    transform-origin:0% 100%;
    transform:rotate(0deg) scale(1);
    margin-left:0;
}

body.open > #camera{
    margin-left:-300px;
}

body.open > .shadow{
    margin:170px -260px 0px;
    width:520px;
}
  
  /* keyframes */
.led .light{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(ellipse at center, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 100%;
    z-index: 2;
    -webkit-animation: 1s flash infinite;
    animation: 1s flash infinite;
}
@-webkit-keyframes flash{
    0%{
        width:0;
        height:0;
    }
    20%{
        width:100px;
        height:100px;
    }
    25%{
        width:0;
        height:0;
    }
    45%{
        width:100px;
        height:100px;
    }
    50%{
        width:0;
        height:0;
    }
    100%{
        width:0;
        height:0;
    }
}

@keyframes flash{
    0%{
        width:0;
        height:0;
    }
    20%{
        width:100px;
        height:100px;
    }
    25%{
        width:0;
        height:0;
    }
    45%{
        width:100px;
        height:100px;
    }
    50%{
        width:0;
        height:0;
    }
    100%{
        width:0;
        height:0;
    }
}
  
@-webkit-keyframes btn{
    from{
        margin-top:0px;
        top:22px;
    }
    to{
        margin-top:2px;
        box-shadow:0px 1px 0px rgba(0,0,0,.4);
    }
}

@-moz-keyframes btn{
    from{
        margin-top:0px;
        top:22px;
    }
    to {
        margin-top:2px;
        box-shadow:0px 1px 0px rgba(0,0,0,.4);
    }
}

@-ms-keyframes btn{
    from{
        margin-top:0px;
        top:22px;
    }
    to{
        margin-top:2px;
        box-shadow:0px 1px 0px rgba(0,0,0,.4);
    }
}

@-o-keyframes btn{
    from{
        margin-top:0px;
        top:22px;
    }
    to{
        margin-top:2px;
        box-shadow:0px 1px 0px rgba(0,0,0,.4);
    }
}

@keyframes btn{
    from{
        margin-top:0px;
        top:22px;
    }
    to{
        margin-top:2px;
        box-shadow:0px 1px 0px rgba(0,0,0,.4);
    }
}