css spacc and fix but not complete, more gifs added

This commit is contained in:
octospacc 2020-10-31 12:56:53 +01:00
parent 519f67dc6e
commit 6ceea9733b
19 changed files with 78 additions and 34 deletions

View File

View File

@ -1,32 +1,38 @@
html, body { a {
color: #17c3ea;
}
a:active {
color: #0b69bc;
}
body {
background-image: url(../gif/bg/0.gif); background-image: url(../gif/bg/0.gif);
background-size: cover; background-size: cover;
margin: 0; margin: 0;
color: #EFEFFF; height: 100%;
height:100%; width: 100%;
color: #F0F0FF;
} }
.container { .container {
background-color: rgba(0,0,0, 0.8); background-color: rgba(0,0,0, 0.8);
min-height: 100%;
margin: 0;
position: fixed;
width: 100%; width: 100%;
height: 100%; position: absolute;
} top: 0px;
bottom: 0px;
.content { left: 0px;
padding: 5%; right: 0px;
height: 75%; z-index: 1;
overflow: auto; overflow-x: hidden;
padding-top: 5%;
padding-bottom: 5%;
} }
.footer { .footer {
background-color: rgba(28,28,34, 0.8);
width: 100%;
bottom: 0;
left: 0;
position: absolute; position: absolute;
padding-top: 1%; bottom: 0;
padding-bottom: 1%; width: 100%;
height: 60px;
text-align: center;
} }

View File

@ -0,0 +1,40 @@
html, body {
background-image: url(../gif/bg/0.gif);
background-size: cover;
margin: 0;
color: #EFEFFF;
height:100%;
}
a {
color: #17c3ea;
}
a:active {
color: #0b69bc;
}
.container {
background-color: rgba(0,0,0, 0.8);
min-height: 100%;
margin: 0;
position: fixed;
width: 100%;
height: 100%;
}
.content {
padding: 5%;
height: 80%;
overflow: auto;
}
.footer {
background-color: rgba(28,28,34, 0.8);
width: 100%;
bottom: 0;
left: 0;
position: absolute;
padding-top: 1%;
padding-bottom: 1%;
}

BIN
public/assets/gif/bg/10.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/assets/gif/bg/11.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
public/assets/gif/bg/12.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 2.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 MiB

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
public/assets/gif/bg/6.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/assets/gif/bg/7.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/assets/gif/bg/8.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 MiB

BIN
public/assets/gif/bg/9.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 295 KiB

View File

@ -1,5 +1,5 @@
function RandomGIF() { function RandomGIF() {
gifid = Math.floor((Math.random() * 11)/2); gifid = Math.floor((Math.random() * 25)/2);
gifurl = top.glob + gifid + ".gif"; gifurl = top.glob + gifid + ".gif";
gifcss = "url(" + gifurl + ")"; gifcss = "url(" + gifurl + ")";
document.body.style.backgroundImage = gifcss; document.body.style.backgroundImage = gifcss;

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>OctoSpacc Momentum | Start Page</title> <title>OctoSpacc Momentum | Start Page</title>
@ -14,22 +14,20 @@
<link rel="shortcut icon" href="favicon.png" type="image/x-icon"> <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link href="assets/css/Font_F25_Bank_Printer.css" rel="stylesheet"> <link href="assets/css/Font_F25_Bank_Printer.css" rel="stylesheet">
<link href="assets/css/Dark.css" rel="stylesheet"> <link href="assets/css/Dark.css" rel="stylesheet">
<script type="text/javascript" charset="UTF-8" src="assets/js/RandomGIF.js"></script> <script src="assets/js/RandomGIF.js"></script>
<script type="text/javascript"> top.glob = "assets/gif/bg/"; </script> <script> top.glob = "assets/gif/bg/"; </script>
</head> </head>
<body id="body"> <body id="body">
<div class="container" style="text-align: center;"> <div class="container" style="text-align: center;">
<div class="content">
<h1>OctoSpacc Momentum</h1><br><br><br><br> <h1>OctoSpacc Momentum</h1><br><br><br><br>
<h3>Welcome to my (I know) pretty strange Web world.</h3><br><br><br> <h3>Welcome to my (I know) pretty strange Web world.</h3><br><br><br>
<p>The only thing that's here now is my blog-like thingy, only in Italian.</p> <p>The only thing that's here now is my blog-like thingy, only in Italian.</p>
<h3>You can reach it at <a href="blog/it/">/blog/it/</a>.</h3><br><br> <h3>You can reach it at <a href="blog/it/">/blog/it/</a>.</h3><br><br>
<h5>(And if you don't understand Italian but still want to see something...<br>Why don't you use <a href="https://translate.google.com/translate?sl=it&tl=en&u=https%3A%2F%2Foctospacc.gitlab.io%2Fblog%2Fit">Google</a>/<a href="https://www.translatetheweb.com/?ref=TVert&from=&to=en&a=https%3A%2F%2Foctospacc.gitlab.io%2Fblog%2Fit">Bing</a>/whatever Translator?)</h5><br><br> <h5>(And if you don't understand Italian but still want to see something...<br>Why don't you use <a href="https://translate.google.com/translate?sl=it&tl=en&u=https%3A%2F%2Foctospacc.gitlab.io%2Fblog%2Fit">Google</a>/<a href="https://www.translatetheweb.com/?ref=TVert&from=&to=en&a=https%3A%2F%2Foctospacc.gitlab.io%2Fblog%2Fit">Bing</a>/whatever Translator?)</h5>
</div> </div>
<div class="footer"> <div class="footer">
Footer <h3>Footer</h3>
</div>
</div> </div>
</body> </body>