cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Luggage Trolley</h1>
<h2>by Jacquelyn Zen</h2>

<div id="container">
  <div id="trolley">
    <!-- TROLLEY PARTS IN HERE -->
    <div id="trolley-frame">
      <div id="trolley-top">
        <div id="trolley-rod"></div>
      </div>
      <div id="trolley-wheels">
        <div id="wheel1"></div>
        <div id="wheel2"></div>
      </div>
    </div>

    <!-- TROLLEY PARTS END HERE -->

    <!-- LUGGAGES IN HERE -->

    <ul id="sortable">
      <div id="luggage-container">

        <!-- GRAY LUGGAGE-->
        <li>
          <div id="luggage-gray-container">
            <div id="luggage-gray">
              <div id="luggage-gray-corners-bottom"></div>
              <div id="luggage-gray-corners-top"></div>
              <div id="luggage-gray-keyhole-left"></div>
              <div id="luggage-gray-keyhole-right"></div>

              <div id="luggage-gray-lock-left"></div>
              <div id="luggage-gray-keyhole-left"></div>

              <div id="luggage-gray-lock-right"></div>
              <div id="luggage-gray-keyhole-right"></div>
              <div id="luggage-gray-handle"></div>

            </div>
          </div>
        </li>
        <!-- END OF GRAY LUGGAGE-->

        <!-- ORANGE LUGGAGE-->
        <li>
          <div id="luggage-orange-container">
            <div id="luggage-orange">

              <div id="luggage-orange-corners-bottom"></div>
              <div id="luggage-orange-corners-top"></div>
              <div id="luggage-orange-straps"></div>
              <div id="luggage-orange-lock"></div>
              <div id="luggage-orange-keyhole"></div>

            </div>
          </div>
        </li>
        <!-- END OF ORANGE LUGGAGE-->

        <!-- YELLOW LUGGAGE-->
        <li>
          <div id="luggage-yellow-container">
            <div id="luggage-yellow">
              <div id="luggage-yellow-line"></div>
              <div id="luggage-yellow-handle"></div>
              <div id="luggage-yellow-lock-left"></div>
              <div id="luggage-yellow-lock-right"></div>
            </div>
          </div>
        </li>

        <!-- END OF YELLOW LUGGAGE-->

        <!-- BLUE LUGGAGE-->
        <li>
          <div id="luggage-blue-container">
            <div id="luggage-blue">
              <div id="luggage-blue-corners-bottom"></div>
              <div id="luggage-blue-corners-top"></div>
              <div id="luggage-blue-straps"></div>
              <div id="luggage-blue-handle-back"></div>
              <div id="luggage-blue-handle"></div>
            </div>
          </div>
        </li>
        <!-- END OF BLUE LUGGAGE-->

        <!-- RED LUGGAGE-->
        <li>
          <div id="luggage-red-container">
            <div id="luggage-red">
              <div id="luggage-red-corners-bottom"></div>
              <div id="luggage-red-corners-top"></div>
              <div id="luggage-red-keyhole-left"></div>
              <div id="luggage-red-keyhole-right"></div>
              <div id="luggage-red-handle"></div>
            </div>
          </div>
        </li>
        <!-- END OF RED LUGGAGE-->

      </div>
    </ul>

    <!-- LUGGAGES END HERE -->

  </div>

</div>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Special+Elite');

body {
	background-color: #E1E8F2;
	font-family: 'Special Elite', cursive;
	padding-top: 50px;
}

h1,
h2 {
	text-align: center;
	color: #5E6369;
}

h1 {
	font-size: 40px;
}

h2 {
	font-size: 25px;
}

#container {
	width: 800px;
	height: 500px;
	background-color: #E1E8F2;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}

#trolley {
	width: 310px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	/*    background-color: #FFF;*/
	-webkit-transform: translate(0px, 50px);
	    -ms-transform: translate(0px, 50px);
	        transform: translate(0px, 50px);
	cursor: pointer;
}

#trolley:before {
	position: absolute;
	content: "";
	background-color: #D2D7E3;
	width: 310px;
	height: 20px;
	border-radius: 50%;
	-webkit-transform: translate(0px, 415px);
	    -ms-transform: translate(0px, 415px);
	        transform: translate(0px, 415px);
}

#trolley-frame {
	width: 250px;
	height: 340px;
	background-color: none;
	border: 10px solid #557B84;
	border-top-left-radius: 110px;
	border-top-right-radius: 110px;
	-webkit-transform: translate(20px, 0px);
	    -ms-transform: translate(20px, 0px);
	        transform: translate(20px, 0px);
}

#trolley-frame:after {
	content: "";
	position: absolute;
	background-color: #557B84;
	width: 310px;
	height: 30px;
	-webkit-transform: translate(-30px, 350px);
	    -ms-transform: translate(-30px, 350px);
	        transform: translate(-30px, 350px);
}

#trolley-frame:before {
	content: "";
	position: absolute;
	background-color: #6E1100;
	width: 250px;
	height: 15px;
	-webkit-transform: translate(0px, 335px);
	    -ms-transform: translate(0px, 335px);
	        transform: translate(0px, 335px);
}

#trolley-top {
	position: absolute;
	background-color: #6492AC;
	width: 45px;
	height: 18px;
	-webkit-transform: translate(100px, -10px);
	    -ms-transform: translate(100px, -10px);
	        transform: translate(100px, -10px);
}

#trolley-top:before {
	content: "";
	position: absolute;
	background-color: #557B84;
	width: 10px;
	height: 10px;
	-webkit-transform: translate(18px, -10px);
	    -ms-transform: translate(18px, -10px);
	        transform: translate(18px, -10px);
}

#trolley-top:after {
	content: "";
	position: absolute;
	background-color: #6492AC;
	width: 20px;
	height: 20px;
	-webkit-transform: translate(13px, -25px);
	    -ms-transform: translate(13px, -25px);
	        transform: translate(13px, -25px);
	border-radius: 50%;
}

#trolley-rod {
	position: absolute;
	background-color: #3B5A61;
	width: 5px;
	height: 15px;
	-webkit-transform: translate(20px, 18px);
	    -ms-transform: translate(20px, 18px);
	        transform: translate(20px, 18px);
}

#trolley-rod:before {
	content: "";
	background-color: #3B5A61;
	position: absolute;
	width: 115px;
	height: 5px;
	-webkit-transform: translate(-55px, 10px);
	    -ms-transform: translate(-55px, 10px);
	        transform: translate(-55px, 10px);
	border-radius: 15px;
}

#trolley-wheels {
	position: absolute;
	width: 250px;
	height: 35px;
	/*    background-color: #FFF;*/
	-webkit-transform: translate(0px, 380px);
	    -ms-transform: translate(0px, 380px);
	        transform: translate(0px, 380px);
}

#wheel1,
#wheel2 {
	position: absolute;
	background-color: #C3CDC9;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	border: 7px solid #40363B;
	bottom: 0;
}

#wheel1 {
	left: 0;
}

#wheel2 {
	right: 0;
}

#wheel1:before,
#wheel2:before {
	content: "";
	position: absolute;
	background-color: #6492AC;
	width: 13px;
	height: 24px;
	-webkit-transform: translate(3px, -10px);
	    -ms-transform: translate(3px, -10px);
	        transform: translate(3px, -10px);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

#wheel1:after,
#wheel2:after {
	content: "";
	position: absolute;
	background-color: #40363B;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	-webkit-transform: translate(7px, 7px);
	    -ms-transform: translate(7px, 7px);
	        transform: translate(7px, 7px);
}

#luggage-container {
	/*	background-color: #FFF;*/
	position: absolute;
	width: 220px;
	height: 255px;
	-webkit-transform: translate(45px, -270px);
	    -ms-transform: translate(45px, -270px);
	        transform: translate(45px, -270px);
}

#luggage-red-container {
	/*	background-color: #CCC;*/
	width: 100%;
	height: 45px;
	padding-top: 20px;
	display: block;
	position: relative;
}

#luggage-red {
	position: absolute;
	background-color: #C8575D;
	width: 180px;
	height: 40px;
	-webkit-transform: translateX(20px);
	    -ms-transform: translateX(20px);
	        transform: translateX(20px);
	border-top: 5px solid #B24E53;
}

