<div class="main">
<div class="row">
<div class="col-lg-7">
<center>
<div class="title"> <b>LIONEL MESSI</b> </div>
</center>
<div class="details">
<table class="table bio">
<tr>
<td><b>NATIONALITY</b></td>
<td><b>Argentina <img class="flag" src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Flag_of_Argentina.svg"></b></td>
</tr>
<tr>
<td><b>CLUB</b></td>
<td><b>FC Barcelona (Spain)</b></td>
</tr>
<tr>
<td><b>AGE</b></td>
<td><b>32</b></td>
</tr>
<tr>
<td><b>HEIGHT</b></td>
<td><b>171 cm</b></td>
</tr>
<tr>
<td><b>POSITION</b></td>
<td><b>CF</b></td>
</tr>
</table> <br><br>
<center>
<p class="stats z-depth-4"><span class="one">86 SPD</span>     <span class="two">95 SHT</span></p><br>
<p class="stats z-depth-4"><span class="three">96 DRI</span>     <span class="four">66 PHY</span></p><br>
<p class="stats z-depth-4"><span class="five">88 PAS</span>     <span class="six">43 DEF</span></p>
</center>
</div>
</div>
<div class="col-lg-5"> <img class="messi" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561476773/p19054.png">
<p class="ss"><b>SS</b></p>
<p class="bigno"><b>94</b></p>
</div>
</div>
</div>
.main {
width: 80vw;
height: auto;
margin: auto;
background-image: linear-gradient(to bottom, #e53935, #3949ab);
color: white;
position: relative;
top: 5vh;
padding: 1vw
}
body {
background-color: black;
font-family: 'Roboto', sans-serif
}
.messi {
height: 80vh;
position: relative;
right: 3vw;
display: none
}
.title {
width: 90%;
background-color: rgb(255, 255, 255, 0.2);
font-size: 3vw;
padding: 0vw;
color: black;
animation-name: first;
animation-duration: 1s;
animation-fill-mode: forwards
}
@keyframes first {
from {
width: 0%;
font-size: 0vw;
padding: 0vw
}
to {
width: 90%;
font-size: 3vw;
padding: 0.5vw
}
}
.details {
width: 90%;
height: 0vh;
background-color: rgb(255, 255, 255, 0.2);
margin: auto;
padding: 0vw;
color: black;
animation-name: second;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s
}
@keyframes second {
from {
height: 0vh;
padding: 0vw
}
to {
height: 75vh;
padding: 1vw
}
}
tr {
border: 2px solid rgb(0, 0, 0, 0.0)
}
.bio {
font-size: 1.2vw
}
.stats {
background-color: #e53935;
width: 0%;
color: gold;
height: 3vw;
font-size: 0vw;
padding: 0vw;
animation-name: fourth;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 2s
}
@keyframes fourth {
from {
width: 0%;
font-size: 0vw;
padding: 0vw
}
to {
width: 100%;
font-size: 1.5vw;
padding: 0.5vw
}
}
.ss {
position: relative;
bottom: 80vh;
left: 21vw;
font-size: 3vw;
color: gold
}
.bigno {
position: relative;
bottom: 82vh;
left: 20vw;
font-size: 5vw;
color: gold
}
.flag {
height: 1.5vw;
width: 2vw;
position: relative;
bottom: 0.2vw
}
@media only screen and (max-width: 425px) {
.main {
width: 100vw;
height: 270vw
}
.bio {
font-size: 3.6vw
}
.stats {
height: 9vw
}
.flag {
height: 5.4vw;
width: 6vw
}
.messi {
height: 80vw;
position: relative;
left: 18vw
}
.ss {
position: relative;
bottom: 80vw;
left: 70vw;
font-size: 5vw
}
.bigno {
position: relative;
bottom: 84vw;
left: 68vw;
font-size: 8vw
}
}
$(document).ready(function(){
$(".messi").fadeIn(3000);
});