angleichungstest

This commit is contained in:
Ammerhai 2024-12-08 23:07:47 +01:00
parent 12b70b2746
commit b3513f59ca
2 changed files with 103 additions and 0 deletions

View File

@ -4,9 +4,20 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PhB Layout mit Spalten</title>
<link rel="stylesheet" href="website_main.css"> <!-- Dein CSS-File -->
<link rel="stylesheet" href="dnd-book.css"> <!-- Dein CSS-File -->
</head>
<body>
<header>
<div class="title">
<a href="/index.html">AMMERHAI</a>
</div>
<div class="menu">
<a href="/ttrpg.html">TTRPG</a>
<a href="/blog.html">Blog</a>
<a href="/imprint.html">Imprint</a>
</div>
</header>
<!-- Seite 1 -->
<div class="phb">

92
website_main.css Normal file
View File

@ -0,0 +1,92 @@
/*GENERAL*/
/*@font-face {
font-family: 'FiraCode';
src: url(fonts/FiraCode-VariableFont_wght.ttf);
}*/
@font-face {
font-family: 'Inconsolata';
src: url(fonts/Inconsolata-VariableFont_wdth\,wght.ttf);
font-weight: 600;
}
/*BODY*/
body {
background: #292a2d;
color: #EEE;
margin: 0em;
}
/*##########################################################*/
/*HEADER*/
header {
z-index: 1;
display: flex;
position: fixed;
width: 100%;
line-height: 3.5em;
background: #151617;
box-shadow: 0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
/*font*/
font-size: 1.2em;
}
header .title {
margin-left: 3em;
font-weight: bold;
font-size: 1.6em;
text-shadow: 0em 0em 0.2em rgba(175, 175, 175, 0.5);
}
header .title a{
color: inherit;
text-decoration: none;
}
header .menu {
margin-left: auto;
margin-right: 3em;
}
header .menu a{
color: inherit;
text-decoration: none;
margin-right: 2em;
}
header .menu a:last-child {
margin-right: 0; /* No margin for the last menu item */
}
header .menu a:hover {
transform: scale(1.02);
text-shadow: 0em 0em 1em rgba(175, 175, 175, 0.9);
}
/*##########################################################*/
/*IMG*/
img.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
img.shadow{
box-shadow: 0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
}
/*##########################################################*/
/*FOOTER*/
footer {
opacity: 0.5;
position: relative;
bottom: 0;
width: 100%;
text-align: center;
/*padding: 10px;*/
border-top: 1px transparent #ccc; /* Trennlinie oberhalb des Footers */
}