Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 533 | Author: cody 
  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
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spotify – Web Player</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.0.0/fonts/remixicon.css" rel="stylesheet" />

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="utility.css">
    <link rel="icon" href="img/favicon.ico">
</head>

<body>

    <div class="container flex bg-black">
        <div class="left">
            <div class="close">
                <img class="invert" src="img/close.svg" alt="">
            </div>
            <div class="home flex flex-direction gap bg-grey rounded m-1  font-16">

                <div class="logo">
                    <img class="invert" src="img/logo.svg" alt="">
                </div>
                <ul class="ul flex flex-direction gap ">
                    <li><img class="invert" src="img/home.svg" alt="home">Home</li>
                    <li><img class="invert" src="img/search.svg" alt="home">Search</li>
                </ul>
            </div>
            <div class="library rounded bg-grey m-1 p-1 font-16">
                <div class="heading">
                    <img class="invert" src="img/playlist.svg" alt="">
                    <h2>
                        Your Library
                    </h2>
                </div>

                <div class="songList">
                    <ul> 
                    </ul>
                </div>
                <div class="footer">
                    <div><a href="https://www.spotify.com/jp/legal/"><span>Legal</span></a></div>
                    <div><a href="https://www.spotify.com/jp/privacy/"><span>Privacy </span></a></div>
                    <div><a href="https://www.spotify.com/jp/legal/privacy-policy/"><span>Protect </span></a>
                    </div>
                    <div><a href="https://www.spotify.com/jp/legal/cookies-policy/"><span>Cookies</span></a></div>
                    <div><a href="https://www.spotify.com/jp/legal/privacy-policy/#s3"><span>About </span></a></div>
                    <div><a href="https://www.spotify.com/jp/accessibility/"><span>Accessibility</span></a></div>
                </div>
            </div>
        </div>

        <div class="right rounded bg-grey p-2">
            <div class="header rounded m-1 p-1  p-2">
                <div class="nav">
                    <img class="invert hamburger" src="img/hamburger.svg" alt="">

                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M15 6L9.70711 11.2929C9.37377 11.6262 9.20711 11.7929 9.20711 12C9.20711 12.2071 9.37377 12.3738 9.70711 12.7071L15 18"
                            stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M9 18L14.2929 12.7071C14.6262 12.3738 14.7929 12.2071 14.7929 12C14.7929 11.7929 14.6262 11.6262 14.2929 11.2929L9 6"
                            stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </div>
                <div class="buttons">
                    <button class="btnn">Sign up</button>
                    <a href="login/index.html" target="_blank"><button class="btn">Log in</button></a>
                </div>
            </div>

            <div class="spotifyPlayist m-1">
                <h1>Spotify Playlist</h1>
                <div class="cardContainer">
                   
                </div>
                <div class="playCONT">
                    <div class="playBar">
                        <div class="seekar">
                            <div class="circle">

                            </div>
                        </div>

                        <div class="songsInfo">

                        </div>

                        <div class="songButtons">
                            <img id="previous" class="invert" src="img/prevsong.svg" imgalt="">
                            <img id="play" class="invert" src="img/play.svg" alt="">
                            <img id="next" class="invert" src="img/nextsong.svg" alt="">
                        </div>

                        <div class="volumne1">
                            <div class="songTime">

                            </div>
                            <div class="volume">
                                <img width="24" class="invert" src="img/volume.svg" alt="">
                                <div class="range invert">
                                    <input type="range" name="volume" id="id">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

Share this file: