diff --git a/ui/css/mainstyle.css b/ui/css/mainstyle.css index cbd05ff..6c148e0 100755 --- a/ui/css/mainstyle.css +++ b/ui/css/mainstyle.css @@ -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 { diff --git a/ui/css/menustyle.css b/ui/css/menustyle.css index 96ea650..ac2bda7 100755 --- a/ui/css/menustyle.css +++ b/ui/css/menustyle.css @@ -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 { diff --git a/ui/index.html b/ui/index.html index 9b3daf3..8bbc3be 100755 --- a/ui/index.html +++ b/ui/index.html @@ -42,6 +42,13 @@ GitHub +
+
+

myevent

+

My biggest personal project yet. A fully free open source event management solution

+ Learn more +
+

Check out my projects!

diff --git a/ui/js/basicanimations.js b/ui/js/basicanimations.js index a2f234a..6c92157 100755 --- a/ui/js/basicanimations.js +++ b/ui/js/basicanimations.js @@ -1,24 +1,8 @@ -$(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); - }); +$( document ).ready( function() { + $( '#ContentToInclude' ).load( '/menu.html' ); + $( '#Footer' ).load('/footer.html'); setTimeout( highlightLocation, 200 ); -}); +} ); function highlightLocation () { let pagename = $(location).attr( 'pathname' ); diff --git a/ui/menu.html b/ui/menu.html index 9affae5..9c995ce 100755 --- a/ui/menu.html +++ b/ui/menu.html @@ -16,26 +16,26 @@
  • Projects
  • About
  • Services
  • Support
    • diff --git a/ui/projects.html b/ui/projects.html index b2693e6..b36f094 100755 --- a/ui/projects.html +++ b/ui/projects.html @@ -27,10 +27,11 @@

    JavaScript, HTML, CSS (Webapps / Websites)