Looki2000/looki2000.cubesoftware.xyz
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updates boxes under the Looki2000 text

Browse Source
This commit is contained in:
Looki2000 2022-11-25 16:12:24 +01:00
parent 3158c26d20
commit 088d59925a
3 changed files with 56 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
index.htm
View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html>
<head>
@ -22,28 +23,23 @@
<script src="js/3d_home.js"></script>
<div id="over_render">
<div id="main_box">
<div id="over_render_box">
<h1>Looki2000</h1>
</div>
</div>
<div class="projects_box">
<h1>About Me</h1>
<p>testowane. sussy amogus jest sus. testowy tekst służący testowaniu strony</p>
<p>testowanie</p>
<p>testowanie</p>
<p>testowanie</p>
<p>testowanie</p>
<p>testowanie</p>
<p>testowanie</p>
<p>testowanie</p>
<p>testowanie</p>
<p>testowanie</p>
<p>testowanie</p>
<p>testowanie</p>
<p>testowanie</p>
<!-- info boxes -->
<div class="boxes" id="box1">
<h1>GeoCube</h1> &nbsp;&nbsp;By <a href="">Cube Software</a>
<p>GeoCube will be recreation of planet on which you can buy plot for $1 and put your 3D model on to it. We are still working on it.</p>
</div>
<div class="boxes" id="box2">
<h1>JokeWareHub</h1> &nbsp;&nbsp;By <a href="">Cube Software</a>
<p>JokeWareHub will be a hacking and trolling community website on which anyone will be able to upload their software intended for joke purpose.</p>
</div>
<!-- end of info boxes -->
<footer>
<p>© 2022 Looki2000</p>
<a href="https://www.youtube.com/c/Looki2000"><img src="https://www.youtube.com/s/desktop/7edc9c99/img/favicon_96x96.png"></a>

2
js/3d_home.js
View File

@ -87,7 +87,7 @@ function animate() {
camera.position.z = jelly_position.y;
// translate div displayed over the render frame to the position of the jelly position
document.getElementById("main_box").style.transform = "translate(" + (jelly_position.x * 50) + "px, " + (jelly_position.y * 50) + "px)";
document.getElementById("over_render_box").style.transform = "translate(" + (jelly_position.x * 50) + "px, " + (jelly_position.y * 50) + "px)";
// if velocity is not 0 then multiply it by damping multiplier. do it for each axis separately
if (velocity.x != 0) {

68
main.css
View File

@ -77,7 +77,7 @@ nav a:hover {
}
#main_box {
#over_render_box {
/* center everything in div horizontally*/
text-align: center;
@ -90,7 +90,7 @@ nav a:hover {
backdrop-filter: blur(100px);
background-image: url(assets/textures/noise.png);
/* make text look like overexposed blue neon */
/* make text look like overexposed neon */
color: rgb(247, 255, 230);
text-shadow: 0px 0px 8px rgb(223, 255, 153);
@ -98,34 +98,12 @@ nav a:hover {
line-height: 20px;
}
.projects_box {
/* rounded corners */
border-radius: 8px;
background-color: rgb(30, 30, 30);
width: 80%;
/* aling div in the center of the screen */
margin: auto;
margin-top: 40px;
padding: 1px 40px 30px;
}
.projects_box h1 {
/* make font bigger and cyan */
font-size: 60px;
color: rgb(51, 156, 255);
}
footer {
height: 50px;
background-color: #333;
text-align: center;
margin: 50px 0px 0px;
margin: 100px 0px 0px;
/* vertcaly center text */
display: flex;
@ -137,4 +115,44 @@ footer img {
width: auto;
height: 40px;
margin-left: 20px;
}
/* info boxes under the page welcome div */
.boxes {
/* rounded corners */
border-radius: 8px;
/**/
background-color: rgb(30, 30, 30);
width: 80%;
/* aling div in the center of the screen */
margin: auto;
margin-top: 40px;
padding: 30px 40px;
}
.boxes h1 {
font-size: 60px;
display: inline;
}
.boxes a {
/* make text look like overexposed neon */
text-shadow: 0px 0px 10px rgb(153, 153, 255);
color: rgb(230, 230, 255);
text-decoration: none;
}
/* box 1 */
#box1 h1 {
color: rgb(50, 170, 255);
}
/* box 2 */
#box2 h1 {
color: rgb(50, 255, 129);
}