HTML-CSS--Basic-Project/transition.html at main · abhishekmhasal/HTML-CSS--Basic-Project · GitHub

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transition</title>
  <link rel="stylesheet" href="transition.css">
  <link
    href="https://cdn.jsdelivr.net/npm/remixicon@4.7.0/fonts/remixicon.css"
    rel="stylesheet"
/>
<link rel="shortcut icon" href="https://plus.unsplash.com/premium_photo-1695717076798-404f76f121da?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGFuZGElMjBiZWFyfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=600" type="image/x-icon">
</head>
<body>
  <div id="main">
    <div class="card">
      <img src="https://images.unsplash.com/photo-1724050034046-bacc1c84e5f6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGFuaW1hbCUyMHBob3RvfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=1000" alt="">

       <div class="bottom">
        <h4> Wolf </h4>
        <h3><i class="ri-heart-fill"></i></h3>

    </div>
    </div>
    <div class="card">
      <img src="https://images.unsplash.com/photo-1726154130681-e8228031188c?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjZ8fGFuaW1hbCUyMHBob3RvfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=600" alt="">

       <div class="bottom">
        <h4> Horse </h4>
        <h3><i class="ri-heart-fill"></i></h3>

    </div>
    </div>
    <div class="card">
      <img src="https://images.unsplash.com/photo-1664699422451-988f35165f8b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjh8fGFuaW1hbCUyMHBob3RvfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=600" alt="">

       <div class="bottom">
        <h4> Dog </h4>
        <h3><i class="ri-heart-fill"></i></h3>

    </div>
    </div>

        <div class="card">
      <img src="https://images.unsplash.com/photo-1543240912-d2cac0653cfe?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2070" alt="">

       <div class="bottom">
        <h4>Dear</h4>
        <h3><i class="ri-heart-fill"></i></h3>

    </div>
    </div>

     <div class="card">
      <img src="https://images.unsplash.com/photo-1731914379507-d80fec2f8ea1?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=735" alt="">

       <div class="bottom">
        <h4> Cat</h4>
        <h3><i class="ri-heart-fill"></i></h3>

    </div>
    </div>

    <div class="card">
      <img class="snake" src="https://images.unsplash.com/photo-1677919022208-94ebeb9d7a8c?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NzV8fGFuaW1hbCUyMHBob3RvfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=600" alt="">

       <div class="bottom">
        <h4>Snake </h4>
        <h3><i class="ri-heart-fill"></i></h3>

    </div>
    </div>

    <div class="card">
      <img  src="https://images.unsplash.com/photo-1597953601374-1ff2d5640c85?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8cGFuZGElMjBiZWFyfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=600" alt="">

       <div class="bottom">
        <h4>Panda</h4>
        <h3><i class="ri-heart-fill"></i></h3>

    </div>
    </div>

    </div>
</body>
</html>