15 Min No Preview Attempt

HTML

<div class="wrapper">
  <div class="nav">
    <div class="circle"></div>
    <div class="hamburger">
      <div class="ham-line"></div>
      <div class="ham-line"></div>
      <div class="ham-line last"></div>
    </div>
  </div>
  <div class="header">
    <div class="main"></div><br>
    <div class="sub"></div>
  </div>
  <div class="vid">
    <div class="vidCircle">
      <div class="arrow"></div>
    </div>
  </div>
</div>

CSS

body {
  background:#FF624C;
}

.wrapper {
  width:300px;
  height:400px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:white;
  border-radius:6px;
  overflow:hidden;
  margin:0;
  padding:0;
}
.nav {
  background:#444444;
  width:100%;
  height:30px;
  position:absolute;
  top:0px;
  left:0px;
}
.circle {
  display:block;
  width:22px;
  height:22px;
  background:#777777;
  border-radius:999px;
  position:absolute;
  top:4px;
  left:4px;
}
.hamburger {
  display:block;
  width:20px;
  height:20px;
  position:absolute;
  top:5px;
  right:5px;
}
.ham-line {
  display:block;
  width:100%;
  height:4px;
  background:#777777;
  margin-bottom:4px;
}
.ham-line.last {
  margin:0;
}
.header {
  width:100%;
  text-align:center;
  padding:12px;
}
.header .main {
  display:inline-block;
  width:70%;
  height:10px;
  background:#BABABA;
  margin-bottom:7px;
}
.header .sub {
  display:inline-block;
  width:60%;
  background:#DDDDDD;
  height:5px;
}
.vid {
  width:100%;
  height:347px;
  background:#eee;
  position:relative;
}
.vidCircle {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:70px;
  height:70px;
  background:#DDDDDD;
  border-radius:999px;
}
.arrow {
  border:24px solid transparent;
  border-left-color:white;
  display:block;
  width:0;
  height:0;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-20%, -50%);
}