Online Music Gallery Using HTML and CSS

Online Music Gallery Using HTML and CSS

Online music Gallery is a simple webpage or web pages that have different songs in store for you.

You play the song that you wish to listen to. It might have pictures or other graphics.

It is expected that you are aware of the basic HTML and CSS.

NOTE- This is just a simple demo and you can add or modify things according to your wish.

HTML Code to build our online music gallery

Here in this tutorial, we have made a frame inside the HTML page. The main HTML code consists of the heading and certain login, sign-up buttons, we have not added real buttons as this tutorial does not include javascript.

The main page HTML code is-

<!doctype html>
<html>

    <head>
<! CSS file is added here>
        <link href="online_music_site.css" type= "text/css" rel="stylesheet">
    </head>

<! class selector "main" is used to add CSS effects>
    <body class="main">
<! class selector "head" is used to add CSS effects>
        <h1 class="head">RYTHM</h1>
        <hr>

        <p font-size:10px allign:left> Log in &nbsp;
<! &nbsp is used to leave blank spaces>
            Sign in &nbsp; Subscribe &nbsp;
            <hr>
<! frame is added here>
            <iframe src="main_frame.html" frameborder=30 height="1000" width="1500"></iframe>
        </p>
    </body>
</html>

We have used an iframe so that we can navigate through the songs without changing the outer layout.

Now let’s see the iframe code-

<!doctype html>
<html>
    <head>
<! linking CSS files>
        <link href="online_music_site.css" type= "text/css" rel="stylesheet">
        
    </head>


    <body class="frame">
        <table style="width:100%">
        
        <tr>
            <td>
            <image src="money_heist.jpg"> </image> <br>
                <audio controls>   
                     <source src="my_life_is _going_on.mp3" type="audio/mpeg">
                 </audio>
        </td>
        <td>
            <image src="netflix1.jpg"> </image> <br>
            <audio controls>   
                 <source src="my_life_is _going_on.mp3" type="audio/mpeg">
             </audio>

        </td>
        <td>
            <image src="netflix2.jpg"> </image> <br>
            <audio controls>   
                 <source src="my_life_is _going_on.mp3" type="audio/mpeg">
             </audio>


        </td>
        </tr>

        <br>

        <tr>
            <td>
                <image src="netflix6.jpg"> </image> <br>
                <audio controls>   
                     <source src="my_life_is _going_on.mp3" type="audio/mpeg">
                 </audio>

            </td>

            <td> 
                <image src="netflix4.jpg"> </image> <br>
                <audio controls>   
                     <source src="my_life_is _going_on.mp3" type="audio/mpeg">
                 </audio>


            
              </td>
            
        </tr>



        </table>



    </body>
</html>

In this, we have added a table and each cell in the table contains an image about the show or the movie the song is from, and below that we have the audio tab. To insert images we have used the <image > tag and for audio, we have used the <audio controls> tag.

This is a simple demonstration and you’re free to add more features according to your wish.

Now we will see the CSS file.

<! adding effect to the table like border>
table,td {border:1px solid black} 
 table, td{align:center}
<! adding hover effect to enhance the song chosen >
 td:hover {background-color:#67D9B2}


 .main{ background-color:#88A89D}

 .frame { background-color:#ACE4D1}
<! aligning and changing the font of the header>
 .head { text-align:center}
 .head { font-family:"lucida Console",Courier, monospace;}

Note that the hexadecimal values are used for colors, you can find that by simply google search for hex color code.

Here the selector used is class, in the CSS files a particular class is chosen by¬† ” .classname”.

You can experiment with various CSS attributes to enhance the looks and add various features according to your wish, here we have kept it simple.

The final output looks like this

Online Music Gallery Using HTML and CSS

One response to “Online Music Gallery Using HTML and CSS”

  1. Dominic Ernest says:

    Thanks but the songs are not playing…why?

Leave a Reply

Your email address will not be published.