.hero
  .hero-text
    img(src='https://echidna.com.au/subterra/white%20echidna.svg',height='90px')
    h1
      | Echidna
      br
      strong Earthmoving Equipment
        br
        small(onclick='$("body").toggleClass("saws")') for hire
  a(href='#').scroll-down
    div#scroller
header
  #stlogo
  span#hire HIRE
  h1
    span.fa.fa-phone  
    | 12345678
#about
  .echidna
    h1 About Echidna
    p Echidna designs and builds a wide range of high quality earthmoving and mining attachments.<br><br>Their products are designed and built in Australia and/or Europe, using only high quality components to provide long and trouble free life.<br><br>Echidna is the leader in hydraulic rock saw design, being the first to conceive and develop the automatic brake and reversible rotation function.<br><br>They continue to lead the way with innovations that provide you with safe and cost effective solutions to your rock cutting requirements.<br><br>At Echidna, safety has a high priority.<br><br>Their machines are designed with safety features such as automatic blade braking, double swivelling shield and reversible rotation on their diamond rock saws<br><br>Their equipment comes supplied with a thorough user's manual for safe operation and maintenance of the machines. They also provide training on the correct use of the equipment as required.<br><br>
  .subterra
    h1 About Subterra
    p Subterra is cool
form#Send
  h2 call 12345678
  input(placeholder='Name')
  br
  input(placeholder='Email',type='email')
  br
  input(placeholder='Phone',type='phone')
  br
  textarea(placeholder='Query')
ul#saws
  button(onclick='$("body").toggleClass("saws")') Back
  li
    .img
      img(src='https://echidna.com.au/images/products/high%20power%20diamond%20rocksaw.png', height='250')
    .namdes
      strong.name Excavator saws
      .sdes Models to suit excavators 1-60 tonnes
        br
        | Cuts rock concrete, steel & other materials
        br
        | Suitible for demolition, excavation& materials recycling
    .spec
      strong D2HS: 
      span 2-8 tonnes
      br
      strong D5HP: 
      span 20-35 tonnes
      br
      strong D6HP: 
      span 30-60 tonnes
      br
    .gall
      img(src='https://echidna.com.au/images/Gallery/d2hs_on_brokk.jpg', height='50')
      img(src='https://echidna.com.au/images/Gallery/d2hs_with_1200mm_blade.jpg', height='50')
    
    .hire
      h2 Pricing
      b 1-5 days: 
      span
      | CZK,
      span
      | €
      br
      strong 5-20 days: 
      span
      | CZK, 
      span
      | €
  li
    .img
      img(src='https://echidna.com.au/images/products/rotator.png', height='250')
    .namdes
      strong.name Hydraulic Rotator
      .sdes Use with Grapples, Grinders, Rock Saws & Buckets
         br
         | High flow through capability.
    .spec
      strong Maximum torque: 
      span 2500nm
      br
      strong Through Flow: 
      span 80 l/min
      br
    .gall
      img(src='https://echidna.com.au/images/Gallery/img_8246.jpg', height='50')
      img(src='https://echidna.com.au/images/Gallery/metal_pipes1.jpg', height='50')
    
    .hire
      h2 Pricing
      b 1-5 days: 
      span
      | CZK,
      span
      | €
      br
      strong 5-20 days: 
      span
      | CZK, 
      span
      | €
  li
    .img
      img(src='https://www.echidna-rocksaws.com.au/images/illustrations/auger-teeth-placement.png', height='250')
    .namdes
      strong.name Auger
      .sdes Powered by only the excavators hydraulic system
         br
         | Up to 9720nm of torque
    .spec
      strong Mounting: 
      span Universal Joint
      br
      strong Power Transmission: 
      span Direct Coupling
      br
    .gall
      img(src='https://www.echidna-rocksaws.com.au/images/illustrations/auger%20drive.jpg', height='50')
    
    .hire
      h2 Pricing
      b 1-5 days: 
      span
      | CZK,
      span
      | €
      br
      strong 5-20 days: 
      span
      | CZK, 
      span
      | €
button#con Enquire Now
button#prod(onclick='$("body").toggleClass("saws")')
footer
  h3 Subterra a.s
  span.fa.fa-phone
  |  12345678
  br
  span.fa.fa-fax
  |  12345678
  br
  span.fa.fa-envelope &nbsp;
  a#mess(href="#mail") Send us a message
  br
  #madeby
    | Design by 
    a(href='https://codepen.io/geordieF') Geordie Fischer
