ADD: fancy logo and unfancy menu bar
This commit is contained in:
parent
2620edcaea
commit
4a25cd5d06
@ -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>
|
@ -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;
|
||||
}
|
BIN
resources/fonts/RealityHyperRegular.ttf
Normal file
BIN
resources/fonts/RealityHyperRegular.ttf
Normal file
Binary file not shown.
BIN
resources/fonts/RealityHyperRegular.woff
Normal file
BIN
resources/fonts/RealityHyperRegular.woff
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user