#luggage-red:before {
	content: "";
	position: absolute;
	background-color: #D36A71;
	width: 185px;
	height: 15px;
	-webkit-transform: translate(-3px, -25px);
	    -ms-transform: translate(-3px, -25px);
	        transform: translate(-3px, -25px);
	border-top: 5px solid #D97984;
	border-radius: 2px;
}

#luggage-red-corners-bottom {
	width: 15px;
	height: 15px;
	background: #B9C9CB;
	border-radius: 1px 15px 1px 1px;
	bottom: 0;
	left: 0;
	position: absolute;
	-webkit-transform: translate(-1px, 1px);
	    -ms-transform: translate(-1px, 1px);
	        transform: translate(-1px, 1px);
	z-index: 100;
}

#luggage-red-corners-bottom:after {
	content: "";
	position: absolute;
	width: 15px;
	height: 15px;
	background: #B9C9CB;
	border-radius: 15px 1px 1px 1px;
	-webkit-transform: translateX(167px);
	    -ms-transform: translateX(167px);
	        transform: translateX(167px);
}

#luggage-red-corners-top {
	width: 15px;
	height: 15px;
	background: #B9C9CB;
	border-radius: 1px 1px 15px 1px;
	top: 0;
	left: 0;
	position: absolute;
	-webkit-transform: translate(-4px, -26px);
	    -ms-transform: translate(-4px, -26px);
	        transform: translate(-4px, -26px);
	z-index: 100;
}

#luggage-red-corners-top:after {
	content: "";
	position: absolute;
	width: 15px;
	height: 15px;
	background: #B9C9CB;
	border-radius: 1px 1px 1px 15px;
	-webkit-transform: translateX(172px);
	    -ms-transform: translateX(172px);
	        transform: translateX(172px);
}

#luggage-red-keyhole-left,
#luggage-red-keyhole-right {
	background-color: #C9B195;
	width: 24px;
	height: 13px;
	position: absolute;
	border-radius: 1px;
	border-bottom: 2px solid #B24E53;
}

#luggage-red-keyhole-left {
	-webkit-transform: translate(25px, -10px);
	    -ms-transform: translate(25px, -10px);
	        transform: translate(25px, -10px);
}

#luggage-red-keyhole-right {
	-webkit-transform: translate(130px, -10px);
	    -ms-transform: translate(130px, -10px);
	        transform: translate(130px, -10px);
}

#luggage-red-keyhole-left:before,
#luggage-red-keyhole-right:before {
	content: "";
	position: absolute;
	background-color: #403C3E;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	-webkit-transform: translate(10px, 2px);
	    -ms-transform: translate(10px, 2px);
	        transform: translate(10px, 2px);
}

#luggage-red-keyhole-left:after,
#luggage-red-keyhole-right:after {
	content: "";
	position: absolute;
	background-color: #403C3E;
	width: 3px;
	height: 5px;
	-webkit-transform: translate(11px, 6px);
	    -ms-transform: translate(11px, 6px);
	        transform: translate(11px, 6px);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
}

#luggage-red-handle {
	position: absolute;
	background-color: #8B4D40;
	width: 15px;
	height: 15px;
	border-radius: 1px;
	-webkit-transform: translate(55px, 10px);
	    -ms-transform: translate(55px, 10px);
	        transform: translate(55px, 10px);
	border-bottom: 2px solid #B24E53;
}

#luggage-red-handle:before {
	content: "";
	position: absolute;
	background-color: #8B4D40;
	width: 15px;
	height: 15px;
	border-radius: 1px;
	-webkit-transform: translateX(55px);
	    -ms-transform: translateX(55px);
	        transform: translateX(55px);
	border-bottom: 2px solid #B24E53;
}

#luggage-red-handle:after {
	content: "";
	position: absolute;
	background-color: #C9B195;
	width: 55px;
	height: 8px;
	border-radius: 1px;
	-webkit-transform: translate(7px, 3px);
	    -ms-transform: translate(7px, 3px);
	        transform: translate(7px, 3px);
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-top: 1px dashed #EBD8B8;
	border-bottom: 1px dashed #EBD8B8;
}

#luggage-blue-container {
	position: relative;
	/*	background-color: #DDD;*/
	width: 100%;
	height: 55px;
	display: block;
}

#luggage-blue {
	position: absolute;
	background-color: #4B7990;
	width: 150px;
	height: 30px;
	-webkit-transform: translateX(55px);
	    -ms-transform: translateX(55px);
	        transform: translateX(55px);
	bottom: 0;
	border-top: 2px solid #40555F;
}

#luggage-blue:before {
	content: "";
	position: absolute;
	background-color: #4B7990;
	width: 150px;
	height: 20px;
	-webkit-transform: translateY(-25px);
	    -ms-transform: translateY(-25px);
	        transform: translateY(-25px);
	border-top: 3px solid #5C8CA0;
}

#sortable {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#luggage-blue-corners-bottom {
	width: 10px;
	height: 10px;
	background: #9DA4A4;
	border-radius: 1px 10px 1px 1px;
	bottom: 0;
	left: 0;
	position: absolute;
	-webkit-transform: translate(-1px, 1px);
	    -ms-transform: translate(-1px, 1px);
	        transform: translate(-1px, 1px);
	z-index: 100;
}

#luggage-blue-corners-bottom:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background: #9DA4A4;
	border-radius: 10px 1px 1px 1px;
	-webkit-transform: translateX(142px);
	    -ms-transform: translateX(142px);
	        transform: translateX(142px);
}

#luggage-blue-corners-top {
	width: 10px;
	height: 10px;
	background: #9DA4A4;
	border-radius: 1px 1px 10px 1px;
	top: 0;
	left: 0;
	position: absolute;
	-webkit-transform: translate(-1px, -26px);
	    -ms-transform: translate(-1px, -26px);
	        transform: translate(-1px, -26px);
	z-index: 100;
}

#luggage-blue-corners-top:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background: #9DA4A4;
	border-radius: 1px 1px 1px 10px;
	-webkit-transform: translateX(142px);
	    -ms-transform: translateX(142px);
	        transform: translateX(142px);
}

#luggage-blue-straps,
#luggage-blue-straps:after {
	position: absolute;
	background-color: #9BCFDB;
	width: 10px;
	height: 57px;
	border-radius: 2px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-left: 1px dashed #ECEDFB;
	border-right: 1px dashed #ECEDFB;
}

#luggage-blue-straps {
	-webkit-transform: translate(18px, -26px);
	    -ms-transform: translate(18px, -26px);
	        transform: translate(18px, -26px);
}

#luggage-blue-straps:after {
	content: "";
	-webkit-transform: translate(104px, 0px);
	    -ms-transform: translate(104px, 0px);
	        transform: translate(104px, 0px);
}

#luggage-blue-handle-back {
	position: absolute;
	background-color: #335C68;
	width: 18px;
	height: 5px;
	-webkit-transform: translate(40px, 5px);
	    -ms-transform: translate(40px, 5px);
	        transform: translate(40px, 5px);
}

#luggage-blue-handle-back:before {
	content: "";
	position: absolute;
	background-color: #335C68;
	width: 18px;
	height: 5px;
	-webkit-transform: translateX(52px);
	    -ms-transform: translateX(52px);
	        transform: translateX(52px);
}

#luggage-blue-handle {
	position: absolute;
	width: 47px;
	height: 8px;
	background-color: none;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 5px solid #D8D6C2;
	border-top: 0;
	-webkit-transform: translate(47px, 8px);
	    -ms-transform: translate(47px, 8px);
	        transform: translate(47px, 8px);
}

#luggage-yellow-container {
	position: relative;
	/*	background-color: #EEE;*/
	width: 100%;
	height: 45px;
	display: block;
}

#luggage-yellow {
	position: absolute;
	background: -webkit-repeating-linear-gradient( left, #F5D572, #F5D572 10px, #E9C249 10px, #E9C249 20px);
	background: -o-repeating-linear-gradient( left, #F5D572, #F5D572 10px, #E9C249 10px, #E9C249 20px);
	background: repeating-linear-gradient( to right, #F5D572, #F5D572 10px, #E9C249 10px, #E9C249 20px);
	width: 130px;
	height: 45px;
	-webkit-transform: translateX(55px);
	    -ms-transform: translateX(55px);
	        transform: translateX(55px);
	bottom: 0;
}

#luggage-yellow:before {
	content: "";
	position: absolute;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-top: 3px solid #5A6E76;
	border-bottom: 3px solid #5A6E76;
	border-left: 8px solid #5A6E76;
	background-color: none;
	width: 18px;
	height: 45px;
	-webkit-transform: translateX(-8px);
	    -ms-transform: translateX(-8px);
	        transform: translateX(-8px);
}

#luggage-yellow:after {
	content: "";
	position: absolute;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-top: 3px solid #5A6E76;
	border-bottom: 3px solid #5A6E76;
	border-right: 8px solid #5A6E76;
	background-color: none;
	width: 18px;
	height: 45px;
	-webkit-transform: translateX(120px);
	    -ms-transform: translateX(120px);
	        transform: translateX(120px);
}

#luggage-yellow-line {
	position: absolute;
	width: 130px;
	height: 1px;
	-webkit-transform: translateY(20px);
	    -ms-transform: translateY(20px);
	        transform: translateY(20px);
	background-color: #5A6E76;
}

#luggage-yellow-line:before {
	content: "";
	position: absolute;
	background-color: #6E8188;
	width: 12px;
	height: 8px;
	-webkit-transform: translate(40px, -4px);
	    -ms-transform: translate(40px, -4px);
	        transform: translate(40px, -4px);
	border-radius: 50%;
}

#luggage-yellow-line:after {
	content: "";
	position: absolute;
	background-color: #6E8188;
	width: 12px;
	height: 8px;
	-webkit-transform: translate(78px, -4px);
	    -ms-transform: translate(78px, -4px);
	        transform: translate(78px, -4px);
	border-radius: 50%;
}

#luggage-yellow-handle {
	position: absolute;
	width: 34px;
	height: 1px;
	background-color: none;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 5px solid #7B2E39;
	border-top: 0;
	-webkit-transform: translate(43px, 19px);
	    -ms-transform: translate(43px, 19px);
	        transform: translate(43px, 19px);
}

#luggage-yellow-lock-left,
#luggage-yellow-lock-right {
	position: absolute;
	background-color: #5A6E76;
	width: 14px;
	height: 2px;
}

#luggage-yellow-lock-left {
	-webkit-transform: translate(13px, 13px);
	    -ms-transform: translate(13px, 13px);
	        transform: translate(13px, 13px);
}

#luggage-yellow-lock-right {
	-webkit-transform: translate(103px, 13px);
	    -ms-transform: translate(103px, 13px);
	        transform: translate(103px, 13px);
}

#luggage-yellow-lock-left:after,
#luggage-yellow-lock-right:after {
	content: "";
	position: absolute;
	background-color: #6E8188;
	width: 10px;
	height: 20px;
	-webkit-transform: translate(2px, -2px);
	    -ms-transform: translate(2px, -2px);
	        transform: translate(2px, -2px);
}

#luggage-yellow-lock-left:before,
#luggage-yellow-lock-right:before {
	content: "";
	position: absolute;
	background-color: #5A6E76;
	width: 14px;
	height: 2px;
	-webkit-transform: translate(0px, 14px);
	    -ms-transform: translate(0px, 14px);
	        transform: translate(0px, 14px);
}

#luggage-orange-container {
	position: relative;
	/*	background-color: #AAA;*/
	width: 100%;
	height: 45px;
	display: block;
}

#luggage-orange {
	position: absolute;
	background-color: #EF8432;
	width: 130px;
	height: 28px;
	-webkit-transform: translateX(35px);
	    -ms-transform: translateX(35px);
	        transform: translateX(35px);
	bottom: 0;
	border-top: 2px solid #D87E38;
}

#luggage-orange:before {
	content: "";
	position: absolute;
	background-color: #EA9D65;
	width: 134px;
	height: 13px;
	-webkit-transform: translate(-2px, -17px);
	    -ms-transform: translate(-2px, -17px);
	        transform: translate(-2px, -17px);
	border-top: 2px solid #F0BC94;
	border-radius: 2px;
}

