html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Does that makes sense???</title>
</head>
<body>
<table border=0>
<tr>
<th>Health foods</th>
<th>Unhealthy foods</th>
</tr>
<tr>
<td><img src="https://www.foodandwine.com/thmb/C8XvnSkIMvz2XewXFDB_JYK-mSU=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/Perfect-Sandwich-Bread-FT-RECIPE0723-dace53e15a304942acbc880b0ae34f5a.jpg" width=80% class="healthy"></td>
<td>
<img src="https://media.istockphoto.com/id/1309352410/photo/cheeseburger-with-tomato-and-lettuce-on-wooden-board.jpg?s=612x612&w=0&k=20&c=lfsA0dHDMQdam2M1yvva0_RXfjAyp4gyLtx4YUJmXgg=" width=80% class="unhealthy">
</td>
</tr>
<tr>
<td><img src="https://media.istockphoto.com/id/535379083/photo/organic-raw-dry-black-beans.jpg?s=612x612&w=0&k=20&c=mkiFsOlMGGxatxKzy9-Iqe47cE_DmtDHjbFHVRHrP_o=" width=80% class="healthy"></td>
<td rowspan=4 class="text">Does that really makes sense???</td>
</tr>
<tr>
<td><img src="https://media.istockphoto.com/id/531024761/photo/portion-of-cheese.jpg?s=612x612&w=0&k=20&c=owZRqlsPq9pAroxPkDUBd4ye5RY_Ejcn8gMaWvpfQCc=" width=80% class="healthy"></td>
</tr>
<tr>
<td>
<img src="https://media.istockphoto.com/id/1387420863/photo/top-view-of-fresh-butterhead-lettuce-isolated.jpg?s=612x612&w=0&k=20&c=Pz7Lkz6KVnW9q9wgA4oKbLu4jl0hm8EtKlrxgun860M=" width=80% class="healthy">
</td>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
table {
width:100%;
text-align:center;
}
td {
width:50%;
}
.healthy {
opacity:100%;
animation-name:uappear;
animation-delay:0s;
animation-duration:4s;
}
.unhealthy {
opacity:100%;
animation-name:appear;
animation-duration:4s;
}
.text {
font-size:40px;
font-weight:bold;
animation-name:appeartxt;
animation-duration:6s;
}
}
@keyframes uappear{
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Запуск