githubdemo/box3.html at main · MetalCouch/githubdemo · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <style>
        body {
            /* display: flex; */
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .colorful-box {
            width: 200px;
            height: 200px;
            background: linear-gradient(45deg, #3498db, #e74c3c, #2ecc71, #f39c12);
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-family: 'Arial', sans-serif;
            font-size: 20px;
            text-align: center;
        }

        b {
            font-size: 50px;
        }

        .poc {
            background-color: aqua;
            width: 50%;
            border: 25px solid black;
        }

        .cop {
            background-color: rgb(73, 73, 136);
            padding-top: 5px;
            width: 25%;
            color: blanchedalmond;
        }
    </style>
</head>

<body>
    <b>Hello World !!!</b>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima suscipit id consequuntur ullam necessitatibus a
        ratione? Commodi voluptatem, veniam necessitatibus recusandae vel facere quam eius neque, saepe fuga itaque at
        exercitationem nostrum nesciunt, voluptas eveniet repellat. Aspernatur perspiciatis, dolor, rerum vitae nulla
        pariatur, facere ex id molestias tempora a facilis enim voluptas fugit porro expedita inventore.</p>

    <div class="poc">
        This will be the 2nd commit
    </div>

    <div class="cop">
        3rd commit
    </div>

    <br>

    <div class="colorful-box">
        Hello, I'm a Colorful Box!

    </div>

</body>

</html>