wellfedbison/gilroyhacks.com
wellfedbison/gilroyhacks.com
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added Animation

Browse Source
This commit is contained in:
James Dinh 2022-06-02 23:19:56 -07:00
parent 45b66a2ef1
commit a92e915ba3
1 changed files with 101 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
css/general.css
View File

@ -682,32 +682,13 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
width: 400px;
min-width: 300px;
border-radius: 10px;
background-color: #0d1117;
background-color: #1e2227;
background-color: #181a1d;
margin: 10px auto;
padding: 10px 30px;
box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
box-shadow: 0px 5px 10px rgb(0 0 0 / 20%);
text-align: left;
}
.list-item {
margin: 0 0 30px 30px;
padding: 10px;
position: relative;
}
.list-item::before {
content: "";
position: relative;
margin-right: 10px;
width: 10px;
height: 10px;
background: rgb(255, 255, 255);
border-radius: 999px;
float: left;
border: 3px solid rgb(44, 44, 44);
}
/* Outer Layer with the steps border */
.outer {
border-left: 2px solid #333;
@ -718,11 +699,16 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
position: relative;
margin: 0 0 20px 20px;
padding: 10px;
background: #333;
background: rgb(49, 48, 48);
color: gray;
border-radius: 8px;
max-width: 400px;
}
.card:hover {
filter: brightness(120%);
transition: 0.5s;
}
#signup-header {
padding-top: 10px;
@ -741,10 +727,11 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
position: absolute;
width: 10px;
height: 10px;
background: white;
background: rgb(56, 105, 56);
border-radius: 50%;
left: -28px;
border: 2px solid rgb(155, 144, 144);
cursor: pointer;
border: 2px solid rgb(255, 255, 255);
}
#rules-description {
@ -1045,6 +1032,18 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
#line-header {
width: 200px;
margin: 0 auto 5px;
animation: grow-wide ease 2s;
}
@keyframes grow-wide {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
abbr[title] {
@ -1121,4 +1120,82 @@ footer li {
footer a {
color:rgb(108, 176, 231);
font-size: 16px;
}
@keyframes move {
50% {
padding-left: 8px;
padding-right: 0px;
}
100% {
padding-right: 4px;
}
}
@keyframes slice {
60% {
width: 100%;
left: 4px;
}
100% {
width: 100%;
left: -2px;
padding-left: 0;
}
}
@keyframes check-01 {
0% {
width: 4px;
top: auto;
transform: rotate(0);
}
50% {
width: 0px;
top: auto;
transform: rotate(0);
}
51% {
width: 0px;
top: 8px;
transform: rotate(45deg);
}
100% {
width: 5px;
top: 8px;
transform: rotate(45deg);
}
}
@keyframes check-02 {
0% {
width: 4px;
top: auto;
transform: rotate(0);
}
50% {
width: 0px;
top: auto;
transform: rotate(0);
}
51% {
width: 0px;
top: 8px;
transform: rotate(-45deg);
}
100% {
width: 10px;
top: 8px;
transform: rotate(-45deg);
}
}
@keyframes firework {
0% {
opacity: 1;
box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
}
30% {
opacity: 1;
}
100% {
opacity: 0;
box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0;
}
}