RGBCube/rgbcube.github.io
1
Fork 0
mirror of https://github.com/RGBCube/rgbcube.github.io synced 2025-07-15 19:17: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>
<style>
/* STYLING */
@font-face {
font-family: "Bai Jamjuree";
font-weight: 700;
@ -33,9 +35,9 @@
}
html {
background-color: #1D2021;
font-family: 'Bai Jamjuree', sans-serif;
font-size: 3em;
background-color: #000000;
font-family: "Bai Jamjuree", sans;
font-size: 300%;
}
a {
@ -43,68 +45,139 @@
text-decoration-line: none;
}
.button-frame {
.frame {
background-color: #FFFFFF;
width: min-content;
align: center;
padding: 0 .2em;
padding: 0 .3em;
border-radius: 1em;
}
.button-frame:hover {
.frame:hover {
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>
<div class="cube">
<div class="cube cube-face-front">
<a href="/contact">
<div class="button-frame">
<p>contact</p>
</div>
</a>
</div>
<div class="scene">
<div class="cube">
<div class="face front">
<a href="/contact">
<div class="frame">
<p>contact</p>
</div>
</a>
</div>
<div class="cube cube-face-top">
<a href="https://github.com/RGBCube">
<div class="button-frame">
<p>github</p>
</div>
</a>
</div>
<div class="face top">
<a href="https://github.com/RGBCube">
<div class="frame">
<p>github</p>
</div>
</a>
</div>
<div class="cube cube-face-back">
<a href="/">
<div class="button-frame">
<p></p>
</div>
</a>
</div>
<div class="face back">
<a href="/">
<div class="frame">
<p></p>
</div>
</a>
</div>
<div class="cube cube-face-bottom">
<a href="/">
<div class="button-frame">
<p></p>
</div>
</a>
</div>
<div class="face bottom">
<a href="/">
<div class="frame">
<p></p>
</div>
</a>
</div>
<div class="cube cube-face-right">
<a href="/">
<div class="button-frame">
<p></p>
</div>
</a>
</div>
<div class="face right">
<a href="/">
<div class="frame">
<p></p>
</div>
</a>
</div>
<div class="cube cube-face-left">
<a href="/">
<div class="button-frame">
<p></p>
</div>
</a>
<div class="face left">
<a href="/">
<div class="frame">
<p></p>
</div>
</a>
</div>
</div>
</div>
</body>