RGBCube/rgbcube.github.io
1
Fork 0
mirror of https://github.com/RGBCube/rgbcube.github.io synced 2025-07-16 03:27:37 +00:00
Code Issues Activity Actions

Make a proper cube

Browse source
This commit is contained in:
RGBCube 2023-12-16 22:24:18 +03:00
parent ab449aa7a9
commit 6283cf8523
No known key found for this signature in database
1 changed files with 122 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

171
index.html
View file

@ -26,6 +26,8 @@
<body> <body>
<style> <style>
/* STYLING */
@font-face { @font-face {
font-family: "Bai Jamjuree"; font-family: "Bai Jamjuree";
font-weight: 700; font-weight: 700;
@ -33,9 +35,9 @@
} }
html { html {
background-color: #1D2021; background-color: #000000;
font-family: 'Bai Jamjuree', sans-serif; font-family: "Bai Jamjuree", sans;
font-size: 3em; font-size: 300%;
} }
a { a {
@ -43,68 +45,139 @@
text-decoration-line: none; text-decoration-line: none;
} }
.button-frame { .frame {
background-color: #FFFFFF; background-color: #FFFFFF;
width: min-content; width: min-content;
align: center;
padding: 0 .2em; padding: 0 .3em;
border-radius: 1em; border-radius: 1em;
} }
.button-frame:hover { .frame:hover {
background-color: #FFFF00; background-color: #FFFF00;
} }
/* POSITIONING */
body,
html {
height: 100%;
margin: 0;
}
.scene {
height: 100%;
width: 100%;
perspective: 15em;
display: flex;
align-items: center;
justify-content: center;
}
.cube {
height: 5em;
width: 5em;
position: relative;
transform: translateZ(-2.5em);
transform-style: preserve-3d;
}
.face {
/* REMOVE */
opacity: 60%;
/* REMOVE */
background-color: red;
width: 5em;
height: 5em;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.front {
transform: rotateY(0deg) translateZ(2.5em);
}
.top {
transform: rotateX(90deg) translateZ(2.5em);
}
.back {
transform: rotateY(180deg) translateZ(2.5em);
}
.bottom {
transform: rotateX(-90deg) translateZ(2.5em);
}
.right {
transform: rotateY(90deg) translateZ(2.5em);
}
.left {
transform: rotateY(-90deg) translateZ(2.5em);
}
</style> </style>
<div class="cube"> <div class="scene">
<div class="cube cube-face-front"> <div class="cube">
<a href="/contact"> <div class="face front">
<div class="button-frame"> <a href="/contact">
<p>contact</p> <div class="frame">
</div> <p>contact</p>
</a> </div>
</div> </a>
</div>
<div class="cube cube-face-top"> <div class="face top">
<a href="https://github.com/RGBCube"> <a href="https://github.com/RGBCube">
<div class="button-frame"> <div class="frame">
<p>github</p> <p>github</p>
</div> </div>
</a> </a>
</div> </div>
<div class="cube cube-face-back"> <div class="face back">
<a href="/"> <a href="/">
<div class="button-frame"> <div class="frame">
<p></p> <p></p>
</div> </div>
</a> </a>
</div> </div>
<div class="cube cube-face-bottom"> <div class="face bottom">
<a href="/"> <a href="/">
<div class="button-frame"> <div class="frame">
<p></p> <p></p>
</div> </div>
</a> </a>
</div> </div>
<div class="cube cube-face-right"> <div class="face right">
<a href="/"> <a href="/">
<div class="button-frame"> <div class="frame">
<p></p> <p></p>
</div> </div>
</a> </a>
</div> </div>
<div class="cube cube-face-left"> <div class="face left">
<a href="/"> <a href="/">
<div class="button-frame"> <div class="frame">
<p></p> <p></p>
</div> </div>
</a> </a>
</div>
</div> </div>
</div> </div>
</body> </body>