Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- background:repeating-linear-gradient(0deg, rgba(49,55,59,.1) 1px, transparent 2px, transparent 6px), repeating-linear-gradient(90deg, rgba(49,55,59,.1) 1px, transparent 2px, transparent 6px), radial-gradient(#ededed ,#31373b); } *{ margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; user-select:none; } :root{ --font-1: 'Oswald', sans-serif; --font-2: 'Arimo', sans-serif; --font-3: 'Anton', sans-serif; --font-4: 'Abel', sans-serif; --red: #fd0042; --darck: #31373b; --white: #ededed; --bluelight: #d3dcef; --redlight: #edc8d2; --timer: .5s; } a{ display:inline-block; text-decoration:none; text-align:center; } h1, h2, h3, h4{ font-weight:300; } #main{ width:100%; height:100vh; position:relative; font-size:1em; color:#666; font-family:var(--font-4); overflow:hidden; } .container{ width:1080px; height:100vh; position:relative; margin:0 auto; padding:0 40px; } .header{ height:80px; display:flex; justify-content:space-between; } .header > div{ width:50%; } .logo{ margin-top:20px; float:left; margin-right:10px; } .title{ text-transform:uppercase; width:calc(100% - 101px); float:left; font-family:var(--font-1); color:var(--darck); font-weight:bold; font-size:1.6em; line-height:30px; margin-top:17px; } .sub-title{ color:var(--darck); font-weight:bold; font-size:.9em; } .menu{ width:100%; height:40px; margin-top:34px; display:flex; justify-content:space-between; } .cubo-menu{ perspective:500px; width:110px; height:40px; text-transform:uppercase; position:relative; text-align:center; font-size:.9em; } .item-menu{ transform-style:preserve-3d; position:relative; width:110px; height:40px; transform:rotateY(0); color:var(--darck); transition:transform .5S ease-in-out; } .item-menu:hover{ transform:rotateX(180deg); color:var(--red); } .cubo-menu:nth-of-type(1) .item-menu{ transform:rotateX(180deg); color:var(--red); pointer-events:none; } .row-tab{ width:110px; height:40px; display:flex; justify-content:center; align-items:center; position:absolute; background:linear-gradient(0deg, var(--white) 50%, white 51% ); } .row-tab:nth-child(1){ transform:translateZ(20px); } .row-tab:nth-child(2){ transform:translateZ(-20px) scaleY(-1); } .row-tab:nth-child(3){ transform:rotateX(90deg) translateY(20px); -webkit-transform-origin:bottom center; transform-origin:bottom center; } .row-tab:nth-child(4){ transform:rotateX(90deg) translateY(-20px); -webkit-transform-origin:top center; transform-origin:top center; } .main-content{ width:1000px; height:520px; margin-top:10px; perspective:2000px; position:relative; } .cubo-3d{ position:absolute; width:890px; height:460px; transform-style:preserve-3d; margin-left:55px; margin-top:30px; } .row-content{ width:890px; height:460px; border:solid 0px black; position:absolute; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.0) inset; } .row-content:nth-child(1){ transform:translateZ(230px); } .row-content:nth-child(2){ transform:translateZ(-230px); } .row-content:nth-child(3){ transform:rotateX(90deg) translateY(-230px); -webkit-transform-origin:top center; transform-origin:top center; } .row-content:nth-child(4){ transform:rotateX(90deg) translateY(230px); -webkit-transform-origin:bottom center; transform-origin:bottom center; } #content-1:target .cubo-3d{ animation:girar calc(var(--timer) * 4) ease-in-out; } #content-1:target .home{ opacity:1; visibility:visible; transition-delay:calc(var(--timer) * 4); } #content-2:target .cubo-3d{ animation:girar-2 calc(var(--timer) * 4) ease-in-out; } #content-2:target .works{ opacity:1; visibility:visible; transition-delay:calc(var(--timer) * 4); } #content-2:target .home, .music, .sale{ opacity:0; visibility:hidden; transition:all .5s ease-out; } #content-2:target .cubo-menu:nth-of-type(1) .item-menu{ transform:rotateX(0); color:var(--drack); pointer-events:auto; } #content-2:target .cubo-menu:nth-of-type(1) .item-menu:hover{ transform:rotateX(180deg); color:var(--red); } #content-2:target .cubo-menu:nth-of-type(2) .item-menu{ transform:rotateX(180deg); color:var(--red); pointer-events:none; } #content-3:target .cubo-3d{ animation:girar-3 calc(var(--timer) * 4) ease-in-out; } #content-3:target .music{ opacity:1; visibility:visible; transition-delay:calc(var(--timer) * 4); } #content-3:target .home, .works, .sale{ opacity:0; visibility:hidden; transition:all .5s ease-out; } #content-3:target .cubo-menu:nth-of-type(1) .item-menu{ transform:rotateX(0); color:var(--drack); pointer-events:auto; } #content-3:target .cubo-menu:nth-of-type(1) .item-menu:hover{ transform:rotateX(180deg); color:var(--red); } #content-3:target .cubo-menu:nth-of-type(3) .item-menu{ transform:rotateX(180deg); color:var(--red); pointer-events:none; } #content-4:target .cubo-3d{ animation:girar-4 calc(var(--timer) * 4) ease-in-out; } #content-4:target .sale{ opacity:1; visibility:visible; transition-delay:calc(var(--timer) * 4); } #content-4:target .home, .works, .music{ opacity:0; visibility:hidden; transition:all .5s ease-out; } #content-4:target .cubo-menu:nth-of-type(1) .item-menu{ transform:rotateX(0); color:var(--drack); pointer-events:auto; } #content-4:target .cubo-menu:nth-of-type(1) .item-menu:hover{ transform:rotateX(180deg); color:var(--red); } #content-4:target .cubo-menu:nth-of-type(4) .item-menu{ transform:rotateX(180deg); color:var(--red); pointer-events:none; } .pages{ position:relative; } .home, .works, .music, .sale{ width:1000px; height:520px; position:absolute; background:#fff; padding:10px; visibility:hidden; opacity:0; transition:all .5s ease-out; } .home{ opacity:1; visibility:visible; transition-delay:.5s; } .banner{ position:absolute; width:735px; height:350px; } .block{ position:relative; width:100%; height:100%; display:flex; } .block > div{ width:50%; } .col-block-left{ box-shadow:0 -150px var(--white) inset; position:relative; } .footer-page{ width:100%; height:150px; position:absolute; bottom:0; padding:0 15px; } .title-footer, .title-section{ text-transform:uppercase; font-family:var(--font-1); font-size:1em; line-height:32px; border-bottom:solid 1px #fff; color:var(--darck); } .desc{ margin-top:10px; } .col-block-right{ background:linear-gradient(90deg, rgba(0,0,0,.5) 245px, var(--red) 245px); display:flex; } .section{ position:relative; width:50%; } .section-footer{ width:100%; height:150px; position:absolute; bottom:0; background:var(--redlight); padding:10px; font-size:.9em; } .section-footer:nth-of-type(2){ background:var(--bluelight); } .main-section{ padding:10px; } .main-section .title-section{ color:#fff; text-transform:none; margin-bottom:15px; } .main-section img{ width:225px; height:150px; padding:5px; background:#fff; margin-bottom:15px; } .infor{ display:block; color:#fff; } .btn-section, .btn-main-section{ float:right; color:var(--red); font-weight:bold; font-family:sans-serif; font-size:.8em; } .btn-main-section{ color:#fff; margin-top:10px; } [class*='-music-']{ width:100%; padding:0px 15px; height:310px; } [class*='-music-'] .title-footer{ color:#fff; } [class*='music-left']{ background:var(--darck); } [class*='music-right']{ background:var(--red); } .video{ width:460px; height:260px; margin-top:8px; background:#000; } .music .footer-page{ height:190px; background:var(--white); padding:0 15px; } .music .col-block-right .footer-page{ background:var(--bluelight); width:490px; } [class*='box-']{ display:flex; margin-top:10px; } .box-artist img{ width:200px; height:140px; padding:5px; background:#fff; } .caption-artist{ width:calc(100% - 200px); } .caption-artist span{ display:block; padding-left:10px; line-height:26px; } .block-content{ height:calc(100% - 50px); margin-top:10px; overflow-y:auto; } ::-webkit-scrollbar{ width:5px; background:#fff; } ::-webkit-scrollbar-thumb{ background:#616568; } .lyrics{ color:#fff; font-family:var(--font-1); font-size:.8em; width:85%; } .box-videos{ justify-content:space-between; } .col-video{ width:200px; height:113px; box-shadow:0 0 0 5px #fff; margin-top:10px; background:#000; } .works [class*='col-block']{ width:calc(100% / 3); padding:0 15px; display:block; background:var(--darck); box-shadow:0 0 #fff; } .works [class*='col-block']:nth-child(2){ background:var(--bluelight) } .works [class*='col-block']:nth-child(3){ background:var(--red) } .works .col-block-left .title-footer{ color:#fff; } .row-work{ width:284px; height:220px; padding:5px; background:#fff; margin-bottom:20px; } .row-work img{ width:100%; height:auto; } .row-work span{ display:block; text-transform:uppercase; font-size:.8em; line-height:26px; } .sale [class*='-sale-left']{ width:327px; background:var(--darck); padding:0 15px; } [class*='-sale-left'] .title-footer{ color:#fff; } ul li{ color:#fff; line-height:26px; } ul li span{ color:var(--red); padding-right:10px; } .obs{ color:#fff; margin-top:50px; } .sale [class*='-sale-right']{ width:654px; background:var(--bluelight); } .sale [class*='sale-right'] .footer-page{ width:654px; } @keyframes girar{ 0%, 24%{ transform:rotateX(0); } 75%{ transform:rotateX(-360deg); } 100%{ transform:rotateX(-360deg); } } @keyframes girar-2{ 0%, 24%{ transform:rotateX(0); } 75%{ transform:rotateX(-360deg); } 100%{ transform:rotateX(-360deg); } } @keyframes girar-3{ 0%, 24%{ transform:rotateX(0); } 75%{ transform:rotateX(-360deg); } 100%{ transform:rotateX(-360deg); } } @keyframes girar-4{ 0%, 24%{ transform:rotateX(0); } 75%{ transform:rotateX(-360deg); } 100%{ transform:rotateX(-360deg); } } .col-block-right .section-footer{ padding:0 10px;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement