IndionPlay.github.io/index.html at main · Indion/IndionPlay.github.io · 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INDION PLAY</title>
    <link rel="icon" href="LOGO.png" type="icon/image">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="header">
        <img src="LOGO.png" alt="brand_logo">
        <h1>Listen , Feel , Relax !</h1>
    </div>
    <br>
    <nav>
        <ul>
            <a href="about.html">
                <li>About Us</li>
            </a>
            <a href="more.html">
                <li>More</li>
            </a>
        </ul>
    </nav>
    <br>
    <div class="greet">
        <h1>
            Hello There ! </h1>
        <br>
        <h2>
            Tell Us What To Play
        </h2>
    </div>
    <br>
    <br>
    <div class="playlist">
        <a href="play_1.html" target="_blank"><button id="har" style="cursor: pointer;">
                Haryanvi Beats
            </button></a>
        <a href="play_2.html" target="_blank"><button id="Alan" style="cursor: pointer;">
                Western Rythms
            </button></a>
        <a href="play_3.html" target="_blank"><button id="cool" style="cursor: pointer;">
                Cool Dude
            </button></a>
        <a href="play_4.html" target="_blank"><button id="Hindi" style="cursor: pointer;">
                Hindi ~ Punjabi Flavour
            </button></a>
    </div><br>
    <hr>
    <br>
    <br>
    <div class="footer">
        Ⓒ Indion Techs. Inc. , 2022
    </div>
    <hr>
</body>
<style>
    @media (max-width:900px) {
        .header {
            height: 50vh;
            width: 100vw;
            flex-direction: column;
            justify-content: center;
        }

        .header img {
            padding-left: 70px;
            padding-top: 60px;
            width: 60vw;
            height: 30vh;
        }

        .header h1 {
            font-size: 25px;
            width: 70vw;
        }

        .playlist {
            flex-direction: column;
            width: 90vw;
            justify-content: center;
            padding-top: 150px;
            padding-bottom: 150px;
        }

        #har,
        #Alan,
        #cool,
        #Hindi {
            margin: 10px;
            width: 80vw;
            height: 20vh;
        }

        .footer {
            width: 100vw;
        }

        .greet {
            width: 100vw;
        }
        nav {
            width: 100vw;
            justify-content: center;
        }

        nav ul li {
            list-style: none;
            padding: 20px 40px;
            font-family: 'DM Sans', sans-serif;
            font-size: larger;
        }
    }
</style>

</html>