TheShinyMelon/layer-8
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ADD: fancy logo and unfancy menu bar

Browse Source
This commit is contained in:
TheShinyMelon 2023-11-15 23:37:23 +01:00
parent 2620edcaea
commit 4a25cd5d06
4 changed files with 61 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/index.html → public/index.php
View File

@ -7,10 +7,18 @@
<link rel="icon" href="./fav.ico"> <link rel="icon" href="./fav.ico">
</head> </head>
<body> <body>
<div style='height: 20vh;'></div>
<div class='logo_group'> <div class='logo_group'>
<h1 class='logo_font'>LAYER</h1> <h1 class='logo_font'>LAYER</h1>
<img src='../resources/img/8_spinning_30fps.gif' class='logo_gif'> <img src='../resources/img/8_spinning_30fps.gif' class='logo_gif'>
</div> </div>
<div>Hier haben sie etwas Text<div> <ul class='menu_bar'>
<li><a href='./index.php'>home</a></li>
<li><a>images</a></li>
<li><a>audio</a></li>
<li><a>video</a></li>
<li><a>text</a></li>
<li><a>about</a></li>
</ul>
</body> </body>

63
public/stylesheet.css
View File

@ -1,48 +1,75 @@
@font-face { @font-face {
font-family: 'Liberation Serif'; font-family: 'sans';
src: local('Liberation Serif'), local('LiberationSerif'), src: url('../resources/fonts/LiberationSans.woff') format('woff'),
url('resources/fonts/LiberationSerif.woff') format('woff'), url('../resources/fonts/LiberationSans.ttf') format('truetype');
url('resources/fonts/LiberationSerif.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Liberation Sans'; font-family: 'mono';
src: local('Liberation Sans'), local('LiberationSans'), src: url('../resources/fonts/LiberationMono.woff') format('woff'),
url('resources/fonts/LiberationSans.woff') format('woff'), url('../resources/fonts/LiberationMono.ttf') format('truetype');
url('resources/fonts/LiberationSans.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Liberation Mono'; font-family: 'hyper';
src: local('Liberation Mono'), local('LiberationMono'), src: url('../resources/fonts/RealityHyperRegular.woff') format('woff'),
url('resources/fonts/LiberationMono.woff') format('woff'), url('../resources/fonts/RealityHyperRegular.ttf') format('truetype');
url('resources/fonts/LiberationMono.ttf') format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
*, body { *, body {
box-sizing: border-box; box-sizing: border-box;
font-family: 'Liberation Sans', sans serif; font-family: 'sans';
color: white; color: white;
background-color: black; background-color: black;
} }
.logo_font { .logo_font {
font-family: 'Liberation Mono', monospace; color: #BFBFBF;
justify-content: center; font-family: 'hyper';
font-size: 6rem;
text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A,
0 7px 0 #17202A, 0 8px 0 #17202A,
0 11px 0 #17202A, 0 12px 0 #17202A;
z-index: 999;
padding-left: 6rem;
} }
.logo_gif { .logo_gif {
height: 4rem; height: 8rem;
justify-content: center; margin: -1rem;
align-items: center; z-index: 998;
} }
.logo_group { .logo_group {
display: flex; display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.menu_bar {
display: flex;
justify-content: center;
align-items: center;
font-family: 'mono';
font-size: 2rem;
text-shadow: 0 1px 0 #17202A, 0 2px 0 #17202A,
0 7px 0 #17202A, 0 8px 0 #17202A,
0 11px 0 #17202A, 0 12px 0 #17202A;
}
.menu_bar li {
list-style-type: none;
margin: 1rem;
}
.menu_bar li a {
text-decoration: none;
} }

BIN
resources/fonts/RealityHyperRegular.ttf Normal file
View File

Binary file not shown.

BIN
resources/fonts/RealityHyperRegular.woff Normal file
View File

Binary file not shown.