diff --git a/html/style.css b/html/style.css index c706f00..deab577 100644 --- a/html/style.css +++ b/html/style.css @@ -2,25 +2,57 @@ font-family: 'Amaranth', sans-serif; } +@keyframes bg-gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} +@keyframes fadeIn { + 0% {opacity:0;} + 10% {opacity:0.4;} + 50% {opacity:0.8} + 100% {opacity:1;} + } + body { - background: #3e3f57 + background: linear-gradient(-45deg, #349ef0, #7a4abe, #349ef0); + background-size: 400% 400%; + animation: bg-gradient 15s ease infinite; } p { - color:#b5b7eb; + color:#b5b7eb; + animation: fadeIn ease-out 0.8s; } h1 { - position:relative; - left:80px; - color:#b5b7eb; + position:relative; + left:80px; + color:#b5b7eb; + animation: fadeIn ease-out 0.8s; } button { - background-color: #515357; - color: #a0b4db; - border-radius: 5px; - padding: 3px 1% + background-color: rgba(255,255,255,0.3); + color: #232f42; + border: 2.5px solid #6186c2; + border-radius: 10px; + padding: 5px 13px; + margin-bottom: 6px; + transition-duration: 0.45s; + animation: fadeIn ease-out 0.8s; +} + +button:hover { + background-color:rgba(0,0,0,0.2); + border: 2.5px solid #81a1d6; + color: #9dade3; } a:link { @@ -36,6 +68,13 @@ header { justify-content: space-between; align-items: center; padding: 15px 10%; + background: linear-gradient(-45deg, #626ce0, #349ef0, #626ce0); + background-size: 400% 400%; + animation: bg-gradient 15s ease infinite; + border-radius:100px; + border: linear-gradient(90deg, rgba(52,158,240,1) 0%, rgba(74,87,191,1) 100%); + border: 10px solid #4f71b0; + animation: fadeIn ease-out 0.8s; } .logo { @@ -49,23 +88,14 @@ header { .nav__links button { display: inline-block; padding: 10px 10px; + border: 0px solid #6186c2; + background-color: rgba(0, 0, 0, 0); + font-size: 20px; + color: #b5b7eb; } -.nav__links li a { - transition: all 0.3s ease 0s; -} - -.nav__links li a:hover { - color: -} - -.divider { - width:5px; - height:auto; - display:inline-block; -} -.divide { - margin-left:100px; +.nav__links button:hover { + color: #ffffff; } @@ -73,5 +103,3 @@ p1 { font-size: 1.75em; color:#b5b7eb; } - -