.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
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')
})