A Pen by Sean Mateer

/*Downloaded from https://www.codeseek.co/seanmateer/a-pen-by-sean-mateer-MYwWJx */
html, body {
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

img {
  width: 100%;
  height: auto;
  position: fixed;
}

.finder-window {
  position: relative;
  width: 700px;
  height: 450px;
  display: block;
  overflow: hidden;
  cursor: move;
}

.top-bar {
  display: block;
  height: 75px;
  width: 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5e3e5), color-stop(100%, #cecdce));
  border-radius: 6px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom: 1px solid #8E8E8F;
}

.circles {
  list-style-type: none;
  padding: 8px 0 0 10px;
}
.circles li {
  float: left;
  margin-right: 7px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
.circles li:nth-child(1) {
  background-color: #DF625A;
  border: 1px solid #d9463c;
}
.circles li:nth-child(2) {
  background-color: #EEBE41;
  border: 1px solid #ebb320;
}
.circles li:nth-child(3) {
  background-color: #76C94E;
  border: 1px solid #63ba39;
}

.sidebar {
  float: left;
  border-right: 1px solid #8E8E8F;
  display: block;
  background-color: white;
  width: 180px;
  height: 375px;
  overflow: hidden;
}

.main {
  float: left;
  display: block;
  background-color: white;
  width: 519px;
  height: 375px;
}

.content-blurred {
  padding: 0 1rem;
  -webkit-filter: blur(4px);
  filter: url(#blur-effect);
  opacity: .35;
  z-index: 1;
}
.content-blurred .desktop img {
  position: fixed;
  top: 0px;
  left: 0px;
}

/*Downloaded from https://www.codeseek.co/seanmateer/a-pen-by-sean-mateer-MYwWJx */

var content = document.querySelector('.desktop');
var duplicate = content.cloneNode(true);
var contentBlurred = document.createElement('div');
contentBlurred.className = 'content-blurred';
contentBlurred.appendChild(duplicate);

$('.sidebar').append(contentBlurred);

$(function() {
    var isDragging = false;
    $(".window")
    .mousedown(function() {
        $(window).mousemove(function() {
            isDragging = true;
            $(window).unbind("mousemove");
          		
        });
    })
    .mouseup(function() {
        var wasDragging = isDragging;
        isDragging = false;
        $(window).unbind("mousemove");
    });  
});

$( ".finder-window" ).draggable();