<div class="main1">
<div class="main2 table-responsive">
<center>
<h2> PREMIER LEAGUE <img class="flag" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561260902/Flag_of_Great_Britain__281707_E2_80_931800_29.svg"></h2>
<p class="pt">POINTS TABLE 2019</p>
<table class="table">
<thead>
<td>Pos.</td>
<td class="name">CLUBS</td>
<td>P</td>
<td>W</td>
<td>D</td>
<td>L</td>
<td>GD</td>
<td>POINTS</td>
</thead>
<tbody>
<tr class="top">
<td>1</td>
<td class="name"><img class="logo" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561260926/1200px-Manchester_City_FC_badge.svg.png"> MANCHESTER CITY</td>
<td>7</td>
<td>6</td>
<td>1</td>
<td>0</td>
<td>+18</td>
<td>19</td>
</tr>
<tr class="top">
<td>2</td>
<td class="name"><img class="logo" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561260950/1200px-Liverpool_FC.svg.png"> LIVERPOOL</td>
<td>7</td>
<td>6</td>
<td>1</td>
<td>0</td>
<td>+12</td>
<td>19</td>
</tr>
<tr class="top">
<td>3</td>
<td class="name"><img class="logo" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561260970/Chelsea-logo.png"> CHELSEA</td>
<td>7</td>
<td>5</td>
<td>2</td>
<td>0</td>
<td>+10</td>
<td>17</td>
</tr>
<tr class="top">
<td>4</td>
<td class="name"><img class="logo" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561260991/1200px-Tottenham_Hotspur.svg.png"> TOTTENHHAM HOTSPUR</td>
<td>7</td>
<td>5</td>
<td>0</td>
<td>2</td>
<td>+7</td>
<td>15</td>
</tr>
<tr>
<td>5</td>
<td class="name"><img class="logo" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561261014/f1c7a000dc20ff2970a503b43ecad32a.png"> ARSENAL</td>
<td>7</td>
<td>5</td>
<td>0</td>
<td>2</td>
<td>+5</td>
<td>15</td>
</tr>
<tr>
<td>6</td>
<td class="name"><img class="logo" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561261036/1200px-Watford.svg.png"> WATFORD</td>
<td>7</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>+3</td>
<td>13</td>
</tr>
<tr>
<td>7</td>
<td class="name"><img class="logo" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561261060/AFCB_08_grande.jpg"> BOURNEMOUTH</td>
<td>7</td>
<td>4</td>
<td>1</td>
<td>2</td>
<td>0</td>
<td>13</td>
</tr>
<tr>
<td>8</td>
<td class="name"><img class="logo" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561261086/220px-Leicester_City_crest.svg.png"> LEICESTER CITY</td>
<td>7</td>
<td>4</td>
<td>0</td>
<td>3</td>
<td>+3</td>
<td>12</td>
</tr>
<tr>
<td>9</td>
<td class="name"><img class="logo" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1561261112/1200px-Wolverhampton_Wanderers.svg.png"> WOLVERHAMPTON WANDERERS</td>
<td>7</td>
<td>3</td>
<td>3</td>
<td>1</td>
<td>+2</td>
<td>12</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
.main1 {
width: 80vw;
height: 90vh;
margin: auto;
position: relative;
top: 4vh;
font-family: 'Oswald', sans-serif
}
.main2 {
width: 80vw;
height: 90vh;
margin: auto;
background-color: #9e9e9e;
color: white;
padding: 0.5vw
}
.flag {
width: 5vw;
height: 3vw;
position: relative;
bottom: 0.5vw
}
.pt {
font-size: 2vw
}
table {
color: white
}
.logo {
width: 2vw;
height: 2vw
}
td {
text-align: center
}
.name {
text-align: left
}
thead {
background-color: red;
border-bottom: 2px solid red
}
.top {
background-color: rgb(0, 255, 0, 0.5)
}
.top .logo {
animation-name: four;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite
}
@keyframes four {
0% {
position: relative;
right: 0vw
}
50% {
position: relative;
right: 2vw
}
100% {
position: relative;
right: 0vw
}
}
@media only screen and (max-width: 425px) {
.main1,
.main2 {
width: 100vw;
height: 220vw
}
.name {
font-size: 4vw
}
.logo {
height: 6vw;
width: 6vw
}
h2 {
font-size: 8vw
}
.flag {
width: 10vw;
height: 6vw;
position: relative;
bottom: 1vw
}
.pt {
font-size: 5vw
}
}