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