<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=""> <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=""> <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>
*, *::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(''); 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); }
Expand for more options Login