Under Construction

index.pug

- var objects = ['line lineOne', 'line lineTwo', 'line lineThree', 'stand', 'weight', 'cabin', 'arm']
- var n = 0

#content
  h1 < building />
  p Working day and night!

#outerCraneContainer
  .buildings
    while n < 5
      div(class= n++)
  .crane.craneThree
    for i in objects
      div(class= i)
  .crane.craneTwo
    for i in objects
      div(class= i)
  .crane.craneOne
    for i in objects
      div(class= i)
      
a(rel='license' href='http://creativecommons.org/licenses/by-nc-sa/4.0/' id='license')
  img(alt='Creative Commons License' style='border-width:0' src='https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png')

style.stylus

// Please respect a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. That means only share and adapt giving a fair credit and do not use for commercial projects. Thank you.

@import url('https://fonts.googleapis.com/css?family=Ubuntu')

$craneWidth  =     260px
$craneHeight =     $craneWidth / 1.53
$craneBorder =     1px
$teal        =     rgba(68, 192, 166, 1)
$purp        =     rgba(64,  42,  79, 1)
$cityColor   =     tomato

#outerCraneContainer
  position         absolute
  width            100%
  height           100%
  bottom           0
  overflow         hidden
  display          flex
  justify-content  center
  box-shadow       inset 0 -60px 0 -30px $cityColor
  
.buildings
  height           ($craneHeight / 2)
  width            100%
  left             0
  div
    height         inherit
    width          ($craneHeight / 4)
    background     $cityColor
    position       absolute
    bottom         10%
    &:after
      content      ''
      width        80%
      height       60%
      left         10%
      bottom       30%
      background   url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAGCAYAAAAG5SQMAAAAFElEQVQImWP4////fwYYIJKDEwAAfPsP8eFXG40AAAAASUVORK5CYII=') repeat
      position     absolute
      
.buildings div:nth-of-type(1)
  width             ($craneHeight / 4)
  height            ($craneHeight / 8)
  right             37%
  bottom            18%
  &:after
    bottom          11%
  
  
.buildings div:nth-of-type(2)
  width             ($craneHeight / 3.5)
  height            ($craneHeight / 6)
  right             30%
  bottom            35%
  transform         rotate(180deg)
  &:after
    width           60%
    left            11%
  
.buildings div:nth-of-type(3)
  width             ($craneHeight / 7)
  height            ($craneHeight / 4.5)
  left              40%
  bottom            35%
  &:after
    bottom          0
    width           20%
    height          85%
    left            70%
  
.buildings div:nth-of-type(4)
  width             ($craneHeight / 2)
  height            ($craneHeight / 8)
  left              24%
  bottom            20%
  &:after
    background      none
    
.buildings div:nth-of-type(5)
  width             ($craneHeight / 2.75)
  height            ($craneHeight / 2.5)
  left              47%
  bottom            10%
  &:after
    bottom          0
    width           40%
    height          85%
    left            20%
    
.crane, .buildings
  position         absolute
  bottom           0
  
.crane div
  border-radius    2px
  position         absolute
    
.crane .line
  border           none
  background       $cityColor
  outline          1px solid transparent
  z-index          0
    
.crane .lineOne
  width            60%
  left             11%
  top              0
  
.crane .lineTwo
  width            19%
  right            8%
  top              0
  
.crane .line.lineThree
  height           30%
  top              22%
  left             9%
  &:after
    content        ''
    position       absolute
    height        .2em
    width          9000%
    background     lighten($cityColor, 20%)
    display        block
    bottom         0
    left          -4500%
    border         solid $craneBorder $cityColor

.craneTwo .line.lineThree:after
  height          .1em
    
.craneThree .line.lineThree:after
  height          .05em
    
.stand
  height           100%
  width            5%
  right            25%
  z-index          1
  background       linear-gradient(to top, $cityColor, desaturate(lighten($cityColor, 30%), 20%))
  
.craneTwo .stand
  background       linear-gradient(to top, $cityColor, desaturate(lighten($cityColor, 25%), 20%))
  
.craneThree .stand
  background       linear-gradient(to top, $cityColor, desaturate(lighten($cityColor, 20%), 20%))
  
.weight
  height           20%
  width            8%
  right            4%
  top              12%
  z-index          2
  background       desaturate(lighten($cityColor, 25%), 10%)
  
.craneTwo .weight
  background       desaturate(lighten($cityColor, 20%), 10%)
  
.craneThree .weight
  background       desaturate(lighten($cityColor, 15%), 10%)
  
