janishutz-website/old-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

link to myevent website & upgraded menu

Browse Source
This commit is contained in:
Janis Hutz
2023-03-25 13:59:35 +01:00
parent 53928f39f5
commit 9af271868c
6 changed files with 42 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ui/css/mainstyle.css
View File

@@ -59,11 +59,13 @@ body {
font-size: 100%;
text-decoration: none;
color: black;
transition: 1s;
}
.textlink:hover {
color: darkblue;
font-size: 120%;
font-size: 115%;
transition: 0.3s;
}
.linkbutton {
@@ -72,11 +74,14 @@ body {
padding: 20px;
color: white;
background-color:rgba(0, 40, 131, 1);
border-radius: 20px;
border-radius: 25px;
transition: 1s;
}
.linkbutton:hover {
background-color: darkblue;
border-radius: 5px;
transition: 0.3s;
}
.references {

51
ui/css/menustyle.css
View File

@@ -64,11 +64,13 @@
width: 80%;
display: block;
padding: 2%;
color: white
color: white;
transition: 0.6s;
}
.menubutton:hover {
background-color: darkblue;
transition: 0.2s;
}
@media only screen and (min-width: 999px) {
@@ -87,13 +89,6 @@
justify-content: center;
}
.stickybox {
display: inline;
position: sticky;
position: -webkit-sticky;
top: 0px;
}
.menubutton {
text-decoration: none;
display: inline-block;
@@ -102,19 +97,13 @@
color: white;
border-radius: 0%;
background-color: rgba(0,0,0,0);
transition: 0.6s;
}
.menubutton:hover {
border-radius: 0%;
animation-name: fadein;
animation-duration: 300ms;
background-color: darkblue;
}
.subitems:hover {
animation-name: fadein;
animation-duration: 300ms;
background-color: darkblue;
transition: 0.3s;
}
.dropdown-menu {
@@ -125,40 +114,22 @@
list-style-type: none;
position: absolute;
min-width: 200px;
}
@keyframes fadein {
0% {opacity: 0;}
100% {opacity: 1;}
transform-origin: top center;
flex-direction: column;
}
@keyframes growDown {
0% {
transform: scaleY(0)
}
80% {
transform: scaleY(1.1)
transform: scaleY(0);
}
100% {
transform: scaleY(1)
}
}
@keyframes rotateMenu {
0% {
transform: rotateX(-90deg)
}
70% {
transform: rotateX(20deg)
}
100% {
transform: rotateX(0deg)
transform: scaleY(1);
}
}
.dropdown:hover .dropdown-menu {
display: block;
animation: rotateMenu 300ms ease-in-out forwards;
display: flex;
animation: growDown 0.3s ease-in-out;
}
.mainitems {

7
ui/index.html
View File

@@ -42,6 +42,13 @@
<a href="https://github.com/simplePCBuilding" class="linkbutton">GitHub</a>
</div>
</div>
<div class="sidebyside">
<div class="element">
<h3>myevent</h3>
<p>My biggest personal project yet. A fully free open source event management solution</p>
<a href="https://myevent.janishutz.com" class="linkbutton">Learn more</a>
</div>
</div>
</div>
<div class="bottom">
<h2 class="content-title">Check out my projects!</h2>

16
ui/js/basicanimations.js
View File

@@ -1,22 +1,6 @@
$( document ).ready( function() {
$( '#ContentToInclude' ).load( '/menu.html' );
$( '#Footer' ).load('/footer.html');
$( '.linkbutton').mouseenter(function() {
$( this ).stop();
$( this ).animate( { 'border-radius': '0px', 'background-color': 'darkblue' }, 200 );
});
$( '.linkbutton').mouseleave(function() {
$( this ).stop();
$( this ).animate( { 'border-radius': '20px', 'background-color': 'rgba(0,0,0,0)' }, 200 );
});
$( '.textlink' ).mouseenter(function() {
$( this ).stop();
$(this ).animate( { 'color': 'darkblue', 'font-size': '120%' }, 200 );
});
$( '.textlink' ).mouseleave(function() {
$( this ).stop();
$( this ).animate( { 'color': 'black', 'font-size': '100%' }, 200);
});
setTimeout( highlightLocation, 200 );
} );

20
ui/menu.html
View File

@@ -16,26 +16,26 @@
<li class="dropdown mainitems">
<a class="menubutton" id="projects" href="/projects.html">Projects</a>
<ul class="dropdown-menu">
<li class="subitems"><a class="menubutton" href="/projects/qrinsight.html">QR & Barcode Insight</a></li>
<li class="subitems"><a class="menubutton" href="/projects/storagemanager.html">StorageManager</a></li>
<li class="subitems"><a class="menubutton" href="/projects/imagescaler.html">FSR Image & Video Upscaler Frontend</a></li>
<li class="subitems"><a class="menubutton" href="/projects/musiplayer.html">MusicPlayer</a></li>
<li class="subitems"><a class="menubutton" href="/projects/bgac.html">BiogasControllerApp</a></li>
<li class="subitems"><a class="menubutton" href="https://myevent.janishutz.com">BiogasControllerApp</a></li>
<a class="menubutton" href="/projects/qrinsight.html">QR & Barcode Insight</a>
<a class="menubutton" href="/projects/storagemanager.html">StorageManager</a>
<a class="menubutton" href="/projects/imagescaler.html">FSR Image & Video Upscaler Frontend</a>
<a class="menubutton" href="/projects/musiplayer.html">MusicPlayer</a>
<a class="menubutton" href="/projects/bgac.html">BiogasControllerApp</a>
<a class="menubutton" href="https://myevent.janishutz.com">myevent</a>
</ul>
</li>
<li class="dropdown mainitems">
<a class="menubutton" id="about" href="/aboutPage.html">About</a>
<ul class="dropdown-menu">
<li class="subitems"><a class="menubutton" href="/privacypolicy.html">Privacy Policy</a></li>
<li class="subitems"><a class="menubutton" href="/about.html">About me</a></li>
<a class="menubutton" href="/privacypolicy.html">Privacy Policy</a>
<a class="menubutton" href="/about.html">About me</a>
</ul>
</li>
<li class="dropdown mainitems">
<a class="menubutton" id="services" href="/services.html">Services</a>
<ul class="dropdown-menu">
<li class="subitems"><a class="menubutton" href="https://pcbuilding.janishutz.com">PC Building</a></li>
<li class="subitems"><a class="menubutton" href="https://development.janishutz.com">Custom Websites</a></li>
<a class="menubutton" href="https://pcbuilding.janishutz.com">PC Building</a>
<a class="menubutton" href="https://development.janishutz.com">Custom Websites</a>
</ul>
</li>
<li class="mainitems"><a class="menubutton" id="support" href="/support">Support</a></li>

3
ui/projects.html
View File

@@ -27,10 +27,11 @@
</ul>
<h3>JavaScript, HTML, CSS (Webapps / Websites)</h3>
<ul>
<li><a class="textlink" href="https://myevent.janishutz.com">myevent</a></li>
<li><a class="textlink" href="/">This website</a></li>
<li><a class="textlink" href="https://myevent.janishutz.com">myevent - free & open source self-hosted event management solution</a></li>
<li><a class="textlink" href="https://booking.languageschoolhossegor.com">Booking system for Language School Hossegor (Not yet up, in development)</a></li>
<li><a class="textlink" href="https://impress-testing.janishutz.com">Impress.js website (Not yet up, in development)</a></li>
<li><a class="textlink" href="https://impress-testing.janishutz.com/">Impress.js website (Not yet up, in development)</a></li>
</ul>
</div>
<div id="Footer"></div>