Hello!, I just tried to create my work desk using CSS and HTML. Here all I used is<div>.
CSS :
body{
background-color: white;
}
.mydesk{
position: absolute;
height: 10px;
width: 500px;
background-color: burlywood;
top: 425px;
left: 313px;
box-shadow: 20px 20px 20px 20px;
}
.left-stand{
position: absolute;
height: 150px;
width: 5px;
left: 350px;
top: 465px;
background-color: black;
}
.right-stand{
position: absolute;
height: 150px;
width: 5px;
left: 750px;
top: 466px;
background-color: black;
}
.desktop {
position: absolute;
width: 200px;
height: 150px;
border-radius: 10px 10px 10px 10px;
background-color: black;
top: 44%;
left: 72%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 20px -7px;
}
.monitor {
border:double;
background-color: darkgray;
height: 130px;
width: 180px;
margin-left: 6px;
margin-top: 5px;
}
.power{
height: 5px;
width: 5px;
border-radius: 5px;
background-color: white;
margin-top: 1px;
margin-left: 190px;
}
.power-on{
height: 3px;
width: 3px;
background-color: white;
margin-top: 0px;
margin-left: 189px;
}
.stand{
height: 25px;
width: 30px;
background-color: black;
left: 89px;
top: 152px;
position: absolute;
box-shadow: 0 0 5px 0px;
}
.flat{
position: absolute;
width: 80px;
height: 12px;
background-color: black;
left: 65px;
top: 207px;
box-shadow: 0 0 5px 3px;
}
.monitor-power-supply{
border-left: solid black;
height: 65px;
margin-left: 150px;
}
.laptop-outer{
position: absolute;
width: 150px;
height: 100px;
border-radius: 5px;
background-color: black;
top: 57%;
left: 40%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 14px -2px;
}
.lap-monitor {
border: double;
background-color: darkgray;
height: 65px;
width: 135px;
margin-left: 5px;
margin-top: 10px;
}
.lenovo{
background-color: grey;
width: 36px;
height: 6px;
margin-top: 7px;
margin-left: 5px;
}
.lenovo-font {
font-family: pf lindemann sans;
font-size: 15px;
}
.key-pad{
width: 180px;
height: 10px;
box-shadow: 0px 0px 20px 0px;
margin-top: 10px;
margin-left: -12px;
background-color: black;
}
.bose{
width: 45px;
padding: 8px;
border: 5px solid gray;
border-bottom-left-radius: 30%;
border-bottom-right-radius: 30%;
border-top-left-radius: 30%;
border-top-right-radius: 30%;
box-shadow: 0px 0px 40px -2px;
background-color: gray;
margin-left: 67px;
margin-top: 31px;
}
.lamp{
position: absolute;
width: 100px;
height: 20px;
top: 394px;
left: 515px;
border-radius: 20px 20px 20px 20px;
background-color: black;
}
.lamp-vetical-pole-1{
top: -101px;
left: 45px;
position: absolute;
height: 100px;
width: 10px;
background-color: black;
}
.lamp-vetical-pole-2{
top: -148px;
left: 47px;
position: absolute;
height: 46px;
width: 5px;
background-color: black;
}
.lamp-circle{
position: absolute;
width: 80px;
height: 80px;
border-radius: 50px;
background-color: black;
top: -229px;
left: 10px;
}
.lamp-circle-inner{
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: white;
left: 20px;
top: 20px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./mydesc.css">
</head>
<body>
<div class="desktop">
<div class="monitor"></div>
<div class="power">
<div class="power-on"></div>
</div>
<div class="stand"></div>
<div class="flat"></div>
<!-- <div class="monitor-power-supply">
</div> -->
<div class="bose">
</div>
</div>
<div class="laptop-outer">
<div class="lap-monitor"></div>
<div class="lenovo">
</div>
<div class="key-pad"></div>
</div>
<div class="curves-width"></div>
<div class="lamp">
<div class="lamp-vetical-pole-1"></div>
<div class="lamp-vetical-pole-2"></div>
<div class="lamp-circle">
<div class="lamp-circle-inner"></div>
</div>
</div>
<div class="mydesk"></div>
<div class="left-stand"></div>
<div class="right-stand"></div>
</body>
</html>
OUTPUT:
