CSS Briefcase

CSS Code

body {
  margin: 0;
  padding: 0;
  background: #FFF1DD;
}
.container {
  position: absolute;
  top: 110px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.container:before {
  display: block;
  content: '';
  position: absolute;
  top: 274px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 500px;
  height: 8px;
  background: #422939;
  border-radius: 8px;
}
.container:after {
  display: block;
  content: '';
  position: absolute;
  top: -20px;
  left: 158px;
  width: 8px;
  height: 20px;
  background: #422939;
  opacity: .3;
  z-index: 9;
}
.handle {
  position: absolute;
  top: -40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 140px;
  height: 80px;
  background: #AA534B;
  border: 8px solid #422939;
  border-radius: 100%;
  z-index: -1;
}
.handle:before {
  display: block;
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 110px;
  height: 50px;
  background: #FFF1DD;
  border: 8px solid #422939;
  border-radius: 100%;
  z-index: -1;
}
.lid {
  position: relative;
  width: 330px;
  height: 150px;
  background: #FD834E;
  border: 8px solid #422939;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 100px 50px;
  border-bottom-right-radius: 100px 50px;
  box-shadow: inset 0 -3px 0 2px #FD673A;
  z-index: 5;
}
.lid .inner {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 310px;
  height: 130px;
  border: 3px dashed #422939;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 100px 40px;
  border-bottom-right-radius: 100px 40px;
}
.case {
  position: absolute;
  top: 40%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 290px;
  height: 200px;
  background: #AA534B;
  border: 8px solid #422939;
  border-radius: 20px;
  z-index: 0;
  box-shadow: inset 0 -3px 0 2px #903B37;
}
.case .inner {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 270px;
  height: 180px;
  border: 3px dashed #422939;
  border-radius: 10px;
}
.case .front-pocket {
  position: absolute;
  top: 70px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 110px;
  height: 70px;
  background: #FD834E;
  border: 8px solid #422939;
  border-radius: 0 0 20px 20px;
  box-shadow: inset 0 50px #FD673A, 0 5px #903B37;
}
.case .front-pocket .inner {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 95px;
  height: 55px;
  border: 3px dashed #422939;
  border-radius: 10px;
}
.case .front-pocket:before {
  display: block;
  content: '';
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 120px;
  height: 30px;
  background: #EBAA7D;
  border: 8px solid #422939;
  border-radius: 0 0 15px 15px;
  box-shadow: inset 0 10px #DB7C4A;
  z-index: 4;
}
.case .front-pocket:after {
  display: block;
  content: '';
  position: absolute;
  bottom: 36px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: #FD834E;
  border: 4px solid #422939;
  border-radius: 100%;
  z-index: 5;
}
.straps {
  position: relative;
}
.straps .s {
  width: 30px;
  height: 180px;
  background: #EBAA7D;
  border: 8px solid #422939;
  border-top: 16px solid #422939;
  border-radius: 0 0 30px 30px;
  z-index: 6;
}
.straps .s:before {
  display: block;
  content: '';
  position: relative;
  top: 100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #422939;
  border-radius: 100%;
  z-index: 8;
}
.straps .s:after {
  display: block;
  content: '';
  position: relative;
  top: 125px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #422939;
  border-radius: 100%;
  z-index: 8;
}
.straps .s .buckle {
  position: absolute;
  top: 20px;
  left: -20px;
  width: 54px;
  height: 54px;
  background: #fff;
  border: 8px solid #422939;
  border-radius: 15px;
}
.straps .s .buckle:before {
  display: block;
  content: '';
  position: relative;
  top: 4px;
  left: 4px;
  width: 30px;
  height: 70px;
  background: #EBAA7D;
  border: 8px solid #422939;
  border-bottom: none;
  border-radius: 8px;
  box-shadow: inset 0 5px #DB7C4A;
}
.straps .s .buckle:after {
  display: block;
  content: '';
  position: relative;
  top: -85px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 4px;
  height: 40px;
  background: #fff;
  border: 4px solid #422939;
  border-bottom: 8px solid #422939;
  border-radius: 8px;
  z-index: 8;
}
.straps .left {
  position: absolute;
  top: -70px;
  left: 50px;
}
.straps .right {
  position: absolute;
  top: -70px;
  right: 50px;
}
.bg {
  position: absolute;
  z-index: -2;
}
.bg .windows {
  position: absolute;
  top: -220px;
  left: -40px;
  width: 100px;
  height: 100px;
  border: 8px solid #422939;
  border-radius: 5px;
  opacity: .3;
  z-index: -2;
}
.bg .windows:after {
  display: block;
  content: '';
  position: absolute;
  top: -50px;
  left: 190px;
  width: 200px;
  height: 200px;
  border: 8px solid #422939;
  border-radius: 5px;
  opacity: 1;
  z-index: -2;
}

HTML Code

<div class='container'>
  <div class='handle'></div>
  <div class='lid'>
    <div class='inner'></div>
  </div>
  <div class='case'>
    <div class='inner'></div>
    <div class='front-pocket'>
      <div class='inner'></div>
    </div>
  </div>
  <div class='straps'>
    <div class='s left'>
      <div class='buckle'></div>
    </div>
    <div class='s right'>
      <div class='buckle'></div>
    </div>
  </div>
  <div class='bg'>
    <div class='windows'></div>
  </div>
</div>

LIVE PREVIEW

See the Pen CSS Briefcase by Peternak Blog (@peternakblog) on CodePen.

Credit: Cassidy Williams