#luggage-orange-corners-bottom {
	width: 10px;
	height: 10px;
	background: #8C8669;
	border-radius: 1px 10px 1px 1px;
	bottom: 0;
	left: 0;
	position: absolute;
	-webkit-transform: translate(-1px, 1px);
	    -ms-transform: translate(-1px, 1px);
	        transform: translate(-1px, 1px);
	z-index: 100;
}

#luggage-orange-corners-bottom:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background: #8C8669;
	border-radius: 10px 1px 1px 1px;
	-webkit-transform: translateX(122px);
	    -ms-transform: translateX(122px);
	        transform: translateX(122px);
}

#luggage-orange-corners-top {
	width: 10px;
	height: 10px;
	background: #8C8669;
	border-radius: 1px 1px 10px 1px;
	top: 0;
	left: 0;
	position: absolute;
	-webkit-transform: translate(-3px, -18px);
	    -ms-transform: translate(-3px, -18px);
	        transform: translate(-3px, -18px);
	z-index: 100;
}

#luggage-orange-corners-top:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background: #8C8669;
	border-radius: 1px 1px 1px 10px;
	-webkit-transform: translateX(126px);
	    -ms-transform: translateX(126px);
	        transform: translateX(126px);
}

#luggage-orange-straps,
#luggage-orange-straps:after {
	position: absolute;
	background-color: #967E67;
	width: 8px;
	height: 47px;
	border-radius: 2px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-left: 1px dashed #D3BE8F;
	border-right: 1px dashed #D3BE8F;
}

#luggage-orange-straps {
	-webkit-transform: translate(18px, -18px);
	    -ms-transform: translate(18px, -18px);
	        transform: translate(18px, -18px);
}

#luggage-orange-straps:after {
	content: "";
	-webkit-transform: translate(85px, 0px);
	    -ms-transform: translate(85px, 0px);
	        transform: translate(85px, 0px);
}

#luggage-orange-lock {
	position: absolute;
	background-color: #977D63;
	width: 15px;
	height: 5px;
	-webkit-transform: translate(58px, -7px);
	    -ms-transform: translate(58px, -7px);
	        transform: translate(58px, -7px);
}

#luggage-orange-lock:after {
	content: "";
	position: absolute;
	background-color: #977D63;
	width: 20px;
	height: 8px;
	-webkit-transform: translate(-2px, 10px);
	    -ms-transform: translate(-2px, 10px);
	        transform: translate(-2px, 10px);
}

#luggage-orange-keyhole {
	background-color: #DCCB9E;
	width: 7px;
	height: 12px;
	position: absolute;
	border-radius: 1px;
	-webkit-transform: translate(62px, -5px);
	    -ms-transform: translate(62px, -5px);
	        transform: translate(62px, -5px);
}

#luggage-orange-keyhole:before {
	content: "";
	position: absolute;
	background-color: #403C3E;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	-webkit-transform: translate(2px, 2px);
	    -ms-transform: translate(2px, 2px);
	        transform: translate(2px, 2px);
}

#luggage-orange-keyhole:after {
	content: "";
	position: absolute;
	background-color: #403C3E;
	width: 1px;
	height: 4px;
	-webkit-transform: translate(3px, 4px);
	    -ms-transform: translate(3px, 4px);
	        transform: translate(3px, 4px);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
}

#luggage-gray-container {
	/*	background-color: #BBB;*/
	width: 100%;
	height: 45px;
	display: block;
	position: relative;
}

#luggage-gray {
	position: absolute;
	background-color: #848B91;
	width: 85px;
	height: 27px;
	bottom: 0;
	-webkit-transform: translateX(65px);
	    -ms-transform: translateX(65px);
	        transform: translateX(65px);
	border-top: 3px solid #767983;
}

#luggage-gray:before {
	content: "";
	position: absolute;
	background-color: #96A8B6;
	width: 89px;
	height: 12px;
	bottom: 0;
	-webkit-transform: translate(-2px, -30px);
	    -ms-transform: translate(-2px, -30px);
	        transform: translate(-2px, -30px);
	border-top: 3px solid #ABBAC6;
}

