Webleb - UI Elements - CSS Office Layout Structure

HTML

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f0f0f0;
}

.wrap {
  position: relative;
  width: 800px;
  height: 600px;
  overflow: hidden;
}

.wrap *,
.wrap *::before,
.wrap *::after {
  position: absolute;
  content: "";
}

.office {
  width: 800px;
  height: 600px;
  animation: start 10s linear infinite;
}

.office__top {
  animation: bgtop 10s ease infinite;
}

.office__left {
  animation: bgleft 10s ease infinite;
}

.office__right {
  animation: bgright 10s ease infinite;
}

.office .picture-2 {
  top: 10px;
  left: 3px;
  width: 50px;
  height: 70px;
  background: #c6c69c;
  border: 12px solid #314339;
}

.office .picture-2:before {
  content: "World Best Boss";
  text-align: center;
  font-weight: 600;
}

.office .picture-3 {
  top: -30px;
  left: 138px;
  width: 53px;
  height: 74px;
  background: #858d75;
  border: 10px solid #314339;
}

.office .picture-4 {
  top: 79px;
  left: 138px;
  width: 164px;
  height: 86px;
  background: #aeab21;
  border: 12px solid #424242;
  box-shadow: inset 0 0 0 14px #d0c821;
}

.office .picture-4:before {
  top: 26px;
  left: 102px;
  width: 35px;
  height: 35px;
  background: linear-gradient(-45deg, #bdbd86 50%, #737b21 50%);
  border-radius: 100% 0;
  transform: rotate(-45deg);
  box-shadow: -27px -27px 0 0 #737b21;
}

.office .picture-4:after {
  top: 26px;
  left: 26px;
  width: 35px;
  height: 35px;
  background: linear-gradient(-45deg, #737b21 50%, #bdbd86 50%);
  border-radius: 100% 0;
  transform: rotate(-45deg);
}

.office .picture-6 {
  top: -30px;
  left: 276px;
  width: 310px;
  height: 55px;
  background: #5a6222;
  border: 12px solid #5a6222;
  box-shadow: inset 0 0 0 12px #737b21;
}

.office .picture-6:before {
  top: 6px;
  left: 23px;
  width: 30px;
  height: 30px;
  background: #737b21;
  border-radius: 90% 0;
  box-shadow: 103px 0 0 0 #737b21, 206px 0 0 0 #737b21;
}

.office .picture-6:after {
  top: 6px;
  left: 52px;
  width: 30px;
  height: 30px;
  background: #737b21;
  border-radius: 0 90%;
  box-shadow: 103px 0 0 0 #737b21, 206px 0 0 0 #737b21;
}

.office .picture-8 {
  top: 64px;
  left: 702px;
  width: 120px;
  height: 97px;
  background: #bdbd86;
  border: 15px solid #314339;
  box-shadow: inset 0 0 0 12px #ddc715;
}

.office .bookshelf {
  top: 266px;
  left: 600px;
  width: 320px;
  height: 294px;
  background: linear-gradient(
    #435a3a 9%,
    #435a3a 35%,
    #4a6b39 35%,
    #4a6b39 38%,
    #314339 38%,
    #314339 48%,
    #435a3a 48%,
    #435a3a 68%,
    #4a6b39 68%,
    #4a6b39 71.5%,
    #314339 72%,
    #314339 81%,
    #435a3a 81%
  );
  border: 12px solid #537a39;
}

.office .books-2 {
  top: 448px;
  left: 652px;
  width: 6px;
  height: 30px;
  background: #2b242c;
  box-shadow: 11px -5px 0 5px #bdbd86, 27px -5px 0 5px #858d75,
    27px -13px 0 5px #858d75, 33px -13px 0 5px #314339, 33px -5px 0 5px #314339,
    53px -9px 0 9px #528cb5, 53px -17px 0 9px #528cb5, 73px -5px 0 5px #87753b,
    73px -27px 0 5px #87753b, 79px -27px 0 5px #c47533, 79px -5px 0 5px #c47533,
    95px -5px 0 5px #bdbd86, 95px -35px 0 5px #bdbd86, 101px -35px 0 5px #737b21,
    101px -5px 0 5px #737b21, 114px -3px 0 2px #704946,
    114px -34px 0 2px #704946, 114px -47px 0 2px #704946,
    124px -47px 0 2px #563636, 124px -16px 0 2px #563636,
    124px -2px 0 2px #563636, 134px -38px 0 2px #87753b,
    134px -12px 0 2px #87753b, 157px -25px 0 25px #c47533;
}

.office .books-2:before {
  top: -13px;
  left: 29px;
  width: 14px;
  height: 9px;
  background: #314339;
  box-shadow: 15px -8px 0 0 #526b94, 15px 30px 0 0 #526b94,
    25px -8px 0 0 #526b94, 25px 30px 0 0 #526b94, 39px 34px 0 0 #c47533,
    47px 34px 0 0 #c47533, 47px -19px 0 0 #c47533, 39px -19px 0 0 #c47533,
    60px -21px 0 -1px #737b21, 70px -21px 0 -1px #737b21,
    70px 28px 0 -1px #737b21, 60px 28px 0 -1px #737b21, 81px 32px 0 -2px #563636,
    81px -32px 0 -2px #563636;
}

.office .books-2:after {
  top: 56px;
  left: 44px;
  width: 49px;
  height: 12px;
  background: #528cb5;
  box-shadow: 19px 0 0 0 #528cb5, 9px 8px 0 0 #526b94, 9px 20px 0 0 #528cb5,
    9px 22px 0 0 #528cb5, 2px 34px 0 0 #424242, 46px 34px 0 0 #424242,
    66px 34px 0 0 #424242, 10px 42px 0 0 #2b242c, 58px 42px 0 0 #2b242c,
    10px 53px 0 0 #424242, 59px 53px 0 0 #424242, 59px 56px 0 0 #424242,
    10px 56px 0 0 #424242;
}

.office .commode {
  top: 408px;
  left: 0px;
  width: 268px;
  height: 14px;
  background: #4c7339;
}

.office .commode:before {
  top: 14px;
  left: 12px;
  width: 242px;
  height: 108px;
  background: #4a6b39;
  box-shadow: inset 0 14px 0 0 #435a3a;
}

.office .commode:after {
  top: 122px;
  left: 12px;
  width: 12px;
  height: 53px;
  background: #4a6b39;
  box-shadow: 230px 0 0 0 #4a6b39;
}

.office .commode__box {
  top: 25px;
  left: 23px;
  width: 105px;
  height: 37px;
  background: #858d75;
  box-shadow: 0 6px 0 0 #435a3a, 114px 0 0 0 #858d75, 114px 6px 0 0 #435a3a,
    0 49px 0 0 #858d75, 100px 49px 0 0 #858d75, 114px 49px 0 0 #858d75,
    0 54px 0 0 #435a3a, 100px 54px 0 0 #435a3a, 114px 54px 0 0 #435a3a;
}

.office .commode__box:before {
  top: 13px;
  left: 33px;
  width: 40px;
  height: 12px;
  background: #87753b;
  box-shadow: 0 6px 0 0 #4a6b39, 114px 0 0 0 #87753b, 114px 6px 0 0 #4a6b39,
    57px 44px 0 0 #87753b, 57px 50px 0 0 #4a6b39;
}

.office .table {
  top: 332px;
  left: 124px;
  width: 274px;
  height: 12px;
  background: #87753b;
}

.office .table:before {
  top: 12px;
  left: 16px;
  width: 212px;
  height: 12px;
  background: #211821;
}

.office .table:after {
  top: 24px;
  left: 36px;
  width: 14px;
  height: 222px;
  background: #211821;
}

.office .table__leg {
  top: 239px;
  left: 36px;
  width: 136px;
  height: 12px;
  background: #211821;
}

.office .table__leg:before {
  top: -243px;
  left: 55px;
  width: 12px;
  height: 150px;
  background: #211821;
  transform: rotate(45deg);
}

.office .plant {
  top: -36px;
  left: 10px;
  width: 52px;
  height: 10px;
  background: #704946;
}

.office .plant:before {
  top: 10px;
  left: 8px;
  width: 38px;
  height: 26px;
  background: linear-gradient(
    #5a3942 21%,
    #704946 22%,
    #704946 80%,
    #5a3942 81%
  );
  border-radius: 0 0 10px 10px;
}

.office .plant:after {
  top: -48px;
  left: 10px;
  width: 28px;
  height: 48px;
  background: linear-gradient(to right, #435a3a 50%, #737b21 51%);
  border-radius: 20px 20px 0 0;
}

.office .plant__flower {
  top: -70px;
  left: 48px;
  width: 10px;
  height: 26px;
  background: #435a3a;
  border-radius: 10px 10px 20px 0;
}

.office .plant__flower:before {
  top: 14px;
  left: -7px;
  width: 12px;
  height: 12px;
  background: #435a3a;
  border-radius: 50%;
}

.office .plant__flower:after {
  top: -25px;
  left: -23px;
  width: 8px;
  height: 8px;
  background: #bc6b3a;
  border: 5px solid #87753b;
  transform: rotate(45deg);
}

.office .monitor {
  top: -22px;
  left: 69px;
  width: 63px;
  height: 22px;
  box-sizing: border-box;
  border-left: 10px solid #424242;
  border-bottom: 10px solid #424242;
  border-radius: 0 0 0 19px;
}

.office .monitor:before {
  top: -85px;
  left: 10px;
  width: 20px;
  height: 104px;
  box-sizing: border-box;
  border-left: 10px solid #424242;
  border-bottom: 10px solid #424242;
  border-radius: 0 0 0 30px;
  transform-origin: 0 0;
  transform: rotate(14deg);
}

.office .monitor:after {
  top: -163px;
  left: -26px;
  width: 24px;
  height: 175px;
  background: #d6d6d5;
  box-shadow: inset -12px 0 0 0 #424242;
  border-radius: 100% 0 0 100%;
  transform-origin: 0 0;
  transform: rotate(-24deg);
}

.office .sticky-note {
  top: 100px;
  left: 400px;
  width: 100px;
  height: 60px;
  background: #ddc715;
  border: 10px solid #32283f;
  transform: rotate(-5deg);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  color: #2b242c;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 12px;
  padding: 5px;
  box-sizing: border-box;
}

.office .sticky-note:before {
  content: "That's What She Said";
}

.office .sticky-note:after {
  content: none;
}

.office .chair {
  top: 556px;
  left: 386px;
  width: 196px;
  height: 15px;
  background: #211821;
  border-radius: 10px 10px 0 0;
  transform: translateX(0);
  animation: chair-animation 10s ease infinite;
}

.office .chair:after {
  top: -96px;
  left: 87px;
  width: 23px;
  height: 10px;
  background: #211821;
  box-shadow: 0 10px 0 0 #424242, 0 20px 0 0 #211821, 0 30px 0 0 #424242,
    0 40px 0 0 #211821, 0 50px 0 0 #424242, 0 60px 0 0 #211821,
    0 70px 0 0 #424242, 0 80px 0 0 #211821, 0 86px 0 0 #424242,
    6px 43px 0 0 #211821;
}

.office .chair:before {
  top: -140px;
  left: 22px;
  width: 155px;
  height: 44px;
  background: linear-gradient(#312a1f 59%, #534239 60%);
  border-radius: 50px;
}

.office .chair__legs {
  top: 15px;
  left: 8px;
  width: 18px;
  height: 12px;
  background: #211821;
  box-shadow: 166px 0 0 0 #211821;
}

.office .chair__legs:before {
  top: -79px;
  left: 108px;
  width: 10px;
  height: 32px;
  background: #211821;
}

.office .chair__legs:after {
  top: -323px;
  left: 140px;
  width: 100px;
  height: 212px;
  box-sizing: border-box;
  border-radius: 0 20px 74px 0;
  border-right: 20px solid #211821;
  border-bottom: 20px solid #211821;
}

.office .chair__back {
  top: -374px;
  left: 184px;
  width: 44px;
  height: 147px;
  background: #312a1f;
  border-radius: 25px;
}

.office .chair__back:before {
  top: 100px;
  left: 7px;
  width: 44px;
  height: 117px;
  background: #312a1f;
  border-radius: 25px;
  transform-origin: 0 0;
  transform: rotate(17deg);
}

.office .bg-1 {
  top: 50px;
  left: 0px;
  width: 870px;
  height: 164px;
  background: #bdbd86;
  animation: bgleft 10s ease infinite;
}

.office .bg-1:before {
  top: 160px;
  left: 0px;
  width: 1026px;
  height: 164px;
  background: #bdbd86;
}

.office .bg-1:after {
  top: 532px;
  left: 0px;
  width: 1196px;
  height: 21px;
  background: #211821;
}

.office .bg-2 {
  width: 850px;
  height: 51px;
  background: #bdbd86;
}

.office .bg-2:before {
  top: 370px;
  right: 0px;
  width: 850px;
  height: 220px;
  background: #bdbd86;
}

CSS Office Layout Structure

Recommended

CSS Loading Animation Example

HTML CSS OTP Form

CSS Ghost Animation

HTML

CSS

JS

Recommended

CSS Loading Animation Example

HTML CSS OTP Form

CSS Ghost Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS