713 lines
19 KiB
CSS
713 lines
19 KiB
CSS
@charset "UTF-8";
|
||
html,
|
||
body {
|
||
height: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
body {
|
||
background-color: #141518;
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
animation-duration: 3s;
|
||
animation-name: zoom-out;
|
||
animation-iteration-count: 1;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
@keyframes zoom-out {
|
||
from {
|
||
transform: scale(2);
|
||
}
|
||
to {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
.frame {
|
||
border: 120px solid #141518;
|
||
width: 1176px;
|
||
height: 864px;
|
||
}
|
||
|
||
.row {
|
||
display: flex;
|
||
position: relative;
|
||
left: -42px;
|
||
top: -36px;
|
||
z-index: -1;
|
||
}
|
||
.row:nth-child(2n) {
|
||
margin-left: 42px;
|
||
}
|
||
|
||
.cube-holder {
|
||
width: 84px;
|
||
height: 72px;
|
||
}
|
||
|
||
.inverse-cube {
|
||
width: inherit;
|
||
height: inherit;
|
||
transform-origin: center center;
|
||
transform-style: preserve-3d;
|
||
transform: rotateX(-35deg) rotateY(-45deg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.inverse-cube .side {
|
||
position: absolute;
|
||
}
|
||
|
||
/*
|
||
|
||
╱│╲
|
||
╱ │ ╲
|
||
│ ╱ ╲ │
|
||
│╱ ╲│
|
||
╲ ╱
|
||
╲ ╱
|
||
|
||
*/
|
||
/*
|
||
|
||
╱│╲
|
||
╲│╱
|
||
|
||
*/
|
||
/*
|
||
|
||
▘
|
||
|
||
*/
|
||
/*
|
||
|
||
╱│╲
|
||
╱ │ ╲
|
||
│ ╱ ╲ │
|
||
│╱ ╲│
|
||
╲ ╱
|
||
╲ ╱
|
||
|
||
*/
|
||
/*
|
||
|
||
╱│╲
|
||
╱ ╱ ╲ ╲
|
||
│ │╲ ╱│ │
|
||
│╱ ╲│╱ ╲│
|
||
╲ ╱
|
||
╲ ╱
|
||
|
||
*/
|
||
/*
|
||
|
||
╱│╲
|
||
╱ │ ╲
|
||
│ ╱ ╱╲ │
|
||
│╱ ╱ ╱│
|
||
╲│╲ ╱ ╱
|
||
╲│╱
|
||
|
||
*/
|
||
/*
|
||
|
||
╱│╲
|
||
╱ │ ╲
|
||
│╱ ╲ ╲ │
|
||
│╲ ╱│ ╲│
|
||
╲│╱ ╱
|
||
╲ ╱
|
||
|
||
*/
|
||
/*
|
||
|
||
╱│╲ ╱│╲
|
||
╱ │ │ │ ╲
|
||
│ ╱ ╲│╱ ╲ │╲
|
||
│╱ ╲│ ╲
|
||
╲ ╱
|
||
╲ ╱
|
||
╲ ╱
|
||
╲ ╱
|
||
*/
|
||
/*
|
||
|
||
╱│╲
|
||
│╱ ╲ ╲
|
||
╲ ╱│ │
|
||
│╱ ╲│
|
||
|
||
|
||
|
||
*/
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: #9c3131;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(1)::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 30px;
|
||
height: 30px;
|
||
background: linear-gradient(45deg, #000103 0%, #000103 50%, #d5bb97 50%, #d5bb97 100%);
|
||
}
|
||
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateX(30px) translateY(-30px) translateZ(-30px);
|
||
background: #9c3131;
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(2) {
|
||
transform: translateX(-15px) translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 30px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) translateX(45px);
|
||
background: #000103;
|
||
width: 30px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(4) {
|
||
transform: translateX(30px) translateZ(-60px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(5) {
|
||
transform: rotateY(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateX(30px) translateY(-30px) translateZ(-30px);
|
||
background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(2) {
|
||
transform: translateX(-15px) translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 30px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) translateX(45px);
|
||
background: #000103;
|
||
width: 30px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(4) {
|
||
transform: translateX(30px) translateZ(-60px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(5) {
|
||
transform: rotateY(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(4)::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 7.5px;
|
||
top: 15px;
|
||
width: 12px;
|
||
height: 24px;
|
||
background: linear-gradient(-45deg, #867a63 0%, #867a63 33%, #000103 33%, #000103 100%);
|
||
}
|
||
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(1) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(2) {
|
||
transform: rotateY(90deg) translateX(15px) translateY(-15px) translateZ(-30px);
|
||
background: #000103;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateX(90deg) translateX(-15px) translateY(-15px);
|
||
background: #9c3131;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.row:nth-child(4n-3) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(4) {
|
||
transform: rotateY(90deg) translateX(15px) translateY(15px);
|
||
background: #000103;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(1),
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(2),
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(3),
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(1),
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: #9c3131;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(2),
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(3),
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(1)::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 30px;
|
||
height: 30px;
|
||
background: linear-gradient(45deg, #000103 0%, #000103 50%, #d5bb97 50%, #d5bb97 100%);
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(4) {
|
||
transform: rotateX(90deg) translateX(-15px) translateY(-15px);
|
||
background: #9c3131;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(5) {
|
||
transform: translateX(-15px) translateY(15px);
|
||
background: #d5bb97;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(6) {
|
||
transform: rotateY(90deg) translateX(15px) translateY(15px);
|
||
background: #000103;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(4) {
|
||
transform: rotateX(90deg) translateX(-15px) translateY(-15px);
|
||
background: #9c3131;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(5) {
|
||
transform: translateX(-15px) translateY(15px);
|
||
background: #d5bb97;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.row:nth-child(4n-2) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(6) {
|
||
transform: rotateY(90deg) translateX(15px) translateY(15px);
|
||
background: #000103;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-2) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-1) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: #9c3131;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-1) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-1) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(3) {
|
||
background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
|
||
}
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(2)::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 7.5px;
|
||
top: 15px;
|
||
width: 12px;
|
||
height: 24px;
|
||
background: linear-gradient(-45deg, #867a63 0%, #867a63 33%, #000103 33%, #000103 100%);
|
||
}
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(4) {
|
||
transform: rotateX(90deg) translateX(15px);
|
||
background: #9c3131;
|
||
width: 30px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(5) {
|
||
transform: translateX(15px) translateY(15px) translateZ(30px);
|
||
background: #d5bb97;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(5)::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 7.5px;
|
||
top: 15px;
|
||
width: 12px;
|
||
height: 24px;
|
||
background: linear-gradient(-45deg, #867a63 0%, #867a63 33%, #000103 33%, #000103 100%);
|
||
}
|
||
.row:nth-child(4n-1) .cube-holder:nth-child(3n-0) .inverse-cube .side:nth-child(6) {
|
||
transform: rotateY(90deg) translateY(15px) translateZ(30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 30px;
|
||
}
|
||
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-5) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: #9c3131;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-4) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(4) {
|
||
transform: rotateX(90deg) translateX(-15px) translateY(15px);
|
||
background: #9c3131;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(5) {
|
||
transform: translateX(-15px) translateY(15px) translateZ(30px);
|
||
background: #d5bb97;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-3) .inverse-cube .side:nth-child(6) {
|
||
transform: rotateY(90deg) translateX(-15px) translateY(15px);
|
||
background: #000103;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: #9c3131;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-2) .inverse-cube .side:nth-child(1)::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 30px;
|
||
height: 30px;
|
||
background: linear-gradient(45deg, #000103 0%, #000103 50%, #d5bb97 50%, #d5bb97 100%);
|
||
}
|
||
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: #9c3131;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-1) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(1) {
|
||
transform: rotateX(90deg) translateZ(-30px);
|
||
background: #9c3131;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(2) {
|
||
transform: translateZ(-30px);
|
||
background: #d5bb97;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(3) {
|
||
transform: rotateY(90deg) rotateZ(90deg) translateZ(-30px);
|
||
background: #000103;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(4) {
|
||
transform: rotateX(90deg) translateX(-15px) translateY(15px);
|
||
background: repeating-linear-gradient(90deg, #867a63, #867a63 1px, #aa9f8c 1px, #aa9f8c 2px);
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(5) {
|
||
transform: translateX(-15px) translateY(15px) translateZ(30px);
|
||
background: #d5bb97;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
.row:nth-child(4n-0) .cube-holder:nth-child(6n-0) .inverse-cube .side:nth-child(6) {
|
||
transform: rotateY(90deg) translateX(-15px) translateY(15px);
|
||
background: #000103;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
#youtube {
|
||
display: none;
|
||
}
|
||
|
||
@media (min-height: 425px) {
|
||
/** Youtube logo by https://codepen.io/alvaromontoro */
|
||
#youtube {
|
||
z-index: 2;
|
||
display: block;
|
||
width: 100px;
|
||
height: 70px;
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
background: red;
|
||
border-radius: 50% / 11%;
|
||
transform: scale(0.8);
|
||
transition: transform 0.5s;
|
||
}
|
||
|
||
#youtube:hover,
|
||
#youtube:focus {
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
#youtube::before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
top: 7.5%;
|
||
left: -6%;
|
||
width: 112%;
|
||
height: 85%;
|
||
background: red;
|
||
border-radius: 9% / 50%;
|
||
}
|
||
|
||
#youtube::after {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 40px;
|
||
width: 45px;
|
||
height: 30px;
|
||
border: 15px solid transparent;
|
||
box-sizing: border-box;
|
||
border-left: 30px solid white;
|
||
}
|
||
|
||
#youtube span {
|
||
font-size: 0;
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
overflow: hidden;
|
||
}
|
||
} |