<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.