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;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
font-family: 'Cozette';
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 30px 20px;
|
||||
text-align: center;
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: rgb(35, 35, 35);
|
||||
background-color: #202020;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#header {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
background: rgb(45, 45, 45);
|
||||
a {
|
||||
color: #ad7690;
|
||||
}
|
||||
|
||||
#footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background: rgb(45, 45, 45);
|
||||
color: rgb(127, 127, 127);
|
||||
text-align: right;
|
||||
main {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
39
index.html
39
index.html
|
@ -4,25 +4,44 @@
|
|||
<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>hello</title>
|
||||
<title>Home - unlxam</title>
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
<div>
|
||||
<h1>Hello!</h1>
|
||||
<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>
|
||||
</header>
|
||||
</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 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>
|
||||
<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>
|
||||
<footer id="footer">
|
||||
<div>
|
||||
<div class="smile">
|
||||
:)
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in a new issue