html/UI_card.html at main · Tejkumar-hacker/html · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .card{
            margin: 80px auto;
            width: auto;
            height: auto;
            background-color: white;
            border: 1px solid black;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            background-image: url('images/bc.jpg');
            background-size: cover;
            background-position: center;
        }
        .img{
            width: 200px;
            height: 300px;
            display: block;
            justify-content: center;
            align-items: flex-start;
            padding: 20px;
        }
        .img img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .title{
            font-size: 30px;
            font-weight: bold;
            background-color: rgba(254, 254, 254, 0.1);
            border-radius: 2px;
            color: white;

        }

        .desc{
            padding: 20px;
            font-size: 16px;
            text-align: center;
            color: white;
            background-color: rgba(192, 171, 145, 0.3);
        }
        .button button{
            margin-bottom: 10px;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="img">
            <img src="images/onepiece.jpg" alt="check pic once again">
        </div>
        <div  class="title">
            <h2>One Piece</h2>
        </div>
        <div  class="desc">
            <p>One Piece (TV Series 1999– ) - IMDbOne Piece follows Monkey D. Luffy and his diverse Straw Hat crew, who explore the dangerous Grand Line in search of the legendary treasure, the "One Piece". Luffy, who gained rubber-like powers from a Devil Fruit, aims to become the Pirate King, fighting powerful enemies and overcoming corrupt regimes along the way. The series features deep world-building, focusing on themes of friendship, ambition, and pursuing one’s dreams in a world often dominated by the navy and totalitarian "world government". Along with intense combat, it involves high-stakes adventures, from rescuing crewmates to fighting for the freedom of entire islands, such as in Wano Country. The story combines humor, emotional backstory, and intricate, long-running mystery to form a massive, high-fantasy pirate epic.</p>
        </div>
        <div  class="button">
            <button type="button">Button</button>
        </div>
    </div>
</body>
</html>