cool font
This commit is contained in:
parent
b2e6d13882
commit
72c0528b28
31
another_page.html
Normal file
31
another_page.html
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||||
|
<title>Another page - unlxam</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<nav>
|
||||||
|
<div class="box">
|
||||||
|
<div class="links">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
|
|
||||||
|
<a href="another_page.html">Another page</a>
|
||||||
|
|
|
||||||
|
<a href="https://forge.unlxam.xyz">Forgejo</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
<div class="box">
|
||||||
|
<div>
|
||||||
|
<p>Just another page so the nav don't feel so empty</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
assets/fonts/CozetteVector/CozetteVector.ttf
Normal file
BIN
assets/fonts/CozetteVector/CozetteVector.ttf
Normal file
Binary file not shown.
21
assets/fonts/CozetteVector/LICENSE
Normal file
21
assets/fonts/CozetteVector/LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2020, Slavfox
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -1,33 +1,97 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Cozette';
|
||||||
|
src: url('../assets/fonts/CozetteVector/CozetteVector.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
font-family: 'Cozette';
|
||||||
|
font-size: x-large;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
html, body {
|
||||||
margin: 30px 20px;
|
height: 100%;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: rgb(35, 35, 35);
|
background-color: #202020;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header {
|
a {
|
||||||
padding: 20px 0;
|
color: #ad7690;
|
||||||
text-align: center;
|
|
||||||
background: rgb(45, 45, 45);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#footer {
|
main {
|
||||||
position: absolute;
|
text-align: center;
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
background: rgb(45, 45, 45);
|
|
||||||
color: rgb(127, 127, 127);
|
|
||||||
text-align: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
border: solid 1px #808080;
|
||||||
|
padding: 15px 30px;
|
||||||
|
margin: 20px 50px 0px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home {
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.website {
|
||||||
|
margin: 50px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes rotating /* Safari and Chrome */ {
|
||||||
|
from {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
-o-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
-o-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotating {
|
||||||
|
from {
|
||||||
|
-ms-transform: rotate(0deg);
|
||||||
|
-moz-transform: rotate(0deg);
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
-o-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-ms-transform: rotate(360deg);
|
||||||
|
-moz-transform: rotate(360deg);
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
-o-transform: rotate(360deg);
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotating {
|
||||||
|
-webkit-animation: rotating 5s linear infinite;
|
||||||
|
-moz-animation: rotating 5s linear infinite;
|
||||||
|
-ms-animation: rotating 5s linear infinite;
|
||||||
|
-o-animation: rotating 5s linear infinite;
|
||||||
|
animation: rotating 5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smile {
|
||||||
|
text-align: end;
|
||||||
|
margin: 30px 50px;
|
||||||
|
color: rgb(142, 195, 63);
|
||||||
|
}
|
||||||
53
index.html
53
index.html
|
|
@ -4,25 +4,44 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||||
<title>hello</title>
|
<title>Home - unlxam</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header id="header">
|
<div class="container">
|
||||||
<div>
|
<nav>
|
||||||
<h1>Hello!</h1>
|
<div class="box">
|
||||||
|
<div class="links">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
|
|
||||||
|
<a href="another_page.html">Another page</a>
|
||||||
|
|
|
||||||
|
<a href="https://forge.unlxam.xyz">Forgejo</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
<div class="box">
|
||||||
|
<div class="home">
|
||||||
|
<div>
|
||||||
|
<h3>Hi!</h3>
|
||||||
|
<hr/>
|
||||||
|
</div>
|
||||||
|
<div class="website">
|
||||||
|
<p>This is my website.</p>
|
||||||
|
<p>For now, there's nothing much on it.</p>
|
||||||
|
<p>I will be adding things as they come to mind and when I have the time.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<hr/>
|
||||||
|
<p>Thanks for passing by, if you are not me</p>
|
||||||
|
<p>(for some reason)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<div class="smile">
|
||||||
|
:)
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</div>
|
||||||
<main>
|
|
||||||
<div>
|
|
||||||
<p>This is my website.</p>
|
|
||||||
<p>For now, there's nothing on it, but someday will have. Hopefully will not take long for it.</p>
|
|
||||||
<p>Meanwhile, you can check my <a href="https://forge.unlxam.xyz">Forgejo</a> instance (which also has nothing).</p>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<footer id="footer">
|
|
||||||
<div>
|
|
||||||
:)
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue