updated home

This commit is contained in:
janis
2022-11-03 16:22:14 +01:00
parent a7fa750939
commit 5847297d34
3 changed files with 104 additions and 8 deletions

26
about.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>Home - janishutz.com</title>
<link rel="stylesheet" href="./mainstyle.css">
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Legal</a>
<div class="dropdown-content dropdown-animation">
<a href="./privacypolicy.html">Privacy Policy for apps</a>
</div>
</li>
<li><a href="./support.html">Support</a></li>
<li><a href="./about.html">About me</a></li>
</ul>
<h1>About me</h1>
<p>I am a young person that is still in the process of getting really experienced with programming. I am really passionate about my projects. You may find more of my projects on github!
</p>
<a href="https://github.com/simplePCBuilding">Github</a>
</body>
</html>

View File

@@ -2,17 +2,22 @@
<html> <html>
<head> <head>
<title>Home - janishutz.com</title> <title>Home - janishutz.com</title>
<link rel="stylesheet" href="./indexStyle.css"> <link rel="stylesheet" href="./mainstyle.css">
</head> </head>
<body> <body>
<header> <ul class="Menu">
</header> <li class="mainitems"><a href="#">Home</a></li>
<nav> <li class="dropdown mainitems">
<ul> <a href="#">Legal</a>
<li class="active"><a href="#">Home</a></li> <ul class="dropdown-menu">
<li><a href="./support.html">Support</a></li> <li class="subitems"><a href="./privacypolicy.html">Privacy Policy for apps</a></li>
</ul> </ul>
</nav> </li>
<li class="mainitems"><a href="./support.html">Support</a></li>
<li class="mainitems"><a href="./about.html">About me</a></li>
</ul>
<h1>Welcome to janishutz.com</h1>
</body> </body>
</html> </html>

65
mainstyle.css Normal file
View File

@@ -0,0 +1,65 @@
body {
background-color: gray;
}
.logo img {
width: 10%
}
.Menu {
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
background-color: #38444d;
}
.mainitems {
display: inline-block;
}
a {
text-decoration: none;
display: inline-block;
padding: 20px;
color: white;
}
a:hover {
background-color: darkblue;
}
.dropdown-menu {
margin: 0;
padding: 0;
background-color: #38444d;
display: none;
list-style-type: none;
position: absolute;
min-width: 200px;
}
@keyframes fadein {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes growDown {
0% {
transform: scaleY(0)
}
80% {
transform: scaleY(1.1)
}
100% {
transform: scaleY(1)
}
}
.dropdown:hover .dropdown-menu {
display: block;
animation: growDown 300ms ease-in-out forwards;
}