diff --git a/css/general.css b/css/general.css index 709df1b..976e338 100644 --- a/css/general.css +++ b/css/general.css @@ -202,16 +202,6 @@ nav li a:focus::after{ } } -#spots-container { - display: flex; - place-items: center; - border-radius: 10px; - margin-top: 5px; - padding: 0 7px; - border: 1px solid rgb(73, 73, 73); - background-color: rgb(22, 22, 22); -} - .blob { background: black; border-radius: 50%; @@ -274,11 +264,22 @@ nav li a:focus::after{ border-radius: 10px; border: 1px solid rgb(73, 73, 73); background-color: rgb(22, 22, 22); + animation: slidein ease 1.5s; +} + +#spots-container { + display: flex; + place-items: center; + border-radius: 10px; + margin-top: 5px; + padding: 0 7px; + border: 1px solid rgb(73, 73, 73); + background-color: rgb(22, 22, 22); + animation: slidein-2 ease 3s; } #header-subtitle-spots { padding: 5px; - } #entrance-arrow { @@ -310,6 +311,42 @@ nav li a:focus::after{ #logo { min-height: 300px; min-width: 300px; + animation: fadeInAnimation ease 3s; + animation-iteration-count: 1; + animation-fill-mode: forwards; +} + +@keyframes fadeInAnimation { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes slidein { + 0% { + transform: translateY(250px); + opacity: 0; + } + 60% { + opacity: 0; + } + 100% { + transform: translateY(0px); + } +} +@keyframes slidein-2 { + 0% { + transform: translateY(1000px); + opacity: 0; + } + 80% { + opacity: 0; + } + 100% { + transform: translateY(0px); + } } /* Main Section */ @@ -836,7 +873,7 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de } .prize-desc:hover { - transform: scale(1.05); + transform: rotate3d(0, 1, 0, 360deg); transition: 0.5s; } @@ -850,22 +887,10 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de position: absolute; color: rgb(77, 218, 211); font-size: 25px; -} - -#pr-ti-2 { - margin-bottom: 40px; -} - -#pr-ti-1 { - margin-bottom: 40px; -} - -#pr-ti-3 { margin-bottom: 40px; } .prize-content { - /* margin-bottom: 10px; */ color:rgb(129, 218, 126); font-size: 20px; } @@ -938,6 +963,12 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de margin-left: 7px; color: #ffde59; } +/* +#first-podium:hover > .podium-label, #first-podium:hover > #prize-logo { + transform: scale(1.1); + margin: 5px; + transition: 0.5s; +} */ #team-container { width: 100%; diff --git a/index.html b/index.html index 3295365..7b3f0db 100644 --- a/index.html +++ b/index.html @@ -347,7 +347,7 @@