P’New (Copy 1404)

✨ PANITHAN KONGTHONG

<html>
<head>
	<title>Let's Start</title>
  <style>
    body {
  margin: 0;
  margin-left: 3em;
  padding: 0;
  background: url(https://media.discordapp.net/attachments/798210263559962624/806839861046280202/1719897.png?width=1073&height=670);
}
.name{
  color:white;
  padding-left:30px;
  background-color:#6A5ACD;
  width:300px;
  height:40px;
  padding:5px;
  border-radius:10px;
  text-align:center;
  border:3px dashed white;
}
h3{
  color:white;
  padding-left:30px;
  background-color:#9370DB;
   width:450px;
  height:30px;
  padding:3px;
  border-radius:10px;
  text-align:center;
  
}
#score{
  color:white;
  margin-top:2px;
  padding-left:30px;
  background-color:#FFCC33;
   width:200px;
  height:30px;
  padding:5px;
  border-radius:10px;
  text-align:center;
}
.card {
  height: 200px;
  width: 150px;
  background-size: 150px 200px;
  border-radius: 30px;
  background-color: #e3eaa7;
  border: 5px solid gray;
  display: inline-block;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition-duration: 2s;
  transition: transform 1s;
  perspective: 600px;
  position: relative;
}
.card[data-pic="0"] {
  height: 200px;
  width: 150px;
  background-image: url("https://media.discordapp.net/attachments/798210263559962624/806589052748693524/Larvitar.png");
  background-size: 180px 200px;
  border-radius: 30px;
  display: inline-block;
}
.card[data-pic="1"] {
  height: 200px;
  width: 150px;
  background-image: url("https://cdn.discordapp.com/attachments/798210263559962624/806589223976566859/04.png");
  background-size: 150px 200px;
  border-radius: 30px;
  display: inline-block;
}
.card[data-pic="2"] {
  height: 200px;
  width: 150px;
  background-image: url("http://www.jewsagainsttheoccupation.org/wp-content/uploads/2016/09/Bellossom-300x300.png");
  background-size: 150px 200px;
  border-radius: 30px;
  display: inline-block;
}
.card[data-pic="3"] {
  height: 200px;
  width: 150px;
  background-image: url("https://th.portal-pokemon.com/play/resources/pokedex/img/pm/649b3c0f69e218d567e16e97253d7a20648c64bb.png");
  background-size: 180px 200px;
  border-radius: 30px;
  display: inline-block;
}
.card[data-pic="4"] {
  height: 200px;
  width: 150px;
  background-image: url("https://cdn.discordapp.com/attachments/798210263559962624/806571513209815100/PokC3A9mon_Squirtle_art.png");
  background-size: 150px 200px;
  border-radius: 30px;
  display: inline-block;
}

.card[data-pic="5"] {
  height: 200px;
  width: 150px;
  background-image: url("https://lifestyle.campus-star.com/app/uploads/2016/07/pokemon_caterpie.png");
  background-size: 180px 200px;
  border-radius: 30px;
  display: inline-block;
}

.card[data-pic="6"] {
  height: 200px;
  width: 150px;
  background-image: url("http://f.ptcdn.info/345/045/000/oc8awm34u1Zme9d9I4u-o.png");
  background-size: 180px 200px;
  border-radius: 30px;
  display: inline-block;
}