.cabin
  height           9%
  width            12%
  right            24%
  top              20%
  z-index          2
  background       desaturate(lighten($cityColor, 25%), 10%)
  &:after
    content        ''
    position       absolute
    height         10%
    width          100%
    background     white
    display        block
    top            60%
    left           0
  
.craneTwo .cabin
  background       desaturate(lighten($cityColor, 20%), 10%)
  
.craneThree .cabin
  background       desaturate(lighten($cityColor, 15%), 10%)
  
.arm
  height           7%
  width            100%
  top              15%
  z-index          3
  background       desaturate(lighten($cityColor, 25%), 10%)

.craneTwo .arm
  background       desaturate(lighten($cityColor, 20%), 10%)
  
.craneThree .arm
  background       desaturate(lighten($cityColor, 15%), 10%)
  
.crane div.arm
  border-top-left-radius 10px
  
.brick
  height           6%
  width            9%
  bottom           0
  left             40%
  background       lighten($cityColor, 10%)

.brickTwo
  left             48%

.brickThree
  bottom           5.5%
  left             44%
 
.craneOne
  width            $craneWidth
  height           $craneHeight
  left             20%
  div
    border         solid $craneBorder $cityColor
  .line
    height         $craneBorder
  .lineThree
    width          $craneBorder
  
.craneTwo
  width            ($craneWidth / 1.3)
  height           ($craneHeight / 1.3)
  transform        scaleX(-1)
  left             40%
  z-index         -1
  div
    border         solid 1px $cityColor
  .line
    height         ($craneBorder / 1.3)
  .lineThree
    width          ($craneBorder / 1.4)
    animation-delay 3s
  .cabin, .arm, .picker, .weight
    animation-delay 3s

.craneThree
  width            ($craneWidth / 2)
  height           ($craneHeight / 2)
  left             60%
  z-index         -1
  div
    border         solid 1px $cityColor
  .line
    height         ($craneBorder / 2)
  .lineThree
    width          ($craneBorder / 2)
    animation-delay 1.5s
  .brickThree
    bottom         5%
  .brickOne, .brickTwo
    bottom         0
  .cabin, .arm, .picker, .weight
    animation-delay 1.5s
  
.crane
  perspective      600px
    
.lineOne
  transform-origin right 0
  animation        moveLineOne 12s infinite alternate
  
.lineTwo
  transform-origin top left
  animation        moveLineTwo 12s infinite alternate

.lineThree
  transform-origin right center
  animation        moveLineThree 12s ease-in-out infinite alternate
  
.cabin, .arm, .picker
  transform-origin 80% center
  animation        moveCrane 12s infinite alternate
  
.weight
  transform-origin 0 center
  animation        moveWeight 12s infinite alternate

@keyframes moveCrane
  0%, 20%
    transform rotateY(0)
  70%, 100%
    transform rotateY(45deg)
    
@keyframes moveWeight
  0%, 20%
    transform rotateY(0) translateX(0)
  70%, 100%
    transform rotateY(45deg) translateX(-50%)
    
@keyframes moveLineOne
  0%, 20%
    transform rotateY(0) rotateZ(-10deg)
  70%, 100%
    transform rotateY(45deg) rotateZ(-10deg)
    
@keyframes moveLineTwo
  0%, 20%
    transform rotateY(0) rotateZ(29deg)
  70%, 100%
    transform rotateY(15deg) rotateZ(29deg)
    
@keyframes moveLineThree
  0%
    transform translate(0, 0)
  20%
    transform translate(2500%, -18%)
  60%
    transform translate(11000%, -25%)    
  70%
    transform translate(9100%, -25%)
    height 30%
  90%, 100%
    transform translate(9100%, -15%)
    height 80%

html
  -ms-text-size-adjust        100%
  -webkit-text-size-adjust    100%
  -webkit-tap-highlight-color transparent
  
html, body
  height                      100%
  
*
  box-sizing                  border-box

body
  background              linear-gradient(to top, lighten($cityColor, 40%), hue($cityColor, 40%))
  -webkit-font-smoothing  antialiased
  -moz-osx-font-smoothing grayscale
  text-shadow             1px 1px 1px rgba(0,0,0,0.004)
  
#content
  height                  100%
  width                   100%
  display                 flex
  flex-direction          column
  align-items             center
  justify-content         center
  font-family             Ubuntu
  color                   white
  h1, p
    margin               -8rem 0 0 1rem
  p
    margin-top           .5rem
    
#license
  position                absolute
  bottom                  0
  right                   5px

under-construction.markdown

Under Construction

Pure CSS3 animated illustration based on the concept of a page being 'under construction'. Easily change the color theme with one variable.

A Pen by Marian Arlt on CodePen.

License.