<div class="browser">
  <div class="titlebar">
    <i class="fas fa-circle red"></i>
    <i class="fas fa-circle yellow"></i>
    <i class="fas fa-circle green"></i>
  </div>
  <div class="addressbar">
    <i class="fas fa-arrow-left"></i>
    <i class="fas fa-arrow-right"></i>
    <i class="fas fa-redo-alt"></i>
    <i class="fas fa-home"></i>
    <input type="text" value="https://codepen.io/miffili/embed/KrKLdO/?&default-tab=result" disabled>
    <i class="fas fa-lock"></i>
    <i class="far fa-star"></i>
    <i class="fas fa-bars"></i>
  </div>
  <div class="bg"></div>
  <iframe class="content" src="//codepen.io/miffili/embed/KrKLdO/?&default-tab=result">
</div>
.browser {
  display: grid;
  color: #c8c8c8;
  position: relative;
  grid-template-areas:
    ". a a ."
    ". a a .";
  grid-auto-rows: 50vh;
  background: #2b5876;
  background: linear-gradient(to bottom, #4e4376, #2b5876);
}

.addressbar {
  z-index: 2;
  width: 80vw;
  height: 3vw;
  grid-area: a;
  display: grid;
  margin-top: -43vw;
  position: relative;
  align-self: center;
  justify-self: center;
  grid-template-areas: "a";
  background: rgb(97,97,101);
}

.titlebar {
  z-index: 2;
  width: 80vw;
  height: 2vw;
  grid-area: a;
  display: grid;
  margin-top: -48vw;
  position: relative;
  align-self: center;
  justify-self: center;
  grid-template-areas: "a";
  background: rgb(142,142,147);
  border-radius: 0.5vw 0.5vw 0 0;
}

.content {
  z-index: 2;
  width: 80vw;
  grid-area: a;
  height: 41vw;
  margin-top: 1vw;
  background: #000;
  position: relative;
  align-self: center;
  justify-self: center;
}

.bg {
  z-index: 1;
  width: 80vw;
  grid-area: a;
  height: 46vw;
  margin-top: -4vw;
  background: #fff;
  position: relative;
  align-self: center;
  justify-self: center;
  border-radius: 0.5vw;
  box-shadow: 2vw 1vw 7vw 0 rgba(0, 0, 0, 0.75);
}

.svg-inline--fa {
  height: 3vw;
  grid-area: a;
  font-size: 1.7vw;
  margin-left: 1vw;
  position: relative;
}

.fa-arrow-right {
  left: 3vw;
}

.fa-redo-alt {
  left: 6vw;
}

.fa-home {
  left: 9vw;
}

.fa-lock {
  left: 14vw;
  font-size: 1.4vw;
  margin-top: 0.1vw;
  color: rgb(0,125,27);
}

.fa-star {
  left: 72vw;
  font-size: 1.4vw;
  color: rgb(142,142,147);
}

.fa-bars {
  left: 76vw;
}

input {
  border: 0;
  color: #000;
  grid-area: a;
  height: 2.5vw;
  font-size: 1.2vw;
  margin-top: 0.3vw;
  margin-left: 13.5vw;
  margin-right: 4.5vw;
  padding: 0 2vw 0 4vw;
  border-radius: 0.2vw;
  background: rgb(162,162,167);
}

.red,
.yellow,
.green {
  grid-area: a;
  max-height: 2vw;
  font-size: 1.2vw;
  position: relative;
}

.red {
  color: rgb(255,59,48);
}

.yellow {
  margin-left: 3vw;
  color: rgb(255,204,0);
}

.green {
  margin-left: 5vw;
  color: rgb(40,205,65);
}

span {
  color: grey;
}
/*
 * Embedded Pen:
 * Author: Klara Miffili 
 * Title: #codevember | 04 | sky scene made purely in CSS 
 * URL: https://codepen.io/miffili/pen/KrKLdO
 */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.