HTML
<div class="music-player">
<div class="player-main">
<div class="main-current">
<div class="current-keyvisual">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329679/music-player-freebie-photo.png" />
</div>
<div class="current-info">
<h1>Blame</h1>
<p>KYLE</p>
</div>
</div>
<div class="main-control">
<div class="btn _previous">
</div>
<div class="btn _pause">
</div>
<div class="btn _next">
</div>
<div class="btn _timeline">
<span class="current-time">2:32</span>
<span class="timescope">
<span class="timescope-dot"></span>
</span>
<span class="end-time">4:00</span>
</div>
</div>
</div>
<ul class="player-list">
<li>
<img
class="list-cover"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329679/music-player-freebie-a1.png"
/>
<div class="list-info">
<div class="info-title">One Step At A Time</div>
<div class="info-artist">BEARSON</div>
</div>
</li>
<li>
<img
class="list-cover"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329679/music-player-freebie-a2.png"
/>
<div class="list-info">
<div class="info-title">Sunset Lover</div>
<div class="info-artist">PETIT BISCUIT</div>
</div>
</li>
<li>
<img
class="list-cover"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329679/music-player-freebie-a3.png"
/>
<div class="list-info">
<div class="info-title">Youth</div>
<div class="info-artist">TROYE SIVAN</div>
</div>
</li>
<li>
<img
class="list-cover"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329679/music-player-freebie-a4.png"
/>
<div class="list-info">
<div class="info-title">Working Girl</div>
<div class="info-artist">LITTLE BOOTS</div>
</div>
</li>
</ul>
</div>
CSS
@import url('https://fonts.googleapis.com/css?family=Roboto');
$color-bg: #FAF5FF;
$color-purple: #26107B;
$color-gray: #8D8D8D;
$color-gray-light: #cdcdcd;
$color-white: #fff;
body {
margin: 0;
display: flex;
min-height: 100vh;
font-family: 'Roboto', sans-serif;
color: $color-gray;
background: $color-bg;
}
.music-player {
align-self: center;
margin: auto;
display: block;
width: 472px;
height: 515px;
border-radius: 6px;
overflow: hidden;
}
// First Part
.player-main {
position: relative;
width: 100%;
min-width: 472px;
padding: 24px;
box-sizing: border-box;
background-color: rgba(230, 219, 241, .8);
}
.main-current {
margin-bottom: 36px;
.current-keyvisual {
position: relative;
display: inline-block;
img {
position: relative;
z-index: 2;
width: 132px;
height: auto;
border-radius: 4px;
}
&:before {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
width: 95%;
height: 80%;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/329679/music-player-freebie-photo.png);
background-size: cover;
filter: blur(35px);
}
}
.current-info {
display: inline-block;
padding: 15px 0 0 24px;
box-sizing: content-box;
vertical-align: top;
h1, p {
margin: auto;
padding: 0;
}
h1 {
margin-bottom: 13px;
font-size: 20px;
color: $color-purple;
}
p {
font-size: 12px;
color: $color-purple;
}
}
}
.main-control {
position: relative;
line-height: 0;
.btn {
display: inline-block;
width: 30px;
height: 25px;
vertical-align: middle;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
opacity: .75;
&:hover {
opacity: 1;
}
&._previous {
margin-right: 17px;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/329679/music-player-freebie-previous.svg');
background-size: auto 80%;
}
&._pause {
margin-right: 17px;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/329679/music-player-freebie-pause.svg');
}
&._next {
margin-right: 24px;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/329679/music-player-freebie-next.svg');
background-size: auto 80%;
}
&._timeline {
vertical-align: middle;
height: auto;
width: auto;
opacity: 1;
> span {
display: inline-block;
vertical-align: middle;
font-size: 12px;
color: $color-purple;
&.timescope {
position: relative;
margin: auto 12px;
width: 180px;
height: 3px;
border-radius: 20px;
&:before,
&:after,
.timescope-dot {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 0;
height: 100%;
background-color: $color-purple;
cursor: pointer;
z-index: 1;
}
&:before {
width: 100%;
opacity: .2;
}
&:after {
width: 63%;
}
.timescope-dot {
top: -2.5px;
left: 63%;
z-index: 3;
width: 8px;
height: 8px;
border-radius: 100%;
}
}
}
}
}
}
// Second Part
.player-list {
margin: auto;
min-width: 472px;
padding: 24px;
background: $color-white;
list-style: none;
li {
margin-bottom: 18px;
cursor: pointer;
.list-cover,
.list-info {
display: inline-block;
vertical-align: middle;
&.list-cover {
margin-right: 9px;
width: 39px;
height: auto;
border-radius: 100%;
}
&.list-info {
.info-title {
margin-bottom: 3px;
font-size: 12px;
color: $color-gray;
}
.info-artist {
font-size: 10px;
color: $color-gray-light;
}
}
}
&:last-child {
margin-bottom: 0;
}
}
}
وسلامتكم
0 تعليقات