HTML
<main>
<aside>
<i class="fa fa-bars"></i>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-volume-up"></i>
<i class="fa fa-user"></i>
</aside>
<section class="content">
<div class="music-head">
<img src="http://www.popelera.net/wp-content/uploads/2017/10/c-tangana-idolo-1.jpg">
<section class="music-details">
<div>
<p>ÍDOLO</p>
<p>C.Tangana</p>
<p>2017</p>
</div>
<div>
<i class="fa fa-play"> </i>
<i class="fa fa-plus"> </i>
<i class="fa fa-ellipsis-h"> </i>
</div>
</section>
</div>
<ul class="music-list">
<li>
<p>1. Tiempo</p>
<p>C. Tangana</p>
<p>3:37</p>
<p>ÍDOLO</p>
</li>
<li>
<p>2. Inditex</p>
<p>C. Tangana</p>
<p>3:24</p>
<p>ÍDOLO</p>
</li>
<li>
<p>3. De Pie</p>
<p>C. Tangana</p>
<p>2:53</p>
<p>ÍDOLO</p>
</li>
<li>
<p>4. No Te Pegas</p>
<p>C. Tangana</p>
<p>3:21</p>
<p>ÍDOLO</p>
</li>
</ul>
</section>
</main>
<footer>
<div class="playing">
<img src="http://www.popelera.net/wp-content/uploads/2017/10/c-tangana-idolo-1.jpg">
<div class="playing-info">
<p>Tiempo</p>
<p>C. Tangana</p>
</div>
<div class="bar"></div>
</div>
<div class="controls">
<i class="fa fa-step-backward"></i>
<i class="fa fa-pause"></i>
<i class="fa fa-step-forward"></i>
<i class="fa fa-repeat"></i>
<i class="fa fa-random"></i>
</div>
</footer>
CSS
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
:root{
--color-primary: #eb2f64;
--color-text: #a5a7ba;
--color-text-2: #84CEBB;
--color-grey-dark: #161B31;
--color-grey-dark-rgb: rgb(22,27,49);
--color-grey-light: #252D47;
--color-grey-lighter: #626691;
--shadow-dark: 0 2rem 6rem rgba(0,0,0, .5);
--shadow-dark-2: 0 2rem 6rem rgba(0,0,0, .3);
--shadow-light: 0 2rem 5rem rgba(0,0,0,.1);
}
html, body {
height: 100%;
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 62.5%;
color: var(--color-text);
}
body {
display: flex;
flex-direction: column;
}
img{
box-shadow: var(--shadow-dark);
}
main{
flex: 1 0 auto;
display:flex;
}
aside{
background-image: linear-gradient(to bottom, var(--color-grey-dark), var(--color-grey-light));
flex: 0 0 5%;
display:flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
@media screen and (max-width: 650px) {
flex-direction: row;
}
}
aside i.fa{
color: var(--color-grey-lighter);
font-size: 2.8rem;
margin: 30%;
box-shadow: var(--shadow-light);
}
.content{
background-image: linear-gradient(to right bottom, var(--color-grey-light), var(--color-grey-dark));
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.music-head{
background-image: linear-gradient(
to right bottom,
rgba(130, 20, 100, 0.9),
rgba(22,27,49, 0.9)
),
url('https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-0/s480x480/22089365_1390820531034726_4541129191479079887_n.jpg?oh=0586556240f07b0f5cebba14314683b2&oe=5AAF8A6A');
background-size: cover;
background-position: top;
color: #fff;
padding: 2.5rem;
flex: 0 0 30%;
display: flex;
align-items: center;
box-shadow: var(--shadow-dark-2);
}
.music-head img{
width: 15rem;
height: 15rem;
}
.music-head img:hover{
width: 16rem;
height: 16rem;
transition: .4s ease;
}
.music-details{
font-size: 2.6rem;
flex: 1 1 auto;
display: flex;
flex-direction: column;
margin: auto;
padding-left: 2rem;
}
.music-details div:nth-child(1){
font-size: 2.6rem;
margin-bottom: auto;
}
.music-details div:nth-child(2){
font-size: 1.9rem;
display: flex;
justify-content: center;
}
.music-details div:nth-child(2) i.fa{
font-size: 2.2rem;
padding: 0 2rem;
}
.music-details div:nth-child(1) p:first-child{
font-size: 3rem;
color: var(--color-text-2);
font-weight: bold;
text-shadow: var(--shadow-dark);
}
.music-details div:nth-child(1) p:not(:first-child){
font-size: 1.8rem;
margin: .9rem 0;
}
.music-list{
font-size: 2rem;
list-style-type: none;
padding: 2.5rem 2.5rem 0;
margin-right: 25%;
flex: 1 0 auto;
}
.music-list li{
display:flex;
align-items: center;
padding: 1rem 2rem;
min-height: 2rem;
border-radius: 2rem;
cursor: pointer;
}
.music-list li:hover, .music-list li:nth-child(2n):hover{
filter: brightness(150%);
}
.music-list li:nth-child(2n){
background-color: var(--color-grey-light);
}
.music-list li p{
flex: 0 0 25%;
}
.music-list li:nth-child(2){
color: var(--color-text-2);
}
footer{
font-size: 2.3rem;
background-image: linear-gradient(to right bottom, var(--color-grey-light), var(--color-grey-dark));
color: var(--color-grey-lighter);
padding: 2.8rem;
flex: 0 0 10%;
display: flex;
justify-content: center;
align-items: center;
}
.playing{
display: flex;
align-items: center;
margin-right: auto;
flex: 0 0 50%;
}
.playing-info{
padding-left: 4rem;
display:flex;
flex-direction: column;
justify-content: center;
}
.playing-info p:nth-child(1){
color: #fff;
}
.playing img{
width: 10rem;
height: 10rem;
border-radius: 50%;
}
.playing img:hover{
width: 11rem;
height: 11rem;
transition: .4s ease;
}
.bar{
margin-left: 2rem;
background-color: var(--color-grey-lighter);
width: 12rem;
height: .2rem;
}
.controls{
flex: 0 0 50%;
display:flex;
justify-content: space-around;
align-items: center;
background-color: var(--color-grey-dark);
box-shadow: var(--shadow-light);
border-radius: 9rem;
padding: 2rem 0;
}
.controls i{
font-size: 3rem;
box-shadow: var(--shadow-light);
color: var(--color-text);
}
.controls i:nth-child(5){
color: var(--color-text-2);
}
