-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPokemonCards.html
30 lines (30 loc) · 1.75 KB
/
PokemonCards.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
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokemon Cards</title>
<link rel="stylesheet" href="PokemonCards.css">
</head>
<body>
<div id="main">
<div id="card1" class="card">
<img src="https://images.unsplash.com/photo-1609372332255-611485350f25?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8cG9rZW1vbnxlbnwwfHwwfHx8MA%3D%3D" alt="">
</div>
<div id="card2" class="card">
<img src="https://images.unsplash.com/photo-1643725173053-ed68676f1878?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
</div>
<div id="card3" class="card">
<img src="https://images.unsplash.com/photo-1609845768806-767fcfc317b6?w=294&dpr=1&h=294&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXRodW1ibmFpbHx8UDI2eTBpM2kwRnd8fGVufDB8fHx8fA%3D%3D" alt="">
</div>
<div id="card4" class="card">
<img src="https://images.unsplash.com/photo-1642534270237-ae57b321c5bc?w=294&dpr=1&h=294&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXRodW1ibmFpbHx8R0VoMVluRTdNLW98fGVufDB8fHx8fA%3D%3D" alt="">
</div>
<div id="card5" class="card">
<img src="https://images.unsplash.com/photo-1529143732233-da7fb74682a3?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MTV8LTZabGJ0Qk8tZjB8fGVufDB8fHx8fA%3D%3D" alt="">
</div>
<!-- one way to put all these card first on the top then accordingly arrange card 4 to the
first sequence on above -->
</div>
</body>
</html>