.card[data-pic="7"] {
  height: 200px;
  width: 150px;
  background-image: url("https://sites.google.com/site/popokemonmonster/_/rsrc/1487425070709/prawati-taw-lakhr-r-3/cv.png?height=320&width=320");
  background-size: 150px 200px;
  border-radius: 30px;
  display: inline-block;
}
.cardtest {
  height: 400px;
  width: 400px;
  background-image: url("https://i.imgur.com/oAEE6fk.gif");
  background-position:center;
  background-size : cover;
  position: absolute;
  top: 16%;
  left: 62%;
  border-radius: 50%;
  border: 5px solid black;
  background-color:#fefbd8;

}
.cardtest[data-pic="0"] {
  height: 400px;
  width: 400px;
  background-image: url("https://media.discordapp.net/attachments/798210263559962624/806589052748693524/Larvitar.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 50%;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="1"] {
  height: 400px;
  width: 400px;
  background-image: url("https://cdn.discordapp.com/attachments/798210263559962624/806589223976566859/04.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 50%;
    transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="2"] {
  height: 400px;
  width: 400px;
  background-image: url("http://www.jewsagainsttheoccupation.org/wp-content/uploads/2016/09/Bellossom-300x300.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 50%;
    transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="3"] {
  height: 400px;
  width: 400px;
  background-image: url("https://th.portal-pokemon.com/play/resources/pokedex/img/pm/649b3c0f69e218d567e16e97253d7a20648c64bb.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 50%;
    transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="4"] {
  height: 400px;
  width: 400px;
  background-image: url("https://cdn.discordapp.com/attachments/798210263559962624/806571513209815100/PokC3A9mon_Squirtle_art.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 50%;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="5"] {
  height: 400px;
  width: 400px;
  background-image: url("https://lifestyle.campus-star.com/app/uploads/2016/07/pokemon_caterpie.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 50%;
    transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="6"] {
  height: 400px;
  width: 400px;
  background-image: url("http://f.ptcdn.info/345/045/000/oc8awm34u1Zme9d9I4u-o.png");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 50%;
    transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cardtest[data-pic="7"] {
  height: 400px;
  width: 400px;
  background-image: url("https://sites.google.com/site/popokemonmonster/_/rsrc/1487425070709/prawati-taw-lakhr-r-3/cv.png?height=320&width=320");
  background-size:cover;
  background-position:center;
  position: absolute;
  top: 18%;
  left: 65%;
  border-radius: 50%;
    transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 1s;
}
.card[data-cards="-1"] {
  background-image: url("https://cdn.discordapp.com/attachments/798210263559962624/806514756068179998/0c8e1fd3b0d4a29aad4d4e08ab9f9b09.jpg");
  background-size: 150px 200px;
}
.card.flip {
  transform: rotateY(180deg);
}

.card:active {
  transform: scale(0.97);
  transition: transform 0.5s;
}
.card.flip {
  transform: rotateY(180deg);
}
.cardtest:active {
  transform: scale(0.97);
  transition: transform .5s;
}
.cardtest.flip {
  transform: rotateY(180deg);
}

</style>
</head>

<html>

<body>
  <h1 class="name">Catch me If you can!</h1>
  <h3>press "click me!" and choose the card that you like...</h3>
  <div class="all">
    <div class="row">
      <div class="card" data-pic="0" data-cards='-1' onclick="flip(this)"></div>
      <div class="card" data-pic="1" data-cards='-1' onclick="flip(this)"></div>
      <div class="card" data-pic="2" data-cards='-1' onclick="flip(this)"></div>
      <div class="card" data-pic="3" data-cards='-1' onclick="flip(this)"></div>
    </div>
    <div class="row1">
      <div class="card" data-pic="4" data-cards='-1' onclick="flip(this)"></div>
      <div class="card" data-pic="5" data-cards='-1' onclick="flip(this)"></div>
      <div class="card" data-pic="6" data-cards='-1' onclick="flip(this)"></div>
      <div class="card" data-pic="7" data-cards='-1' onclick="flip(this)"></div>
    </div>

<div class="cardtest" data-pic="-1" onclick="clickPokeball(this)"></div>
  </div>
  <h1 id='score'>Bonus : 0</h1>
</body>

document.getElementById("score").innerHTML =
      "Bonus " + ": " + (score -= 10);
  } //document.getElementById("print").innerHTML = num;
}
function clickPokeball(pokeball,num) {
  pokeball.dataset.pic *= -1 * num;
  //document.getElementById("print2").innerHTML = randomPos;
}
function reloadss(){
	location.reload();
}
  
</script>
</html>