Recreating Music Player UI Design
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player 2</title>
<!-- font -->
<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">
<style>
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
overflow: hidden;
}
.container {
position: relative;
width: 100vw;
height: 100vh;
background-color: #1a237e;
overflow-y: auto;
}
.header {
width: 100%;
}
.top {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
box-sizing: border-box;
padding: 32px 0px;
}
.icon-back {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
margin: 0px 32px;
}
.search {
width: 65%;
height: 3rem;
border-top-left-radius: 3rem;
border-bottom-left-radius: 3rem;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0px 16px;
}
.main {
position: absolute;
top: 20%;
display: flex;
width: 100%;
justify-content: space-around;
}
.main div {
text-align: right;
color: white;
}
.main-title {
font-size: 2rem;
}
.back {
position: relative;
margin-top: 35vh;
width: 100vw;
height: 65vh;
background-color: #311b92;
border-top-left-radius: 100px;
box-sizing: border-box;
overflow-y: auto;
}
.bottom {
position: absolute;
top: 32px;
width: 100vw;
min-height: calc(65vh - 32px);
background-color: #fff;
border-top-left-radius: 90px;
box-sizing: border-box;
padding: 20px 0px;
display: flex;
flex-direction: column;
}
.playlist {
display: flex;
width: 100%;
align-items: center;
justify-content: flex-end;
height: 4rem;
}
.play-icon {
margin-right: 12px;
}
.album-cover {
width: 40px;
height: 40px;
border-radius: 50%;
}
.song-info {
width: calc( 100% - 40px - 50px - 80px );
display: flex;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
margin-left: 20px;
}
.title {
font-size: 1.1rem;
font-weight: 800;
}
.artist {
font-size: 0.9rem;
color: #757575;
}
.song-duration {
width: 50px;
font-size: 0.9rem;
}
.playing {
position: fixed;
right: 0;
bottom: 0;
height: 5.5rem;
width: 75vw;
background-color: #0e031c;
border-top-left-radius: 60px;
box-sizing: border-box;
padding-top: 12px;
}
.now-playing {
display: flex;
justify-content: center;
align-items: center;
}
.now-playing .song-info {
width: 30vw;
}
.now-playing .title {
color: #fff;
}
.now-playing .artist {
color: #bdbdbd;
}
.play {
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
border: 1px solid #9e9e9e;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="top">
<span class="icon-back">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.71 6.71c-.39-.39-1.02-.39-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z"/></svg>
</span>
<div class="search">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
</div>
</div>
<div class="main">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="32px" viewBox="0 0 24 24" width="32px" fill="#5c6bc0"><g><rect fill="none" height="24" width="24"/></g><g><path d="M10.67,21L10.67,21c-0.35,0-0.62-0.31-0.57-0.66L11,14H7.5c-0.88,0-0.33-0.75-0.31-0.78c1.26-2.23,3.15-5.53,5.65-9.93 c0.1-0.18,0.3-0.29,0.5-0.29h0c0.35,0,0.62,0.31,0.57,0.66L13.01,10h3.51c0.4,0,0.62,0.19,0.4,0.66c-3.29,5.74-5.2,9.09-5.75,10.05 C11.07,20.89,10.88,21,10.67,21z"/></g></svg>
<div>
<div class="main-title">Ambient</div>
<div class="main-info">72 Followers . created by john</div>
</div>
</div>
</div>
<div class="back">
<div class="bottom">
<div class="playlist">
<img src="img1.png" class="album-cover" alt="song-1" />
<div class="song-info">
<div class="title">Mirage</div>
<div class="artist">Lorem</div>
</div>
<span class="song-duration">2:34</span>
</div>
<div class="playlist">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="20px" viewBox="0 0 24 24" width="20px" fill="#311b92" style="margin-right: 12px;"><g><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/></g><g><g><path d="M6,20L6,20c1.1,0,2-0.9,2-2v-7c0-1.1-0.9-2-2-2h0c-1.1,0-2,0.9-2,2v7C4,19.1,4.9,20,6,20z"/><path d="M16,15v3c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-3c0-1.1-0.9-2-2-2h0C16.9,13,16,13.9,16,15z"/><path d="M12,20L12,20c1.1,0,2-0.9,2-2V6c0-1.1-0.9-2-2-2h0c-1.1,0-2,0.9-2,2v12C10,19.1,10.9,20,12,20z"/></g></g></svg>
<img src="img1.png" class="album-cover" alt="song-1" />
<div class="song-info">
<div class="title">Mirage</div>
<div class="artist">Lorem</div>
</div>
<span class="song-duration">2:34</span>
</div>
<div class="playlist">
<img src="img1.png" class="album-cover" alt="song-1" />
<div class="song-info">
<div class="title">Mirage</div>
<div class="artist">Lorem</div>
</div>
<span class="song-duration">2:34</span>
</div>
<div class="playlist">
<img src="img1.png" class="album-cover" alt="song-1" />
<div class="song-info">
<div class="title">Mirage</div>
<div class="artist">Lorem</div>
</div>
<span class="song-duration">2:34</span>
</div>
</div>
</div>
<div class="playing">
<div class="now-playing">
<img src="img1.png" class="album-cover" alt="album-cover" />
<div class="song-info">
<div class="title">Mirage</div>
<div class="artist">Lorem</div>
</div>
<span class="play">
<svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 0 24 24" width="28px" fill="#ffffff"><path d="M8 19c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2v10c0 1.1.9 2 2 2zm6-12v10c0 1.1.9 2 2 2s2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2z"/></svg>
</span>
</div>
</div>
</div>
</body>
</html>Happy coding!
Comments ()