HTML-codes/colorcode.html at main · Rahulgupta122/HTML-codes · 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
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Code</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            border: 2px solid black;
            margin: 30px;
            height: 94vh;
            width: 60vw;
            margin-left: 423px;
            background-color: black;
        }
        h1{
            text-align: center;
            margin-top: 30px;
            margin-bottom: 40px;

            color: rgb(49, 142, 223);

        }
        p{
            text-align: center;
            color: aliceblue;
        }
        .boxS{
            border: 2px solid black;
            height: 205px;
            width: 205px;
            margin-left: 468px;
            margin-top: 51px;
            background: linear-gradient(to bottom left, #ff6666 0%, #66ff66 100%);
        }
        .container{
            border: 2px solid black;
            height: 34px;
            width: 442px;
            margin-left: 331px;
            margin-top: 30px;
            background-color:azure;
            border-radius: 3px;

        }
        .bts{
            margin-top: 20px;
            height: 60px;
            margin-left: 50px;
            border-radius: 3px;
        }
        button:hover{
            background-color: aqua;

        }
        .foot{
            color: aliceblue;
            margin-top: 30px;
        }

    </style>
</head>
<body>
    <div class="box">
        <h1>Color Code</h1>
        <p>Click on the button to get random color codes</p>
        <div class="boxS">

        </div>
        <div class="container">
            <p style="text-align: center; color:black; margin-top:8px;">linear-gradient(to bottom left, #ff6666 0%, #66ff66 100%);</p>
        </div>
        <div class="bts">
            <button style="height: 60px; width:140px;border-radius: 10px;">Hex Color</button>
            <button style="height: 60px; width:140px; margin-left: 30px; border-radius: 10px;">RGB color</button>
            <button style="height: 60px; width:140px; margin-left: 30px; border-radius: 10px;">HSL Color</button>
            <button style="height: 60px; width:140px; margin-left: 30px; border-radius: 10px;">HSLA Color</button>
            <button style="height: 60px; width:140px; margin-left: 30px; border-radius: 10px;">Color Name</button>
            <button style="height: 60px; width:140px; margin-left: 30px; border-radius: 10px;">Gradient</button>
        </div>
        <div class="foot">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus sit illum voluptate. Suscipit placeat in facere sed numquam fuga officia saepe. Magnam ut minima, repellendus vero possimus neque velit distinctio iure mollitia laborum ea perferendis rerum. Velit reiciendis aspernatur eius deserunt nostrum autem dicta eveniet excepturi. Labore voluptatum eum quibusdam doloremque architecto consequuntur consequatur libero dignissimos?</p>
        </div>
    </div>
</body>
</html>