<div class="camera">
<div class="flash"></div>
<div class="lens"></div>
</div>
*{margin:0;}
body{
width:100%;
height:100vh;
background:#ff9f43;
display:flex;
align-items:center;
justify-content:center;
}
.camera{
width:25vw;
height:15vw;
background:#222f3e;
border-radius: 1.5vw;
display:flex;
justify-content:center;
align-items:center;
position:relative;
}
.lens{
width:8vw;
height:8vw;
background:#60a3bc;
border-radius:50%;
border:1.5vw solid white;
box-shadow:
inset 0 1vw 0vw .3vw rgba(0,0,0,.3),
0 .8vw 0 .3vw rgba(0,0,0,.3);
margin-left:1vw;
}
.camera::before{
content:'';
position:absolute;
background: #222f3e;
width:4vw;
height:1vw;
top:-1vw;
left:2vw;
border-radius:1vw 1vw 0 0;
}
.flash{
width:13vw;
height:3vw;
position:absolute;
top:-3vw; left:7vw;
background:#222f3e;
border-radius:12vw 12vw 0 0;
z-index:2;
}
.flash::before{
content:'';
position:absolute;
left:-1vw0;
background:#ff9f43;
width:2vw;
height:3vw;
bottom:0;
border-radius:0 0 2vw 0;
}
.flash::after{
content:'';
position:absolute;
right:0;
background:#ff9f43;
width:2vw;
height:3vw;
bottom:0;
border-radius:0 0 0 2vw;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.