DEV Community

Cover image for How to Create Music Player UI Design Using HTML and CSS Only.
Ajay Sharma
Ajay Sharma

Posted on

How to Create Music Player UI Design Using HTML and CSS Only.

Hello Everyone, In this Post We Will be Seeing How to Create Music Player UI Design Using HTML and CSS Only.

Here is The Live Link of Page https://music-player-ui-design.netlify.app/

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/

Steps to Create :-

  1. Choose Any Text Editor (VSCode Recommended).
  2. Create 2 Files in Current Project Directory, index.html and style.css.
  3. Use Below HTML and CSS Code To Build Your Page.
<!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>Music Player Design</title>
    <link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Poppins:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container card">
        <div class="music-image">
            <img src="https://image.freepik.com/free-vector/elegant-musical-notes-music-chord-background_1017-20759.jpg" alt="Music Image">
        </div>
        <div class="music-description">
            <h1 class="music-name">Repeat</h1>
            <h5 class="music-artist-name">Jazzy B</h5>
            <div class="music-buttons">
                <span class="music-button-left">
                    <i class="fas fa-chevron-left"></i>
                    <i class="fas fa-chevron-left"></i>
                </span>
                <span class="music-button-pause">
                    <i class="fas fa-pause"></i>
                </span>
                <span class="music-button-right">
                    <i class="fas fa-chevron-right"></i>
                    <i class="fas fa-chevron-right"></i>
                </span>
            </div>
        </div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
:root {
    --mainColor1: #538FFB;
    --mainColor2: #5B54FA;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-weight: lighter;
    font-family: Poppins, sans-serif;
    background-color: #CAD5E2;
    overflow: hidden;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 60%;
    transform: translate(-50%, -50%); 
}
.card {
    padding: 20px 50px;
    width: 500px;
    background: linear-gradient(to top right, var(--mainColor1), var(--mainColor2));
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 200px rgba(255, 255, 255, 0.7);
}
.music-image {
    width: 500px;
    height: 350px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
}
.music-image > img {
    width: 60%;
    height: 60%;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 200px rgba(255, 255, 255, 0.7);
}
.music-description {
    position: absolute;
    left: 20%;
    top: 60%;
    margin-top: 5%;
    color: #fff;
}
.music-name {
    margin-top: -5%;
    font-size: 40px;
    font-weight: 300;
}
.music-artist-name {
    font-size: 20px;
    font-weight: 250;
}
.music-buttons {
    margin-top: 5%;
    display: flex;
    width: 300px;
    justify-content: space-between;
    align-items: center;
}
.music-button-left, 
.music-button-pause, 
.music-button-right {
    cursor: pointer;
}

@media screen and (max-width: 550px) {
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .card {
        width: 400px;
    }
    .music-image {
        width: 500px;
        height: 350px;
        position: absolute;
        top: 50%;
        left: 77%;
    }
    .music-description {
        position: absolute;
        left: 15%;
        top: 60%;
    }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)