View Compiled
#back
  font-size 36px
  font-family segoe ui light, sego ui, inherit
  margin 0
  font-weight 100
  background tomato
  border solid 5px orange
  box-sizing border-box
  padding 5px 10px
  border-radius 7px
  position sticky
  transform translateX(50px)
  top 20px
  left 20px
  text-transform uppercase
  z-index 999
  border-top-right-radius 0
  border-bottom-right-radius 0
  display inline-block
  box-sizing border-box
  text-shadow none
  transition all 0.5s ease
#back:hover
  transform translateX(40px) rotate(-5deg) !important
  box-shadow 5px -5px 0px brown, 4px -4px 0px brown, 3px -3px 0px brown, 2px -2px 0px brown, 1px -1px 0px brown
#back:hover:after
  filter: drop-shadow(5px -5px 0px brown)
#back:active
  transform Rotate(-5deg) translateX(5px) !important
#back:before
  position absolute
  filter: drop-shadow(0px -0px 0px brown)
  left -44px
  transition all 0.25s ease
  top -5px
  content ""
  width 0
  z-index 2

  height 0
  border-right solid 40px orange
  border-top solid 31.5px transparent
  border-bottom solid 32px transparent
h1
  font-weight normal
  box-sizing border-box
  margin 0 !important
  padding 0
  padding-left 100px
  display inline-block
#stlogo {
  background-size 214px 52px
  width 214px
  height 52px
  display inline-block
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSI5MDhwdCIgaGVpZ2h0PSIyMjBwdCIgdmlld0JveD0iMCAwIDkwOCAyMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjZmZkMDA0IiBkPSIgTSAwLjAwIDAuMDAgTCA5MDguMDAgMC4wMCBMIDkwOC4wMCAyMjAuMDAgTCAwLjAwIDIyMC4wMCBMIDAuMDAgMC4wMCBaIiAvPjxwYXRoIGZpbGw9IiMyMzFmMjAiIGQ9IiBNIDc2Ni45OCAyOS45OSBDIDc3Ni40MSAyMi45MiA3ODguMjIgMTkuMDIgODAwLjAxIDE5LjI0IEMgODE0LjEzIDE5LjEyIDgyOC4xOCAyNC44OSA4MzguMjAgMzQuODQgQyA4NDguNDQgNDQuNzEgODU0LjY4IDU4LjY2IDg1NC45NyA3Mi45MCBDIDg1NS42MyA4OC45NSA4NDguNjkgMTA1LjA2IDgzNi42OCAxMTUuNjkgQyA4MjcuNDQgMTI0LjI0IDgxNS4xMSAxMjkuNDEgODAyLjUxIDEyOS42OSBDIDgwMi41MCAxMTQuOTQgODAyLjUzIDEwMC4xOSA4MDIuNDkgODUuNDQgQyA3OTIuODcgODUuNDYgNzgyLjk5IDg2Ljc3IDc3NC4zOCA5MS4yOCBDIDc2Ny4wNCA5NC45MCA3NjAuNzkgMTAwLjI2IDc1NC44NyAxMDUuODIgQyA3NDguNjUgOTcuMTQgNzQ0LjYyIDg2Ljc1IDc0NC40OCA3Ni4wMCBDIDc0My44NyA1OC4yMiA3NTIuNjAgNDAuNDQgNzY2Ljk4IDI5Ljk5IFoiIC8+PHBhdGggZmlsbD0iIzIzMWYyMCIgZD0iIE0gNTYuMjYgMzkuMjAgQyA2MS4zNSAzNS40NyA2Ny44OCAzNC43NiA3NC4wMSAzNC43MiBDIDkxLjkzIDM0Ljc2IDEwOS44NiAzNC43MSAxMjcuNzggMzQuNzUgQyAxMjcuNzYgNDUuOTEgMTI3LjcwIDU3LjA4IDEyNy44MiA2OC4yNCBDIDExNy4yNSA2OC4zNiAxMDYuNjcgNjguMDkgOTYuMTAgNjguMzQgQyA5MC43OCA2OC43NiA4Ny43NiA3NC4yOCA4Ny4zOSA3OS4xMSBDIDg3LjEyIDgzLjk3IDg2LjcxIDg5LjgzIDkwLjUwIDkzLjU0IEMgOTQuNDMgOTcuMTQgMTAwLjE1IDk2LjA3IDEwNS4wMSA5Ni4yNCBDIDExMC42NiA5Ni40MyAxMTYuNzUgOTUuMzYgMTIxLjk3IDk4LjE0IEMgMTI1LjUzIDEwMC4wMyAxMjcuNjAgMTA0LjAxIDEyNy40OCAxMDguMDAgQyAxMjcuNTUgMTI3LjAwIDEyNy40NiAxNDYuMDEgMTI3LjUzIDE2NS4wMSBDIDEyNy42MCAxNzAuNTEgMTI2Ljc0IDE3Ni41OSAxMjIuNjMgMTgwLjYzIEMgMTE4LjEyIDE4NS4zMyAxMTEuMjEgMTg2LjM4IDEwNS4wMCAxODYuNTAgQyA4Ni41NyAxODYuNDkgNjguMTQgMTg2LjUwIDQ5LjcyIDE4Ni40OSBDIDQ5Ljc0IDE3NS40MyA0OS43NSAxNjQuMzcgNDkuNzEgMTUzLjMyIEMgNTkuMTIgMTUzLjE3IDY4LjUzIDE1My4zOSA3Ny45NCAxNTMuMTkgQyA4MS4wMSAxNTMuMDUgODUuMDIgMTUyLjY3IDg2LjMwIDE0OS4zMiBDIDg3Ljc2IDE0NS4zOSA4Ny4yNSAxNDEuMDggODcuMjQgMTM2Ljk3IEMgODcuMTggMTM0LjM2IDg2LjU5IDEzMS4xOSA4My44OSAxMzAuMDcgQyA3NS45NSAxMjYuNDkgNjYuNzcgMTI5Ljk5IDU4LjgxIDEyNi40MyBDIDUzLjMzIDEyNC4zOSA0OS4zMyAxMTguOTEgNDkuNTIgMTEyLjk5IEMgNDkuNDcgOTMuMzIgNDkuNTQgNzMuNjUgNDkuNDggNTMuOTggQyA0OS4zNyA0OC40MCA1MS41NyA0Mi40OSA1Ni4yNiAzOS4yMCBaIiAvPjxwYXRoIGZpbGw9IiMyMzFmMjAiIGQ9IiBNIDEzNi4wMSAzNC43MyBDIDE0OS40MSAzNC43MyAxNjIuODEgMzQuNzQgMTc2LjIwIDM0LjczIEMgMTc2LjMwIDcwLjUxIDE3Ni4xOSAxMDYuMzAgMTc2LjI2IDE0Mi4wOCBDIDE3Ni4yMiAxNDUuNjEgMTc3LjQ0IDE0OC45NiAxNzguODYgMTUyLjEzIEMgMTgyLjYzIDE1My44NyAxODcuNjkgMTU0LjgxIDE5MS4xMiAxNTEuOTEgQyAxOTMuOTMgMTQ3LjUzIDE5My40OCAxNDIuMDMgMTkzLjcxIDEzNy4wNSBDIDE5My43NSAxMDIuOTQgMTkzLjc0IDY4LjgyIDE5My43MiAzNC43MSBDIDI3Mi4yNCAzNC43NSAzNTAuNzcgMzQuNzUgNDI5LjI5IDM0LjcxIEMgNDI5LjI3IDQ2LjQ1IDQyOS4yMSA1OC4xOCA0MjkuMzIgNjkuOTIgQyA0MTguOTggNzAuMTEgNDA4LjY0IDY5LjkxIDM5OC4yOSA3MC4wNSBDIDM5OC4yMyA3OC42OSAzOTguMjggODcuMzQgMzk4LjI2IDk1Ljk5IEMgNDA4LjYwIDk2LjAyIDQxOC45MyA5NS45OCA0MjkuMjcgOTYuMDEgQyA0MjkuMjkgMTA2Ljg5IDQyOS4yMSAxMTcuNzcgNDI5LjMxIDEyOC42NiBDIDQxOC45NyAxMjguODEgNDA4LjYzIDEyOC43NSAzOTguMjkgMTI4LjY4IEMgMzk4LjIxIDEzNi42MCAzOTguMjkgMTQ0LjUyIDM5OC4yNyAxNTIuNDQgQyA0MTEuNzYgMTUyLjU1IDQyNS4yNCAxNTIuNDkgNDM4LjczIDE1Mi40NiBDIDQzOC43MCAxMTMuMzMgNDM4LjgzIDc0LjIxIDQzOC42NyAzNS4wOCBDIDQ2MS40MiAzNC45MCA0ODQuMTggMzUuMDUgNTA2Ljk0IDM1LjAwIEMgNTI1Ljk5IDM1LjE1IDU0NS4wOCAzMy45MiA1NjQuMTAgMzUuNDggQyA1NzAuNTkgMzYuMDcgNTc4LjI1IDM4LjQwIDU4MC42NiA0NS4xOCBDIDU4NC4wNyA1NC43MSA1ODIuNjUgNjUuMDggNTgzLjAwIDc1LjAwIEMgNTgyLjc1IDg1LjQzIDU4NC4yMyA5Ny4wMSA1NzguMjEgMTA2LjIwIEMgNTc1LjEzIDExMS4xNCA1NjkuMDQgMTEyLjAyIDU2My43OSAxMTIuODAgQyA1NjcuOTggMTEzLjY0IDU3Mi43MiAxMTMuNzggNTc1LjkyIDExNy4wMiBDIDU4MS44MyAxMjIuNTkgNTgyLjc1IDEzMS4yNyA1ODIuOTYgMTM4Ljk1IEMgNTgzLjAxIDE1NC44MSA1ODMuMDYgMTcwLjY3IDU4Mi45MyAxODYuNTIgQyA1NzAuMTAgMTg2LjQ2IDU1Ny4yNyAxODYuNTMgNTQ0LjQ0IDE4Ni40OCBDIDU0NC41NiAxNzIuNjYgNTQ0LjQ1IDE1OC44NSA1NDQuNTEgMTQ1LjAzIEMgNTQ0LjQ0IDE0MC4zMSA1NDQuMTUgMTM0Ljg4IDU0MC41MyAxMzEuNDAgQyA1MzcuNDkgMTI4LjQ1IDUzMi45NSAxMjguODQgNTI5LjA2IDEyOC41OSBDIDUyOC44OCAxNDcuOTAgNTI5LjE0IDE2Ny4yMSA1MjguOTIgMTg2LjUyIEMgNTE1LjY0IDE4Ni40NyA1MDIuMzYgMTg2LjQ4IDQ4OS4wOSAxODYuNTMgQyA0ODguOTYgMTcyLjk5IDQ4OC44NyAxNTkuNDUgNDg5LjI1IDE0NS45MiBDIDQ4OC45NSAxNDEuMjAgNDg5LjExIDEzNS45MSA0ODUuOTYgMTMyLjA0IEMgNDgzLjE5IDEyOC41NCA0NzguMjggMTI4LjkwIDQ3NC4zMCAxMjguMzMgQyA0NzQuMjIgMTQ3LjcxIDQ3NC4yMyAxNjcuMDkgNDc0LjMwIDE4Ni40OCBDIDQ0NS4yMSAxODYuNTEgNDE2LjExIDE4Ni40OSAzODcuMDEgMTg2LjQ5IEMgMzgwLjg5IDE4Ni4yNSAzNzQuNDIgMTg2LjA3IDM2OC45NCAxODMuMDMgQyAzNjMuOTcgMTgwLjE5IDM2MS43OSAxNzQuNDcgMzYwLjg0IDE2OS4xMiBDIDM1OS42MiAxNjEuODMgMzU5Ljc2IDE1NC40MCAzNTkuNzYgMTQ3LjAzIEMgMzU5Ljc5IDEyMS4zNiAzNTkuNzEgOTUuNjggMzU5LjgwIDcwLjAwIEMgMzU0LjAyIDY5Ljk3IDM0OC4yNCA2OS45NyAzNDIuNDYgNzAuMDcgQyAzNDIuNTQgMTA4Ljg4IDM0Mi40NyAxNDcuNjggMzQyLjQ5IDE4Ni40OSBDIDMyOS42NiAxODYuNTAgMzE2LjgzIDE4Ni40OSAzMDQuMDAgMTg2LjQ5IEMgMzA0LjAwIDE0Ny42NiAzMDQuMDAgMTA4LjgzIDMwNC4wMCA3MC4wMCBDIDI5OS4xNiA2OS45OSAyOTQuMzEgNjkuOTYgMjg5LjQ4IDcwLjA5IEMgMjg5LjAyIDgxLjU1IDI5MS42NCA5NC40OSAyODQuNDMgMTA0LjQzIEMgMjgwLjYzIDExMC4wNiAyNzMuNzEgMTExLjY0IDI2Ny40MyAxMTIuNTkgQyAyNzAuODEgMTE0LjI3IDI3NC43MiAxMTQuMjYgMjc4LjE3IDExNS43NyBDIDI4NC40MCAxMTguMjcgMjg5LjAxIDEyNC4zMyAyODkuMzYgMTMxLjA5IEMgMjg5LjczIDEzOS4wNyAyODkuMzkgMTQ3LjA3IDI4OS41MCAxNTUuMDUgQyAyODkuNDQgMTYyLjA5IDI5MC4wMyAxNjkuNDMgMjg3LjQxIDE3Ni4xMiBDIDI4NS44OSAxNzkuNzAgMjgzLjIzIDE4My4wMCAyNzkuNTIgMTg0LjQyIEMgMjc0Ljk1IDE4Ni4yNyAyNjkuOTMgMTg2LjQyIDI2NS4wNiAxODYuNDkgQyAyMzEuMDUgMTg2LjUwIDE5Ny4wNSAxODYuNDkgMTYzLjA0IDE4Ni41MCBDIDE1Ni4zMSAxODYuMzggMTQ5LjE0IDE4Ny4wMSAxNDIuODcgMTg0LjA4IEMgMTM3LjY5IDE4MS41OCAxMzYuMjAgMTc1LjMyIDEzNi4yNCAxNzAuMDMgQyAxMzYuMjQgMTQyLjAxIDEzNi4yNCAxMTQuMDAgMTM2LjI1IDg1Ljk4IEMgMTM1Ljc4IDY4LjkwIDEzNi4wOCA1MS44MiAxMzYuMDEgMzQuNzMgWiIgLz48cGF0aCBmaWxsPSIjMjMxZjIwIiBkPSIgTSA2MDAuMDEgNDAuMDMgQyA2MDUuMjUgMzUuNjAgNjEyLjQ3IDM0Ljg0IDYxOS4wOCAzNC43MiBDIDYzMy4wNCAzNC43NyA2NDYuOTkgMzQuNjcgNjYwLjk1IDM0Ljc4IEMgNjY4LjA1IDM1LjE4IDY3NS45NCAzNS40OSA2ODEuNjMgNDAuMzIgQyA2ODYuNDIgNDQuODAgNjg3LjM1IDUxLjc4IDY4Ny41MSA1OC4wMSBDIDY4OC4wNSAxMDAuODMgNjg3LjU4IDE0My42NiA2ODcuODAgMTg2LjQ4IEMgNjc0Ljk4IDE4Ni41MyA2NjIuMTUgMTg2LjQ1IDY0OS4zMyAxODYuNTMgQyA2NDkuMTUgMTc1LjE2IDY0OS4zNCAxNjMuODAgNjQ5LjIzIDE1Mi40MyBDIDY0My41NiAxNTIuNTUgNjM3LjkwIDE1Mi40OCA2MzIuMjQgMTUyLjUyIEMgNjMyLjIxIDE2My44NCA2MzIuMjkgMTc1LjE3IDYzMi4xOSAxODYuNDkgQyA2MTkuMTUgMTg2LjUxIDYwNi4xMiAxODYuNDYgNTkzLjA5IDE4Ni41MyBDIDU5Mi42OSAxNDQuMzUgNTkzLjQzIDEwMi4xOSA1OTMuMjYgNjAuMDEgQyA1OTMuMjkgNTIuOTUgNTk0LjQ0IDQ0Ljk4IDYwMC4wMSA0MC4wMyBaIiAvPjxwYXRoIGZpbGw9IiNmZmQwMDQiIGQ9IiBNIDIzMy40OSA3MC4wNSBDIDIzOC40NSA3MC4wNiAyNDUuNjIgNjkuMTQgMjQ4LjE1IDc0LjYyIEMgMjQ5LjQ3IDc5Ljk5IDI0OS41MiA4NS44OSAyNDguMDYgOTEuMjQgQyAyNDUuNjUgOTYuODAgMjM4LjQ2IDk1LjkxIDIzMy41MCA5Ni4wNCBDIDIzMy41MCA4Ny4zOCAyMzMuNTIgNzguNzEgMjMzLjQ5IDcwLjA1IFoiIC8+PHBhdGggZmlsbD0iI2ZmZDAwNCIgZD0iIE0gNDczLjI4IDk2LjA0IEMgNDczLjMxIDg3LjI0IDQ3My4xNSA3OC40NSA0NzMuMzQgNjkuNjUgQyA0NzcuNDggNzAuMDcgNDgxLjkwIDY5LjU2IDQ4NS43OSA3MS4yNyBDIDQ4OS4xMCA3Mi43MiA0ODguOTcgNzcuMDEgNDg5LjI1IDgwLjA1IEMgNDg5LjE0IDg0LjQ1IDQ4OS44NSA4OS40MSA0ODcuNDEgOTMuMzEgQyA0ODMuNzAgOTYuODYgNDc3Ljk1IDk1LjY3IDQ3My4yOCA5Ni4wNCBaIiAvPjxwYXRoIGZpbGw9IiNmZmQwMDQiIGQ9IiBNIDUyOS4xMCA2OS42MyBDIDUzMy4zNyA3MC4xMiA1MzguMjIgNjkuNDcgNTQxLjg2IDcyLjIwIEMgNTQ0Ljc5IDc0LjU0IDU0NC40NyA3OC42NSA1NDQuNTUgODIuMDEgQyA1NDQuNDMgODUuNzggNTQ1LjAxIDkwLjI0IDU0Mi4xNiA5My4yMiBDIDUzOC41OSA5Ni40NCA1MzMuNDIgOTUuODYgNTI4Ljk4IDk2LjA1IEMgNTI5LjA5IDg3LjI0IDUyOC44OCA3OC40MyA1MjkuMTAgNjkuNjMgWiIgLz48cGF0aCBmaWxsPSIjZmZkMDA0IiBkPSIgTSA2MzIuMjggNzcuOTcgQyA2MzIuNDEgNzIuMDcgNjM5LjM0IDY3LjQxIDY0NC43NCA3MC4yNiBDIDY0Ny43NSA3MS41MyA2NDkuMzggNzQuNzYgNjQ5LjI2IDc3Ljk0IEMgNjQ5LjI5IDkyLjM5IDY0OS4yMCAxMDYuODQgNjQ5LjI5IDEyMS4zMCBDIDY0My41OSAxMjEuMjQgNjM3Ljg5IDEyMS4yOSA2MzIuMjAgMTIxLjI2IEMgNjMyLjMzIDEwNi44MyA2MzIuMTMgOTIuNDAgNjMyLjI4IDc3Ljk3IFoiIC8+PHBhdGggZmlsbD0iIzIzMWYyMCIgZD0iIE0gNzQ3LjkyIDEyNi44MyBDIDc1NC44NSAxMDUuODQgNzc1LjM0IDg5LjY0IDc5Ny43MCA4OS4zNSBDIDc5Ny43OCAxMDQuMTMgNzk3LjczIDExOC45MSA3OTcuNzMgMTMzLjY4IEMgODA2LjI2IDEzMy40NiA4MTQuOTkgMTMyLjYwIDgyMi44OCAxMjkuMTEgQyA4MzEuMzUgMTI1LjUwIDgzOC41OSAxMTkuNjEgODQ1LjE4IDExMy4yOCBDIDg1My40NSAxMjQuMjAgODU3LjE3IDEzOC40NCA4NTUuMTQgMTUyLjAxIEMgODUyLjkxIDE2OC44NCA4NDIuNDcgMTg0LjM0IDgyNy42NiAxOTIuNjcgQyA4MTQuOTQgMjAwLjA2IDc5OS4xOSAyMDEuNzYgNzg1LjA5IDE5Ny43NSBDIDc3MC4zMyAxOTMuNTggNzU3LjYzIDE4Mi44NCA3NTAuODcgMTY5LjEwIEMgNzQ0LjMyIDE1Ni4xNiA3NDMuMjUgMTQwLjU2IDc0Ny45MiAxMjYuODMgWiIgLz48cGF0aCBmaWxsPSIjZmZkMDA0IiBkPSIgTSAyMzMuNTEgMTI4LjY2IEMgMjM4LjI0IDEyOC44OSAyNDQuNDIgMTI4LjA1IDI0Ny41MCAxMzIuNTMgQyAyNDkuMjcgMTM2LjA2IDI0OS4wNiAxNDAuMTUgMjQ5LjA0IDE0My45OSBDIDI0OC45NyAxNDcuMDUgMjQ4LjU1IDE1MC45MyAyNDUuMzkgMTUyLjM3IEMgMjQxLjY2IDE1NC4wMyAyMzcuNDYgMTUzLjYxIDIzMy40OSAxNTMuNzUgQyAyMzMuNTIgMTQ1LjM5IDIzMy40OSAxMzcuMDMgMjMzLjUxIDEyOC42NiBaIiAvPjwvc3ZnPg==')
}
header.scrolled
  top -82px
header
  background-color: #FFD004
  padding 15px 20px
  position fixed
  transition top 0.5s ease
  top 0
  left 50%
  margin-left -750px
  z-index 999
  width 1500px
  box-shadow -1498px 0 0 0 darken(#FFD004 ,7%), 1500px 0 0 0 darken(#FFD004 ,7%)
  box-sizing border-box
  height 82px
  #hire
    background brown
    font-size 22px
    padding 2px 5px
    color #fff
    position relative
    right 95px
    transition all 0.5s ease
    bottom 2px
    display inline-block
    transform scale(0.8) rotate(-12deg)
  h1
    display inline-block
    margin 0
    font-weight normal
    position relative
    bottom 8px
    float right
    padding-top 12px
body
  position absolute
  top 0
  left 50%
  overflow-x hidden
  width 1500px
  margin-left -750px
.hero
  width 100vw
  margin-top 82px
  overflow:auto
  color #fff
  transition height 0.5s ease, margin-bottom 0.5s ease
  position relative
  left calc((50vw - 750px) * -1)
  height calc(90vh - 72px)
  background-image url(https://i.ytimg.com/vi/i4otccSyeww/maxresdefault.jpg)
  background-size cover
  box-shadow calc(50vw - 750px) 0 rgba(0,0,0,0.25) inset, calc((50vw - 750px) * -1) 0 rgba(0,0,0,0.25) inset
  background-position center top
  .scroll-down:hover
    animation-name none
    animation-delay 0s
    animation-iteration-count infinite
    transform scaleX(1.25) ScaleY(0.9)
  .scroll-down
    position absolute
    transition all 0.5s ease
    bottom 30px
    animation-delay 1s
    left calc(50% - 10px)
    div
      transform rotate(45deg)
      border-right solid 2px #fff
      border-bottom solid 2px #fff
      box-sizing border-box
      width 40px
      height 40px
  .hero-text
    > img
      position absolute
      bottom 20px
      right 20px
    position absolute
    bottom 70px
    left 50%
    text-shadow 0 0 15px #000
    width 1500px
    margin-left -750px
    transform skewx(-7deg)
    color #fff
    font-size 36px
    perspective 1000px
    padding 0
    small
      font-size 36px
      font-family segoe ui light, sego ui, inherit
      margin 0
      font-weight 100
      color #fff
      background tomato
      border solid 5px orange
      box-sizing border-box
      padding 8.5px
      border-radius 7px
      position relative
      top -10px
      left 20px
      text-transform uppercase
      z-index 999
      border-top-right-radius 0
      border-bottom-right-radius 0
      display inline-block
      box-sizing border-box
      text-shadow none
      transform skewX(7deg)
      transition all 0.5s ease
    small:hover
      transform skewX(7deg) translateX(10px) !important
      box-shadow 5px -5px 0px brown, 4px -4px 0px brown, 3px -3px 0px brown, 2px -2px 0px brown, 1px -1px 0px brown
    small:hover:after
      filter: drop-shadow(5px -5px 0px brown)
    small:active
      transform skewX(7deg) translateX(15px) !important
    small:after
      position absolute
      right -44px
      transition all 0.25s ease
      top -5px
      content ""
      width 0
      z-index 2
      
      height 0
      border-left solid 40px orange
      border-top solid 31.5px transparent
      border-bottom solid 32px transparent
    h1
      font-weight normal
      box-sizing border-box
      margin 0 !important
      padding 0
      font-size 72px
      padding-left 100px
      display inline-block
@media (max-width:1500px)
  #con
    right 10px !important
  #prod
    left 10px !important
  footer
    border-radius 0 !important
  .hero
    margin-left 0
    left 0
    width 100%
    box-shadow none
    .hero-text
      margin-left 0
      width auto
      left 0
  body
    left 0
    width 100%
    margin-left 0
  html
    overflow-x hidden
  header
    width 100%
    margin-left 0
    left 0
ul#saws {
  padding: 0;
  width 100%
  margin: 0;
  overflow hidden
}
ul#saws li {
  display: flex;
  flex 1
  margin: 10px;
  border-radius: 7px;
  border: solid 2px #dcdcdc;
  width auto
  background: #eee;
}
ul#saws li > div {
  width: 250px;
  flex 1
  display: inline-block;
  position: relative;
  height: 250px;
  padding: 15px;
  box-sizing: border-box;
}
ul#saws li > div:after {
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: -2px;
  content: "";
  width: 2px;
  background: #dcdcdc;
}
ul#saws li > div.last:after {
  background transparent
}
ul#saws li .img {
  padding: 0;
  text-align: center;
}
#about
  position absolute
  left 0
  width 100%
  transition all 0.5s ease
  display flex
  div
    flex 1
#saws
  transform translate(-100%)
  opacity 0
  transition all 0.5s ease
body.saws
  .hero
    margin-bottom 20px
    height 0
  #about
    left 100%
    opacity 0
  #saws
    transform translate(0%)
    opacity 1
footer
  padding 25px
  position relative
  z-index 999999
  background gainsboro
  h3
    margin 0
  border-radius 5px 5px 0 0
  #madeby
    position absolute
    bottom 25px
    right 25px
  #madeby, a
    color gray
#Send
  display none
#con, #prod
  position fixed
  right calc(50vw - 750px)
  bottom 5px
  border solid 6px orange
  border-radius 5px
  color #fff
  background tomato
  z-index 999
  font-size 22px
  padding 5px 15px
#prod
  left calc(50vw - 750px)
  transition opacity 0.5s ease
#prod:before
  content "View Available Equipment"
.saws #prod:before
  content "Back"
.gall
  overflow visible !important
  overflow-y hidden
.gall img
  margin 2.5px
  max-width 225px
View Compiled
var oldscroll = 0;
var scr = function() {
  $(".hero").css('background-position', 'center ' + $(document).scrollTop() / 2 + "px")
  if ($(document).scrollTop() >= (window.innerHeight * 0.9) - 82 && $(document).scrollTop() > oldscroll && document.body.className != "saws") {
    $("header").addClass("scrolled")
  } else {
    if (document.body.className == "saws" && $(document).scrollTop() > oldscroll) {
      $("header").addClass("scrolled")
    } else {
      $("header").removeClass("scrolled")
    }
  }
  oldscroll = $(document).scrollTop();
  if (($(document).scrollTop() + window.innerHeight) > $("footer").offset().top) {
    $("#con, #prod").css('bottom', 5 + (($("footer").offset().top - ($(document).scrollTop() + window.innerHeight))) * -1);
    console.log("hello")
  } else {
    $("#con, #prod").css('bottom', "5px")
  }
}
$(document).scroll(scr)
scr()
$(".scroll-down").click(function() {
  $('html, body').animate({
    scrollTop: $('#about').offset().top
  }, 1000)
})
$("#mess, #con").click(function() {
  bootbox.dialog({
    message: $("#Send").html(),
    title: "Send a message",
    buttons: {
      success: {
        label: "Send",
        className: "btn-warning",
        callback: function() {
          // send
        }
      }
    }
  });
})
$("#saws .gall img").click(function() {
  bootbox.alert("<img src='" + $(this).attr('src') + "' width='100%'>")
})
$("#saws .gall").each(function( index ) {
  $(this).children(":last").attr('width','auto')
  $(this).children(":last").attr('height','150px')
  $(this).children(":last").css('display','block')
})
$("#saws li").each(function (i) {
  $(this).children(":last").addClass('last')
})

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css
  3. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/stickyfill/1.1.3/stickyfill.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.3/jquery.sticky.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js
  5. https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js