Try to block telegramm app!

In this example below you will see how to do a Try to block telegramm app! with some HTML / CSS and Javascript

hehehehehe

Thumbnail
This awesome code was written by Кирилл, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Кирилл ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Try to block telegramm app!</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="bw">
  <div class="top">
    <div class="left">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="body">
    <h1>Block Telegram app?</h1>
    <div class="buttons">
      <span class="wrap yes-wrap"><input type="button" class="btn yes" value="yes"/></span>
      <span class="wrap no-wrap"><input type="button" class="btn no" value="no"/></span>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Ulvbern/try-to-block-telegramm-app-vjNgGv */
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #ea5757;
  overflow: hidden;
}

.bw {
  width: 480px;
  height: 360px;
  background-color: #eee;
  border-radius: 4px;
  margin: 100px auto 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.top {
  width: 100%;
  display: block;
  height: 35px;
  background-color: #bbb;
}
.top .left {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 55px;
  padding: 10px;
}
.top .left span {
  display: block;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background: #fff;
}
.top .left span:nth-child(1) {
  background-color: #ea5757;
}
.top .left span:nth-child(2) {
  background-color: #fbfb5c;
}
.top .left span:nth-child(3) {
  background-color: #45e845;
}

.body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.body h1 {
  display: block;
  text-align: center;
}
.body .buttons {
  margin-top: 70px;
  width: 180px;
  position: relative;
}
.body .buttons .btn {
  width: 45px;
  padding: 8px;
  border-radius: 4px;
  border: 0;
  background-color: #fefefe;
  cursor: pointer;
}
.body .buttons .wrap {
  padding: 20px;
}
.body .buttons .yes-wrap {
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  transition: top .3s, left .3s;
}
.body .buttons .no-wrap {
  float: right;
}

@media screen and (max-width: 525px) {
  .bw {
    width: 90%;
  }
}
@media screen and (max-width: 360px) {
  h1 {
    font-size: 20px;
  }
}


/*Downloaded from https://www.codeseek.co/Ulvbern/try-to-block-telegramm-app-vjNgGv */
$(document).ready(function(){
  var i = 0;
  $('.yes-wrap').on('mouseover', function(){
    if(i < 50){
      $(this).css({
        'top':getRandom(50 - $(this).parent().offset().top, 
                        $(window).outerHeight() - $(this).parent().offset().top - 100),
        'left':getRandom(50 - $(this).parent().offset().left, 
                         $(window).outerWidth() - $(this).parent().offset().left - 100)
      });
    }
    i++;
  });
  function getRandom(min, max) {
    return Math.random() * (max - min) + min;
  }
  $('.btn.yes').on('click', function(){
    $(this).attr('value', 'NO');
  });
});

Comments