mirror of
https://github.com/stan-turing/website.git
synced 2025-03-06 20:53:28 +01:00
added imprint
This commit is contained in:
parent
629b906cf2
commit
5ff17a2e04
3 changed files with 239 additions and 1 deletions
189
css/imprint.css
Normal file
189
css/imprint.css
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
body {
|
||||
background-color: #0D1117;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #1F6FEB;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-style: none;
|
||||
background-color: #1F6FEB;
|
||||
padding: 3px 0px;
|
||||
border-radius: 100px;
|
||||
width: 25%;
|
||||
margin: 100px auto;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ######################### Navbar Section ####################### */
|
||||
|
||||
header {
|
||||
height: 80px;
|
||||
background: #161b22d5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 30px 0 25px;
|
||||
border-radius: 0px 0px 25px 25px;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
color: #1F6FEB;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.nav-bar ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.nav-bar ul li a {
|
||||
color: #fff;
|
||||
background-color: #2A3039;
|
||||
font-size: 16px;
|
||||
padding: 8px 17px;
|
||||
border: 4px solid #2A3039;
|
||||
border-radius: 50px;
|
||||
transition: 0.2s;
|
||||
margin: 0 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-bar ul li a:hover {
|
||||
color: #fff;
|
||||
border: 4px solid #1F6FEB;
|
||||
}
|
||||
|
||||
.nav-bar ul li a.active {
|
||||
color: #fff;
|
||||
background-color: #1F6FEB;
|
||||
border: 4px solid #1F6FEB;
|
||||
}
|
||||
|
||||
/* ######################### top/home/intro Section ####################### */
|
||||
|
||||
.top-container {
|
||||
background-color: #0D1117;
|
||||
}
|
||||
|
||||
/* ######################### middle container ####################### */
|
||||
|
||||
.middle-container {
|
||||
margin: 100px 0px 0px 0px;
|
||||
}
|
||||
|
||||
/* ########################## whoami Section ####################### */
|
||||
|
||||
#imprint-title {
|
||||
font-size: 2em;
|
||||
margin: 50px auto 100px auto;
|
||||
padding: 15px 30px;
|
||||
background-color: #161B22;
|
||||
border: 5px solid #1F6FEB;
|
||||
border-radius: 100px;
|
||||
width: 180px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.imprint {
|
||||
width: 400px;
|
||||
margin: auto auto 100px auto;
|
||||
background-color: #161B22;
|
||||
padding: 20px 25px;
|
||||
border-radius: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* #################### Media Query aka Responsive Website #################### */
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
|
||||
/* ######### Navbar ######### */
|
||||
.hamburger {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hamburger .line {
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background: #1F6FEB;
|
||||
margin: 6px 0px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.nav-bar {
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
background: #161B22;
|
||||
transition: 0.2s;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav-bar.active {
|
||||
height: 210px;
|
||||
border-radius: 25px;
|
||||
border: 1px solid #2A3039;
|
||||
margin: 10px auto 0 auto;
|
||||
width: 97%;
|
||||
}
|
||||
.nav-bar ul {
|
||||
display: block;
|
||||
width: fit-content;
|
||||
margin: 80px auto 0 auto;
|
||||
text-align: center;
|
||||
transition: 0.5s;
|
||||
opacity: 0;
|
||||
}
|
||||
.nav-bar.active ul {
|
||||
opacity: 1;
|
||||
}
|
||||
.nav-bar ul li a {
|
||||
margin-bottom: 15px;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
/* ######### whoami ######### */
|
||||
#imprint-title {
|
||||
width: 200px;
|
||||
}
|
||||
.imprint {
|
||||
font-size: 1em;
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
48
imprint.html
Normal file
48
imprint.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="css/imprint.css">
|
||||
<link rel="shortcut icon" href="img/pgcircle.png" type="image/x-icon">
|
||||
<title>Patrick Gerhartz</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-container" id="home">
|
||||
<header>
|
||||
<img src="img/pgcircle.png" alt="logo" class="logo">
|
||||
<div class="hamburger">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<nav class="nav-bar">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="index.html">back home</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
<div class="middle-container">
|
||||
<br>
|
||||
<div class="profile">
|
||||
<h2 id="imprint-title">Impressum</h2>
|
||||
<p class="imprint">
|
||||
Patrick Gerhartz <br>
|
||||
Wegenkamp 1 a <br>
|
||||
22527 Hamburg-Stellingen <br>
|
||||
<br>
|
||||
Email: <a href="mailto:contact@patrickgerhartz.dev">contact@patrickgerhartz.dev</a></p>
|
||||
</div>
|
||||
<script>
|
||||
hamburger = document.querySelector(".hamburger");
|
||||
hamburger.onclick = function() {
|
||||
navBar = document.querySelector(".nav-bar");
|
||||
navBar.classList.toggle("active");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
<br>
|
||||
<div>
|
||||
<img id="coding-projects" src="img/laptop.png" alt="work in progress">
|
||||
<h2 id="projekte-title">Projects - daran arbeite ich gerade.</h2>
|
||||
<h2 id="projekte-title">Projekte - daran arbeite ich gerade.</h2>
|
||||
<div class="projekt">Diese Website ist gerade mein Hauptprojekt. <br> Ich habe alles an dieser Website selber gemacht. <br> Den Code findet man auf <a class="links" href="https://github.com/stan-turing/website">GitHub</a>.</div>
|
||||
</div>
|
||||
<hr id="blog">
|
||||
|
|
@ -87,6 +87,7 @@
|
|||
</div>
|
||||
<div class="bottom-container">
|
||||
<a class="footer-link" href="https://github.com/stan-turing">GitHub</a>
|
||||
<a class="footer-link" href="imprint.html">Impressum</a>
|
||||
<p class="copyright">© 2023 Patrick Gerhartz | Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue