<div class="container" id="main">
<div class="row">
<div class="col-sm-3" id="photo">
<img id="sm" src="https://i.scdn.co/image/6bd59cfbd3e1e6394af710bddcd62999aae31c6f" alt="">
</div>
<div class="col-sm-8" id="detail">
<p>Artist from your Library</p>
<h1 id="shawn"><b>Shawn Mendes</b></h1>
<p>View artist page</p>
<button class="btn" id="play">Play</button>
<span><button class="btn" id="like"><i class="fa fa-heart-o"></i></button></span>
<span><button class="btn" id="more"><b>...</b></button></span>
</div>
</div>
<table class="table">
<thead>
<tr>
<td>#</td>
<td>Title</td>
<td>Album</td>
<td><i class="fa fa-clock-o"></i></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Why</td>
<td>Shawn Mendes</td>
<td>3:58</td>
</tr>
<tr>
<td>2</td>
<td>If I Can't Have You</td>
<td>Shawn Mendes</td>
<td>3:11</td>
</tr>
<tr>
<td>3</td>
<td>Life Of The Party</td>
<td>Shawn Mendes</td>
<td>3:18</td>
</tr>
<tr>
<td>4</td>
<td>Stitches</td>
<td>Shawn Mendes</td>
<td>3:35</td>
</tr>
<tr>
<td>5</td>
<td>Never Be Alone</td>
<td>Shawn Mendes</td>
<td>3:27</td>
</tr>
<tr>
<td>6</td>
<td>Kid In Love</td>
<td>Shawn Mendes</td>
<td>3:36</td>
</tr>
<tr>
<td>7</td>
<td>I Don't Even Know Your Name</td>
<td>Shawn Mendes</td>
<td>3:46</td>
</tr>
<tr>
<td>8</td>
<td>Something Big</td>
<td>Shawn Mendes</td>
<td>3:00</td>
</tr>
</tbody>
</table>
</div>
body {
font-family: 'Rubik', sans-serif
}
.container {
margin-top: 50px
}
#baf {
position: absolute;
left: 0vw;
font-size: 2.5vw
}
#baf a {
color: rgb(255, 255, 255, 0.5)
}
#upg {
border-radius: 25px;
margin: 1vh;
background: inherit;
color: white;
border: 1px solid white
}
#user {
font-size: 3vh;
color: white;
position: relative;
bottom: 0.5vh
}
#user:hover {
background: inherit
}
.input-group-addon {
background-color: black;
color: white
}
.navbar {
background-color: inherit
}
#sm {
height: 20vh;
width: 20vh;
border-radius: 5vw
}
#main {
background-image: linear-gradient(#006064, #c5e1a5)
}
#photo {
padding: 2vw;
padding-left: 5vw;
padding-bottom: 2vh
}
#detail {
padding: 2vw;
color: white;
padding-bottom: 2vh
}
#play {
background-color: green;
color: white;
width: 80px;
border-radius: 25px
}
#like {
color: white;
height: 40px;
width: 40px;
border-radius: 25px;
background: inherit;
border: 1px solid white
}
#more {
color: white;
height: 40px;
width: 40px;
border-radius: 25px;
background: inherit;
border: 1px solid white
}
#detail h1 {
font-size: 7vh
}
tbody {
color: white
}
thead {
color: rgb(255, 255, 255, 0.5)
}
.table {}
tbody tr:hover {
background-color: green
}
#dir {
font-size: 5vh
}
#dir a {
color: white;
position: relative;
bottom: 1vh
}
#dir a:hover {
background: inherit
}
#dir a:focus {
background: inherit
}
#play:hover {
background-color: #a5d6a7
}
@media only screen and (max-width: 425px) {
#dir {
display: none
}
#sm {
position: relative;
left: 30vw;
border-radius: 10vh
}
}
@media only screen and (min-width: 426px) and (max-width: 767px) {
#dir {
display: none
}
#sm {
position: relative;
left: 35vw;
border-radius: 10vh
}
}