Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- background:repeating-linear-gradient(0deg, rgba(255,255,255,.1) 1px, transparent 2px, transparent 91px), repeating-linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 2px, transparent 181px) ,#111; } *{ margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; user-select:none; } :root{ --font-1: 'Oswald', sans-serif; --font-2: 'Rancho', cursive; --font-3: 'Niconne', cursive; --font-4: 'Anton', sans-serif; } *:before, :before{ content:''; position:absolute; } a{ display:inline-block; text-transform:uppercase; text-decoration:none; color:#fff; } h1, h2, h3, h4{ font-weight:300; } #main{ width:100%; height:100vh; position:relative; color:#666; font-family:var(--font-1); font-size:1em; overflow:hidden; } .icon-menu{ width:40px; height:28px; position:absolute; top:20px; left:20px; background:linear-gradient(#fff 4px, transparent 4px, transparent 12px, #fff 12px, #fff 16px, transparent 16px, transparent 24px, #fff 24px, #fff 28px), #111; display:none; z-index:200; } .icon-menu[name]:hover:before{ position:absolute; content:attr(name); color:#fff; top:-10px; left:50px; width:120px; height:30px; background:#ccc; text-align:center; line-height:30px; color:#000; border-radius:2px; } .container{ width:1080px; height:100vh; position:relative; margin:0 auto; } .menu{ width:724px; height:451px; position:absolute; top:163px; left:50%; transform:translate(-50%, 0); display:flex; flex-wrap:wrap; transition:all .5s ease-in; z-index:100; } [class*='cube-menu']{ width:180px; height:180px; margin:.5px; perspective:50000px; position:relative; } .cube-menu-large{ width:360px; } [class*='box-menu']{ width:180px; height:180px; transform-style:preserve-3d; position:relative; transform:rotateY(0); transition:all .8s ease-out; } .box-menu-large{ width:360px; } [class*='box-menu']:hover, .box-menu-large:hover{ transform:rotateY(180deg); } [class*='tab']{ width:180px; height:180px; position:absolute; opacity:1; transition:all .4s ease-out; } .tab-1, .tab-2{ width:360px; } [class*='tab']:nth-of-type(1){ transform:translateZ(25px); } [class*='tab']:nth-of-type(2){ transform:translateZ(-25px) scaleX(-1); } .tab-1{ background:#de3c3a; padding:25px; } .tab-2{ background:url(http://oi64.tinypic.com/x1d3j6.jpg)center center no-repeat; background-size:cover; opacity:.3; } .tab-3{ background:url(http://oi64.tinypic.com/2roonyv.png)center center no-repeat, #6cb71e; background-size:cover; } .tab-4{ background:url(http://oi63.tinypic.com/260rcl5.jpg)center center no-repeat; background-size:cover; opacity:.3; } .tab-5{ background:url(http://oi66.tinypic.com/14e6mb6.png)center center no-repeat, #613cbc; background-size:cover; } .tab-6{ background:url(http://oi64.tinypic.com/208tttv.jpg)center center no-repeat; background-size:cover; opacity:.3; } .tab-7{ background:url(http://oi68.tinypic.com/2940xmq.png)center center no-repeat, #2e8bef; background-size:cover; } .tab-8{ background:url(http://oi63.tinypic.com/29l05kh.jpg)center center no-repeat; background-size:cover; opacity:.3; } .tab-9{ background:url(http://oi65.tinypic.com/aaj3b9.png)center center no-repeat, #da5326; background-size:cover; } .tab-10{ background:url(http://oi68.tinypic.com/8y7uc3.jpg)center center no-repeat; background-size:cover; opacity:.3; } .tab-11{ background:url(http://oi65.tinypic.com/rh0rr4.png)center center no-repeat, #8c0095; background-size:cover; } .tab-12{ background:url(http://oi66.tinypic.com/2550qv4.jpg)center center no-repeat; background-size:cover; opacity:.3; } [class*='box-menu']:hover [class*='tab']:nth-of-type(1), .box-menu-large:hover [class*='tab']:nth-of-type(1){ opacity:.3; } [class*='box-menu']:hover [class*='tab']:nth-of-type(2), .box-menu-large:hover [class*='tab']:nth-of-type(2){ opacity:1; } .cube-menu:nth-of-type(2){ transform:translate(0, 90px); } .cube-menu:nth-of-type(4){ transform:translate(180px, -44px); } .cube-menu:nth-of-type(5){ transform:translate(180px, 46px); } .cube-menu:nth-of-type(6){ transform:translate(180px, -44px); } .cube-menu [class*='tab'] span{ display:inline-block; padding:10px; margin-top:140px; font-size:.9em; } .title-menu{ font-weight:bold; font-size:3em; line-height:46px; letter-spacing:2px; } .sub-title-menu{ font-size:.9em; } .main-content{ width:858px; height:498px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } .cube{ width:100%; height:100%; perspective:5000px; } .box-cube{ width:100%; height:100%; transform-style:preserve-3d; position:relative; transform:rotateX(0deg) scale(0); } .content-cube{ position:absolute; width:858px; height:498px; background:#fff; box-shadow:0 0 0 1px #222 inset; } .content-cube:nth-of-type(1){ transform:translateZ(249px); } .content-cube:nth-of-type(2){ transform:translateZ(-249px); } .content-cube:nth-of-type(3){ transform:rotateX(90deg) translateY(-249px); -webkit-transform-origin:top center; transform-origin:top center; } .content-cube:nth-of-type(4){ transform:rotateX(90deg) translateY(249px); -webkit-transform-origin:bottom center; transform-origin:bottom center; } .page{ top:0; left:0; position:absolute; width:860px; height:498px; background:transparent; visibility:hidden; opacity:0; overflow:hidden; } .home, .work, .music, .sale{ width:100%; height:100%; position:absolute; top:0; left:0; background:#aaa; visibility:hidden; opacity:0; transition:all .3s ease-out; } #content-1:target .menu{ transform:translate(-50%, -200%); } #content-1:target .icon-menu{ display:block; } #content-1:target .box-cube{ animation:girar .5s ease-out; animation-delay:.5s; animation-fill-mode:forwards; } #content-1:target .page{ visibility:visible; opacity:1; } #content-1:target .work{ visibility:visible; opacity:1; transition-delay:1.3s; } #content-1:target .home, .music, .sale{ visibility:hidden; opacity:0; } #content-2:target .menu{ transform:translate(-50%, -200%); } #content-2:target .icon-menu{ display:block; } #content-2:target .box-cube{ animation:girar-2 .5s ease-out; animation-delay:.5s; animation-fill-mode:forwards; } #content-2:target .page{ visibility:visible; opacity:1; } #content-2:target .music{ visibility:visible; opacity:1; transition-delay:1.3s; } #content-2:target .work, .home, .sale{ visibility:hidden; opacity:0; } #content-3:target .menu{ transform:translate(-50%, -200%); } #content-3:target .icon-menu{ display:block; } #content-3:target .box-cube{ animation:girar-3 .5s ease-out; animation-delay:.5s; animation-fill-mode:forwards; } #content-3:target .page{ visibility:visible; opacity:1; } #content-3:target .home{ visibility:visible; opacity:1; transition-delay:1.3s; } #content-3:target .work, .music, .sale{ visibility:hidden; opacity:0; } #content-4:target .menu{ transform:translate(-50%, -200%); } #content-4:target .icon-menu{ display:block; } #content-4:target .box-cube{ animation:girar-4 .5s ease-out; animation-delay:.5s; animation-fill-mode:forwards; } #content-4:target .page{ visibility:visible; opacity:1; } #content-4:target .sale{ visibility:visible; opacity:1; transition-delay:1.3s; } #content-4:target .home, .work, .music{ visibility:hidden; opacity:0; } @keyframes girar{ 0%{ transform:rotateX(0deg) scale(.5); } 100%{ transform:rotateX(-360deg) scale(.95); } } @keyframes girar-2{ 0%{ transform:rotateX(0deg) scale(.5); } 100%{ transform:rotateX(-360deg) scale(.95); } } @keyframes girar-3{ 0%{ transform:rotateX(0deg) scale(.5); } 100%{ transform:rotateX(-360deg) scale(.95); } } @keyframes girar-4{ 0%{ transform:rotateX(0deg) scale(.5); } 100%{ transform:rotateX(-360deg) scale(.95); } } .block-page{ width:100%; height:calc(100% - 45px); background:#eaeff1; display:flex; position:relative; z-index:50; } .col-left{ width:300px; background:#fff; text-align:center; padding:25px; color:#eaeff1; } .title-page{ text-transform:uppercase; font-weight:bold; } .nav-page{ margin-top:5px; } [class*='btn-page']{ width:250px; line-height:36px; margin-bottom:3px; text-align:center; background:#eaeff1; font-size:.9em; color:#fff; } [class*='btn-page']:hover{ background:#000; color:#fff; } .home .btn-page-home{ background:#000; color:#fff; pointer-events:none; } .work .btn-page-work{ background:#000; color:#fff; pointer-events:none; } .music .btn-page-music{ background:#000; color:#fff; pointer-events:none; } .sale .btn-page-sale{ background:#000; color:#fff; pointer-events:none; } .footer{ height:45px; background:#b1b1b1; color:#fff; line-height:45px; padding:0 20px; font-size:.6em; text-transform:uppercase; letter-spacing:2px; display:flex; justify-content:space-between; } .nav{ width:95px; height:20px; display:flex; justify-content:space-between; margin-top:11.25px; } .network{ width:25px; height:20px; background:url(http://oi68.tinypic.com/s2v0v5.jpg)center top no-repeat; } .network:nth-of-type(2){ width:25px; height:20px; background:url(http://oi68.tinypic.com/s2v0v5.jpg)center center no-repeat; } .network:nth-of-type(3){ width:25px; height:20px; background:url(http://oi68.tinypic.com/s2v0v5.jpg)center bottom no-repeat; } .col-right{ width:calc(100% - 300px); position:relative; padding:10px 15px; z-index:54; font-family:var(--font-2); } .row-img{ width:270px; height:210px; margin:10px 0; position:relative; } .row-img:before{ width:90%; height:30px; border-radius:50%; background:#000; filter:blur(10px); bottom:-15px; left:5%; z-index:-1; } .desc-home{ width:100%; margin-top:30px; font-size:1.2em; } .more{ text-transform:lowercase; color:#222; font-size:1.3em; margin-left:460px; margin-top:20px; } .col-right .sub-title-page{ font-family:var(--font-1); color:#aaa; } .block-right{ width:100%; height:370px; overflow-y:auto; } ::-webkit-scrollbar{ width:5px; background:#fff; } ::-webkit-scrollbar-thumb{ background:#b1b1b1; } .servics{ width:520px; height:275px; margin-bottom:40px; display:flex; overflow:; } .servics:nth-of-type(2){ flex-direction:row-reverse; } .col-servics-left{ width:125px; margin-right:10px; } .col-servics-left p{ width:125px; } .col-servics-left .more{ margin-left:50px; margin-top:10px; } .col-servics-left h1{ border-bottom:solid 2px #666; margin-bottom:20px; font-family:var(--font-1); text-transform:uppercase; font-size:1.3em; } .col-servics-right{ width:380px; } .box-img-servics{ position:relative; width:380px; height:254px; } .box-img-servics:before, .box-video:before{ width:90%; height:30px; background:#000; border-radius:50%; filter:blur(10px); bottom:-15px; left:5%; opacity:.8; z-index:-1; } .servics:nth-of-type(2) .col-servics-left{ margin-left:10px; margin-right:0; } .box-video{ width:400px; height:226px; background:#222; margin-top:40px; margin-left:calc(50% - 200px); position:relative; } .youtube{ width:62px; height:26px; margin-top:40px; margin-left:calc(50% - 31px); background:url(http://oi68.tinypic.com/24e43lc.jpg) center center no-repeat; } ul{ list-style:none; margin:30px 0; } ul li{ font-size:1.2em; margin-bottom:10px; } .sale .col-right p{ font-size:1.2em; } #content-5:target .menu{ transform:translate(-50%, -200%); } #content-5:target .icon-menu{ display:block; } #content-5:target .box-cube{ animation:rotation .5s ease-in-out; animation-delay:.3s; animation-fill-mode:forwards; } #content-5:target .page{ visibility:visible; opacity:1; } #content-5:target .home{ visibility:visible; opacity:1; transition-delay:.8s; } #content-5:target .sale, .work, .music{ visibility:hidden; opacity:0; } #content-6:target .menu{ transform:translate(-50%, -200%); } #content-6:target .icon-menu{ display:block; } #content-6:target .box-cube{ animation:rotation-2 .5s ease-in-out; animation-delay:.3s; animation-fill-mode:forwards; } #content-6:target .page{ visibility:visible; opacity:1; } #content-6:target .work{ visibility:visible; opacity:1; transition-delay:.8s; } #content-6:target .sale, .home, .music{ visibility:hidden; opacity:0; } #content-7:target .menu{ transform:translate(-50%, -200%); } #content-7:target .icon-menu{ display:block; } #content-7:target .box-cube{ animation:rotation-3 .5s ease-in-out; animation-delay:.3s; animation-fill-mode:forwards; } #content-7:target .page{ visibility:visible; opacity:1; } #content-7:target .music{ visibility:visible; opacity:1; transition-delay:.8s; } #content-7:target .sale, .work, .home{ visibility:hidden; opacity:0; } #content-8:target .menu{ transform:translate(-50%, -200%); } #content-8:target .icon-menu{ display:block; } #content-8:target .box-cube{ animation:rotation-4 .5s ease-in-out; animation-delay:.3s; animation-fill-mode:forwards; } #content-8:target .page{ visibility:visible; opacity:1; } #content-8:target .sale{ visibility:visible; opacity:1; transition-delay:.8s; } #content-8:target .home, .work, .music{ visibility:hidden; opacity:0; } @keyframes rotation{ 0%{ transform:rotateX(0deg) scale(.95); } 100%{ transform:rotateX(-180deg) scale(.95); } } @keyframes rotation-2{ 0%{ transform:rotateX(0deg) scale(.95); } 100%{ transform:rotateX(-180deg) scale(.95); } } @keyframes rotation-3{ 0%{ transform:rotateX(0deg) scale(.95); } 100%{ transform:rotateX(-180deg) scale(.95); } } @keyframes rotation-4{ 0%{ transform:rotateX(0deg) scale(.95); } 100%{ transform:rotateX(-180deg) scale(.95); } ;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
