<div class="box">
      <div class="status-bar"></div>
      <div class="cam"></div>
      <div class="center-cam"></div>
      <svg class="batery" viewBox="0 0 640 512" width="18" title="battery-three-quarters">
        <path d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-144 96H96v128h320V192z" fill="#fafafa" />
      </svg>
      <svg class="wifi" viewBox="0 0 640 512" width="14" title="wifi">
        <path d="M634.91 154.88C457.74-8.99 182.19-8.93 5.09 154.88c-6.66 6.16-6.79 16.59-.35 22.98l34.24 33.97c6.14 6.1 16.02 6.23 22.4.38 145.92-133.68 371.3-133.71 517.25 0 6.38 5.85 16.26 5.71 22.4-.38l34.24-33.97c6.43-6.39 6.3-16.82-.36-22.98zM320 352c-35.35 0-64 28.65-64 64s28.65 64 64 64 64-28.65 64-64-28.65-64-64-64zm202.67-83.59c-115.26-101.93-290.21-101.82-405.34 0-6.9 6.1-7.12 16.69-.57 23.15l34.44 33.99c6 5.92 15.66 6.32 22.05.8 83.95-72.57 209.74-72.41 293.49 0 6.39 5.52 16.05 5.13 22.05-.8l34.44-33.99c6.56-6.46 6.33-17.06-.56-23.15z" fill="#fafafa" />
      </svg>
      <svg class="rede-icon" viewBox="0 0 640 512" width="13" title="signal">
  <path d="M216 288h-48c-8.84 0-16 7.16-16 16v192c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16V304c0-8.84-7.16-16-16-16zM88 384H40c-8.84 0-16 7.16-16 16v96c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16v-96c0-8.84-7.16-16-16-16zm256-192h-48c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm128-96h-48c-8.84 0-16 7.16-16 16v384c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16V112c0-8.84-7.16-16-16-16zM600 0h-48c-8.84 0-16 7.16-16 16v480c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16V16c0-8.84-7.16-16-16-16z" fill="#fafafa" />
</svg>
      <p class="rede">Claro BR </p>
      <div class="bottom">
        <h1 class="time">23:00</h1>
        <p class="date">05/26 Segunda-feira</p>
        <div class="line"></div>
        <p class="city">Imperatriz - Ma</p>
      </div>
    </div>
.box {
  position: relative;
  overflow: hidden;
  margin: 32px auto 0 auto;
  min-width: 270px;
  max-width: 270px;
  min-height: 580px;
  max-height: 580px;
  border: solid 8px #000;
  border-bottom: solid 22px #000;
  border-top: solid 13px #000;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  background-image: url("../Img/background.jpeg");
  background-image: url("https://images.unsplash.com/photo-1601014772354-a58b53f97e44?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
  background-size: 400px;
  background-position-x: -70px;
  background-position-y: -15px;
  color: #fafafa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.box .cam {
  background-color: #000;
  width: 30px;
  height: 30px;
  margin: -27.5px auto 0 auto;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}
.box .center-cam {
  background-color: #fff;
  margin: -16px auto 0 auto;
  width: 5px;
  height: 5px;
  opacity: 70%;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}
.box .status-bar {
  background-color: #000;
  opacity: 10%;
  margin-top: 0px;
  width: 100%;
  height: 17px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.batery {
  top: 2px;
  right: 16px;
}
.wifi {
  top: 3px;
  right: 40px;
}
.rede-icon{
  top: 3px;
  right: 60px;
}
.box .rede,
.time,
.date,
.line,
.city,
.batery,
.wifi, .rede-icon {
  position: absolute;
}
.box .rede {
  top: 4px;
  margin: 0px auto 0 11px;
  font-size: 10px;
  font-weight: 700;
}
.box .time {
  bottom: 60px;
  margin: 0px auto 0 10px;
  font-size: 45px;
  font-weight: 200;
  letter-spacing: 0.3px;
}
.box .date {
  bottom: 55px;
  margin: 0px auto 0 12px;
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.6px;
}
.box .line {
  background-color: #fff;
  bottom: 50px;
  margin: 0px auto 0 12px;
  width: 110px;
  height: 0.1px;
  opacity: 50%;
}
.box .city {
  bottom: 110px;
  margin: 0 auto 0 12px;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.6px;
}
function hora() {
  var now = new Date();
  day = "teste"
  switch (now.getDay()){
    case 1:
      day = "Segunda-feira"
      break;
    case 2:
      day = "Terça-feira"
      break;
    case 3:
      day = "Quarta-feira"
      break;
    case 4:
      day = "Quinta-feira"
      break;
    case 5:
      day = "Sexta-feira"
      break;
    case 6:
      day = "Sábado"
      break;
    case 7:
      day = "Domingo"
      break;
  }
  document.querySelector(".time").innerHTML = ("00"+now.getHours()).slice(-2)+":"+("00"+now.getMinutes()).slice(-2);
  document.querySelector(".date").innerHTML = now.getUTCDate()+"/"+(now.getMonth()+1)+" "+day;
}

document.onload = setInterval(hora,1000);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.