ADD: fancy logo and unfancy menu bar

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

View File

@ -7,10 +7,18 @@
<link rel="icon" href="./fav.ico">
</head>
<body>
<div style='height: 20vh;'></div>
<div class='logo_group'>
<h1 class='logo_font'>L A Y E R</h1>
<h1 class='logo_font'>LAYER</h1>
<img src='../resources/img/8_spinning_30fps.gif' class='logo_gif'>
</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>

View File

@ -1,48 +1,75 @@
@font-face {
font-family: 'Liberation Serif';
src: local('Liberation Serif'), local('LiberationSerif'),
url('resources/fonts/LiberationSerif.woff') format('woff'),
url('resources/fonts/LiberationSerif.ttf') format('truetype');
font-family: 'sans';
src: url('../resources/fonts/LiberationSans.woff') format('woff'),
url('../resources/fonts/LiberationSans.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Liberation Sans';
src: local('Liberation Sans'), local('LiberationSans'),
url('resources/fonts/LiberationSans.woff') format('woff'),
url('resources/fonts/LiberationSans.ttf') format('truetype');
font-family: 'mono';
src: url('../resources/fonts/LiberationMono.woff') format('woff'),
url('../resources/fonts/LiberationMono.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Liberation Mono';
src: local('Liberation Mono'), local('LiberationMono'),
url('resources/fonts/LiberationMono.woff') format('woff'),
url('resources/fonts/LiberationMono.ttf') format('truetype');
font-family: 'hyper';
src: url('../resources/fonts/RealityHyperRegular.woff') format('woff'),
url('../resources/fonts/RealityHyperRegular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
*, body {
box-sizing: border-box;
font-family: 'Liberation Sans', sans serif;
font-family: 'sans';
color: white;
background-color: black;
}
.logo_font {
font-family: 'Liberation Mono', monospace;
justify-content: center;
color: #BFBFBF;
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 {
height: 4rem;
justify-content: center;
align-items: center;
height: 8rem;
margin: -1rem;
z-index: 998;
}
.logo_group {
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;
}

Binary file not shown.

Binary file not shown.