#luggage-gray-corners-bottom {
	width: 8px;
	height: 8px;
	background: #ECC887;
	border-radius: 1px 8px 1px 1px;
	bottom: 0;
	left: 0;
	position: absolute;
	-webkit-transform: translate(-1px, 1px);
	    -ms-transform: translate(-1px, 1px);
	        transform: translate(-1px, 1px);
	z-index: 100;
}

#luggage-gray-corners-bottom:after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	background: #ECC887;
	border-radius: 8px 1px 1px 1px;
	-webkit-transform: translateX(79px);
	    -ms-transform: translateX(79px);
	        transform: translateX(79px);
}

#luggage-gray-corners-top {
	width: 8px;
	height: 8px;
	background: #ECC887;
	border-radius: 1px 1px 8px 1px;
	bottom: 0;
	left: 0;
	position: absolute;
	-webkit-transform: translate(-3px, -38px);
	    -ms-transform: translate(-3px, -38px);
	        transform: translate(-3px, -38px);
	z-index: 100;
}

#luggage-gray-corners-top:after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	background: #ECC887;
	border-radius: 1px 1px 1px 8px;
	-webkit-transform: translateX(83px);
	    -ms-transform: translateX(83px);
	        transform: translateX(83px);
}

#luggage-gray-lock-left,
#luggage-gray-lock-right {
	position: absolute;
	background-color: #5E6369;
	width: 16px;
	height: 4px;
}

#luggage-gray-lock-left {
	-webkit-transform: translate(10px, -9px);
	    -ms-transform: translate(10px, -9px);
	        transform: translate(10px, -9px);
}

#luggage-gray-lock-right {
	-webkit-transform: translate(58px, -9px);
	    -ms-transform: translate(58px, -9px);
	        transform: translate(58px, -9px);
}

#luggage-gray-lock-left:after,
#luggage-gray-lock-right:after {
	content: "";
	position: absolute;
	background-color: #5E6369;
	width: 14px;
	height: 4px;
	-webkit-transform: translate(1px, 11px);
	    -ms-transform: translate(1px, 11px);
	        transform: translate(1px, 11px);
}

#luggage-gray-keyhole-left,
#luggage-gray-keyhole-right {
	background-color: #F0E9C3;
	width: 7px;
	height: 11px;
	position: absolute;
	border-radius: 1px;
}

#luggage-gray-keyhole-left {
	-webkit-transform: translate(14px, -7px);
	    -ms-transform: translate(14px, -7px);
	        transform: translate(14px, -7px);
}

#luggage-gray-keyhole-right {
	-webkit-transform: translate(63px, -7px);
	    -ms-transform: translate(63px, -7px);
	        transform: translate(63px, -7px);
}

#luggage-gray-keyhole-left:before,
#luggage-gray-keyhole-right:before {
	content: "";
	position: absolute;
	background-color: #403C3E;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	-webkit-transform: translate(2px, 2px);
	    -ms-transform: translate(2px, 2px);
	        transform: translate(2px, 2px);
}

#luggage-gray-keyhole-left:after,
#luggage-gray-keyhole-right:after {
	content: "";
	position: absolute;
	background-color: #403C3E;
	width: 1px;
	height: 4px;
	-webkit-transform: translate(3px, 4px);
	    -ms-transform: translate(3px, 4px);
	        transform: translate(3px, 4px);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
}

#luggage-gray-handle {
	background-color: #874E3C;
	position: absolute;
	width: 4px;
	height: 5px;
	-webkit-transform: translate(-4px, 2px);
	    -ms-transform: translate(-4px, 2px);
	        transform: translate(-4px, 2px);
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

#luggage-gray-handle:after {
	content: "";
	background-color: #874E3C;
	position: absolute;
	width: 4px;
	height: 5px;
	-webkit-transform: translateX(89px);
	    -ms-transform: translateX(89px);
	        transform: translateX(89px);
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
            
          
!
            
              $(function() {
  $("#luggage-container").sortable({
    revert: true
  });
  $("#luggage-container").disableSelection();

  $("#trolley").draggable({
    axis: "x"
  });
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console