HTML
<html>
<head>
<title>Work Desk</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container clearfix">
<div class="pa mackbook hover">
<div class="screen">
<div class="user_pic"></div>
<div class="password"></div>
<div class="icons clearfix">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</div>
<div class="base pr">
<div class="connector"></div>
<div class="keypad">
<div class="clearfix">
<div class="ftl key key2"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key2"></div>
</div>
<div class="clearfix pad-lr-10">
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
</div>
<div class="clearfix">
<div class="ftl key key2"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key2"></div>
</div>
<div class="clearfix pad-lr-10">
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key3"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
<div class="ftl key key1"></div>
</div>
</div>
<div class="touchpad"></div>
<div class="pa shadow"></div>
</div>
</div>
<div class="pa mouse hover">
<div class="pa scroller"></div>
</div>
<div class="pa phone hover">
<div class="speaker"></div>
<div class="screen">
<div class="screen_data"></div>
</div>
<div class="button"></div>
<div class="pa volume_rockers"></div>
</div>
<div class="pa notes hover">
<div class="note pr"></div>
</div>
<div class="pa pen hover">
<div class="pen-nip">
<div class="pen-tip"></div>
</div>
<div class="pa pen-bottom"></div>
</div>
<div class="pa handwatch hover">
<div class="pr">
<div class="belt"></div>
<div class="pa dial">
<div class="pa sun-hand"></div>
<div class="pa hand1"></div>
<div class="pa hand2"></div>
<div class="pa button1"></div>
<div class="pa button2"></div>
</div>
</div>
</div>
<div class="pa passbook hover">
<div class="pr symbol">
<div class="pa h_line"></div>
<div class="pa v_line"></div>
<div class="pa inner_circle"></div>
</div>
<div class="details1"></div>
<div class="details2"></div>
<div class="details3"></div>
</div>
<div class="pa diary hover">
<div class="main">
<div class="cover">
<div class="pa less"></div>
</div>
</div>
</div>
<div class="pa pencil hover">
<div class="pa pencil-bottom"></div>
<div class="pencil-nip">
<div class="pencil-tip"></div>
</div>
</div>
<div class="pa lock hover">
<div class="handle"></div>
<div class="pr locker">
<div class="pa key_hole"></div>
</div>
</div>
<div class="pa mug hover">
<div class="pr mug_head">
<div class="pa coffee"></div>
<div class="pa ear"></div>
</div>
</div>
</div>
</body>
</html>
CSS
html,body{
background-color: #CCA283;
padding: 0;
margin:0;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0 !important;
height: 0;
}
.container{
position: relative;
margin: 2% auto 0 auto;
width: 900px;
}
.pr{
position: relative;
}
.pa{
position: absolute;
}
.ftl{
float: left;
}
.pad-lr-10{
padding: 0 10px;
}
.mackbook{
left: 285px;
top: 75px;
}
.mackbook .screen{
height: 150px;
width: 250px;
background-color: #3C5996;
border: 10px solid #151822;
border-radius: 5px;
}
.mackbook .screen .user_pic{
margin: 20px auto 15px auto;
height: 45px;
width: 45px;
border-radius: 50%;
background-color: #B1BDD5;
}
.mackbook .screen .password{
background-color: #fff;
height: 15px;
width: 100px;
border-radius: 20px;
margin: 0 auto;
}
.mackbook .screen .icons{
margin: 27px auto 0px auto;
width: 75px;
}
.mackbook .screen .icons .icon{
height: 15px;
width: 15px;
border-radius: 50%;
background-color: #344C7F;
float: left;
margin: 0 5px;
}
.mackbook .base{
height: 185px;
width: 270px;
background-color: #E8E8EB;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom: 8px solid #A6856E;
}
.mackbook .base .connector{
background-color: #151822;
height: 8px;
width: 170px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin: 0 auto;
}
.mackbook .base .keypad{
background-color: #C2CBDE;
height: 85px;
width: 250px;
margin: 10px auto;
border-radius: 5px;
padding: 3px;
}
.mackbook .base .keypad .key{
height: 17px;
border-radius: 4px;
background-color: #151822;
margin: 2px;
/*box-shadow: 0px 2px 1px #6F7584;*/
}
.mackbook .base .keypad .key1{
width: 18px;
}
.mackbook .base .keypad .key2{
width: 32px;
}
.mackbook .base .keypad .key3{
width: 90px;
}
.mackbook .base .touchpad{
background-color: #C2CBDE;
height: 59px;
width: 100px;
border-radius: 5px;
margin: -5px auto 5px auto;
}
.mackbook .base .shadow{
width: 100%;
height: 6px;
background-color: #C2CBDE;
bottom: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
div{
-webkit-transition: ease 0.2s;
-moz-transition: ease 0.2s;
-ie-transition: ease 0.2s;
-o-transition: ease 0.2s;
transition: ease 0.2s;
}
.hover:hover{
/*margin-top: -7px;*/
transform: scale(1.1, 1.1)
}
.mouse{
height: 96px;
width: 60px;
background-color: #fff;
left: 580px;
top: 375px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom: 5px solid #A6856E;
}
.mouse .scroller{
background-color: #C2CBDE;
left: 28px;
width: 3px;
border-radius: 10px;
height: 15px;
top: 16px;
}
.phone{
background-color: #20232C;
height: 180px;
width: 90px;
border-radius: 10px;
border-bottom: 5px solid #A6856E;
left: 680px;
top: 300px;
}
.phone .speaker{
background-color: #EDEDF0;
height: 3px;
width: 15px;
border-radius: 5px;
margin: 8px auto;
}
.phone .screen{
background-color: #262E41;
width: 80%;
margin: 0 auto;
height: 135px;
}
.phone .screen .screen_data{
background-color: #3C5997;
width: 100%;
height: 7px;
}
.phone .button{
height: 15px;
width: 15px;
background-color: #EDEDF0;
border-radius: 50%;
margin: 6px auto;
}
.phone .volume_rockers{
background-color: #20232C;
height: 24px;
width: 5px;
top: 25px;
left: -2px;
border-radius: 10px;
}
.notes{
height: 130px;
width: 120px;
background-color: #EFD171;
border-bottom: 5px solid #A9876E;
left: 700px;
top: 110px;
}
.notes .note{
height: 95%;
width: 100%;
background-color: #FFE882;
}
.notes .note:after{
content: '';
border-left: 10px solid #FFF1B4;
border-top: 10px solid #FFF1B4;
border-right: 10px solid #EFD171;
border-bottom: 10px solid #EFD171;
position: absolute;
right: 0px;
bottom: 0px;
}
.pen{
background-color: #fff;
width: 15px;
height: 120px;
left: 600px;
top: 230px;
}
.pen .pen-nip{
border-bottom: 22px solid #3C5996;
border-left: 8px solid transparent;
border-right: 7px solid transparent;
width: 0;
height: 0;
margin-top: -22px;
}
.pen .pen-nip .pen-tip{
background-color: #fff;
height: 2px;
width: 32%;
top: -16px;
position: absolute;
left: 5.5px;
border-radius: 7px;
}
.pen .pen-bottom{
bottom: 0px;
background-color: #3C5996;
width: 100%;
height: 4px;
border-bottom: 3px solid #A9876E;
}
.handwatch{
left: 620px;
top: 0px;
height: 200px;
width: 150px;
}
.handwatch .belt{
background-color: #151822;
height: 180px;
width: 50px;
border-radius: 10px;
border-bottom: 5px solid #A6856E;
}
.handwatch .dial{
background-color: #fff;
height: 60px;
width: 60px;
border-radius: 50%;
border: 5px solid #8F8A8F;
top: 52px;
left: -10px;
}
.sun-hand{
height: 8px;
width: 8px;
background-color: #181B25;
border-radius: 50%;
top: 24px;
left: 26px;
z-index: 2;
}
.handwatch .dial .hand1{
width: 2px;
height: 23px;
background-color: #A5A9B2;
left: 29px;
top: 5px;
}
.handwatch .dial .hand2{
width: 2px;
height: 18px;
background-color: #A5A9B2;
left: 33px;
top: 13px;
transform: rotate(40deg);
}
.handwatch .dial .button1{
height: 4px;
width: 4px;
background-color: #63636C;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
right: -4px;
top: 10px;
transform: rotate(-34deg);
}
.handwatch .dial .button2{
height: 4px;
width: 4px;
background-color: #63636C;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
right: -8px;
top: 20px;
transform: rotate(-7deg);
}
.passbook{
background-color: #26385A;
height: 170px;
width: 140px;
top: 15px;
left: 0px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom: 5px solid #A6856E;
}
.passbook .symbol{
border: 2px solid #FFDAA0;
height: 50px;
width: 50px;
border-radius: 50%;
margin: 30px auto;
}
.passbook .symbol .h_line{
width: 100%;
top: 50%;
border-top: 2px solid #FFDAA0;
}
.passbook .symbol .v_line{
height: 100%;
left: 50%;
border-right: 2px solid #FFDAA0;
}
.passbook .symbol .inner_circle{
height: 100%;
width: 50%;
border-radius: 50%;
border: 2px solid #FFDAA0;
left: 25%;
top: -2px;
}
.passbook .details1{
height: 2px;
width: 10%;
background-color: #F9FAFB;
margin: 15px auto;
}
.passbook .details2{
height: 4px;
width: 30%;
border-radius: 5px;
background-color: #FFDAA0;
margin: 10px auto;
}
.passbook .details3{
height: 4px;
width: 40%;
border-radius: 5px;
background-color: #F9FAFB;
margin: 10px auto;
}
.diary{
height: 190px;
width: 120px;
top: 410px;
left: 40px;
border-bottom: 5px solid #A6856E;
}
.diary .main{
border: 5px solid #151822;
border-top: none;
background-color: #FFF;
height: 100%;
width: 100%;
border-bottom-right-radius: 15px;
}
.diary .main .cover{
background-color: #151822;
width: 115%;
height: 95%;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
}
.diary .main .cover .less{
background-color: #3C5996;
width: 7px;
height: 95%;
right: 10px;
}
.pencil{
background-color: #FFE882;
width: 15px;
height: 120px;
left: 230px;
top: 200px;
}
.pencil .pencil-nip{
border-bottom: 22px solid #F3C6A9;
border-left: 8px solid transparent;
border-right: 7px solid transparent;
width: 0;
height: 0;
margin-top: -22px;
}
.pencil .pencil-nip .pencil-tip{
border-bottom: 8px solid #151822;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
height: 0px;
width: 0px;
top: -22px;
position: absolute;
left: 5px;
}
.pencil .pencil-bottom{
bottom: 0px;
background-color: #FF859F;
width: 100%;
height: 15px;
border-bottom: 5px solid #A9876E;
}
.lock{
top: 380px;
left: 200px;
border-bottom: 5px solid #A9876E;
border-radius: 32px;
}
.lock .locker{
background-color: #272A34;
border: 5px solid #F8F8F9;
border-radius: 50%;
height: 50px;
width: 50px;
}
.lock .locker .key_hole{
background-color: #BBBCBF;
height: 10px;
width: 10px;
border-radius: 50%;
top: 20px;
left: 20px;
}
.lock .locker .key_hole:after{
position: absolute;
content: '';
background-color: #BBBCBF;
height: 10px;
width: 3px;
border-radius: 5px;
top: 7px;
left: 3px;
}
.lock .handle{
height: 30px;
width: 30px;
border: 5px solid #E8E8EB;
border-bottom: 0;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
margin-left: 10px;
margin-bottom: -7px;
}
.mug{
left: 65px;
top: 220px;
background-color: #FFFFFF;
height: 160px;
width: 100px;
border-radius: 50px;
border-bottom: 15px solid #A9876E;
}
.mug .mug_head{
height: 85px;
width: 85px;
background-color: #C2CBDE;
margin-left: 7px;
margin-top: 7px;
border-radius: 50%;
z-index: 2;
}
.mug .mug_head .coffee{
background-color: #49362E;
height: 72px;
width: 82px;
border-radius: 50%;
left: 2px;
bottom: 0px;
z-index: 1;
}
.mug .mug_head .ear{
height: 45px;
width: 50px;
right: -37px;
top: 39px;
border: 8px solid #fff;
border-radius: 50%;
}
