popsound

by Kirubel Girma

HTML

<div class="popReview" id="revUs">
  <div class="pwmsg" id="pwmsg1">
    <p>ProntoWash Atlanta would love your feedback. Post a review to our profile.</p>
  </div>
  <div class="pwicon">
    <div class="pwbble">1</div>
  </div>

</div>

CSS

body {
  background-color: black;
}

.popReview {
  position: absolute;
  bottom: 5em;
  right: 0;
  width: 23em;
  height: 6em;
  display: flex;
  flex-direction: row;
  font-family: arial;
}

.pwicon:hover {
  opacity: .7
}

.pwicon {
  cursor: pointer;
  position: relative;
  background-color: black;
  width: 4em;
  height: 3em;
  border-radius: 1em;
  left: 1em;
  background-image: url('https://instagram.fatl1-1.fna.fbcdn.net/v/t51.2885-15/e35/82644351_581070795809950_4469461365936175650_n.jpg?_nc_ht=instagram.fatl1-1.fna.fbcdn.net&_nc_cat=110&_nc_ohc=eJYu4hL7u7AAX8kE3q_&oh=3c05eea07ab471f61f54fb6aa185d8de&oe=5EFBB678');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.pwbble {
  position: absolute;
  left: -0.5em;
  height: 1.2em;
  width: 1.2em;
  background-color: red;
  color: white;
  border-radius: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pwmsg {
  opacity: initial;
  background-color: white;
  border-radius: 1em;
  width: 15em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: .1em;
  padding-bottom: .1em;

}

.ld_in {
  animation-name: get_in;
  animation-duration: .2s;
}

@keyframes get_in {
  from {
    opacity: 0;
    transform: scale(1);
  }

  to {
    opacity: 1;
    transform: scale(1.08);
  }
}

JavaScript

document.getElementById('revUs').addEventListener("click", function() {window.open("https://g.page/prontowash-atlanta-atlanta/review?gm"); beep()})


function beep() {
  var snd = new Audio("http://soundbible.com/mp3/Blop-Mark_DiAngelo-79054334.mp3");
  snd.play();
}

function flyTxt() {
	document.getElementById('pwmsg1').classList.add('ld_in');
   beep();
}

function timeFunction() {
  setTimeout(function() {
   flyTxt()
  }, 3000);
}


timeFunction();