fix css and add sticky footer

This commit is contained in:
octospacc 2020-10-31 10:42:39 +01:00
parent 5179bcfdc4
commit 519f67dc6e
2 changed files with 21 additions and 24 deletions

View File

@ -1,36 +1,32 @@
html, body { html, body {
background-image: url(../gif/bg/0.gif); background-image: url(../gif/bg/0.gif);
background-size: cover; background-size: cover;
min-height: 100%;
height: 100%;
margin: 0; margin: 0;
color: #EFEFFF; color: #EFEFFF;
height:100%;
} }
.container { .container {
background-color: rgba(0,0,0, 0.8); background-color: rgba(0,0,0, 0.8);
height: 100%;
min-height: 100%; min-height: 100%;
margin: 0;
position: fixed;
width: 100%;
height: 100%;
} }
.content { .content {
padding: 5%; padding: 5%;
position: absolute; height: 75%;
top: 50%; overflow: auto;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
} }
.blur { .footer {
height: 100%; background-color: rgba(28,28,34, 0.8);
background-position: center; width: 100%;
background-repeat: no-repeat; bottom: 0;
background-size: cover; left: 0;
filter: blur(8px); position: absolute;
-webkit-filter: blur(8px); padding-top: 1%;
-moz-filter: blur(8px); padding-bottom: 1%;
-o-filter: blur(8px);
-ms-filter: blur(8px);
} }

View File

@ -19,15 +19,16 @@
</head> </head>
<body id="body"> <body id="body">
<div class="container"> <div class="container" style="text-align: center;">
<div class="blur"></div> <div class="content">
<div class="content" style="text-align: center;">
<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> <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>
</div>
<div class="footer">
Footer
</div> </div>
</div> </div>
</body> </body>