Music App UI Design Using only HTML and CSS

Hey there viewers and friends in this blog I'll be teaching you how to create a music app UI design using only HTML and CSS. In this blog you'll see there's a music card UI design, in this card at the top center you'll see I added a now playing text indicating the song that is currently imputed at the top left and right you'll see an icon added by fontawesome, in the nearer future I'll be showing you how to use fontawesome icons. As I've explained about the top now we come to the bottom you'll find a picture as the the cover art of the artist next is the title of the song plus the artist and the source of the music. Next in this project you'll see a slider indicating that you can drag the song back and forth, you can also see the timestamps of the songs and also some other icons.

This is just a basic design of a music app this doesn't sing or changes song, but I'll work on making it do that in the nearer future. Thanks for reading

Music App UI Design Using only HTML and CSS | Video Tutorial

As you've seen in the video on Music App UI Design I've explained all the details. If you want to create something like this first you've to add your two files index.html and style.css after creating those two files then you can start creating the music App design.

Music App UI Design Using only HTML and CSS | Source Code

HTML CODE

<!DOCTYPE html>
   <!-- Designed By Code Block youtube.com/c/CodeBlockYT -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Music App UI Design</title>
   <!-- Fontawesome CDN Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
      <div class="music-app">
        <div class="icons">
          <i class="fa fa-angle-down"></i>
          <h4>Now Playing</h4>
          <i class="fa fa-ellipsis-h"></i>
        </div>
        <div class="image">
          <img src="image.jpg" alt="">
        </div>
        <div class="tooltip">
          <div class="audio-name">Ikson Anywhere - Ikson</div>
          <div class="audio-tag">Audio Libary</div>
        </div>
        <div class="settings">
          <input type="range" min="0" max="200" value="0" step="1">
          <div class="time one">0:00</div>
          <div class="time two">2:46</div>
        </div>
        <div class="icons icon">
          <i class="fa fa-random"></i>
          <div class="music-playstate">
            <i class="fa fa-backward"></i>
            <i class="fa fa-play-circle"></i>
            <i class="fa fa-forward"></i>
          </div>
          <i class="fa fa-music"></i>
        </div>
      </div>
    </div>
</body>
</html>

CSS CODE

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body{
  background: linear-gradient(135deg,#2980b9,pink)
}
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.container .music-app{
  padding: 20px;
  height: 410px;
  width: 300px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(0,0,0,.4)
}
.music-app .icons h4{
  display: flex;
  justify-content: space-evenly;
}
.music-app .icons i.fa-angle-down{
  font-weight: 600;
}
.music-app .image{
  width: 100px;
  height: 100px;
  margin-top: 20px;
  margin-bottom: 90px;
  position: relative;
  right: 2px;
}
.music-app .image img{
  width: 270px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
}
.music-app .tooltip{
  text-align: center;
  margin-bottom: 20px;
}
.music-app .tooltip .audio-tag{
  margin-top: 5px;
  font-size: 16px;
}
.music-app .tooltip .audio-name{
  font-size: 18px;
}
.music-app .settings input{
  -webkit-appearance: none;
  height: 3px;
  width: 100%;
  background: #ddd;
  outline: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.music-app .settings input:active{
  background: #3498db;
}
.music-app .settings input::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg,#2980b9,#16a085);
  border-radius: 50%;
}
.music-app .settings .time{
  font-size: 15px;
  color: #95a5a6;
}
.music-app .settings .time.two{
  display: flex;
  justify-content: space-around;
  position: relative;
  left: 120px;
  bottom: 18px;
}
.music-app .icons{
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.music-app .icons.icon i.fa-backward{
  margin-right: 28px;
  font-size: 20px;
  background: linear-gradient(135deg,#2980b9,#16a085);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.music-app .icons.icon i.fa-forward{
  margin-left: 28px;
  font-size: 20px;
  background: linear-gradient(135deg,#2980b9,#16a085);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.music-app .icons.icon i.fa-play-circle{
  font-size: 28px;
  background: linear-gradient(135deg,#2980b9,#16a085);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.music-app .icons.icon i.fa-random{
  font-size: 20px;
  background: linear-gradient(135deg,#2980b9,#16a085);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.music-app .icons.icon i.fa-music{
  font-size: 20px;
  background: linear-gradient(135deg,#2980b9,#16a085);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

DOWNLOAD CODE FILES

Music App UI Design Using only HTML and CSS

Creative Tutorials

Post a Comment

Post a Comment

Contact Form