Skip to main content

Featured

Labels

BUILDING A PROJECT USING JUST HTML

Document

HOW TO CREATE MUSIC PLAYLIST PAGE USING HTML ONLY



Hey I am varsha, A first year Engineering student ,I recently got into web development and I'm currently diving more into it. This is an article in which I am sharing a fun project I made using just html.This is a music playlist page, it's quite simple to build.

This is what the page will look like after you build it and it's really fun as you can actually play your music on it. You can use it as a project built entirely using html.The whole code for building this is given below! You can improvise it according to your creativity. 


    <!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>spotify.com</title>
</head>

<body>
  <!--this is a music playlist-->
  <header>
    <img src="https://logos-world.net/wp-content/uploads/2020/09/Spotify-Logo-2015-present.jpg" width="200">
    <br>
    <form>
      <img src="https://www.it-farm.com/wp-content/uploads/2016/03/playlistlogo.png" width="100">
      <h3>
        <i>Best of Blohsh</i>
      </h3>
  </header>
  <main>
    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/042Sl6Mn83JHyLEqdK7uI0?utm_source=generator" width="400" height="100" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
    </iframe>"
    <br>
    <br>
    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/2ygvZOXrIeVL4xZmAWJT2C?utm_source=generator" width="400" height="100" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
    </iframe>
    <br>
    <br>
    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/0u2P5u6lvoDfwTYjAADbn4?utm_source=generator" width="400" height="100" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
    </iframe>
    <br>
    <br>
    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/2Fxmhks0bxGSBdJ92vM42m?utm_source=generator" width="400" height="100" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
    </iframe>
    <br>
    <br>
    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/73SpzrcaHk0RQPFP73vqVR?utm_source=generator" width="400" height="100" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
    </iframe>
    <br>
    <br>
    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/7hDVYcQq6MxkdJGweuCtl9?utm_source=generator" width="400" height="100" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
    </iframe>
    <br>
    <br>
    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/4HOryCnbme0zBnF8LWij3f?utm_source=generator" width="400" height="100" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
    </iframe>
    <br>
    <br>
    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/54bFM56PmE4YLRnqpW6Tha?utm_source=generator" width="400" height="100" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
    </iframe>
    <br>
    <br>
    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/3XF5xLJHOQQRbWya6hBp7d?utm_source=generator" width="400" height="100" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
    </iframe>
    <br>
    <br>
    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/43zdsphuZLzwA9k4DJhU0I?utm_source=generator" width="400" height="100" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
    </iframe>
  </main>
</body>

</html>

HAPPY CODING!

>
Labels:

Comments

Post a Comment

Popular Posts