modalPopup

by bvotcode

HTML

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> 
<div class="container"><button id ="btn" class="btn btn-2 btn-sep icon-send">Bắt đầ 1u</button></div>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100);
* {
  box-sizing: border-box;
  margin: 0;
}

h1, p, h2, h3, h4, ul, li, div {
  margin: 0;
  padding: 0;
}

.confirm_play {
  background: #3b5cbe;
  width: 20vw;
  height: 20vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

.confirm_play .begin_quiz {
  text-align: center;
}
.confirm_play .begin_quiz p {
  font-size: 20px;
  font-weight: 50;
  color: #ffffff;
}
.confirm_play .begin_quiz h1 {
  color: white;
  font-size: 60px;
  margin-top: -10px;
}
.confirm_play .begin_quiz hr {
  background: #f60d54;
  border: none;
  height: 1px;
}
.confirm_play .begin_quiz {
  position: relative;
  width: 200px;
}
.confirm_play .begin_quiz h1.abs {
  position: absolute;
  top: 0;
  width: 100%;
}
.confirm_play .begin_quiz .color {
  width: 0px;
  overflow: hidden;
  color: #f60d54;
}


.loading-page {
  background: #0d0d0d;
  width: 30vw;
  height: 30vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.loading-page .counter {
  text-align: center;
}
.loading-page .counter p {
  font-size: 13px;
  font-weight: 50;
  color: #f60d54;
}
.loading-page .counter h1 {
  color: white;
  font-size: 60px;
  margin-top: -10px;
}
.loading-page .counter hr {
  background: #f60d54;
  border: none;
  height: 1px;
}
.loading-page .counter {
  position: relative;
  width: 200px;
}
.loading-page .counter h1.abs {
  position: absolute;
  top: 0;
  width: 100%;
}
.loading-page .counter .color {
  width: 0px;
  overflow: hidden;
  color: #f60d54;
}


.confirm_play .container{
text-align: center;
border: 0px solid red;
padding-top: 5px;
}

/* General button style */
.btn {
	border: none;
	font-family: 'Lato';
	font-size:...