Skip to content

Instantly share code, notes, and snippets.

@Bestulo

Bestulo/index.pug

Created March 1, 2019 16:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Bestulo/c9b001a47440d74c97e47146627bd56f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Bestulo/c9b001a47440d74c97e47146627bd56f to your computer and use it in GitHub Desktop.
Download ZIP
Under Construction
Raw
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')
Raw
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
Raw
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment