<div id="main">
  <div id="iphone-x">
    <div id="speaker"></div>
    <div id="camera"></div>
    <iframe width="375" height="812" src="https://xd.adobe.com/embed/26d11aa2-99a4-4170-6f1e-d31b80a824ba-50e0/" frameborder="0" allowfullscreen></iframe>
  </div>  
</div>
body { 
  background-image: url("http://cms.goukapps.co.uk/promo/img/background-light.png");
  background-size: cover;
  background-position: center;
}

#main {
  min-height: 100vh; 
  display: flex;
  justify-content: center;
  align-items: center;
}

#iphone-x {
  position: relative;
  margin: 40px auto;
  width: 375px;
  height: 812px;
  border-radius: 40px;
  background-color: #1f1f1f;
  box-shadow: 0px 0px 0px 11px #1f1f1f, 0px 0px 0px 13px #191919, 0px 0px 0px 20px #111, 8px 8px 40px #000;
  overflow: hidden;
  
  &:before,
  &:after{
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  
  // frontal camera/speaker frame
  &:before {
    top: 0px;
    width: 56%;
    height: 30px;
    background-color: #1f1f1f;
    border-radius: 0px 0px 40px 40px;
  }
  
  // speaker
  #speaker {
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, 6px);
    height: 8px;
    width: 15%;
    background-color: #101010;
    border-radius: 8px;
    box-shadow: inset 0px -3px 3px 0px rgba(256, 256, 256, 0.2);
  }
  
  // camera
  #camera {
    position: absolute;
    left: 10%;
    top: 0px;
    z-index: 3;
    transform: translate(180px, 4px);
    width: 12px;
    height: 12px;
    background-color: #101010;
    border-radius: 12px;
    box-shadow: inset 0px -3px 2px 0px rgba(256, 256, 256, 0.2);
    
    &:after {
      content: '';
      position: absolute;
      background-color: #2d4d76;
      width: 6px;
      height: 6px;
      top: 2px;
      left: 2px;
      top: 3px;
      left: 3px;
      display: block;
      border-radius: 4px;
      box-shadow: inset 0px -2px 2px rgba(0, 0, 0, 0.5);
    }
  }
  
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.