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

View File

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