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;
}

JS

CSS Office Layout Structure

Recommended