Created
February 28, 2018 18:12
-
-
Save kvyb/32f40d81ef16d0ff2da87bdc82601dc9 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script> | |
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | |
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | |
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | |
| })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); | |
| ga('create', 'UA-99591498-1', 'auto'); | |
| ga('send', 'pageview'); | |
| </script> | |
| <meta charset="utf-8"> | |
| <meta name="google-site-verification" content="hLB9t-HkoQxgrZ8PyCYl2PniIWEGfXqrvSTnd5_KZWI" /> | |
| <title>Depicture.io - full service web development.</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <meta name="description" content="Depicture web development studio - contact us for affordable full service web development of your unique website or web application."> | |
| <meta http-equiv="content-type" content="text/html;charset=UTF-8"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <link rel="stylesheet" href="new-style.css"> | |
| <link rel="stylesheet" type="text/css" href="media-style.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script> | |
| if($(window).width() <= 600) { | |
| window.location = "https://depicture.io/mob"; | |
| } | |
| $(window).on('resize',function(){ | |
| if($(window).width() <= 600) { | |
| window.location = "https://depicture.io/mob"; | |
| } | |
| }); | |
| </script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.js"></script> | |
| <script src="js/CSSRulePlugin.js"></script> | |
| <style> | |
| /* GRID */ | |
| .grid, | |
| .grid-container { | |
| height: 100%; | |
| width: 100%; | |
| left: 0; | |
| overflow: hidden | |
| } | |
| .grid-container { | |
| z-index: 9; | |
| top: 0; | |
| position: absolute | |
| } | |
| .grid { | |
| z-index: 9; | |
| position: absolute; | |
| top: 0 | |
| } | |
| .grid__item { | |
| z-index: 9; | |
| width: -webkit-calc(100% / 6); | |
| width: calc(100% / 6); | |
| height: -webkit-calc(100% / 4); | |
| height: calc(100% / 4); | |
| position: fixed; | |
| } | |
| .grid__item.cross-top-1 { | |
| top: 0; | |
| left: 0 | |
| } | |
| .grid__item.cross-top-2 { | |
| top: 0; | |
| left: -webkit-calc((100vw / 6)); | |
| left: calc((100vw / 6)) | |
| } | |
| .grid__item.cross-top-3 { | |
| top: 0; | |
| left: -webkit-calc((100vw / 6) *2.5); | |
| left: calc((100vw / 6) *2.5) | |
| } | |
| .grid__item.cross-top-4 { | |
| top: 0; | |
| left: -webkit-calc((100vw / 6) *3); | |
| left: calc((100vw / 6) *3) | |
| } | |
| .grid__item.cross-top-5 { | |
| top: 0; | |
| left: -webkit-calc((100vw / 6) *4); | |
| left: calc((100vw / 6) *4) | |
| } | |
| .grid__item.cross-middle-1 { | |
| top: -webkit-calc((100vh / 4)); | |
| top: calc((100vh / 4)); | |
| left: 0 | |
| } | |
| .grid__item.cross-middle-2 { | |
| top: -webkit-calc((100vh / 4)); | |
| top: calc((100vh / 4)); | |
| left: -webkit-calc((100vw / 6)); | |
| left: calc((100vw / 6)) | |
| } | |
| .grid__item.cross-middle-3 { | |
| top: -webkit-calc((100vh / 4)); | |
| top: calc((100vh / 4)); | |
| left: -webkit-calc((100vw / 6) *2.5); | |
| left: calc((100vw / 6) *2.5); | |
| opacity: 1 | |
| } | |
| .grid__item.cross-middle-4 { | |
| top: -webkit-calc((100vh / 4)); | |
| top: calc((100vh / 4)); | |
| left: -webkit-calc((100vw / 6) *3); | |
| left: calc((100vw / 6) *3) | |
| } | |
| .grid__item.cross-middle-5 { | |
| top: -webkit-calc((100vh / 4)); | |
| top: calc((100vh / 4)); | |
| left: -webkit-calc((100vw / 6) *4); | |
| left: calc((100vw / 6) *4) | |
| } | |
| .grid__item.cross-bottom-1 { | |
| top: -webkit-calc((100vh / 4) *2); | |
| top: calc((100vh / 4) *2); | |
| left: 0 | |
| } | |
| .grid__item.cross-bottom-2 { | |
| top: -webkit-calc((100vh / 4) *2); | |
| top: calc((100vh / 4) *2); | |
| left: -webkit-calc((100vw / 6)); | |
| left: calc((100vw / 6)) | |
| } | |
| .grid__item.cross-bottom-3 { | |
| top: -webkit-calc((100vh / 4) *2); | |
| top: calc((100vh / 4) *2); | |
| left: -webkit-calc((100vw / 6) *2.5); | |
| left: calc((100vw / 6) *2.5) | |
| } | |
| .grid__item.cross-bottom-4 { | |
| top: -webkit-calc((100vh / 4) *2); | |
| top: calc((100vh / 4) *2); | |
| left: -webkit-calc((100vw / 6) *3); | |
| left: calc((100vw / 6) *3) | |
| } | |
| .grid__item.cross-bottom-5 { | |
| top: -webkit-calc((100vh / 4) *2); | |
| top: calc((100vh / 4) *2); | |
| left: -webkit-calc((100vw / 6) *4); | |
| left: calc((100vw / 6) *4) | |
| } | |
| .grid__item.cross-mobile { | |
| display: none | |
| } | |
| .grid__item.cross-middle-3 span { | |
| right: -webkit-calc((-100vh / 4 / 2 / 2) - 2px)!important; | |
| right: calc((-100vh / 4 / 2 / 2) - 2px)!important; | |
| bottom: -webkit-calc((-100vh / 4 / 2 / 2) - 2px)!important; | |
| bottom: calc((-100vh / 4 / 2 / 2) - 2px)!important; | |
| width: -webkit-calc(100vh / 4 / 2)!important; | |
| width: calc(100vh / 4 / 2)!important; | |
| padding-bottom: -webkit-calc(100vh / 4 / 2)!important; | |
| padding-bottom: calc(100vh / 4 / 2)!important | |
| } | |
| .grid__item.cross-middle-3.hide { | |
| opacity: 0; | |
| -webkit-transition: all .22s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .22s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| /*ROTATE HERE */ | |
| .grid__item span { | |
| position: absolute; | |
| right: -webkit-calc((-100vh / 3 / 2 / 2 / 2) - 2px); | |
| right: calc((-100vh / 2.5/ 2 / 2 / 2) - 2px); | |
| bottom: -webkit-calc((-100vh / 4 / 2 / 2 / 2) - 2px); | |
| bottom: calc((-100vh / 4 / 2 / 2 / 2) - 2px); | |
| width: -webkit-calc(((100vh / 3)/ 2)/ 2); | |
| width: calc(((100vh / 2.5)/ 2)/ 2); | |
| padding-bottom: -webkit-calc(((100vh / 4)/ 2)/ 2); | |
| padding-bottom: calc(((100vh / 4)/ 2)/ 2); | |
| height: 0; | |
| -webkit-transition: all .22s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .22s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item span:after, | |
| .grid__item span:before { | |
| content: ''; | |
| display: inline-block; | |
| width: 50%; | |
| height: 2px; | |
| background: rgba(21, 23, 28, .45); | |
| position: absolute | |
| } | |
| .grid__item span:before { | |
| top: -webkit-calc(50% - 1px); | |
| top: calc(50% - 1px); | |
| left: 0; | |
| -webkit-transform: rotate(0) translateZ(0); | |
| transform: rotate(0) translateZ(0); | |
| -webkit-transform-origin: bottom right; | |
| -ms-transform-origin: bottom right; | |
| transform-origin: bottom right; | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item span:after { | |
| top: -webkit-calc(50% - 1px); | |
| top: calc(50% - 1px); | |
| left: -webkit-calc(50% + 1px); | |
| left: calc(50% + 1px); | |
| -webkit-transform: rotate(0) translateZ(0); | |
| transform: rotate(0) translateZ(0); | |
| -webkit-transform-origin: bottom left; | |
| -ms-transform-origin: bottom left; | |
| transform-origin: bottom left; | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| /* AND ROTATE HERE */ | |
| .grid__item span:last-of-type { | |
| -ms-transform: rotate(90deg); | |
| -webkit-transform: rotate(90deg) translateZ(0); | |
| transform: rotate(90deg) translateZ(0) | |
| } | |
| .grid__item span:last-of-type:before { | |
| left: 0 | |
| } | |
| .grid__item span:last-of-type:after { | |
| left: 50% | |
| } | |
| .grid__item span.cross-mobile { | |
| display: none | |
| } | |
| .grid__item.crossRotate span { | |
| -webkit-transform: scale(1); | |
| -ms-transform: scale(1); | |
| transform: scale(1) | |
| } | |
| .grid__item.crossRotate span:first-of-type { | |
| -webkit-transform: rotate(45deg) translateZ(0); | |
| transform: rotate(45deg) translateZ(0); | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossRotate span:last-of-type { | |
| -webkit-transform: rotate(-45deg) translateZ(0); | |
| transform: rotate(-45deg) translateZ(0); | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossRotate.is-hover span { | |
| -webkit-transform: scale(1.1); | |
| -ms-transform: scale(1.1); | |
| transform: scale(1.1) | |
| } | |
| .grid__item.crossRotateWhite { | |
| z-index: 650!important; | |
| cursor: pointer | |
| } | |
| .grid__item.crossRotateWhite span:after, | |
| .grid__item.crossRotateWhite span:before { | |
| background: #fff!important | |
| } | |
| .grid__item.crossRotateWhite span { | |
| -webkit-transform: scale(1); | |
| -ms-transform: scale(1); | |
| transform: scale(1) | |
| } | |
| .grid__item.crossRotateWhite span:first-of-type { | |
| -webkit-transform: rotate(45deg) translateZ(0); | |
| transform: rotate(45deg) translateZ(0); | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossRotateWhite span:last-of-type { | |
| -webkit-transform: rotate(-45deg) translateZ(0); | |
| transform: rotate(-45deg) translateZ(0); | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossRotateWhite.is-hover span, | |
| .grid__item.crossRotateWhite:focus span, | |
| .grid__item.crossRotateWhite:hover span { | |
| -webkit-transform: scale(1.1); | |
| -ms-transform: scale(1.1); | |
| transform: scale(1.1) | |
| } | |
| .grid__item.crossToArrowDown { | |
| z-index: 500 | |
| } | |
| .grid__item.crossToArrowDown.overflow { | |
| z-index: auto | |
| } | |
| .grid__item.crossToArrowDown span { | |
| cursor: pointer | |
| } | |
| .grid__item.crossToArrowDown span:after, | |
| .grid__item.crossToArrowDown span:before { | |
| background: #fff | |
| } | |
| .grid__item.crossToArrowDown span:first-of-type { | |
| z-index: 10 | |
| } | |
| .grid__item.crossToArrowDown span:first-of-type:before { | |
| left: 0; | |
| top: 100%; | |
| -webkit-transform: rotate(45deg) scaleX(1.5); | |
| -ms-transform: rotate(45deg) scaleX(1.5); | |
| transform: rotate(45deg) scaleX(1.5); | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowDown span:first-of-type:after { | |
| top: 100%; | |
| left: 50%; | |
| -webkit-transform: rotate(-45deg) scaleX(1.5); | |
| -ms-transform: rotate(-45deg) scaleX(1.5); | |
| transform: rotate(-45deg) scaleX(1.5); | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowLeft, | |
| .grid__item.crossToArrowLeft.is-hover { | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowDown.is-hover { | |
| -webkit-animation: hoverArrowDown .44s linear forwards; | |
| animation: hoverArrowDown .44s linear forwards | |
| } | |
| .grid__item.crossToArrowLeft { | |
| z-index: 100; | |
| -webkit-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| transform: translateX(0); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowLeft span:after, | |
| .grid__item.crossToArrowLeft span:before { | |
| background: #fff | |
| } | |
| .grid__item.crossToArrowLeft span:first-of-type:after { | |
| left: -webkit-calc(50% - 1px); | |
| left: calc(50% - 1px) | |
| } | |
| .grid__item.crossToArrowLeft span:last-of-type:before { | |
| left: 0; | |
| top: 100%; | |
| -webkit-transform: rotate(45deg) scaleX(1.5); | |
| -ms-transform: rotate(45deg) scaleX(1.5); | |
| transform: rotate(45deg) scaleX(1.5); | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowLeft span:last-of-type:after { | |
| top: 100%; | |
| -webkit-transform: rotate(-45deg) scaleX(1.5); | |
| -ms-transform: rotate(-45deg) scaleX(1.5); | |
| transform: rotate(-45deg) scaleX(1.5); | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowLeft.is-hover { | |
| -webkit-transform: translateX(-10px); | |
| -ms-transform: translateX(-10px); | |
| transform: translateX(-10px); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowRight { | |
| z-index: 100; | |
| -webkit-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| transform: translateX(0); | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowRight span:after, | |
| .grid__item.crossToArrowRight span:before { | |
| background: #fff | |
| } | |
| .grid__item.crossToArrowRight span:first-of-type:after { | |
| left: -webkit-calc(50% - 1px); | |
| left: calc(50% - 1px) | |
| } | |
| .grid__item.crossToArrowRight span:last-of-type:before { | |
| left: 0; | |
| top: 0; | |
| -webkit-transform: rotate(-45deg) scaleX(1.5); | |
| -ms-transform: rotate(-45deg) scaleX(1.5); | |
| transform: rotate(-45deg) scaleX(1.5); | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowRight span:last-of-type:after { | |
| top: 0; | |
| -webkit-transform: rotate(45deg) scaleX(1.5); | |
| -ms-transform: rotate(45deg) scaleX(1.5); | |
| transform: rotate(45deg) scaleX(1.5); | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowRight.is-hover, | |
| .sub-nav:after { | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowRight.is-hover { | |
| -webkit-transform: translateX(10px); | |
| -ms-transform: translateX(10px); | |
| transform: translateX(10px); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.arrowDownToArrowUp { | |
| z-index: 550 | |
| } | |
| .grid__item.arrowDownToArrowUp span { | |
| cursor: pointer | |
| } | |
| .grid__item.arrowDownToArrowUp span:first-of-type:before { | |
| -webkit-transform: rotate(-45deg) scaleX(1.5); | |
| -ms-transform: rotate(-45deg) scaleX(1.5); | |
| transform: rotate(-45deg) scaleX(1.5); | |
| top: 0 | |
| } | |
| .grid__item.arrowDownToArrowUp span:first-of-type:after { | |
| -webkit-transform: rotate(45deg) scaleX(1.5); | |
| -ms-transform: rotate(45deg) scaleX(1.5); | |
| transform: rotate(45deg) scaleX(1.5); | |
| top: 0 | |
| } | |
| .grid__item.arrowDownToArrowUp.is-hover { | |
| -webkit-animation: hoverArrowUp .44s linear forwards; | |
| animation: hoverArrowUp .44s linear forwards | |
| } | |
| .grid__item.crossUp { | |
| z-index: 100 | |
| } | |
| .grid__item.crossDown, | |
| .grid__item.crossDownFull { | |
| z-index: 80 | |
| } | |
| .grid__item.crossUp span:last-of-type { | |
| -webkit-transition-delay: .22s; | |
| transition-delay: .22s | |
| } | |
| .grid__item.crossUp span:last-of-type:after { | |
| background: #fff; | |
| width: -webkit-calc((100vh / 4) + 50% + 2px); | |
| width: calc((100vh / 4) + 50% + 2px); | |
| left: -webkit-calc((-100vh / 4) + 50% - 1px); | |
| left: calc((-100vh / 4) + 50% - 1px); | |
| -webkit-transition-delay: .22s; | |
| transition-delay: .22s | |
| } | |
| .grid__item.crossDown span:last-of-type { | |
| -webkit-transition-delay: .22s; | |
| transition-delay: .22s | |
| } | |
| .grid__item.crossDown span:last-of-type:before { | |
| background: #fff; | |
| width: -webkit-calc(((100vh / 4) + 50%) + 1px); | |
| width: calc(((100vh / 4) + 50%) + 1px); | |
| -webkit-transition-delay: .22s; | |
| transition-delay: .22s | |
| } | |
| .grid__item.crossDown span:last-of-type:after { | |
| background: #fff; | |
| -webkit-transition-delay: .22s; | |
| transition-delay: .22s | |
| } | |
| .grid__item.crossRight, | |
| .grid__item.crossRightFull { | |
| z-index: 90 | |
| } | |
| .grid__item.crossDownFull span:last-of-type:after { | |
| background: #fff; | |
| width: -webkit-calc((100vh / 2) + 1px); | |
| width: calc((100vh / 2) + 1px); | |
| -webkit-transition-delay: 1s; | |
| transition-delay: 1s | |
| } | |
| .grid__item.crossRight span:first-of-type { | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossRight span:first-of-type:after { | |
| background: #fff; | |
| width: -webkit-calc(((100vw / 3) + 50%)); | |
| width: calc(((100vw / 3) + 50%)); | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossRight span:first-of-type:before { | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossLeft, | |
| .grid__item.crossLeftFull { | |
| z-index: 70 | |
| } | |
| .grid__item.crossRightFull span:first-of-type { | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossRightFull span:first-of-type:after { | |
| background: #fff; | |
| width: -webkit-calc((((100vw / 6) * 4))); | |
| width: calc((((100vw / 6) * 4))); | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossRightFull span:first-of-type:before { | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossLeft span:first-of-type { | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossLeft span:first-of-type:before { | |
| background: #fff; | |
| width: -webkit-calc(((100vw / 2) + 50%)); | |
| width: calc(((100vw / 2) + 50%)); | |
| left: -webkit-calc((-100vw / 2)); | |
| left: calc((-100vw / 2)); | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossLeft span:first-of-type:after { | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossLeftFull span:first-of-type { | |
| -webkit-transition-delay: 1.44s; | |
| transition-delay: 1.44s | |
| } | |
| .grid__item.crossLeftFull span:first-of-type:before { | |
| background: #fff; | |
| width: -webkit-calc(((100vw / 2) + 50%)); | |
| width: calc(((100vw / 2) + 50%)); | |
| left: -webkit-calc((-100vw / 2)); | |
| left: calc((-100vw / 2)); | |
| -webkit-transition-delay: 1.44s; | |
| transition-delay: 1.44s | |
| } | |
| .grid__item.crossLeftFull span:first-of-type:after { | |
| -webkit-transition-delay: 1.44s; | |
| transition-delay: 1.44s | |
| } | |
| @media screen and (max-width:769px) { | |
| .grid__item span.cross-mobile { | |
| display: block | |
| } | |
| .grid__item { | |
| width: -webkit-calc(100% / 4); | |
| width: calc(100% / 4); | |
| height: -webkit-calc(100% / 6); | |
| height: calc(100% / 6) | |
| } | |
| .grid__item.cross-bottom-2, | |
| .grid__item.cross-bottom-4, | |
| .grid__item.cross-middle-2, | |
| .grid__item.cross-middle-4, | |
| .grid__item.cross-top-2, | |
| .grid__item.cross-top-4 { | |
| display: none | |
| } | |
| .grid__item.cross-mobile { | |
| display: block | |
| } | |
| .grid__item.cross-top-1 { | |
| top: 0; | |
| left: 0 | |
| } | |
| .grid__item.cross-top-3 { | |
| top: 0; | |
| left: -webkit-calc((100vw / 4)); | |
| left: calc((100vw / 4)) | |
| } | |
| .grid__item.cross-top-5 { | |
| top: 0; | |
| left: -webkit-calc((100vw / 4) *2); | |
| left: calc((100vw / 4) *2) | |
| } | |
| .grid__item.cross-middletop-1 { | |
| top: -webkit-calc((100vh / 6)); | |
| top: calc((100vh / 6)); | |
| left: 0 | |
| } | |
| .grid__item.cross-middletop-3 { | |
| top: -webkit-calc((100vh / 6)); | |
| top: calc((100vh / 6)); | |
| left: -webkit-calc((100vw / 4)); | |
| left: calc((100vw / 4)) | |
| } | |
| .grid__item.cross-middletop-5 { | |
| top: -webkit-calc((100vh / 6)); | |
| top: calc((100vh / 6)); | |
| left: -webkit-calc((100vw / 4) *2); | |
| left: calc((100vw / 4) *2) | |
| } | |
| .grid__item.cross-middle-1 { | |
| top: -webkit-calc((100vh / 6) * 2); | |
| top: calc((100vh / 6) * 2); | |
| left: 0 | |
| } | |
| .grid__item.cross-middle-3 { | |
| top: -webkit-calc((100vh / 6) * 2); | |
| top: calc((100vh / 6) * 2); | |
| left: -webkit-calc((100vw / 4)); | |
| left: calc((100vw / 4)) | |
| } | |
| .grid__item.cross-middle-5 { | |
| top: -webkit-calc((100vh / 6) * 2); | |
| top: calc((100vh / 6) * 2); | |
| left: -webkit-calc((100vw / 4) *2); | |
| left: calc((100vw / 4) *2) | |
| } | |
| .grid__item.cross-middlebottom-1 { | |
| top: -webkit-calc((100vh / 6) * 3); | |
| top: calc((100vh / 6) * 3); | |
| left: 0 | |
| } | |
| .grid__item.cross-middlebottom-3 { | |
| top: -webkit-calc((100vh / 6) * 3); | |
| top: calc((100vh / 6) * 3); | |
| left: -webkit-calc((100vw / 4)); | |
| left: calc((100vw / 4)) | |
| } | |
| .grid__item.cross-middlebottom-5 { | |
| top: -webkit-calc((100vh / 6) * 3); | |
| top: calc((100vh / 6) * 3); | |
| left: -webkit-calc((100vw / 4) *2); | |
| left: calc((100vw / 4) *2) | |
| } | |
| .grid__item.cross-bottom-1 { | |
| top: -webkit-calc((100vh / 6) *4); | |
| top: calc((100vh / 6) *4); | |
| left: 0 | |
| } | |
| .grid__item.cross-bottom-3 { | |
| top: -webkit-calc((100vh / 6) *4); | |
| top: calc((100vh / 6) *4); | |
| left: -webkit-calc((100vw / 4)); | |
| left: calc((100vw / 4)) | |
| } | |
| .grid__item.cross-bottom-5 { | |
| top: -webkit-calc((100vh / 6) *4); | |
| top: calc((100vh / 6) *4); | |
| left: -webkit-calc((100vw / 4) *2); | |
| left: calc((100vw / 4) *2) | |
| } | |
| .grid__item span { | |
| right: -webkit-calc(((-100vw / 4)/ 2)/ 2 / 2); | |
| right: calc(((-100vw / 4)/ 2)/ 2 / 2); | |
| bottom: -webkit-calc(((-100vw / 4)/ 2)/ 2 / 2); | |
| bottom: calc(((-100vw / 4)/ 2)/ 2 / 2); | |
| width: -webkit-calc(((100vw / 4)/ 2)/ 2); | |
| width: calc(((100vw / 4)/ 2)/ 2); | |
| padding-bottom: -webkit-calc(((100vw / 4)/ 2)/ 2); | |
| padding-bottom: calc(((100vw / 4)/ 2)/ 2) | |
| } | |
| .grid__item.crossToArrowDown { | |
| z-index: 0 | |
| } | |
| .grid__item.cross-middle-3 span { | |
| right: -webkit-calc((-100vw / 4)/ 2 / 2)!important; | |
| right: calc((-100vw / 4)/ 2 / 2)!important; | |
| bottom: -webkit-calc((-100vw / 4)/ 2 / 2)!important; | |
| bottom: calc((-100vw / 4)/ 2 / 2)!important; | |
| width: -webkit-calc(100vw / 4 / 2)!important; | |
| width: calc(100vw / 4 / 2)!important; | |
| padding-bottom: -webkit-calc(100vw / 4 / 2)!important; | |
| padding-bottom: calc(100vw / 4 / 2)!important | |
| } | |
| .grid__item.crossUp { | |
| z-index: 505 | |
| } | |
| .grid__item.crossUp span:last-of-type:after { | |
| width: -webkit-calc(((100vh / 6) * 3) + 50% + 2px); | |
| width: calc(((100vh / 6) * 3) + 50% + 2px); | |
| left: -webkit-calc(((-100vh / 6) * 3) + 50% - 1px); | |
| left: calc(((-100vh / 6) * 3) + 50% - 1px) | |
| } | |
| .grid__item.crossRight, | |
| .grid__item.crossRightFull { | |
| z-index: 504 | |
| } | |
| .grid__item.crossRight span:first-of-type:after, | |
| .grid__item.crossRightFull span:first-of-type:after { | |
| width: -webkit-calc((((100vw / 4) * 2))); | |
| width: calc((((100vw / 4) * 2))) | |
| } | |
| .grid__item.crossLeft, | |
| .grid__item.crossLeftFull { | |
| z-index: 502 | |
| } | |
| .grid__item.crossLeft span:first-of-type:before, | |
| .grid__item.crossLeftFull span:first-of-type:before { | |
| width: -webkit-calc(((100vw / 4) + 50%)); | |
| width: calc(((100vw / 4) + 50%)); | |
| left: -webkit-calc((-100vw / 4)); | |
| left: calc((-100vw / 4)); | |
| -webkit-transition-delay: 1.5s; | |
| transition-delay: 1.5s | |
| } | |
| .grid__item.crossDown, | |
| .grid__item.crossDownFull { | |
| z-index: 503 | |
| } | |
| .grid__item.crossDown span:last-of-type:after, | |
| .grid__item.crossDownFull span:last-of-type:after { | |
| width: -webkit-calc(((100vh / 6) * 4) + 2px); | |
| width: calc(((100vh / 6) * 4) + 2px); | |
| -webkit-transition-delay: 1s; | |
| transition-delay: 1s | |
| } | |
| .grid__item.crossDown span:last-of-type:before, | |
| .grid__item.crossDownFull span:last-of-type:before { | |
| background: rgba(21, 23, 28, .45); | |
| -webkit-transition-delay: 1s; | |
| transition-delay: 1s | |
| } | |
| } | |
| body.overlay:before, | |
| body:before { | |
| content: ''; | |
| display: block | |
| } | |
| .grid--blue .grid__item span:after, | |
| .grid--blue .grid__item span:before { | |
| background: #B8C1FF; | |
| -webkit-transition: all .22s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .22s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid--blue .grid__item.crossDownFull span:last-of-type:after, | |
| .grid--blue .grid__item.crossRightFull span:first-of-type:after, | |
| .grid--blue .grid__item.crossRotate span:after, | |
| .grid--blue .grid__item.crossRotate span:before, | |
| .grid--blue .grid__item.crossToArrowDown span:after, | |
| .grid--blue .grid__item.crossToArrowDown span:before, | |
| .grid--blue .grid__item.crossToArrowLeft span:after, | |
| .grid--blue .grid__item.crossToArrowLeft span:before, | |
| .grid--blue .grid__item.crossToArrowRight span:after, | |
| .grid--blue .grid__item.crossToArrowRight span:before { | |
| background: #0032ff | |
| } | |
| .grid--blue .grid__item.crossRightFull span:first-of-type:before { | |
| -webkit-transition-delay: 0s; | |
| transition-delay: 0s | |
| } | |
| .grid--blue .grid__item.crossDownFull span:last-of-type:before { | |
| background: #B8C1FF; | |
| -webkit-transition-delay: 0s; | |
| transition-delay: 0s | |
| } | |
| .grid--blue .grid__item.crossLeftFull span:first-of-type:before, | |
| .grid--blue .grid__item.crossUp span:last-of-type:after { | |
| background: #0032ff | |
| } | |
| .grid--blue .grid__item.crossLeftFull span:first-of-type:after { | |
| -webkit-transition-delay: 0s; | |
| transition-delay: 0s | |
| } | |
| .grid--dark-blue .grid__item span:after, | |
| .grid--dark-blue .grid__item span:before { | |
| background-color: #10215F | |
| } | |
| .grid--dark-blue .grid__item.crossToArrowDown span:after, | |
| .grid--dark-blue .grid__item.crossToArrowDown span:before { | |
| background: #fff | |
| } | |
| .grid--dark-blue .grid__item.crossDownFull span:last-of-type:before { | |
| -webkit-transition-delay: 0s; | |
| transition-delay: 0s; | |
| background: #10215F | |
| } | |
| .grid--white .grid__item span:after, | |
| .grid--white .grid__item span:before { | |
| background-color: rgba(255, 255, 255, .15) | |
| } | |
| .grid--white .grid__item.crossRotate span:after, | |
| .grid--white .grid__item.crossRotate span:before, | |
| .grid--white .grid__item.crossToArrowDown span:after, | |
| .grid--white .grid__item.crossToArrowDown span:before, | |
| .grid--white .grid__item.crossToArrowLeft span:after, | |
| .grid--white .grid__item.crossToArrowLeft span:before, | |
| .grid--white .grid__item.crossToArrowRight span:after, | |
| .grid--white .grid__item.crossToArrowRight span:before { | |
| background: #fff | |
| } | |
| .grid--white .grid__item.crossRightFull span:first-of-type:before { | |
| -webkit-transition-delay: 0s; | |
| transition-delay: 0s | |
| } | |
| .grid--white .grid__item.crossDownFull span:last-of-type:before { | |
| -webkit-transition-delay: 0s; | |
| transition-delay: 0s; | |
| background: rgba(255, 255, 255, .15) | |
| } | |
| /* MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| *{ | |
| box-sizing: border-box; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| @font-face { | |
| font-family: "OCRAStd"; | |
| src: url("css/fonts/OCRAStd.woff") format("woff"); | |
| } | |
| @font-face { | |
| font-family: "Sk-Modernist-Regular"; | |
| src: url("css/fonts/Sk-Modernist-Regular.woff") format("woff"); | |
| } | |
| @font-face { | |
| font-family: "Sk-Modernist-Bold"; | |
| src: url("css/fonts/Sk-Modernist-Bold.woff") format("woff"); | |
| } | |
| @font-face { | |
| font-family: "OratorStd"; | |
| src: url("css/fonts/OratorStd.woff") format("woff"); | |
| } | |
| body { | |
| } | |
| .grid-wrap { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* CHANGE WIDTH AND HEIGHT TO GRID SIZES */ | |
| /* MENU STYLES */ | |
| [class*="container-menuitem"] { | |
| font-family: "OCRAStd"; | |
| opacity: 1; | |
| margin-left: -65px; | |
| pointer-events: none; | |
| } | |
| .container-menuitem1 { | |
| z-index: 12; | |
| position: fixed; | |
| background: rgba(0,0,0,0); | |
| width: 100%; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(10, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . m m m . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| } | |
| .menuitem1 { | |
| letter-spacing: 1vw; | |
| margin-left: 2vw; | |
| grid-area: m; | |
| color: white; | |
| font-size: 3.5vw; | |
| padding: ; | |
| z-index: 12; | |
| } | |
| .container-menuitem2 { | |
| z-index: 10; | |
| position: fixed; | |
| background: rgba(0,0,0,0); | |
| width: 100%; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(10, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . m m m . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| } | |
| .menuitem2 { | |
| letter-spacing: 1vw; | |
| margin-left: 2vw; | |
| grid-area: m; | |
| color: white; | |
| font-size: 3.5vw; | |
| padding: ; | |
| z-index: 10; | |
| } | |
| .container-menuitem3 { | |
| z-index: 10; | |
| position: fixed; | |
| background: rgba(0,0,0,0); | |
| width: 100%; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(10, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . m m m . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| } | |
| .menuitem3 { | |
| letter-spacing: 1vw; | |
| margin-left: 2vw; | |
| grid-area: m; | |
| color: white; | |
| font-size: 3.5vw; | |
| padding: ; | |
| z-index: 10; | |
| } | |
| .container-menuitem4 { | |
| z-index: 10; | |
| position: fixed; | |
| background: rgba(0,0,0,0); | |
| width: 100%; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(10, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . m m m . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| } | |
| .menuitem4 { | |
| letter-spacing: 1vw; | |
| margin-left: 2vw; | |
| grid-area: m; | |
| color: white; | |
| font-size: 3.5vw; | |
| padding: ; | |
| z-index: 10; | |
| } | |
| /* MENU STYLES END */ | |
| [class*="container-grid"] { | |
| align-self: center; | |
| z-index: 10; | |
| width: 100%; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| ". . . . . . . . . . . ." | |
| ". . b b b b b b . . . ." | |
| ". . b b b b b b . . . ." | |
| ". . . . . . . . . . . ." | |
| } | |
| [class*="section"] { | |
| margin-left: 2px; | |
| margin-top: 2px; | |
| } | |
| .container-grid-fixed-scroll { | |
| z-index: 100; | |
| position: fixed; | |
| left: 0; | |
| width: 16.5vw; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| " . . " | |
| " . . " | |
| " . . " | |
| " . s " | |
| } | |
| .scroll-button-area { | |
| grid-area: s; | |
| } | |
| .scroll-button { | |
| display: flex; | |
| justify-content: center; | |
| transform: translate(2px, 2px); | |
| cursor: pointer; | |
| height: 65px; | |
| width: 65px; | |
| background-position: top; | |
| float: right; | |
| background-color: rgba(0,0,0,0.6); | |
| } | |
| .scroll-button-inner { | |
| display: flex; | |
| align-self: center; | |
| background: url(img/arrow-down-grey.svg) no-repeat; | |
| background-position: top; | |
| background-size: contain; | |
| height: 50%; | |
| width: 50%; | |
| } | |
| .container-grid { | |
| /* | |
| z-index: 1; | |
| background: url(img/depicFON1-01.svg); | |
| background-size: 100%; | |
| background-repeat: no-repeat; | |
| */ | |
| } | |
| .section1 { | |
| z-index: 12; | |
| grid-area: b; | |
| margin-bottom: -1px; | |
| background: rgba(0,0,0,0.6); | |
| } | |
| .container-logo { | |
| position: fixed; | |
| z-index: 9; | |
| background: rgba(0,0,0,0.2); | |
| width: 100%; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| ". . . . . . . . . . l l" | |
| ". . . . . . . m m m . ." | |
| ". . . . . . . m m m . ." | |
| ". . . . . . . . . . . ." | |
| } | |
| .logo-wrapper{ | |
| background-color: rgba(0,0,0,0.5); | |
| margin-bottom: -1px; | |
| margin-top: 1vw; | |
| margin-left: 0.85vw; | |
| margin-right: 1vw; | |
| grid-area: l; | |
| background: url(LOGOLOGO-01.svg); | |
| background-repeat: no-repeat; | |
| background-size: contain; | |
| } | |
| /* | |
| .logo-background { | |
| grid-area: l; | |
| margin-bottom: -1px; | |
| margin-top: 30px; | |
| margin-left: 14px; | |
| margin-right: 88px; | |
| background-color: rgba(0,0,0,0.5); | |
| } | |
| */ | |
| .container-grid-2 { | |
| z-index: 14; | |
| } | |
| .section2 { | |
| z-index: 14; | |
| grid-area: b; | |
| margin-bottom: -1px; | |
| background: rgba(0,0,0,0.6); | |
| } | |
| .container-grid-3 { | |
| z-index: 16; | |
| } | |
| .section3 { | |
| z-index: 16; | |
| grid-area: b; | |
| margin-bottom: -1px; | |
| } | |
| .container-grid-4 { | |
| z-index: 18; | |
| } | |
| .section4 { | |
| z-index: 18; | |
| grid-area: b; | |
| margin-bottom: -1px; | |
| background: url(img/contactblock.svg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| } | |
| .change-background { | |
| z-index: 1; | |
| height: 100%; | |
| width: 100%; | |
| position: fixed; | |
| background: url(img/mainbg.svg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| } | |
| .change-background2 { | |
| /* | |
| transform: translateY(100%); | |
| */ | |
| opacity: 0; | |
| z-index: 1; | |
| height: 100%; | |
| width: 100%; | |
| position: fixed; | |
| background: url(img/portfoliobg.svg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| } | |
| .change-background3 { | |
| /* | |
| transform: translateY(100%); | |
| */ | |
| opacity: 0; | |
| z-index: 1; | |
| height: 100%; | |
| width: 100%; | |
| position: fixed; | |
| background: url(img/testimonialsbg.svg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| } | |
| .change-background4 { | |
| /* | |
| transform: translateY(100%); | |
| */ | |
| opacity: 0; | |
| z-index: 1; | |
| height: 100%; | |
| width: 100%; | |
| position: fixed; | |
| background: url(img/contactbg.svg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| } | |
| /* SECTION STYLES */ | |
| .section-block-one { | |
| display: grid; | |
| align-self: start; | |
| width: 100%; | |
| height: 100%; | |
| padding: 5% 5% 5% 5%; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(6, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| "m m m m m m m m . . . ." | |
| "m m m m m m m m . . . ." | |
| "m m m m m m m m . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| "s s s s s s s s s . . ." | |
| } | |
| .section-main-text { | |
| grid-area: m; | |
| font-family: "Sk-Modernist-Bold"; | |
| font-size: 2.75vh; | |
| color: white; | |
| } | |
| .section-secondary-text { | |
| grid-area: s; | |
| font-family: "Sk-Modernist-Regular"; | |
| font-size: 2vh; | |
| color: white; | |
| } | |
| .section-block-two { | |
| margin-left: 0; | |
| margin-top: 0; | |
| display: grid; | |
| align-self: start; | |
| width: 120%; | |
| height: 125%; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| "a a a a a a a a a a . ." | |
| "a a a a a a a a a a . ." | |
| "a a a a a a a a a a . ." | |
| "a a a a a a a a a a . ."; | |
| overflow-x: hidden; | |
| } | |
| .portfolio-wrapper { | |
| grid-area: a; | |
| height: 100%; | |
| width: 195%; | |
| padding-right: 93%; | |
| overflow-y: scroll; | |
| overflow-x: hidden; | |
| } | |
| .portfolio-module-photo { | |
| width: 49.3vw; | |
| } | |
| .portfolio-image { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .portfolio-image-inner { | |
| width: 100%; | |
| height: 100%; | |
| margin-bottom: -4px; | |
| } | |
| /* SECTION OPINION */ | |
| .section-block-three { | |
| background-color: rgba(0,0,0,0.85); | |
| margin-left: 0; | |
| margin-top: 0; | |
| display: grid; | |
| align-self: start; | |
| width: 100%; | |
| height: 125%; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(6, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| "a a a a d d d d d d . ." | |
| "a a a a d d d d d d . ." | |
| "b b b b e e e e e e . ." | |
| "b b b b e e e e e e . ." | |
| "c c c c f f f f f f . ." | |
| "c c c c f f f f f f . ." | |
| ; | |
| overflow-x: hidden; | |
| overflow-y: hidden; | |
| padding-top: 15px; | |
| } | |
| [class*="opinion-pic"] { | |
| margin: 0px 2px 15px 15px; | |
| } | |
| [class*="opinion-desc-"] { | |
| margin: 3% 2px 15px -1%; | |
| } | |
| .opinion-pic-one { | |
| background: url(img/guy-01.svg); | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| grid-area: a; | |
| } | |
| .opinion-desc-one { | |
| grid-area: d; | |
| } | |
| .opinion-pic-two { | |
| background: url(img/guy2-01.svg); | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| grid-area: b; | |
| } | |
| .opinion-desc-two { | |
| grid-area: e; | |
| } | |
| .opinion-pic-three { | |
| background: url(img/girl-01.svg); | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| grid-area: c; | |
| } | |
| .opinion-desc-three { | |
| grid-area: f; | |
| } | |
| .opinion-title { | |
| font-family: 'Sk-Modernist-Bold'; | |
| font-size: 1.74vw; | |
| color: rgba(250,250,250,1); | |
| } | |
| .opinion-subtitle { | |
| font-family: 'OratorStd'; | |
| color: rgba(66, 129, 164, 1); | |
| } | |
| .opinion-description { | |
| font-family: 'Sk-Modernist-Regular'; | |
| font-size: 0.9vw; | |
| color: rgba(250,250,250,1); | |
| } | |
| /* CONTACT SECTION */ | |
| .section-block-four { | |
| background: url('img/contactblock.svg'); | |
| background-size: cover; | |
| margin-left: 0; | |
| margin-top: 0; | |
| display: grid; | |
| align-self: start; | |
| width: 100%; | |
| height: 100%; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(6, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| "a a a a d d d d d d . ." | |
| "a a a a d d d d d d . ." | |
| "b b b b e e e e e e . ." | |
| "b b b b e e e e e e . ." | |
| "c c c c f f f f f f . ." | |
| "c c c c f f f f f f . ." | |
| ; | |
| overflow-x: hidden; | |
| padding-top: 15px; | |
| } | |
| /* CONTACT FORM */ | |
| .contact-section { | |
| display: grid; | |
| width: 100%; | |
| height: 110%; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(6, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| "a a a a a a a a a a . ." | |
| "a a a a a a a a a a . ." | |
| "b b b b b b b b b b . ." | |
| "b b b b b b b b b b . ." | |
| "b b b b b b b b b b . ." | |
| "b b b b b b b b b b . ." | |
| ; | |
| } | |
| .form-description { | |
| grid-area: a; | |
| padding: 2vw 2vw 2vw 2vw; | |
| } | |
| .form-title { | |
| font-family: "Sk-Modernist-Bold"; | |
| font-size: 2.5vw; | |
| color: white; | |
| } | |
| .form-subtitle { | |
| font-family: "Sk-Modernist-Regular"; | |
| font-size: 1.25vw; | |
| color: white; | |
| } | |
| .form { | |
| grid-area: b; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(8, 1fr); | |
| padding: 2vw 2vw 0vw 2vw; | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| "a a a a a b b b b b . ." | |
| "a a a a a b b b b b . ." | |
| "c c c c c c c c c c . ." | |
| "c c c c c c c c c c . ." | |
| "d d d d d d d d d d . ." | |
| "d d d d d d d d d d . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . e e ." | |
| ; | |
| } | |
| textarea { | |
| resize: none; | |
| } | |
| input::-webkit-input-placeholder { | |
| color: white !important; | |
| } | |
| input:-moz-placeholder { /* Firefox 18- */ | |
| color: white !important; | |
| } | |
| input::-moz-placeholder { /* Firefox 19+ */ | |
| color: white !important; | |
| } | |
| input:-ms-input-placeholder { | |
| color: white !important; | |
| } | |
| textarea::-webkit-input-placeholder { | |
| color: white; | |
| } | |
| textarea:-moz-placeholder { /* Firefox 18- */ | |
| color: white; | |
| } | |
| textarea::-moz-placeholder { /* Firefox 19+ */ | |
| color: white; | |
| } | |
| textarea:-ms-input-placeholder { | |
| color: white; | |
| } | |
| .form-label { | |
| font-size: 12px; | |
| color: white !important; | |
| margin: 0; | |
| display: block; | |
| opacity: 1; | |
| -webkit-transition: .333s ease top, .333s ease opacity; | |
| transition: .333s ease top, .333s ease opacity; | |
| } | |
| .form-submit-button { | |
| grid-area: e; | |
| display: flex; | |
| height: 50px; | |
| width: 125px; | |
| background-color: #4281A4; | |
| text-decoration: none; | |
| font-family: "Sk-Modernist-Bold"; | |
| margin-left: 17px; | |
| font-size: 1.5vw; | |
| color: white; | |
| align-items: center; | |
| justify-content: center; | |
| -webkit-transition: -webkit-box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), -webkit-transform 200ms cubic-bezier(0.2, 0, 0.7, 1); | |
| transition: -webkit-box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), -webkit-transform 200ms cubic-bezier(0.2, 0, 0.7, 1); | |
| transition: box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), transform 200ms cubic-bezier(0.2, 0, 0.7, 1); | |
| transition: box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), transform 200ms cubic-bezier(0.2, 0, 0.7, 1), -webkit-box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), -webkit-transform 200ms cubic-bezier(0.2, 0, 0.7, 1); | |
| } | |
| .form-submit-button:hover { | |
| -webkit-box-shadow: 0 0 1px 15px rgba(84,141,173, 0.4), 0 0 1px 30px rgba(103,154,182, 0.1), 0 0 1px 45px rgba(122,166,191, 0.1); | |
| box-shadow: 0 0 1px 15px rgba(84,141,173, 0.4), 0 0 1px 30px rgba(103,154,182, 0.1), 0 0 1px 45px rgba(122,166,191, 0.1); | |
| } | |
| .form-group-one { | |
| color: white; | |
| grid-area: a; | |
| } | |
| .form-group-two { | |
| grid-area: b; | |
| } | |
| .form-group-three { | |
| width: 100%; | |
| grid-area: c; | |
| } | |
| .form-group-four { | |
| grid-area: d; | |
| } | |
| .form-control { | |
| color: white; | |
| border-radius: 0; | |
| border-color: #fff; | |
| border-width: 0 0 2px 0; | |
| background-color: rgba(0,0,0,0); | |
| border-style: none none solid none; | |
| box-shadow: none; | |
| font-family: "Sk-Modernist-Regular"; | |
| font-size: 1vw; | |
| } | |
| .form-control:focus { | |
| box-shadow: none; | |
| border-color: #5e9bfc; | |
| } | |
| .js-hide-label { | |
| opacity: 0; | |
| } | |
| .js-unhighlight-label { | |
| color: #999 | |
| } | |
| .btn-start-order { | |
| background: 0 0 #ffffff; | |
| border: 1px solid #2f323a; | |
| border-radius: 3px; | |
| color: white; | |
| font-family: "Raleway", sans-serif; | |
| font-size: 16px; | |
| line-height: inherit; | |
| margin: 30px 0; | |
| padding: 10px 50px; | |
| text-transform: uppercase; | |
| transition: all 0.25s ease 0s; | |
| } | |
| .btn-start-order:hover,.btn-start-order:active, .btn-start-order:focus { | |
| border-color: #5e9bfc; | |
| color: #5e9bfc; | |
| } | |
| /*SCROLL PROMPT | |
| section { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .demo a { | |
| display: flex; | |
| align-self: center; | |
| justify-content: center; | |
| position: absolute; | |
| height: 50px; | |
| width: 50px; | |
| left: 30%; | |
| z-index: 30; | |
| display: inline-block; | |
| -webkit-transform: translate(0, -50%); | |
| transform: translate(0, -50%); | |
| color: #2d2d2d; | |
| font : normal 400 20px/1 'Josefin Sans', sans-serif; | |
| letter-spacing: .1em; | |
| text-decoration: none; | |
| transition: opacity .3s; | |
| } | |
| .demo a:hover { | |
| opacity: .8; | |
| cursor: default; | |
| } | |
| #section05 a { | |
| top: 35vh; | |
| } | |
| #section05 a span { | |
| display: flex; | |
| align-self: center; | |
| justify-content: center; | |
| position: absolute; | |
| top: 180%; | |
| left: 50%; | |
| width: 40px; | |
| height: 40px; | |
| margin-left: -12px; | |
| border-left: 2px solid #fff; | |
| border-bottom: 2px solid #fff; | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| -webkit-animation: sdb05 1.5s infinite; | |
| animation: sdb05 1.5s infinite; | |
| box-sizing: border-box; | |
| } | |
| @-webkit-keyframes sdb05 { | |
| 0% { | |
| -webkit-transform: rotate(-45deg) translate(0, 0); | |
| opacity: 0; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| -webkit-transform: rotate(-45deg) translate(-20px, 20px); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes sdb05 { | |
| 0% { | |
| transform: rotate(-45deg) translate(0, 0); | |
| opacity: 0; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: rotate(-45deg) translate(-20px, 20px); | |
| opacity: 0; | |
| } | |
| } | |
| */ | |
| . | |
| </style> | |
| </head> | |
| <body > | |
| <script type="text/javascript"> | |
| </script> | |
| <script> | |
| </script> | |
| <div class="grid grid--dark" id="animate1"> | |
| <div class="grid__item cross-top-1"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-top-2"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-top-3"> | |
| <span></span><span></span> | |
| </div><!-- | |
| <div class="grid__item cross-top-4"> | |
| <span></span><span></span> | |
| </div> | |
| --> | |
| <div class="grid__item cross-top-5"> | |
| <span></span><span></span> | |
| </div | |
| <div class="grid__item cross-middletop-1 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middletop-2 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middletop-3 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middletop-4 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middletop-5 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middle-1"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middle-2"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middle-3"> | |
| <span></span><span></span> | |
| </div><!-- | |
| <div class="grid__item cross-middle-4"> | |
| <span></span><span></span> | |
| </div> | |
| --> | |
| <div class="grid__item cross-middle-5"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middlebottom-1 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middlebottom-2 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middlebottom-3 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middlebottom-4 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middlebottom-5 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-bottom-1"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-bottom-2"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-bottom-3"> | |
| <span></span><span></span> | |
| </div><!-- | |
| <div class="grid__item cross-bottom-4"> | |
| <span></span><span></span> | |
| </div> | |
| --> | |
| <div class="grid__item cross-bottom-5"> | |
| <span></span><span></span> | |
| </div> | |
| </div> | |
| <div class="change-background"> | |
| </div> | |
| <div class="change-background2"> | |
| </div> | |
| <div class="change-background3"> | |
| </div> | |
| <div class="change-background4"> | |
| </div> | |
| <div class="grid-wrap"> | |
| <div class="container-menuitem1"> | |
| <div class="menuitem1"> | |
| Depicture | |
| </div> | |
| </div> | |
| <div class="container-menuitem2"> | |
| <div class="menuitem2"> | |
| Portfolio | |
| </div> | |
| </div> | |
| <div class="container-menuitem3"> | |
| <div class="menuitem3"> | |
| Opinion | |
| </div> | |
| </div> | |
| <div class="container-menuitem4"> | |
| <div class="menuitem4"> | |
| Contact | |
| </div> | |
| </div> | |
| <div class="container-grid-fixed-scroll"> | |
| <div class="scroll-button-area"> | |
| <div class="scroll-button"> | |
| <div class="scroll-button-inner"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-logo"> | |
| <div class="logo-background"> | |
| </div> | |
| <div class="logo-wrapper"> | |
| </div> | |
| </div> | |
| <div class="container-grid"> | |
| <div class="section1" id="section1"> | |
| <div class="section-block-one"> | |
| <div class="section-main-text"> | |
| We are a <font | |
| style="background-color: #E6B99C; color: black;">full-service</font> web development agency, specializing on unique user experiences. We believe in web design that inspires users to explore and interact, design that helps <font | |
| style="background-color: #E6B99C; color: black;">build a lasting connection</font> between you and your visitors. | |
| </div> | |
| <div class="section-secondary-text"> | |
| We can take your project by the hand, and guide it from conception to maturity taking care of all context: we build backend, frontend and everything in the middle to make well-rounded web applications. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-grid-2"> | |
| <div class="section2" id="section2"> | |
| <div class="section-block-two"> | |
| <div class="portfolio-wrapper"> | |
| <div class="portfolio-module-photo"> | |
| <section id="section05" class="demo"> | |
| <a href="#section06"><span></span></a> | |
| </section> | |
| <img class="portfolio-image-inner" src="img/1-01.png"> | |
| <img class="portfolio-image-inner" src="img/2-01.png"> | |
| <img class="portfolio-image-inner" src="img/3-01.png"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-grid-3"> | |
| <div class="section3" id="section3"> | |
| <div class="section-block-three"> | |
| <div class="opinion-pic-one"> | |
| </div> | |
| <div class="opinion-desc-one"> | |
| <div class="opinion-title"> | |
| Shai Aharony | |
| </div> | |
| <div class="opinion-subtitle"> | |
| Managing Director - Reboot Online | |
| </div> | |
| <div class="opinion-description"> | |
| Special thanks to the Depicture team - they gave us the necessary data visualization tools to make the task of conveying data to our users easy and effective | |
| </div> | |
| </div> | |
| <div class="opinion-pic-two"> | |
| </div> | |
| <div class="opinion-desc-two"> | |
| <div class="opinion-title"> | |
| Steven Englander | |
| </div> | |
| <div class="opinion-subtitle"> | |
| Innovation, Product Management, Growth, Recruiting | |
| </div> | |
| <div class="opinion-description"> | |
| Outstanding work! The depicture team are highly skilled <br>data visualization experts. They went above and beyond <br>our expectations. I am thrilled with how the work turned <br>out! | |
| </div> | |
| </div> | |
| <div class="opinion-pic-three"> | |
| </div> | |
| <div class="opinion-desc-three"> | |
| <div class="opinion-title"> | |
| Gabrielle Joyce | |
| </div> | |
| <div class="opinion-subtitle"> | |
| Marketing and Creative | |
| </div> | |
| <div class="opinion-description"> | |
| The Depicture team has taken a creative and effective approach to finding a solution to our problem. They have been in full control of the situation - from idea to <br>production. Professional, prompt and easy to work with! | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-grid-4"> | |
| <div class="section4" id="section4"> | |
| <div class="contact-section"> | |
| <div class="form-description"> | |
| <div class="form-title"> | |
| Contact us | |
| </div> | |
| <div class="form-subtitle"> | |
| Lets get in touch! We are always happy to answer your questions. Send us a message and we will get back to you shortly. | |
| </div> | |
| </div> | |
| <form id="contact-form" class="form" action="#" method="POST" role="form"> | |
| <div class="form-group-one"> | |
| <label class="form-label" for="form41">Your Name</label> | |
| <input type="text" class="form-control" id="form41" name="name" placeholder="Your name" tabindex="1" required> | |
| </div> | |
| <div class="form-group-two"> | |
| <label class="form-label" for="form52">Your Email</label> | |
| <input type="email" class="form-control" id="form52" name="email" placeholder="Your Email" tabindex="2" required> | |
| </div> | |
| <div class="form-group-three"> | |
| <label class="form-label" for="form51">Subject</label> | |
| <textarea rows="1" cols="50" name="subject" class="form-control" id="form51" placeholder="Subject" tabindex="3" required></textarea> | |
| </div> | |
| <div class="form-group-four"> | |
| <label class="form-label" for="form76">Message</label> | |
| <textarea rows="1" cols="50" name="message" class="form-control" id="form76" placeholder="Message..." tabindex="4" required></textarea> | |
| </div> | |
| <a class="form-submit-button" id="send_email_button" href="">Send</a> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| $(document).ready(function() { | |
| // Test for placeholder support | |
| $.support.placeholder = (function(){ | |
| var i = document.createElement('input'); | |
| return 'placeholder' in i; | |
| })(); | |
| // Hide labels by default if placeholders are supported | |
| if($.support.placeholder) { | |
| $('.form-label').each(function(){ | |
| $(this).addClass('js-hide-label'); | |
| }); | |
| // Code for adding/removing classes here | |
| $('.form-group').find('input, textarea').on('keyup blur focus', function(e){ | |
| // Cache our selectors | |
| var $this = $(this), | |
| $parent = $this.parent().find("label"); | |
| if (e.type == 'keyup') { | |
| if( $this.val() == '' ) { | |
| $parent.addClass('js-hide-label'); | |
| } else { | |
| $parent.removeClass('js-hide-label'); | |
| } | |
| } | |
| else if (e.type == 'blur') { | |
| if( $this.val() == '' ) { | |
| $parent.addClass('js-hide-label'); | |
| } | |
| else { | |
| $parent.removeClass('js-hide-label').addClass('js-unhighlight-label'); | |
| } | |
| } | |
| else if (e.type == 'focus') { | |
| if( $this.val() !== '' ) { | |
| $parent.removeClass('js-unhighlight-label'); | |
| } | |
| } | |
| }); | |
| } | |
| }); | |
| </script> | |
| <script> | |
| $(function() { //run when the DOM is ready | |
| $(".portfolio-wrapper").click(function() { //use a class, since your ID gets mangled | |
| $(this).addClass("active"); //add the class to the clicked element | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| // When the DOM is ready | |
| $(function() { | |
| //Plugin | |
| /* | |
| (function($) { | |
| $.fn.random = function() { | |
| var n = this.length; | |
| var r = Math.floor(n * Math.random()); | |
| return n ? $(this[r]) : $(); | |
| }; | |
| })(jQuery);*/ | |
| // Init ScrollMagic Controller | |
| var scrollMagicController = new ScrollMagic(); | |
| // Create Animation for 0.5s | |
| var tween = TweenMax.to('.grid__item span:last-of-type', 0.4, { | |
| rotation: 45 | |
| }); | |
| var tween2 = TweenMax.to('.grid__item span:first-of-type', 0.4, { | |
| rotation: -45 | |
| }); | |
| var tween8 = TweenMax.to('.grid__item span:last-of-type', 0.4, { | |
| rotation: 0 | |
| }); | |
| var tween9 = TweenMax.to('.grid__item span:first-of-type', 0.4, { | |
| rotation: 0, | |
| }); | |
| var tween15 = TweenMax.to('.grid__item span::after', 0.4, { | |
| background: 'rgba(250,250,250,1)' | |
| }); | |
| var tween16 = TweenMax.to('.grid__item span::before', 0.4, { | |
| background: 'rgba(250,250,250,1)' | |
| }); | |
| var rule = CSSRulePlugin.getRule(".grid__item span::after"); | |
| var rule2 = CSSRulePlugin.getRule(".grid__item span::before"); | |
| var tween18 = TweenMax.to(rule, 0.4, {cssRule:{ | |
| backgroundColor: 'rgba(250, 250, 250, 1)'} | |
| }); | |
| var tween19 = TweenMax.to(rule2, 0.4, {cssRule:{ | |
| backgroundColor: 'rgba(250, 250, 250, 1)'} | |
| }); | |
| /* BG TWEENS */ | |
| var tween3 = TweenMax.to('.change-background2', 0.6, {opacity: 1, delay:0.1}); | |
| var tween4 = TweenMax.to('.change-background', 0.6, {opacity: 0, delay:0.1}); | |
| var tween7 = TweenMax.to('.change-background3', 0.6, {opacity: 1, delay:0.1}); | |
| var tween6 = TweenMax.to('.change-background2', 0.6, {opacity: 0, delay:0.1}); | |
| var tween13 = TweenMax.to('.change-background3', 0.6, {opacity: 0, delay:0.1}); | |
| var tween14 = TweenMax.to('.change-background4', 0.6, {opacity: 1, delay:0.1}); | |
| /*MENU TWEENS */ | |
| var tween12 = TweenMax.to('.container-menuitem1', 0.0, {opacity: 1}); | |
| var tween5 = TweenMax.to('.container-menuitem2', 0.0, {zIndex: 15}); | |
| var tween10 = TweenMax.to('.container-menuitem3', 0.0, {zIndex: 17}); | |
| var tween11 = TweenMax.to('.container-menuitem4', 0.0, {zIndex: 19}); | |
| var tween17 = TweenMax.to('.logo-wrapper', 0.6, {marginBottom: '3.5vw', marginTop: '3.5vw'}); | |
| // Create the Scene and trigger when visible | |
| var scene = new ScrollScene({ | |
| triggerElement: '#section2', | |
| offset: 50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween2) | |
| .addTo(scrollMagicController); | |
| var scene2 = new ScrollScene({ | |
| triggerElement: '#section2', | |
| offset: 50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween) | |
| .addTo(scrollMagicController); | |
| var scene3 = new ScrollScene({ | |
| triggerElement: '#section2', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween3) | |
| .addTo(scrollMagicController); | |
| var scene4 = new ScrollScene({ | |
| triggerElement: '#section2', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween4) | |
| .addTo(scrollMagicController); | |
| var scene5 = new ScrollScene({ | |
| triggerElement: '#section2', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween5) | |
| .addTo(scrollMagicController); | |
| var scene6 = new ScrollScene({ | |
| triggerElement: '#section3', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween6) | |
| .addTo(scrollMagicController); | |
| var scene7 = new ScrollScene({ | |
| triggerElement: '#section3', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween7) | |
| .addTo(scrollMagicController); | |
| var scene8 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween8) | |
| .addTo(scrollMagicController); | |
| var scene9 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween9) | |
| .addTo(scrollMagicController); | |
| var scene10 = new ScrollScene({ | |
| triggerElement: '#section3', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween10) | |
| .addTo(scrollMagicController); | |
| var scene11 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: -130 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween11) | |
| .addTo(scrollMagicController); | |
| var scene12 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween12) | |
| .addTo(scrollMagicController); | |
| var scene13 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween13) | |
| .addTo(scrollMagicController); | |
| var scene14 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween14) | |
| .addTo(scrollMagicController); | |
| var scene15 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween15) | |
| .addTo(scrollMagicController); | |
| var scene16 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween16) | |
| .addTo(scrollMagicController); | |
| var scene17 = new ScrollScene({ | |
| triggerElement: '#section2', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween17) | |
| .addTo(scrollMagicController); | |
| var scene18 = new ScrollScene({ | |
| triggerElement: '#section3', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween18) | |
| .addTo(scrollMagicController); | |
| var scene19 = new ScrollScene({ | |
| triggerElement: '#section3', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween19) | |
| .addTo(scrollMagicController); | |
| // Add debug indicators fixed on right side ///Removing spans | |
| /* scene.on('end', (function iterate() { | |
| $('.grid__item span:first-of-type').random().fadeOut(500, function() { | |
| $(this).remove(); | |
| iterate(); | |
| }); | |
| })());*/ | |
| scene.addIndicators(); | |
| }); | |
| /*SCROLL BUTTON FOR THE WHOLE WEBSITE SET INCREMENT */ | |
| $(".scroll-button").click(function(event){ | |
| var y = $(window).scrollTop(); | |
| $('html, body').animate({ scrollTop: y + window.innerHeight}) | |
| }); | |
| </script> | |
| <script> | |
| $("#send_email_button" ).click(function() { | |
| name_val = $("#form41").val(); | |
| email_val = $("#form52").val(); | |
| subject_val = $("#form51").val(); | |
| message_val = $("#form76").val(); | |
| if(name_val == "" || email_val == "" || subject_val == "" || message_val == ""){ | |
| toastr.error('Hi! Please fill all fields to send email'); | |
| return; | |
| } | |
| jQuery.get( "send_email.php", { name: name_val, email: email_val, subject: subject_val, message: message_val }, function( data ) { | |
| if(data != "ok"){ | |
| toastr.error('Hi! There was an error. The email was not sent'); | |
| } | |
| }) | |
| .done(function() { | |
| toastr.info('Hi! The email is sent'); | |
| $(".myinput").val(""); | |
| window.location = "http://depicture.io/"; | |
| }) | |
| .fail(function() { | |
| toastr.error('Hi! There was an error. The email was not sent'); | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script> | |
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | |
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | |
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | |
| })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); | |
| ga('create', 'UA-99591498-1', 'auto'); | |
| ga('send', 'pageview'); | |
| </script> | |
| <meta charset="utf-8"> | |
| <meta name="google-site-verification" content="hLB9t-HkoQxgrZ8PyCYl2PniIWEGfXqrvSTnd5_KZWI" /> | |
| <title>Depicture.io - full service web development.</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <meta name="description" content="Depicture web development studio - contact us for affordable full service web development of your unique website or web application."> | |
| <meta http-equiv="content-type" content="text/html;charset=UTF-8"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <link rel="stylesheet" href="new-style.css"> | |
| <link rel="stylesheet" type="text/css" href="media-style.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script> | |
| if($(window).width() <= 600) { | |
| window.location = "https://depicture.io/mob"; | |
| } | |
| $(window).on('resize',function(){ | |
| if($(window).width() <= 600) { | |
| window.location = "https://depicture.io/mob"; | |
| } | |
| }); | |
| </script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/1.3.0/jquery.scrollmagic.js"></script> | |
| <script src="js/CSSRulePlugin.js"></script> | |
| <style> | |
| /* GRID */ | |
| .grid, | |
| .grid-container { | |
| height: 100%; | |
| width: 100%; | |
| left: 0; | |
| overflow: hidden | |
| } | |
| .grid-container { | |
| z-index: 9; | |
| top: 0; | |
| position: absolute | |
| } | |
| .grid { | |
| z-index: 9; | |
| position: absolute; | |
| top: 0 | |
| } | |
| .grid__item { | |
| z-index: 9; | |
| width: -webkit-calc(100% / 6); | |
| width: calc(100% / 6); | |
| height: -webkit-calc(100% / 4); | |
| height: calc(100% / 4); | |
| position: fixed; | |
| } | |
| .grid__item.cross-top-1 { | |
| top: 0; | |
| left: 0 | |
| } | |
| .grid__item.cross-top-2 { | |
| top: 0; | |
| left: -webkit-calc((100vw / 6)); | |
| left: calc((100vw / 6)) | |
| } | |
| .grid__item.cross-top-3 { | |
| top: 0; | |
| left: -webkit-calc((100vw / 6) *2.5); | |
| left: calc((100vw / 6) *2.5) | |
| } | |
| .grid__item.cross-top-4 { | |
| top: 0; | |
| left: -webkit-calc((100vw / 6) *3); | |
| left: calc((100vw / 6) *3) | |
| } | |
| .grid__item.cross-top-5 { | |
| top: 0; | |
| left: -webkit-calc((100vw / 6) *4); | |
| left: calc((100vw / 6) *4) | |
| } | |
| .grid__item.cross-middle-1 { | |
| top: -webkit-calc((100vh / 4)); | |
| top: calc((100vh / 4)); | |
| left: 0 | |
| } | |
| .grid__item.cross-middle-2 { | |
| top: -webkit-calc((100vh / 4)); | |
| top: calc((100vh / 4)); | |
| left: -webkit-calc((100vw / 6)); | |
| left: calc((100vw / 6)) | |
| } | |
| .grid__item.cross-middle-3 { | |
| top: -webkit-calc((100vh / 4)); | |
| top: calc((100vh / 4)); | |
| left: -webkit-calc((100vw / 6) *2.5); | |
| left: calc((100vw / 6) *2.5); | |
| opacity: 1 | |
| } | |
| .grid__item.cross-middle-4 { | |
| top: -webkit-calc((100vh / 4)); | |
| top: calc((100vh / 4)); | |
| left: -webkit-calc((100vw / 6) *3); | |
| left: calc((100vw / 6) *3) | |
| } | |
| .grid__item.cross-middle-5 { | |
| top: -webkit-calc((100vh / 4)); | |
| top: calc((100vh / 4)); | |
| left: -webkit-calc((100vw / 6) *4); | |
| left: calc((100vw / 6) *4) | |
| } | |
| .grid__item.cross-bottom-1 { | |
| top: -webkit-calc((100vh / 4) *2); | |
| top: calc((100vh / 4) *2); | |
| left: 0 | |
| } | |
| .grid__item.cross-bottom-2 { | |
| top: -webkit-calc((100vh / 4) *2); | |
| top: calc((100vh / 4) *2); | |
| left: -webkit-calc((100vw / 6)); | |
| left: calc((100vw / 6)) | |
| } | |
| .grid__item.cross-bottom-3 { | |
| top: -webkit-calc((100vh / 4) *2); | |
| top: calc((100vh / 4) *2); | |
| left: -webkit-calc((100vw / 6) *2.5); | |
| left: calc((100vw / 6) *2.5) | |
| } | |
| .grid__item.cross-bottom-4 { | |
| top: -webkit-calc((100vh / 4) *2); | |
| top: calc((100vh / 4) *2); | |
| left: -webkit-calc((100vw / 6) *3); | |
| left: calc((100vw / 6) *3) | |
| } | |
| .grid__item.cross-bottom-5 { | |
| top: -webkit-calc((100vh / 4) *2); | |
| top: calc((100vh / 4) *2); | |
| left: -webkit-calc((100vw / 6) *4); | |
| left: calc((100vw / 6) *4) | |
| } | |
| .grid__item.cross-mobile { | |
| display: none | |
| } | |
| .grid__item.cross-middle-3 span { | |
| right: -webkit-calc((-100vh / 4 / 2 / 2) - 2px)!important; | |
| right: calc((-100vh / 4 / 2 / 2) - 2px)!important; | |
| bottom: -webkit-calc((-100vh / 4 / 2 / 2) - 2px)!important; | |
| bottom: calc((-100vh / 4 / 2 / 2) - 2px)!important; | |
| width: -webkit-calc(100vh / 4 / 2)!important; | |
| width: calc(100vh / 4 / 2)!important; | |
| padding-bottom: -webkit-calc(100vh / 4 / 2)!important; | |
| padding-bottom: calc(100vh / 4 / 2)!important | |
| } | |
| .grid__item.cross-middle-3.hide { | |
| opacity: 0; | |
| -webkit-transition: all .22s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .22s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| /*ROTATE HERE */ | |
| .grid__item span { | |
| position: absolute; | |
| right: -webkit-calc((-100vh / 3 / 2 / 2 / 2) - 2px); | |
| right: calc((-100vh / 2.5/ 2 / 2 / 2) - 2px); | |
| bottom: -webkit-calc((-100vh / 4 / 2 / 2 / 2) - 2px); | |
| bottom: calc((-100vh / 4 / 2 / 2 / 2) - 2px); | |
| width: -webkit-calc(((100vh / 3)/ 2)/ 2); | |
| width: calc(((100vh / 2.5)/ 2)/ 2); | |
| padding-bottom: -webkit-calc(((100vh / 4)/ 2)/ 2); | |
| padding-bottom: calc(((100vh / 4)/ 2)/ 2); | |
| height: 0; | |
| -webkit-transition: all .22s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .22s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item span:after, | |
| .grid__item span:before { | |
| content: ''; | |
| display: inline-block; | |
| width: 50%; | |
| height: 2px; | |
| background: rgba(21, 23, 28, .45); | |
| position: absolute | |
| } | |
| .grid__item span:before { | |
| top: -webkit-calc(50% - 1px); | |
| top: calc(50% - 1px); | |
| left: 0; | |
| -webkit-transform: rotate(0) translateZ(0); | |
| transform: rotate(0) translateZ(0); | |
| -webkit-transform-origin: bottom right; | |
| -ms-transform-origin: bottom right; | |
| transform-origin: bottom right; | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item span:after { | |
| top: -webkit-calc(50% - 1px); | |
| top: calc(50% - 1px); | |
| left: -webkit-calc(50% + 1px); | |
| left: calc(50% + 1px); | |
| -webkit-transform: rotate(0) translateZ(0); | |
| transform: rotate(0) translateZ(0); | |
| -webkit-transform-origin: bottom left; | |
| -ms-transform-origin: bottom left; | |
| transform-origin: bottom left; | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| /* AND ROTATE HERE */ | |
| .grid__item span:last-of-type { | |
| -ms-transform: rotate(90deg); | |
| -webkit-transform: rotate(90deg) translateZ(0); | |
| transform: rotate(90deg) translateZ(0) | |
| } | |
| .grid__item span:last-of-type:before { | |
| left: 0 | |
| } | |
| .grid__item span:last-of-type:after { | |
| left: 50% | |
| } | |
| .grid__item span.cross-mobile { | |
| display: none | |
| } | |
| .grid__item.crossRotate span { | |
| -webkit-transform: scale(1); | |
| -ms-transform: scale(1); | |
| transform: scale(1) | |
| } | |
| .grid__item.crossRotate span:first-of-type { | |
| -webkit-transform: rotate(45deg) translateZ(0); | |
| transform: rotate(45deg) translateZ(0); | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossRotate span:last-of-type { | |
| -webkit-transform: rotate(-45deg) translateZ(0); | |
| transform: rotate(-45deg) translateZ(0); | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossRotate.is-hover span { | |
| -webkit-transform: scale(1.1); | |
| -ms-transform: scale(1.1); | |
| transform: scale(1.1) | |
| } | |
| .grid__item.crossRotateWhite { | |
| z-index: 650!important; | |
| cursor: pointer | |
| } | |
| .grid__item.crossRotateWhite span:after, | |
| .grid__item.crossRotateWhite span:before { | |
| background: #fff!important | |
| } | |
| .grid__item.crossRotateWhite span { | |
| -webkit-transform: scale(1); | |
| -ms-transform: scale(1); | |
| transform: scale(1) | |
| } | |
| .grid__item.crossRotateWhite span:first-of-type { | |
| -webkit-transform: rotate(45deg) translateZ(0); | |
| transform: rotate(45deg) translateZ(0); | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossRotateWhite span:last-of-type { | |
| -webkit-transform: rotate(-45deg) translateZ(0); | |
| transform: rotate(-45deg) translateZ(0); | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossRotateWhite.is-hover span, | |
| .grid__item.crossRotateWhite:focus span, | |
| .grid__item.crossRotateWhite:hover span { | |
| -webkit-transform: scale(1.1); | |
| -ms-transform: scale(1.1); | |
| transform: scale(1.1) | |
| } | |
| .grid__item.crossToArrowDown { | |
| z-index: 500 | |
| } | |
| .grid__item.crossToArrowDown.overflow { | |
| z-index: auto | |
| } | |
| .grid__item.crossToArrowDown span { | |
| cursor: pointer | |
| } | |
| .grid__item.crossToArrowDown span:after, | |
| .grid__item.crossToArrowDown span:before { | |
| background: #fff | |
| } | |
| .grid__item.crossToArrowDown span:first-of-type { | |
| z-index: 10 | |
| } | |
| .grid__item.crossToArrowDown span:first-of-type:before { | |
| left: 0; | |
| top: 100%; | |
| -webkit-transform: rotate(45deg) scaleX(1.5); | |
| -ms-transform: rotate(45deg) scaleX(1.5); | |
| transform: rotate(45deg) scaleX(1.5); | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowDown span:first-of-type:after { | |
| top: 100%; | |
| left: 50%; | |
| -webkit-transform: rotate(-45deg) scaleX(1.5); | |
| -ms-transform: rotate(-45deg) scaleX(1.5); | |
| transform: rotate(-45deg) scaleX(1.5); | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowLeft, | |
| .grid__item.crossToArrowLeft.is-hover { | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowDown.is-hover { | |
| -webkit-animation: hoverArrowDown .44s linear forwards; | |
| animation: hoverArrowDown .44s linear forwards | |
| } | |
| .grid__item.crossToArrowLeft { | |
| z-index: 100; | |
| -webkit-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| transform: translateX(0); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowLeft span:after, | |
| .grid__item.crossToArrowLeft span:before { | |
| background: #fff | |
| } | |
| .grid__item.crossToArrowLeft span:first-of-type:after { | |
| left: -webkit-calc(50% - 1px); | |
| left: calc(50% - 1px) | |
| } | |
| .grid__item.crossToArrowLeft span:last-of-type:before { | |
| left: 0; | |
| top: 100%; | |
| -webkit-transform: rotate(45deg) scaleX(1.5); | |
| -ms-transform: rotate(45deg) scaleX(1.5); | |
| transform: rotate(45deg) scaleX(1.5); | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowLeft span:last-of-type:after { | |
| top: 100%; | |
| -webkit-transform: rotate(-45deg) scaleX(1.5); | |
| -ms-transform: rotate(-45deg) scaleX(1.5); | |
| transform: rotate(-45deg) scaleX(1.5); | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowLeft.is-hover { | |
| -webkit-transform: translateX(-10px); | |
| -ms-transform: translateX(-10px); | |
| transform: translateX(-10px); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowRight { | |
| z-index: 100; | |
| -webkit-transform: translateX(0); | |
| -ms-transform: translateX(0); | |
| transform: translateX(0); | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowRight span:after, | |
| .grid__item.crossToArrowRight span:before { | |
| background: #fff | |
| } | |
| .grid__item.crossToArrowRight span:first-of-type:after { | |
| left: -webkit-calc(50% - 1px); | |
| left: calc(50% - 1px) | |
| } | |
| .grid__item.crossToArrowRight span:last-of-type:before { | |
| left: 0; | |
| top: 0; | |
| -webkit-transform: rotate(-45deg) scaleX(1.5); | |
| -ms-transform: rotate(-45deg) scaleX(1.5); | |
| transform: rotate(-45deg) scaleX(1.5); | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowRight span:last-of-type:after { | |
| top: 0; | |
| -webkit-transform: rotate(45deg) scaleX(1.5); | |
| -ms-transform: rotate(45deg) scaleX(1.5); | |
| transform: rotate(45deg) scaleX(1.5); | |
| -webkit-transition: all .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowRight.is-hover, | |
| .sub-nav:after { | |
| -webkit-transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.crossToArrowRight.is-hover { | |
| -webkit-transform: translateX(10px); | |
| -ms-transform: translateX(10px); | |
| transform: translateX(10px); | |
| transition: -webkit-transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94); | |
| transition: transform .44s cubic-bezier(.25, .46, .45, .94), -webkit-transform .44s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid__item.arrowDownToArrowUp { | |
| z-index: 550 | |
| } | |
| .grid__item.arrowDownToArrowUp span { | |
| cursor: pointer | |
| } | |
| .grid__item.arrowDownToArrowUp span:first-of-type:before { | |
| -webkit-transform: rotate(-45deg) scaleX(1.5); | |
| -ms-transform: rotate(-45deg) scaleX(1.5); | |
| transform: rotate(-45deg) scaleX(1.5); | |
| top: 0 | |
| } | |
| .grid__item.arrowDownToArrowUp span:first-of-type:after { | |
| -webkit-transform: rotate(45deg) scaleX(1.5); | |
| -ms-transform: rotate(45deg) scaleX(1.5); | |
| transform: rotate(45deg) scaleX(1.5); | |
| top: 0 | |
| } | |
| .grid__item.arrowDownToArrowUp.is-hover { | |
| -webkit-animation: hoverArrowUp .44s linear forwards; | |
| animation: hoverArrowUp .44s linear forwards | |
| } | |
| .grid__item.crossUp { | |
| z-index: 100 | |
| } | |
| .grid__item.crossDown, | |
| .grid__item.crossDownFull { | |
| z-index: 80 | |
| } | |
| .grid__item.crossUp span:last-of-type { | |
| -webkit-transition-delay: .22s; | |
| transition-delay: .22s | |
| } | |
| .grid__item.crossUp span:last-of-type:after { | |
| background: #fff; | |
| width: -webkit-calc((100vh / 4) + 50% + 2px); | |
| width: calc((100vh / 4) + 50% + 2px); | |
| left: -webkit-calc((-100vh / 4) + 50% - 1px); | |
| left: calc((-100vh / 4) + 50% - 1px); | |
| -webkit-transition-delay: .22s; | |
| transition-delay: .22s | |
| } | |
| .grid__item.crossDown span:last-of-type { | |
| -webkit-transition-delay: .22s; | |
| transition-delay: .22s | |
| } | |
| .grid__item.crossDown span:last-of-type:before { | |
| background: #fff; | |
| width: -webkit-calc(((100vh / 4) + 50%) + 1px); | |
| width: calc(((100vh / 4) + 50%) + 1px); | |
| -webkit-transition-delay: .22s; | |
| transition-delay: .22s | |
| } | |
| .grid__item.crossDown span:last-of-type:after { | |
| background: #fff; | |
| -webkit-transition-delay: .22s; | |
| transition-delay: .22s | |
| } | |
| .grid__item.crossRight, | |
| .grid__item.crossRightFull { | |
| z-index: 90 | |
| } | |
| .grid__item.crossDownFull span:last-of-type:after { | |
| background: #fff; | |
| width: -webkit-calc((100vh / 2) + 1px); | |
| width: calc((100vh / 2) + 1px); | |
| -webkit-transition-delay: 1s; | |
| transition-delay: 1s | |
| } | |
| .grid__item.crossRight span:first-of-type { | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossRight span:first-of-type:after { | |
| background: #fff; | |
| width: -webkit-calc(((100vw / 3) + 50%)); | |
| width: calc(((100vw / 3) + 50%)); | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossRight span:first-of-type:before { | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossLeft, | |
| .grid__item.crossLeftFull { | |
| z-index: 70 | |
| } | |
| .grid__item.crossRightFull span:first-of-type { | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossRightFull span:first-of-type:after { | |
| background: #fff; | |
| width: -webkit-calc((((100vw / 6) * 4))); | |
| width: calc((((100vw / 6) * 4))); | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossRightFull span:first-of-type:before { | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossLeft span:first-of-type { | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossLeft span:first-of-type:before { | |
| background: #fff; | |
| width: -webkit-calc(((100vw / 2) + 50%)); | |
| width: calc(((100vw / 2) + 50%)); | |
| left: -webkit-calc((-100vw / 2)); | |
| left: calc((-100vw / 2)); | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossLeft span:first-of-type:after { | |
| -webkit-transition-delay: 660ms; | |
| transition-delay: 660ms | |
| } | |
| .grid__item.crossLeftFull span:first-of-type { | |
| -webkit-transition-delay: 1.44s; | |
| transition-delay: 1.44s | |
| } | |
| .grid__item.crossLeftFull span:first-of-type:before { | |
| background: #fff; | |
| width: -webkit-calc(((100vw / 2) + 50%)); | |
| width: calc(((100vw / 2) + 50%)); | |
| left: -webkit-calc((-100vw / 2)); | |
| left: calc((-100vw / 2)); | |
| -webkit-transition-delay: 1.44s; | |
| transition-delay: 1.44s | |
| } | |
| .grid__item.crossLeftFull span:first-of-type:after { | |
| -webkit-transition-delay: 1.44s; | |
| transition-delay: 1.44s | |
| } | |
| @media screen and (max-width:769px) { | |
| .grid__item span.cross-mobile { | |
| display: block | |
| } | |
| .grid__item { | |
| width: -webkit-calc(100% / 4); | |
| width: calc(100% / 4); | |
| height: -webkit-calc(100% / 6); | |
| height: calc(100% / 6) | |
| } | |
| .grid__item.cross-bottom-2, | |
| .grid__item.cross-bottom-4, | |
| .grid__item.cross-middle-2, | |
| .grid__item.cross-middle-4, | |
| .grid__item.cross-top-2, | |
| .grid__item.cross-top-4 { | |
| display: none | |
| } | |
| .grid__item.cross-mobile { | |
| display: block | |
| } | |
| .grid__item.cross-top-1 { | |
| top: 0; | |
| left: 0 | |
| } | |
| .grid__item.cross-top-3 { | |
| top: 0; | |
| left: -webkit-calc((100vw / 4)); | |
| left: calc((100vw / 4)) | |
| } | |
| .grid__item.cross-top-5 { | |
| top: 0; | |
| left: -webkit-calc((100vw / 4) *2); | |
| left: calc((100vw / 4) *2) | |
| } | |
| .grid__item.cross-middletop-1 { | |
| top: -webkit-calc((100vh / 6)); | |
| top: calc((100vh / 6)); | |
| left: 0 | |
| } | |
| .grid__item.cross-middletop-3 { | |
| top: -webkit-calc((100vh / 6)); | |
| top: calc((100vh / 6)); | |
| left: -webkit-calc((100vw / 4)); | |
| left: calc((100vw / 4)) | |
| } | |
| .grid__item.cross-middletop-5 { | |
| top: -webkit-calc((100vh / 6)); | |
| top: calc((100vh / 6)); | |
| left: -webkit-calc((100vw / 4) *2); | |
| left: calc((100vw / 4) *2) | |
| } | |
| .grid__item.cross-middle-1 { | |
| top: -webkit-calc((100vh / 6) * 2); | |
| top: calc((100vh / 6) * 2); | |
| left: 0 | |
| } | |
| .grid__item.cross-middle-3 { | |
| top: -webkit-calc((100vh / 6) * 2); | |
| top: calc((100vh / 6) * 2); | |
| left: -webkit-calc((100vw / 4)); | |
| left: calc((100vw / 4)) | |
| } | |
| .grid__item.cross-middle-5 { | |
| top: -webkit-calc((100vh / 6) * 2); | |
| top: calc((100vh / 6) * 2); | |
| left: -webkit-calc((100vw / 4) *2); | |
| left: calc((100vw / 4) *2) | |
| } | |
| .grid__item.cross-middlebottom-1 { | |
| top: -webkit-calc((100vh / 6) * 3); | |
| top: calc((100vh / 6) * 3); | |
| left: 0 | |
| } | |
| .grid__item.cross-middlebottom-3 { | |
| top: -webkit-calc((100vh / 6) * 3); | |
| top: calc((100vh / 6) * 3); | |
| left: -webkit-calc((100vw / 4)); | |
| left: calc((100vw / 4)) | |
| } | |
| .grid__item.cross-middlebottom-5 { | |
| top: -webkit-calc((100vh / 6) * 3); | |
| top: calc((100vh / 6) * 3); | |
| left: -webkit-calc((100vw / 4) *2); | |
| left: calc((100vw / 4) *2) | |
| } | |
| .grid__item.cross-bottom-1 { | |
| top: -webkit-calc((100vh / 6) *4); | |
| top: calc((100vh / 6) *4); | |
| left: 0 | |
| } | |
| .grid__item.cross-bottom-3 { | |
| top: -webkit-calc((100vh / 6) *4); | |
| top: calc((100vh / 6) *4); | |
| left: -webkit-calc((100vw / 4)); | |
| left: calc((100vw / 4)) | |
| } | |
| .grid__item.cross-bottom-5 { | |
| top: -webkit-calc((100vh / 6) *4); | |
| top: calc((100vh / 6) *4); | |
| left: -webkit-calc((100vw / 4) *2); | |
| left: calc((100vw / 4) *2) | |
| } | |
| .grid__item span { | |
| right: -webkit-calc(((-100vw / 4)/ 2)/ 2 / 2); | |
| right: calc(((-100vw / 4)/ 2)/ 2 / 2); | |
| bottom: -webkit-calc(((-100vw / 4)/ 2)/ 2 / 2); | |
| bottom: calc(((-100vw / 4)/ 2)/ 2 / 2); | |
| width: -webkit-calc(((100vw / 4)/ 2)/ 2); | |
| width: calc(((100vw / 4)/ 2)/ 2); | |
| padding-bottom: -webkit-calc(((100vw / 4)/ 2)/ 2); | |
| padding-bottom: calc(((100vw / 4)/ 2)/ 2) | |
| } | |
| .grid__item.crossToArrowDown { | |
| z-index: 0 | |
| } | |
| .grid__item.cross-middle-3 span { | |
| right: -webkit-calc((-100vw / 4)/ 2 / 2)!important; | |
| right: calc((-100vw / 4)/ 2 / 2)!important; | |
| bottom: -webkit-calc((-100vw / 4)/ 2 / 2)!important; | |
| bottom: calc((-100vw / 4)/ 2 / 2)!important; | |
| width: -webkit-calc(100vw / 4 / 2)!important; | |
| width: calc(100vw / 4 / 2)!important; | |
| padding-bottom: -webkit-calc(100vw / 4 / 2)!important; | |
| padding-bottom: calc(100vw / 4 / 2)!important | |
| } | |
| .grid__item.crossUp { | |
| z-index: 505 | |
| } | |
| .grid__item.crossUp span:last-of-type:after { | |
| width: -webkit-calc(((100vh / 6) * 3) + 50% + 2px); | |
| width: calc(((100vh / 6) * 3) + 50% + 2px); | |
| left: -webkit-calc(((-100vh / 6) * 3) + 50% - 1px); | |
| left: calc(((-100vh / 6) * 3) + 50% - 1px) | |
| } | |
| .grid__item.crossRight, | |
| .grid__item.crossRightFull { | |
| z-index: 504 | |
| } | |
| .grid__item.crossRight span:first-of-type:after, | |
| .grid__item.crossRightFull span:first-of-type:after { | |
| width: -webkit-calc((((100vw / 4) * 2))); | |
| width: calc((((100vw / 4) * 2))) | |
| } | |
| .grid__item.crossLeft, | |
| .grid__item.crossLeftFull { | |
| z-index: 502 | |
| } | |
| .grid__item.crossLeft span:first-of-type:before, | |
| .grid__item.crossLeftFull span:first-of-type:before { | |
| width: -webkit-calc(((100vw / 4) + 50%)); | |
| width: calc(((100vw / 4) + 50%)); | |
| left: -webkit-calc((-100vw / 4)); | |
| left: calc((-100vw / 4)); | |
| -webkit-transition-delay: 1.5s; | |
| transition-delay: 1.5s | |
| } | |
| .grid__item.crossDown, | |
| .grid__item.crossDownFull { | |
| z-index: 503 | |
| } | |
| .grid__item.crossDown span:last-of-type:after, | |
| .grid__item.crossDownFull span:last-of-type:after { | |
| width: -webkit-calc(((100vh / 6) * 4) + 2px); | |
| width: calc(((100vh / 6) * 4) + 2px); | |
| -webkit-transition-delay: 1s; | |
| transition-delay: 1s | |
| } | |
| .grid__item.crossDown span:last-of-type:before, | |
| .grid__item.crossDownFull span:last-of-type:before { | |
| background: rgba(21, 23, 28, .45); | |
| -webkit-transition-delay: 1s; | |
| transition-delay: 1s | |
| } | |
| } | |
| body.overlay:before, | |
| body:before { | |
| content: ''; | |
| display: block | |
| } | |
| .grid--blue .grid__item span:after, | |
| .grid--blue .grid__item span:before { | |
| background: #B8C1FF; | |
| -webkit-transition: all .22s cubic-bezier(.25, .46, .45, .94); | |
| transition: all .22s cubic-bezier(.25, .46, .45, .94) | |
| } | |
| .grid--blue .grid__item.crossDownFull span:last-of-type:after, | |
| .grid--blue .grid__item.crossRightFull span:first-of-type:after, | |
| .grid--blue .grid__item.crossRotate span:after, | |
| .grid--blue .grid__item.crossRotate span:before, | |
| .grid--blue .grid__item.crossToArrowDown span:after, | |
| .grid--blue .grid__item.crossToArrowDown span:before, | |
| .grid--blue .grid__item.crossToArrowLeft span:after, | |
| .grid--blue .grid__item.crossToArrowLeft span:before, | |
| .grid--blue .grid__item.crossToArrowRight span:after, | |
| .grid--blue .grid__item.crossToArrowRight span:before { | |
| background: #0032ff | |
| } | |
| .grid--blue .grid__item.crossRightFull span:first-of-type:before { | |
| -webkit-transition-delay: 0s; | |
| transition-delay: 0s | |
| } | |
| .grid--blue .grid__item.crossDownFull span:last-of-type:before { | |
| background: #B8C1FF; | |
| -webkit-transition-delay: 0s; | |
| transition-delay: 0s | |
| } | |
| .grid--blue .grid__item.crossLeftFull span:first-of-type:before, | |
| .grid--blue .grid__item.crossUp span:last-of-type:after { | |
| background: #0032ff | |
| } | |
| .grid--blue .grid__item.crossLeftFull span:first-of-type:after { | |
| -webkit-transition-delay: 0s; | |
| transition-delay: 0s | |
| } | |
| .grid--dark-blue .grid__item span:after, | |
| .grid--dark-blue .grid__item span:before { | |
| background-color: #10215F | |
| } | |
| .grid--dark-blue .grid__item.crossToArrowDown span:after, | |
| .grid--dark-blue .grid__item.crossToArrowDown span:before { | |
| background: #fff | |
| } | |
| .grid--dark-blue .grid__item.crossDownFull span:last-of-type:before { | |
| -webkit-transition-delay: 0s; | |
| transition-delay: 0s; | |
| background: #10215F | |
| } | |
| .grid--white .grid__item span:after, | |
| .grid--white .grid__item span:before { | |
| background-color: rgba(255, 255, 255, .15) | |
| } | |
| .grid--white .grid__item.crossRotate span:after, | |
| .grid--white .grid__item.crossRotate span:before, | |
| .grid--white .grid__item.crossToArrowDown span:after, | |
| .grid--white .grid__item.crossToArrowDown span:before, | |
| .grid--white .grid__item.crossToArrowLeft span:after, | |
| .grid--white .grid__item.crossToArrowLeft span:before, | |
| .grid--white .grid__item.crossToArrowRight span:after, | |
| .grid--white .grid__item.crossToArrowRight span:before { | |
| background: #fff | |
| } | |
| .grid--white .grid__item.crossRightFull span:first-of-type:before { | |
| -webkit-transition-delay: 0s; | |
| transition-delay: 0s | |
| } | |
| .grid--white .grid__item.crossDownFull span:last-of-type:before { | |
| -webkit-transition-delay: 0s; | |
| transition-delay: 0s; | |
| background: rgba(255, 255, 255, .15) | |
| } | |
| /* MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| *{ | |
| box-sizing: border-box; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| @font-face { | |
| font-family: "OCRAStd"; | |
| src: url("css/fonts/OCRAStd.woff") format("woff"); | |
| } | |
| @font-face { | |
| font-family: "Sk-Modernist-Regular"; | |
| src: url("css/fonts/Sk-Modernist-Regular.woff") format("woff"); | |
| } | |
| @font-face { | |
| font-family: "Sk-Modernist-Bold"; | |
| src: url("css/fonts/Sk-Modernist-Bold.woff") format("woff"); | |
| } | |
| @font-face { | |
| font-family: "OratorStd"; | |
| src: url("css/fonts/OratorStd.woff") format("woff"); | |
| } | |
| body { | |
| } | |
| .grid-wrap { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* CHANGE WIDTH AND HEIGHT TO GRID SIZES */ | |
| /* MENU STYLES */ | |
| [class*="container-menuitem"] { | |
| font-family: "OCRAStd"; | |
| opacity: 1; | |
| margin-left: -65px; | |
| pointer-events: none; | |
| } | |
| .container-menuitem1 { | |
| z-index: 12; | |
| position: fixed; | |
| background: rgba(0,0,0,0); | |
| width: 100%; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(10, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . m m m . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| } | |
| .menuitem1 { | |
| letter-spacing: 1vw; | |
| margin-left: 2vw; | |
| grid-area: m; | |
| color: white; | |
| font-size: 3.5vw; | |
| padding: ; | |
| z-index: 12; | |
| } | |
| .container-menuitem2 { | |
| z-index: 10; | |
| position: fixed; | |
| background: rgba(0,0,0,0); | |
| width: 100%; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(10, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . m m m . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| } | |
| .menuitem2 { | |
| letter-spacing: 1vw; | |
| margin-left: 2vw; | |
| grid-area: m; | |
| color: white; | |
| font-size: 3.5vw; | |
| padding: ; | |
| z-index: 10; | |
| } | |
| .container-menuitem3 { | |
| z-index: 10; | |
| position: fixed; | |
| background: rgba(0,0,0,0); | |
| width: 100%; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(10, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . m m m . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| } | |
| .menuitem3 { | |
| letter-spacing: 1vw; | |
| margin-left: 2vw; | |
| grid-area: m; | |
| color: white; | |
| font-size: 3.5vw; | |
| padding: ; | |
| z-index: 10; | |
| } | |
| .container-menuitem4 { | |
| z-index: 10; | |
| position: fixed; | |
| background: rgba(0,0,0,0); | |
| width: 100%; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(10, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . m m m . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| } | |
| .menuitem4 { | |
| letter-spacing: 1vw; | |
| margin-left: 2vw; | |
| grid-area: m; | |
| color: white; | |
| font-size: 3.5vw; | |
| padding: ; | |
| z-index: 10; | |
| } | |
| /* MENU STYLES END */ | |
| [class*="container-grid"] { | |
| align-self: center; | |
| z-index: 10; | |
| width: 100%; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| ". . . . . . . . . . . ." | |
| ". . b b b b b b . . . ." | |
| ". . b b b b b b . . . ." | |
| ". . . . . . . . . . . ." | |
| } | |
| [class*="section"] { | |
| margin-left: 2px; | |
| margin-top: 2px; | |
| } | |
| .container-grid-fixed-scroll { | |
| z-index: 100; | |
| position: fixed; | |
| left: 0; | |
| width: 16.5vw; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| " . . " | |
| " . . " | |
| " . . " | |
| " . s " | |
| } | |
| .scroll-button-area { | |
| grid-area: s; | |
| } | |
| .scroll-button { | |
| display: flex; | |
| justify-content: center; | |
| transform: translate(2px, 2px); | |
| cursor: pointer; | |
| height: 65px; | |
| width: 65px; | |
| background-position: top; | |
| float: right; | |
| background-color: rgba(0,0,0,0.6); | |
| } | |
| .scroll-button-inner { | |
| display: flex; | |
| align-self: center; | |
| background: url(img/arrow-down-grey.svg) no-repeat; | |
| background-position: top; | |
| background-size: contain; | |
| height: 50%; | |
| width: 50%; | |
| } | |
| .container-grid { | |
| /* | |
| z-index: 1; | |
| background: url(img/depicFON1-01.svg); | |
| background-size: 100%; | |
| background-repeat: no-repeat; | |
| */ | |
| } | |
| .section1 { | |
| z-index: 12; | |
| grid-area: b; | |
| margin-bottom: -1px; | |
| background: rgba(0,0,0,0.6); | |
| } | |
| .container-logo { | |
| position: fixed; | |
| z-index: 9; | |
| background: rgba(0,0,0,0.2); | |
| width: 100%; | |
| height: 100vh; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| ". . . . . . . . . . l l" | |
| ". . . . . . . m m m . ." | |
| ". . . . . . . m m m . ." | |
| ". . . . . . . . . . . ." | |
| } | |
| .logo-wrapper{ | |
| background-color: rgba(0,0,0,0.5); | |
| margin-bottom: -1px; | |
| margin-top: 1vw; | |
| margin-left: 0.85vw; | |
| margin-right: 1vw; | |
| grid-area: l; | |
| background: url(LOGOLOGO-01.svg); | |
| background-repeat: no-repeat; | |
| background-size: contain; | |
| } | |
| /* | |
| .logo-background { | |
| grid-area: l; | |
| margin-bottom: -1px; | |
| margin-top: 30px; | |
| margin-left: 14px; | |
| margin-right: 88px; | |
| background-color: rgba(0,0,0,0.5); | |
| } | |
| */ | |
| .container-grid-2 { | |
| z-index: 14; | |
| } | |
| .section2 { | |
| z-index: 14; | |
| grid-area: b; | |
| margin-bottom: -1px; | |
| background: rgba(0,0,0,0.6); | |
| } | |
| .container-grid-3 { | |
| z-index: 16; | |
| } | |
| .section3 { | |
| z-index: 16; | |
| grid-area: b; | |
| margin-bottom: -1px; | |
| } | |
| .container-grid-4 { | |
| z-index: 18; | |
| } | |
| .section4 { | |
| z-index: 18; | |
| grid-area: b; | |
| margin-bottom: -1px; | |
| background: url(img/contactblock.svg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| } | |
| .change-background { | |
| z-index: 1; | |
| height: 100%; | |
| width: 100%; | |
| position: fixed; | |
| background: url(img/mainbg.svg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| } | |
| .change-background2 { | |
| /* | |
| transform: translateY(100%); | |
| */ | |
| opacity: 0; | |
| z-index: 1; | |
| height: 100%; | |
| width: 100%; | |
| position: fixed; | |
| background: url(img/portfoliobg.svg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| } | |
| .change-background3 { | |
| /* | |
| transform: translateY(100%); | |
| */ | |
| opacity: 0; | |
| z-index: 1; | |
| height: 100%; | |
| width: 100%; | |
| position: fixed; | |
| background: url(img/testimonialsbg.svg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| } | |
| .change-background4 { | |
| /* | |
| transform: translateY(100%); | |
| */ | |
| opacity: 0; | |
| z-index: 1; | |
| height: 100%; | |
| width: 100%; | |
| position: fixed; | |
| background: url(img/contactbg.svg); | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| } | |
| /* SECTION STYLES */ | |
| .section-block-one { | |
| display: grid; | |
| align-self: start; | |
| width: 100%; | |
| height: 100%; | |
| padding: 5% 5% 5% 5%; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(6, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| "m m m m m m m m . . . ." | |
| "m m m m m m m m . . . ." | |
| "m m m m m m m m . . . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . . . ." | |
| "s s s s s s s s s . . ." | |
| } | |
| .section-main-text { | |
| grid-area: m; | |
| font-family: "Sk-Modernist-Bold"; | |
| font-size: 2.75vh; | |
| color: white; | |
| } | |
| .section-secondary-text { | |
| grid-area: s; | |
| font-family: "Sk-Modernist-Regular"; | |
| font-size: 2vh; | |
| color: white; | |
| } | |
| .section-block-two { | |
| margin-left: 0; | |
| margin-top: 0; | |
| display: grid; | |
| align-self: start; | |
| width: 120%; | |
| height: 125%; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| "a a a a a a a a a a . ." | |
| "a a a a a a a a a a . ." | |
| "a a a a a a a a a a . ." | |
| "a a a a a a a a a a . ."; | |
| overflow-x: hidden; | |
| } | |
| .portfolio-wrapper { | |
| grid-area: a; | |
| height: 100%; | |
| width: 195%; | |
| padding-right: 93%; | |
| overflow-y: scroll; | |
| overflow-x: hidden; | |
| } | |
| .portfolio-module-photo { | |
| width: 49.3vw; | |
| } | |
| .portfolio-image { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .portfolio-image-inner { | |
| width: 100%; | |
| height: 100%; | |
| margin-bottom: -4px; | |
| } | |
| /* SECTION OPINION */ | |
| .section-block-three { | |
| background-color: rgba(0,0,0,0.85); | |
| margin-left: 0; | |
| margin-top: 0; | |
| display: grid; | |
| align-self: start; | |
| width: 100%; | |
| height: 125%; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(6, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| "a a a a d d d d d d . ." | |
| "a a a a d d d d d d . ." | |
| "b b b b e e e e e e . ." | |
| "b b b b e e e e e e . ." | |
| "c c c c f f f f f f . ." | |
| "c c c c f f f f f f . ." | |
| ; | |
| overflow-x: hidden; | |
| overflow-y: hidden; | |
| padding-top: 15px; | |
| } | |
| [class*="opinion-pic"] { | |
| margin: 0px 2px 15px 15px; | |
| } | |
| [class*="opinion-desc-"] { | |
| margin: 3% 2px 15px -1%; | |
| } | |
| .opinion-pic-one { | |
| background: url(img/guy-01.svg); | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| grid-area: a; | |
| } | |
| .opinion-desc-one { | |
| grid-area: d; | |
| } | |
| .opinion-pic-two { | |
| background: url(img/guy2-01.svg); | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| grid-area: b; | |
| } | |
| .opinion-desc-two { | |
| grid-area: e; | |
| } | |
| .opinion-pic-three { | |
| background: url(img/girl-01.svg); | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| grid-area: c; | |
| } | |
| .opinion-desc-three { | |
| grid-area: f; | |
| } | |
| .opinion-title { | |
| font-family: 'Sk-Modernist-Bold'; | |
| font-size: 1.74vw; | |
| color: rgba(250,250,250,1); | |
| } | |
| .opinion-subtitle { | |
| font-family: 'OratorStd'; | |
| color: rgba(66, 129, 164, 1); | |
| } | |
| .opinion-description { | |
| font-family: 'Sk-Modernist-Regular'; | |
| font-size: 0.9vw; | |
| color: rgba(250,250,250,1); | |
| } | |
| /* CONTACT SECTION */ | |
| .section-block-four { | |
| background: url('img/contactblock.svg'); | |
| background-size: cover; | |
| margin-left: 0; | |
| margin-top: 0; | |
| display: grid; | |
| align-self: start; | |
| width: 100%; | |
| height: 100%; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(6, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| "a a a a d d d d d d . ." | |
| "a a a a d d d d d d . ." | |
| "b b b b e e e e e e . ." | |
| "b b b b e e e e e e . ." | |
| "c c c c f f f f f f . ." | |
| "c c c c f f f f f f . ." | |
| ; | |
| overflow-x: hidden; | |
| padding-top: 15px; | |
| } | |
| /* CONTACT FORM */ | |
| .contact-section { | |
| display: grid; | |
| width: 100%; | |
| height: 110%; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(6, 1fr); | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| "a a a a a a a a a a . ." | |
| "a a a a a a a a a a . ." | |
| "b b b b b b b b b b . ." | |
| "b b b b b b b b b b . ." | |
| "b b b b b b b b b b . ." | |
| "b b b b b b b b b b . ." | |
| ; | |
| } | |
| .form-description { | |
| grid-area: a; | |
| padding: 2vw 2vw 2vw 2vw; | |
| } | |
| .form-title { | |
| font-family: "Sk-Modernist-Bold"; | |
| font-size: 2.5vw; | |
| color: white; | |
| } | |
| .form-subtitle { | |
| font-family: "Sk-Modernist-Regular"; | |
| font-size: 1.25vw; | |
| color: white; | |
| } | |
| .form { | |
| grid-area: b; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(8, 1fr); | |
| padding: 2vw 2vw 0vw 2vw; | |
| grid-gap: 0px; | |
| grid-template-areas: | |
| "a a a a a b b b b b . ." | |
| "a a a a a b b b b b . ." | |
| "c c c c c c c c c c . ." | |
| "c c c c c c c c c c . ." | |
| "d d d d d d d d d d . ." | |
| "d d d d d d d d d d . ." | |
| ". . . . . . . . . . . ." | |
| ". . . . . . . . . e e ." | |
| ; | |
| } | |
| textarea { | |
| resize: none; | |
| } | |
| input::-webkit-input-placeholder { | |
| color: white !important; | |
| } | |
| input:-moz-placeholder { /* Firefox 18- */ | |
| color: white !important; | |
| } | |
| input::-moz-placeholder { /* Firefox 19+ */ | |
| color: white !important; | |
| } | |
| input:-ms-input-placeholder { | |
| color: white !important; | |
| } | |
| textarea::-webkit-input-placeholder { | |
| color: white; | |
| } | |
| textarea:-moz-placeholder { /* Firefox 18- */ | |
| color: white; | |
| } | |
| textarea::-moz-placeholder { /* Firefox 19+ */ | |
| color: white; | |
| } | |
| textarea:-ms-input-placeholder { | |
| color: white; | |
| } | |
| .form-label { | |
| font-size: 12px; | |
| color: white !important; | |
| margin: 0; | |
| display: block; | |
| opacity: 1; | |
| -webkit-transition: .333s ease top, .333s ease opacity; | |
| transition: .333s ease top, .333s ease opacity; | |
| } | |
| .form-submit-button { | |
| grid-area: e; | |
| display: flex; | |
| height: 50px; | |
| width: 125px; | |
| background-color: #4281A4; | |
| text-decoration: none; | |
| font-family: "Sk-Modernist-Bold"; | |
| margin-left: 17px; | |
| font-size: 1.5vw; | |
| color: white; | |
| align-items: center; | |
| justify-content: center; | |
| -webkit-transition: -webkit-box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), -webkit-transform 200ms cubic-bezier(0.2, 0, 0.7, 1); | |
| transition: -webkit-box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), -webkit-transform 200ms cubic-bezier(0.2, 0, 0.7, 1); | |
| transition: box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), transform 200ms cubic-bezier(0.2, 0, 0.7, 1); | |
| transition: box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), transform 200ms cubic-bezier(0.2, 0, 0.7, 1), -webkit-box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), -webkit-transform 200ms cubic-bezier(0.2, 0, 0.7, 1); | |
| } | |
| .form-submit-button:hover { | |
| -webkit-box-shadow: 0 0 1px 15px rgba(84,141,173, 0.4), 0 0 1px 30px rgba(103,154,182, 0.1), 0 0 1px 45px rgba(122,166,191, 0.1); | |
| box-shadow: 0 0 1px 15px rgba(84,141,173, 0.4), 0 0 1px 30px rgba(103,154,182, 0.1), 0 0 1px 45px rgba(122,166,191, 0.1); | |
| } | |
| .form-group-one { | |
| color: white; | |
| grid-area: a; | |
| } | |
| .form-group-two { | |
| grid-area: b; | |
| } | |
| .form-group-three { | |
| width: 100%; | |
| grid-area: c; | |
| } | |
| .form-group-four { | |
| grid-area: d; | |
| } | |
| .form-control { | |
| color: white; | |
| border-radius: 0; | |
| border-color: #fff; | |
| border-width: 0 0 2px 0; | |
| background-color: rgba(0,0,0,0); | |
| border-style: none none solid none; | |
| box-shadow: none; | |
| font-family: "Sk-Modernist-Regular"; | |
| font-size: 1vw; | |
| } | |
| .form-control:focus { | |
| box-shadow: none; | |
| border-color: #5e9bfc; | |
| } | |
| .js-hide-label { | |
| opacity: 0; | |
| } | |
| .js-unhighlight-label { | |
| color: #999 | |
| } | |
| .btn-start-order { | |
| background: 0 0 #ffffff; | |
| border: 1px solid #2f323a; | |
| border-radius: 3px; | |
| color: white; | |
| font-family: "Raleway", sans-serif; | |
| font-size: 16px; | |
| line-height: inherit; | |
| margin: 30px 0; | |
| padding: 10px 50px; | |
| text-transform: uppercase; | |
| transition: all 0.25s ease 0s; | |
| } | |
| .btn-start-order:hover,.btn-start-order:active, .btn-start-order:focus { | |
| border-color: #5e9bfc; | |
| color: #5e9bfc; | |
| } | |
| /*SCROLL PROMPT | |
| section { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .demo a { | |
| display: flex; | |
| align-self: center; | |
| justify-content: center; | |
| position: absolute; | |
| height: 50px; | |
| width: 50px; | |
| left: 30%; | |
| z-index: 30; | |
| display: inline-block; | |
| -webkit-transform: translate(0, -50%); | |
| transform: translate(0, -50%); | |
| color: #2d2d2d; | |
| font : normal 400 20px/1 'Josefin Sans', sans-serif; | |
| letter-spacing: .1em; | |
| text-decoration: none; | |
| transition: opacity .3s; | |
| } | |
| .demo a:hover { | |
| opacity: .8; | |
| cursor: default; | |
| } | |
| #section05 a { | |
| top: 35vh; | |
| } | |
| #section05 a span { | |
| display: flex; | |
| align-self: center; | |
| justify-content: center; | |
| position: absolute; | |
| top: 180%; | |
| left: 50%; | |
| width: 40px; | |
| height: 40px; | |
| margin-left: -12px; | |
| border-left: 2px solid #fff; | |
| border-bottom: 2px solid #fff; | |
| -webkit-transform: rotate(-45deg); | |
| transform: rotate(-45deg); | |
| -webkit-animation: sdb05 1.5s infinite; | |
| animation: sdb05 1.5s infinite; | |
| box-sizing: border-box; | |
| } | |
| @-webkit-keyframes sdb05 { | |
| 0% { | |
| -webkit-transform: rotate(-45deg) translate(0, 0); | |
| opacity: 0; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| -webkit-transform: rotate(-45deg) translate(-20px, 20px); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes sdb05 { | |
| 0% { | |
| transform: rotate(-45deg) translate(0, 0); | |
| opacity: 0; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: rotate(-45deg) translate(-20px, 20px); | |
| opacity: 0; | |
| } | |
| } | |
| */ | |
| . | |
| </style> | |
| </head> | |
| <body > | |
| <script type="text/javascript"> | |
| </script> | |
| <script> | |
| </script> | |
| <div class="grid grid--dark" id="animate1"> | |
| <div class="grid__item cross-top-1"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-top-2"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-top-3"> | |
| <span></span><span></span> | |
| </div><!-- | |
| <div class="grid__item cross-top-4"> | |
| <span></span><span></span> | |
| </div> | |
| --> | |
| <div class="grid__item cross-top-5"> | |
| <span></span><span></span> | |
| </div | |
| <div class="grid__item cross-middletop-1 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middletop-2 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middletop-3 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middletop-4 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middletop-5 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middle-1"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middle-2"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middle-3"> | |
| <span></span><span></span> | |
| </div><!-- | |
| <div class="grid__item cross-middle-4"> | |
| <span></span><span></span> | |
| </div> | |
| --> | |
| <div class="grid__item cross-middle-5"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middlebottom-1 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middlebottom-2 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middlebottom-3 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middlebottom-4 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-middlebottom-5 cross-mobile"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-bottom-1"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-bottom-2"> | |
| <span></span><span></span> | |
| </div> | |
| <div class="grid__item cross-bottom-3"> | |
| <span></span><span></span> | |
| </div><!-- | |
| <div class="grid__item cross-bottom-4"> | |
| <span></span><span></span> | |
| </div> | |
| --> | |
| <div class="grid__item cross-bottom-5"> | |
| <span></span><span></span> | |
| </div> | |
| </div> | |
| <div class="change-background"> | |
| </div> | |
| <div class="change-background2"> | |
| </div> | |
| <div class="change-background3"> | |
| </div> | |
| <div class="change-background4"> | |
| </div> | |
| <div class="grid-wrap"> | |
| <div class="container-menuitem1"> | |
| <div class="menuitem1"> | |
| Depicture | |
| </div> | |
| </div> | |
| <div class="container-menuitem2"> | |
| <div class="menuitem2"> | |
| Portfolio | |
| </div> | |
| </div> | |
| <div class="container-menuitem3"> | |
| <div class="menuitem3"> | |
| Opinion | |
| </div> | |
| </div> | |
| <div class="container-menuitem4"> | |
| <div class="menuitem4"> | |
| Contact | |
| </div> | |
| </div> | |
| <div class="container-grid-fixed-scroll"> | |
| <div class="scroll-button-area"> | |
| <div class="scroll-button"> | |
| <div class="scroll-button-inner"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-logo"> | |
| <div class="logo-background"> | |
| </div> | |
| <div class="logo-wrapper"> | |
| </div> | |
| </div> | |
| <div class="container-grid"> | |
| <div class="section1" id="section1"> | |
| <div class="section-block-one"> | |
| <div class="section-main-text"> | |
| We are a <font | |
| style="background-color: #E6B99C; color: black;">full-service</font> web development agency, specializing on unique user experiences. We believe in web design that inspires users to explore and interact, design that helps <font | |
| style="background-color: #E6B99C; color: black;">build a lasting connection</font> between you and your visitors. | |
| </div> | |
| <div class="section-secondary-text"> | |
| We can take your project by the hand, and guide it from conception to maturity taking care of all context: we build backend, frontend and everything in the middle to make well-rounded web applications. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-grid-2"> | |
| <div class="section2" id="section2"> | |
| <div class="section-block-two"> | |
| <div class="portfolio-wrapper"> | |
| <div class="portfolio-module-photo"> | |
| <section id="section05" class="demo"> | |
| <a href="#section06"><span></span></a> | |
| </section> | |
| <img class="portfolio-image-inner" src="img/1-01.png"> | |
| <img class="portfolio-image-inner" src="img/2-01.png"> | |
| <img class="portfolio-image-inner" src="img/3-01.png"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-grid-3"> | |
| <div class="section3" id="section3"> | |
| <div class="section-block-three"> | |
| <div class="opinion-pic-one"> | |
| </div> | |
| <div class="opinion-desc-one"> | |
| <div class="opinion-title"> | |
| Shai Aharony | |
| </div> | |
| <div class="opinion-subtitle"> | |
| Managing Director - Reboot Online | |
| </div> | |
| <div class="opinion-description"> | |
| Special thanks to the Depicture team - they gave us the necessary data visualization tools to make the task of conveying data to our users easy and effective | |
| </div> | |
| </div> | |
| <div class="opinion-pic-two"> | |
| </div> | |
| <div class="opinion-desc-two"> | |
| <div class="opinion-title"> | |
| Steven Englander | |
| </div> | |
| <div class="opinion-subtitle"> | |
| Innovation, Product Management, Growth, Recruiting | |
| </div> | |
| <div class="opinion-description"> | |
| Outstanding work! The depicture team are highly skilled <br>data visualization experts. They went above and beyond <br>our expectations. I am thrilled with how the work turned <br>out! | |
| </div> | |
| </div> | |
| <div class="opinion-pic-three"> | |
| </div> | |
| <div class="opinion-desc-three"> | |
| <div class="opinion-title"> | |
| Gabrielle Joyce | |
| </div> | |
| <div class="opinion-subtitle"> | |
| Marketing and Creative | |
| </div> | |
| <div class="opinion-description"> | |
| The Depicture team has taken a creative and effective approach to finding a solution to our problem. They have been in full control of the situation - from idea to <br>production. Professional, prompt and easy to work with! | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-grid-4"> | |
| <div class="section4" id="section4"> | |
| <div class="contact-section"> | |
| <div class="form-description"> | |
| <div class="form-title"> | |
| Contact us | |
| </div> | |
| <div class="form-subtitle"> | |
| Lets get in touch! We are always happy to answer your questions. Send us a message and we will get back to you shortly. | |
| </div> | |
| </div> | |
| <form id="contact-form" class="form" action="#" method="POST" role="form"> | |
| <div class="form-group-one"> | |
| <label class="form-label" for="form41">Your Name</label> | |
| <input type="text" class="form-control" id="form41" name="name" placeholder="Your name" tabindex="1" required> | |
| </div> | |
| <div class="form-group-two"> | |
| <label class="form-label" for="form52">Your Email</label> | |
| <input type="email" class="form-control" id="form52" name="email" placeholder="Your Email" tabindex="2" required> | |
| </div> | |
| <div class="form-group-three"> | |
| <label class="form-label" for="form51">Subject</label> | |
| <textarea rows="1" cols="50" name="subject" class="form-control" id="form51" placeholder="Subject" tabindex="3" required></textarea> | |
| </div> | |
| <div class="form-group-four"> | |
| <label class="form-label" for="form76">Message</label> | |
| <textarea rows="1" cols="50" name="message" class="form-control" id="form76" placeholder="Message..." tabindex="4" required></textarea> | |
| </div> | |
| <a class="form-submit-button" id="send_email_button" href="">Send</a> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| $(document).ready(function() { | |
| // Test for placeholder support | |
| $.support.placeholder = (function(){ | |
| var i = document.createElement('input'); | |
| return 'placeholder' in i; | |
| })(); | |
| // Hide labels by default if placeholders are supported | |
| if($.support.placeholder) { | |
| $('.form-label').each(function(){ | |
| $(this).addClass('js-hide-label'); | |
| }); | |
| // Code for adding/removing classes here | |
| $('.form-group').find('input, textarea').on('keyup blur focus', function(e){ | |
| // Cache our selectors | |
| var $this = $(this), | |
| $parent = $this.parent().find("label"); | |
| if (e.type == 'keyup') { | |
| if( $this.val() == '' ) { | |
| $parent.addClass('js-hide-label'); | |
| } else { | |
| $parent.removeClass('js-hide-label'); | |
| } | |
| } | |
| else if (e.type == 'blur') { | |
| if( $this.val() == '' ) { | |
| $parent.addClass('js-hide-label'); | |
| } | |
| else { | |
| $parent.removeClass('js-hide-label').addClass('js-unhighlight-label'); | |
| } | |
| } | |
| else if (e.type == 'focus') { | |
| if( $this.val() !== '' ) { | |
| $parent.removeClass('js-unhighlight-label'); | |
| } | |
| } | |
| }); | |
| } | |
| }); | |
| </script> | |
| <script> | |
| $(function() { //run when the DOM is ready | |
| $(".portfolio-wrapper").click(function() { //use a class, since your ID gets mangled | |
| $(this).addClass("active"); //add the class to the clicked element | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| // When the DOM is ready | |
| $(function() { | |
| //Plugin | |
| /* | |
| (function($) { | |
| $.fn.random = function() { | |
| var n = this.length; | |
| var r = Math.floor(n * Math.random()); | |
| return n ? $(this[r]) : $(); | |
| }; | |
| })(jQuery);*/ | |
| // Init ScrollMagic Controller | |
| var scrollMagicController = new ScrollMagic(); | |
| // Create Animation for 0.5s | |
| var tween = TweenMax.to('.grid__item span:last-of-type', 0.4, { | |
| rotation: 45 | |
| }); | |
| var tween2 = TweenMax.to('.grid__item span:first-of-type', 0.4, { | |
| rotation: -45 | |
| }); | |
| var tween8 = TweenMax.to('.grid__item span:last-of-type', 0.4, { | |
| rotation: 0 | |
| }); | |
| var tween9 = TweenMax.to('.grid__item span:first-of-type', 0.4, { | |
| rotation: 0, | |
| }); | |
| var tween15 = TweenMax.to('.grid__item span::after', 0.4, { | |
| background: 'rgba(250,250,250,1)' | |
| }); | |
| var tween16 = TweenMax.to('.grid__item span::before', 0.4, { | |
| background: 'rgba(250,250,250,1)' | |
| }); | |
| var rule = CSSRulePlugin.getRule(".grid__item span::after"); | |
| var rule2 = CSSRulePlugin.getRule(".grid__item span::before"); | |
| var tween18 = TweenMax.to(rule, 0.4, {cssRule:{ | |
| backgroundColor: 'rgba(250, 250, 250, 1)'} | |
| }); | |
| var tween19 = TweenMax.to(rule2, 0.4, {cssRule:{ | |
| backgroundColor: 'rgba(250, 250, 250, 1)'} | |
| }); | |
| /* BG TWEENS */ | |
| var tween3 = TweenMax.to('.change-background2', 0.6, {opacity: 1, delay:0.1}); | |
| var tween4 = TweenMax.to('.change-background', 0.6, {opacity: 0, delay:0.1}); | |
| var tween7 = TweenMax.to('.change-background3', 0.6, {opacity: 1, delay:0.1}); | |
| var tween6 = TweenMax.to('.change-background2', 0.6, {opacity: 0, delay:0.1}); | |
| var tween13 = TweenMax.to('.change-background3', 0.6, {opacity: 0, delay:0.1}); | |
| var tween14 = TweenMax.to('.change-background4', 0.6, {opacity: 1, delay:0.1}); | |
| /*MENU TWEENS */ | |
| var tween12 = TweenMax.to('.container-menuitem1', 0.0, {opacity: 1}); | |
| var tween5 = TweenMax.to('.container-menuitem2', 0.0, {zIndex: 15}); | |
| var tween10 = TweenMax.to('.container-menuitem3', 0.0, {zIndex: 17}); | |
| var tween11 = TweenMax.to('.container-menuitem4', 0.0, {zIndex: 19}); | |
| var tween17 = TweenMax.to('.logo-wrapper', 0.6, {marginBottom: '3.5vw', marginTop: '3.5vw'}); | |
| // Create the Scene and trigger when visible | |
| var scene = new ScrollScene({ | |
| triggerElement: '#section2', | |
| offset: 50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween2) | |
| .addTo(scrollMagicController); | |
| var scene2 = new ScrollScene({ | |
| triggerElement: '#section2', | |
| offset: 50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween) | |
| .addTo(scrollMagicController); | |
| var scene3 = new ScrollScene({ | |
| triggerElement: '#section2', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween3) | |
| .addTo(scrollMagicController); | |
| var scene4 = new ScrollScene({ | |
| triggerElement: '#section2', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween4) | |
| .addTo(scrollMagicController); | |
| var scene5 = new ScrollScene({ | |
| triggerElement: '#section2', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween5) | |
| .addTo(scrollMagicController); | |
| var scene6 = new ScrollScene({ | |
| triggerElement: '#section3', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween6) | |
| .addTo(scrollMagicController); | |
| var scene7 = new ScrollScene({ | |
| triggerElement: '#section3', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween7) | |
| .addTo(scrollMagicController); | |
| var scene8 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween8) | |
| .addTo(scrollMagicController); | |
| var scene9 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: 0 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween9) | |
| .addTo(scrollMagicController); | |
| var scene10 = new ScrollScene({ | |
| triggerElement: '#section3', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween10) | |
| .addTo(scrollMagicController); | |
| var scene11 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: -130 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween11) | |
| .addTo(scrollMagicController); | |
| var scene12 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween12) | |
| .addTo(scrollMagicController); | |
| var scene13 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween13) | |
| .addTo(scrollMagicController); | |
| var scene14 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween14) | |
| .addTo(scrollMagicController); | |
| var scene15 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween15) | |
| .addTo(scrollMagicController); | |
| var scene16 = new ScrollScene({ | |
| triggerElement: '#section4', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween16) | |
| .addTo(scrollMagicController); | |
| var scene17 = new ScrollScene({ | |
| triggerElement: '#section2', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween17) | |
| .addTo(scrollMagicController); | |
| var scene18 = new ScrollScene({ | |
| triggerElement: '#section3', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween18) | |
| .addTo(scrollMagicController); | |
| var scene19 = new ScrollScene({ | |
| triggerElement: '#section3', | |
| offset: -50 /* offset the trigger 150px below #scene's top */ | |
| }) | |
| .setTween(tween19) | |
| .addTo(scrollMagicController); | |
| // Add debug indicators fixed on right side ///Removing spans | |
| /* scene.on('end', (function iterate() { | |
| $('.grid__item span:first-of-type').random().fadeOut(500, function() { | |
| $(this).remove(); | |
| iterate(); | |
| }); | |
| })());*/ | |
| scene.addIndicators(); | |
| }); | |
| /*SCROLL BUTTON FOR THE WHOLE WEBSITE SET INCREMENT */ | |
| $(".scroll-button").click(function(event){ | |
| var y = $(window).scrollTop(); | |
| $('html, body').animate({ scrollTop: y + window.innerHeight}) | |
| }); | |
| </script> | |
| <script> | |
| $("#send_email_button" ).click(function() { | |
| name_val = $("#form41").val(); | |
| email_val = $("#form52").val(); | |
| subject_val = $("#form51").val(); | |
| message_val = $("#form76").val(); | |
| if(name_val == "" || email_val == "" || subject_val == "" || message_val == ""){ | |
| toastr.error('Hi! Please fill all fields to send email'); | |
| return; | |
| } | |
| jQuery.get( "send_email.php", { name: name_val, email: email_val, subject: subject_val, message: message_val }, function( data ) { | |
| if(data != "ok"){ | |
| toastr.error('Hi! There was an error. The email was not sent'); | |
| } | |
| }) | |
| .done(function() { | |
| toastr.info('Hi! The email is sent'); | |
| $(".myinput").val(""); | |
| window.location = "http://depicture.io/"; | |
| }) | |
| .fail(function() { | |
| toastr.error('Hi! There was an error. The email was not sent'); | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment