CodePen Embed - Music Collection

<!--
Music Collection - Demo
-->

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

<div class="container">
  <div class="desc">Hey there!<br><br>This is a clickable <b>mock-up</b> for a music collection / blog thing. So far just a bit of unresponsive design.<br><br>If you have a minute to spare, I'd love to get your feedback <b><a href="https://goo.gl/forms/RufXxLeaBMF6lvVG3" target="_blank">here</a></b>.<br><br>Thanks!</div>

  <div class="frame"></div>
  <div class="hbutton"></div>
  <div class="bg">
    <div class="log">LOGO</div>

    <div class="pcontrols">
      <div class="backbut"><i class="fa fa-backward" aria-hidden="true"></i></div>
      <div class="playbut"><i class="fa fa-play" aria-hidden="true"></i></div>
      <div class="fwdbut"><i class="fa fa-forward" aria-hidden="true"></i></div>
      <svg width="100%" height="100%" viewBox="0 0 900 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
      <path id="svg_1" fill="none" stroke="#020000" stroke-width="5px" d="m238.00333,249.33333l-106.066,-106.066l-106.066,106.066l106.066,106.066l106.066,-106.066z"/>
  <path id="svg_2" fill="none" stroke="#020000" stroke-width="5px" d="m874.40333,249.33333l-106.066,-106.066l-106.066,106.066l106.066,106.066l106.066,-106.066z"/>
  <path id="svg_3" fill="none" stroke="#020000" stroke-width="5px" d="m662.26733,249.33333l-212.132,-212.132l-212.132,212.132l212.132,212.132l212.132,-212.132z"/></svg>
    </div>
    <div class="ptitle">LENZMAN - In My Mind</div>
    <div class="pbox">
      <iframe width="100%" height="100%" src="https://www.youtube.com/embed/7m0p-sp3Udw?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="omenu">
      <div class="oicon"><i class="fa fa-cog" aria-hidden="true"></i></div>
      <div class="otxt oback">SEARCH</div>
      <div class="boicon oback"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i></div>
    </div>

    <div class="obox">
      <div class="cobox_search otitle"><i class="fa fa-search" aria-hidden="true"></i></div>
      <div class="cobox_filter otitle"><i class="fa fa-filter" aria-hidden="true"></i></div>
      <div class="cobox_about otitle"><i class="fa fa-question" aria-hidden="true"></i></div>
      <div class="cobox">
        <input class="searchinput ser" autocomplete="off" type="text" placeholder="">
        <div class="sresult ser">Clickable search result</div>

        <div class="filteroptions fil">
          <div class="swcont">
            <input type="checkbox" id="A" name="selgen" value="dnb">
            <label for="A"><span class="box">Filter option A</span></label>
          </div>
          <div class="swcont">
            <input type="checkbox" id="B" name="selgen" value="electro">
            <label for="B"><span class="box">Filter option B</span></label>
          </div>
          <div class="swcont">
            <input type="checkbox" id="C" name="selgen" value="reggae">
            <label for="C"><span class="box">Filter option C</span></label>
          </div>
          <div class="swcont">
            <input type="checkbox" id="D" name="selgen" value="reggae">
            <label for="D"><span class="box">Filter option D</span></label>
          </div>
          <div class="swcont">
            <input type="checkbox" id="E" name="selgen" value="reggae">
            <label for="E"><span class="box">Filter option E</span></label>
          </div>
        </div>

        <div class="abouttxt abo">For now, just a demo...<br>Maybe I'll do something with it at some point... ¯\_(ツ)_/¯<br><br>Take the <b><a style="text-decoration:none" href="https://goo.gl/forms/RufXxLeaBMF6lvVG3" target="_blank">Survey!</a></b></div>

      </div>
    </div>


    <div class="imenu">
      <div class="iicon"><i class="fa fa-info-circle" aria-hidden="true"></i></div>
      <div class="itxt ititle">LENZMAN - In My Mind</div>
      <div class="biicon ititle"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></div>
    </div>

    <div class="ibox">
      <div class="cibox">Track found because it was featured<br>in <a href="http://www.randommovement.org/" target="_blank">Random Movements</a> latest<br>podcast.<br><br>Find more from Lenzman <a href="https://www.youtube.com/channel/UC81BpzDCkfvp86EYi6KFETA/videos" target="_blank">here</a>.</div>
    </div>


    <div class="tableview">
      <div class="tablebox">
        <table class="tracklist">
          <tr>
            <td>007</td>
            <td>-</td>
            <td>LENZMAN - In My Mind</td>
            <td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>97</td>
          </tr>
          <tr>
            <td>006</td>
            <td>-</td>
            <td>ARTIST NAME - Song Title</td>
            <td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>23</td>
          </tr>
          <tr>
            <td>005</td>
            <td>-</td>
            <td>MUSICIAN - Track Name</td>
            <td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>37</td>
          </tr>
          <tr>
            <td>004</td>
            <td>-</td>
            <td>BANDNAME - Piece of Art</td>
            <td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>12</td>
          </tr>
          <tr>
            <td>003</td>
            <td>-</td>
            <td>ALIAS - Composition</td>
            <td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>15</td>
          </tr>
          <tr>
            <td>002</td>
            <td>-</td>
            <td>AND - So On</td>
            <td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>333</td>
          </tr>
          <tr>
            <td>001</td>
            <td>-</td>
            <td>AND - So Forth</td>
            <td class="t3"><i class="fa fa-heart" aria-hidden="true"></i><br>44</td>
          </tr>
        </table>
      </div>
    </div>


  </div>
</div>

/*
Music Collection - Demo
*/
body {
  background: #7f1978;
  background: -moz-linear-gradient(45deg, #7f1978 0%, #75d3d8 100%);
  background: -webkit-linear-gradient(45deg, #7f1978 0%, #75d3d8 100%);
  background: linear-gradient(45deg, #7f1978 0%, #75d3d8 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7f1978', endColorstr='#75d3d8', GradientType=1);
  /*width: 100%;
  height: 100%;*/
}


a:link,
a:visited {
  color: #222;
}

.tableview {
  position: absolute;
  left: 50%;
  top: 337px;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  height: 128px;
  width: 244px;
  overflow: hidden;
  /*background: #666;*/
}

.tablebox {
  left: 0;
  top: 0px;
  height: 128px;
  width: 262px;
  font-family: 'Roboto Condensed', sans-serif;
  color: #222;
  font-size: 14px;
  overflow: auto;
}

.tracklist {
  width: 100%;
}

td {
  padding-top: 5px;
  /*border: 1px solid #222;*/
  cursor: pointer;
}

.t3 {
  text-align: right;
  font-size: 10px;
}


/*Options Panel*/

.swcont {
  position: relative;
  left: 35px;
  top: 7px;
  display: block;
  padding: 0px;
  margin-bottom: 10px;
  height: 20px;
}

input[type="checkbox"] {
  display: none;
}


/* listspans */

.swcont span::before,
.swcont span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}


/* Check-boxes */

.swcont span.box:hover {
  cursor: pointer;
}

.swcont span.box::before {
  width: 16px;
  height: 16px;
  left: -19px;
  background-color: transparent;
  border: 2px solid #222;
  transition: border-color .2s;
}

.swcont span.box::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -15px;
  top: 3px;
  color: transparent;
}

input[type="checkbox"]:checked + label span.box::after {
  color: #222;
  font-size: 13px;
}

label {
  color: #222;
  font-size: 15px;
  position: relative;
  padding: 0px 5px 0px 10px;
  margin: 10px auto;
  height: 30px;
}

.filteroptions {
  position: absolute;
  top: 3px;
  border: none;
  left: 0px;
  width: 130px;
  height: 102px;
  /*background: #AAA;*/
  font-size: 15px;
  font-family: 'Roboto Condensed', sans-serif;
  color: #222;
}

.searchinput {
  position: absolute;
  top: 20px;
  box-sizing: border-box;
  border: none;
  padding: 5px;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  width: 170px;
  height: 30px;
  resize: none;
  font-size: 16px;
  font-family: 'Roboto Condensed', sans-serif;
  border: 2px solid #BBB;
  text-align: center;
}

.searchinput:focus{
  outline: none;
}

.sresult{
  position: absolute;
  top: 60px;
  left: 50%;
  width: 170px;
  text-align: center;
  font-weight: bold;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  cursor: pointer;
  display: none;
}

.abouttxt {
  position: absolute;
  top: 0;
  left: 0px;
  height: 91px;
  width: 170px;
  padding: 7px; 
  /*background: #39A;*/
}

.fil{
  display: none;
}
.abo{
  display: none;
}
/*Options Panel End*/

.itxt,
.otxt {
  position: absolute;
  height: 40px;
  width: 180px;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  color: #222;
  font-size: 16px;
  font-weight: bold;
  line-height: 40px;
  white-space: nowrap;
  overflow: hidden;
}

.otxt {
  right: 40px;
}

.itxt {
  left: 40px;
}

.ititle,
.otitle,
.oback{
  display: none;
}

.biicon,
.boicon {
  position: absolute;
  top: 7px;
  font-size: 26px;
  color: #333;
  cursor: pointer;
}

.biicon {
  right: 30px;
}

.boicon {
  left: 30px;
}

.iicon,
.oicon {
  position: absolute;
  top: 6px;
  font-size: 26px;
  color: #333;
  cursor: pointer;
}

.iicon {
  left: 10px;
}

.oicon {
  right: 10px;
}

.omenu,
.imenu {
  position: absolute;
  top: 45px;
  height: 40px;
  width: 70px;
  /*background: #88A;*/
  border-radius: 20px;
  border: 1px solid #222;
  transition: all 0.5s ease-out;
}

.omenu {
  left: -25px;
}

.imenu {
  right: -25px;
}

.ibox,
.obox {
  position: absolute;
  top: 87px;
  height: 106px;
  width: 0px;
  background: #FFF;
  border-bottom: 1px solid #222;
  transition: all 0.4s ease-out;
  transition-delay: 0.1s;
}

.ibox {
  right: 0px;
}

.obox {
  width: 0px;
  /*border-right: 1px solid #222;*/
  left: 0px;
}

.cobox_search,
.cobox_filter,
.cobox_about {
  height: 35px;
  width: 35px;
  border-right: 1px solid #222;
  text-align: center;
  line-height: 35px;
  font-size: 18px;
  cursor: pointer;
  color: #222;
}

.cobox_search,
.cobox_filter {
  border-bottom: 1px solid #222;
}

.cibox {
  height: 91px;
  width: 230px;
  font-family: 'Roboto Condensed', sans-serif;
  color: #222;
  font-size: 15px;
  padding: 7px;
  /*background: #A39;*/
}

.cobox {
  top: 0px;
  /*left: 37px;*/
  right: 0px;
  position: absolute;
  height: 104px;
  width: 191px;
  font-family: 'Roboto Condensed', sans-serif;
  color: #222;
  font-size: 15px;
  /*background: #A39;*/
  overflow-y: auto;
}

.backbut {
  position: absolute;
  top: 40px;
  left: 25px;
  font-size: 18px;
  cursor: pointer;
}

.playbut {
  position: absolute;
  top: 30px;
  left: 90px;
  font-size: 35px;
  cursor: pointer;
}

.fwdbut {
  position: absolute;
  top: 40px;
  left: 158px;
  font-size: 18px;
  cursor: pointer;
}

.pcontrols {
  position: absolute;
  left: 50%;
  top: 60px;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  height: 100px;
  width: 200px;
  /*background: #FFF;*/
}

.pbox {
  position: absolute;
  left: 50%;
  top: 200px;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  height: calc(0.563 * 240px);
  width: 240px;
  box-shadow: 0 0 50px rgba(0, 0, 0, .3);
}

.ptitle {
  position: absolute;
  top: 172px;
  width: 100%;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  color: #222;
  font-size: 18px;
}

.log {
  position: relative;
  text-align: center;
  top: 8px;
  font-family: 'Pacifico', cursive;
  font-size: 20px;
}

.container{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 500px;
  width: 500px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.desc{
  position: absolute;
  top: 70px;
  left: 0;
  height: 410px;
  width: 200px;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  color: #222;
  font-size: 22px;
}

.bg {
  position: absolute;
  top: 50%;
  left: 250px;
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  height: 468px;
  width: 264px;
  background: #FFF;
  /*background: #9BF;
  /*opacity: 0.8;*/
  overflow: hidden;
}

.frame {
  position: absolute;
  top: 50%;
  left: 240px;
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  height: 590px;
  width: 280px;
  background: #111;
  border-radius: 35px;
  border: 2px solid #443;
  box-shadow: 0 0 100px rgba(0, 0, 0, .4);
}

.hbutton {
  position: absolute;
  top: calc(50% + 263px);
  left: 361px;
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  height: 38px;
  width: 38px;
  background: #111;
  border-radius: 35px;
  border: 2px solid #332;
}

//
//Music Collection - Demo
//


var iexp = false;
var oexp = false;
var playing = false;

//expand info
$(".iicon").click(function() {
  if (iexp) {
    HideImenu();
  } else {
    console.log("oi");
    $(".imenu").css("width", "280px");
    $(".imenu").css("background", "#FFF");
    //#778

    $(".ibox").css("width", "230px");
    $(".ibox").css("background", "#FFF");
    $(".ibox").css("border-left", "1px solid #222");

    $(".omenu").css("width", "0px");

    $(".ititle").css("display", "inline");

    iexp = true;
  }
});

$(".biicon").click(function() {
  HideImenu();
});

function HideImenu() {
  $(".imenu").css("width", "70px");
  $(".imenu").css("background", "none");

  $(".ibox").css("width", "0px");
  $(".ibox").css("background", "#FFF");
  HideBorder();

  $(".omenu").css("width", "70px");

  $(".ititle").css("display", "none");

  iexp = false;
}

function HideBorder() {
  setTimeout(function() {
    $(".ibox").css("border-left", "none");
    $(".obox").css("border-right", "none");
  }, 400);
}

//expand options
$(".oicon").click(function() {
  if (oexp) {
    HideOmenu()
  } else {
    console.log("oi");
    

    $(".omenu").css("width", "280px");
    $(".omenu").css("background", "#FFF");
    
    //$(".abouttxt").css("left", "block");

    $(".obox").css("width", "230px");
    $(".obox").css("background", "#FFF");
    $(".obox").css("border-right", "1px solid #222");

    $(".imenu").css("width", "0px");
    
    $(".oback").css("display", "block");
    DispOicons();

    oexp = true;
  }
});

function DispOicons() {
  setTimeout(function() {
    $(".otitle").css("display", "block");
  }, 400);
}

$(".boicon").click(function() {
  HideOmenu();
});

function HideOmenu() {
  $(".omenu").css("width", "70px");
  $(".omenu").css("background", "none");

  $(".obox").css("width", "0px");
  //cnobox display because left attach...
  //$(".abouttxt").css("display", "none");
  
  $(".obox").css("background", "#FFF");
  HideBorder();

  $(".imenu").css("width", "70px");

  $(".otitle").css("display", "none");
  $(".oback").css("display", "none");
  oexp = false;
}

//playbutton UI
$(".playbut").click(function() {
  if (playing) {
    $(".playbut").css("font-size", "35px");
    $(".playbut").css("left", "90px");
    $(".playbut").css("top", "30px");
    $(".playbut").html('<i class="fa fa-play" aria-hidden="true"></i>');
    playing = false;
  } else {
    $(".playbut").css("font-size", "33px");
    $(".playbut").css("left", "86px");
    $(".playbut").css("top", "32px");
    $(".playbut").html('<i class="fa fa-pause" aria-hidden="true"></i>');
    playing = true;
  }
});

//Options
$(".cobox_search").click(function() {
  $(".otxt").html('SEARCH');
  $(".cobox").css("overflow", "visible");
  $(".ser").css("display", "inline");
  $(".fil").css("display", "none");
  $(".abo").css("display", "none");
  DispSresult();
});
$(".cobox_filter").click(function() {
  $(".otxt").html('FILTER');
  $(".cobox").css("overflow", "auto");
  $(".fil").css("display", "inline");
  $(".ser").css("display", "none");
  $(".abo").css("display", "none");
});
$(".cobox_about").click(function() {
  $(".otxt").html('ABOUT');
  $(".cobox").css("overflow", "visible");
  $(".abo").css("display", "inline");
  $(".ser").css("display", "none");
  $(".fil").css("display", "none");
});


//Simulate search...
$(".searchinput").on("input", function() {
  DispSresult();
});

function DispSresult(){
    if($(".searchinput").val() != ""){
    $(".sresult").css("display", "inline");
  }else{
    $(".sresult").css("display", "none");
  }
}

This Pen is owned by Valentin on CodePen.

See more by @nitnelav on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js