diff --git a/about.html b/about.html index 4a72d02..a8c9e39 100644 --- a/about.html +++ b/about.html @@ -2,37 +2,16 @@
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!
-Github +Github \ No newline at end of file diff --git a/indexStyle.css b/css/altstyle.css similarity index 71% rename from indexStyle.css rename to css/altstyle.css index 32a7596..6e00413 100644 --- a/indexStyle.css +++ b/css/altstyle.css @@ -21,17 +21,7 @@ div { background-color:dimgray; } -a { - padding: 2%; - background-color: aqua; - text-decoration: none; - border-radius: 25%; -} h1 { font-size: 300%; } - -a:hover { - background-color: lightgreen; -} \ No newline at end of file diff --git a/mainstyle.css b/css/mainstyle.css similarity index 54% rename from mainstyle.css rename to css/mainstyle.css index 3036c8e..d0ac600 100644 --- a/mainstyle.css +++ b/css/mainstyle.css @@ -23,14 +23,43 @@ width: 10% display: inline-block; } -a { +.textlink { + font-size: 100%; + text-decoration: none; + color: black; +} + +.textlink:hover { + color: darkblue; + font-size: 120%; +} + +.linkbutton { text-decoration: none; display: inline-block; padding: 20px; color: white; + background-color:blue; + border-radius: 20px; } -a:hover { +.linkbutton:hover { + animation-name: fadein; + animation-duration: 300ms; + background-color: darkblue; +} + +.menubutton { + text-decoration: none; + display: inline-block; + padding: 20px; + color: white; + border-radius: 0%; + background-color: rgba(0,0,0,0); +} + +.menubutton:hover { + border-radius: 0%; animation-name: fadein; animation-duration: 300ms; background-color: darkblue; @@ -57,6 +86,20 @@ a:hover { 100% {opacity: 1;} } +@keyframes colorize { + 0% {color: black; + font-size: 100%;} + 100% {color: darkblue; + font-size: 150%;} +} + +@keyframes decolorize { + 0% {color: darkblue; + font-size: 150%;} + 100% {color: black; + font-size: 100%;} +} + @keyframes growDown { 0% { transform: scaleY(0) @@ -87,4 +130,21 @@ a:hover { } +.policydiv { + margin-right: 10%; + margin-left: 10%; + margin-top: 2%; + margin-bottom: 2%; + padding: 10%; + padding-top: 5%; + padding-bottom: 5%; + border-color: black; + border-style: double; + border-radius: 3%; + background-color:dimgray; +} + +h1 { + font-size: 300%; +} diff --git a/css/menustyle.css b/css/menustyle.css new file mode 100644 index 0000000..915f4d3 --- /dev/null +++ b/css/menustyle.css @@ -0,0 +1,78 @@ + .Menu { + margin: 0; + padding: 0; + list-style-type: none; + overflow: hidden; + background-color: #38444d; + } + + .mainitems { + display: inline-block; + } + + .menubutton { + text-decoration: none; + display: inline-block; + padding: 20px; + color: white; + } + + .menubutton:hover { + animation-name: fadein; + animation-duration: 300ms; + background-color: darkblue; + } + + .subitems:hover { + animation-name: fadein; + animation-duration: 300ms; + 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) + } + } + + @keyframes rotateMenu { + 0% { + transform: rotateX(-90deg) + } + 70% { + transform: rotateX(20deg) + } + 100% { + transform: rotateX(0deg) + } + } + + .dropdown:hover .dropdown-menu { + display: block; + animation: rotateMenu 300ms ease-in-out forwards; + } + + + + \ No newline at end of file diff --git a/index.html b/index.html index 14600d0..b50209a 100644 --- a/index.html +++ b/index.html @@ -2,36 +2,16 @@Learn more about my projects!
-Projects +Projects