first commit
This commit is contained in:
commit
7d4e05de19
GPG key ID:
9EFA2130646BC893
27 changed files with 7574 additions and 0 deletions
178
pages/end.md
Normal file
178
pages/end.md
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
<div class="bouncing-container">
|
||||
<div class="bg-icon security-icon" style="top: 35%; left: 15%;"><i class="fas fa-shield-alt"></i></div>
|
||||
<div class="bg-icon bug-icon" style="top: 65%; left: 70%;"><i class="fas fa-bug"></i></div>
|
||||
<div class="bg-icon ai-icon" style="top: 20%; left: 80%;"><i class="fas fa-robot"></i></div>
|
||||
<div class="bg-icon lock-icon" style="top: 75%; left: 30%;"><i class="fas fa-lock"></i></div>
|
||||
<div class="bg-icon warning-icon" style="top: 45%; left: 60%;"><i class="fas fa-exclamation-triangle"></i></div>
|
||||
|
||||
<div class="bouncing-box">
|
||||
<h1 class="multicolor-text">Questions?</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bouncing-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bouncing-box {
|
||||
position: absolute;
|
||||
padding: 2rem 3rem;
|
||||
background: rgba(23, 28, 45, 0.8);
|
||||
border: 3px solid var(--primary-color);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
|
||||
animation: bounce 20s linear infinite;
|
||||
z-index: 10;
|
||||
top: 10%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
.multicolor-text {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#800020, /* Deep burgundy */
|
||||
#B22222, /* Firebrick red */
|
||||
#0066CC, /* Deeper blue */
|
||||
#104E8B, /* Dark blue */
|
||||
#800020 /* Back to burgundy */
|
||||
);
|
||||
background-size: 400% auto;
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
animation: gentle-rainbow 6s linear infinite;
|
||||
}
|
||||
|
||||
.bg-icon {
|
||||
position: absolute;
|
||||
font-size: 4rem;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.bg-icon i {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.security-icon {
|
||||
animation: security-bounce 24s linear infinite;
|
||||
color: rgba(0, 102, 204, 0.35); /* Blue icon */
|
||||
}
|
||||
|
||||
.bug-icon {
|
||||
animation: bug-bounce 22s linear infinite;
|
||||
color: rgba(178, 34, 34, 0.35); /* Red icon */
|
||||
}
|
||||
|
||||
.ai-icon {
|
||||
animation: ai-bounce 26s linear infinite;
|
||||
color: rgba(103, 92, 246, 0.35); /* Purple icon */
|
||||
}
|
||||
|
||||
.lock-icon {
|
||||
animation: lock-bounce 28s linear infinite;
|
||||
color: rgba(15, 116, 147, 0.35); /* Blue-teal icon */
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
animation: warning-bounce 25s linear infinite;
|
||||
color: rgba(176, 27, 27, 0.35); /* Red warning icon */
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 10%;
|
||||
left: 20%;
|
||||
}
|
||||
12.5% {
|
||||
top: 70%;
|
||||
left: 75%;
|
||||
}
|
||||
25% {
|
||||
top: 30%;
|
||||
left: 80%;
|
||||
}
|
||||
37.5% {
|
||||
top: 80%;
|
||||
left: 15%;
|
||||
}
|
||||
50% {
|
||||
top: 40%;
|
||||
left: 10%;
|
||||
}
|
||||
62.5% {
|
||||
top: 65%;
|
||||
left: 50%;
|
||||
}
|
||||
75% {
|
||||
top: 25%;
|
||||
left: 40%;
|
||||
}
|
||||
87.5% {
|
||||
top: 55%;
|
||||
left: 65%;
|
||||
}
|
||||
100% {
|
||||
top: 10%;
|
||||
left: 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes security-bounce {
|
||||
0% { top: 35%; left: 15%; font-size: 3.8rem; }
|
||||
20% { top: 75%; left: 40%; font-size: 4.2rem; }
|
||||
40% { top: 25%; left: 75%; font-size: 3.5rem; }
|
||||
60% { top: 65%; left: 25%; font-size: 4rem; }
|
||||
80% { top: 45%; left: 60%; font-size: 3.7rem; }
|
||||
100% { top: 35%; left: 15%; font-size: 3.8rem; }
|
||||
}
|
||||
|
||||
@keyframes bug-bounce {
|
||||
0% { top: 65%; left: 70%; font-size: 4.2rem; }
|
||||
25% { top: 20%; left: 30%; font-size: 3.6rem; }
|
||||
50% { top: 80%; left: 20%; font-size: 4rem; }
|
||||
75% { top: 40%; left: 75%; font-size: 3.8rem; }
|
||||
100% { top: 65%; left: 70%; font-size: 4.2rem; }
|
||||
}
|
||||
|
||||
@keyframes ai-bounce {
|
||||
0% { top: 20%; left: 80%; font-size: 3.6rem; }
|
||||
20% { top: 55%; left: 15%; font-size: 4.1rem; }
|
||||
40% { top: 70%; left: 60%; font-size: 3.7rem; }
|
||||
60% { top: 25%; left: 45%; font-size: 4.2rem; }
|
||||
80% { top: 60%; left: 85%; font-size: 3.8rem; }
|
||||
100% { top: 20%; left: 80%; font-size: 3.6rem; }
|
||||
}
|
||||
|
||||
@keyframes lock-bounce {
|
||||
0% { top: 75%; left: 30%; font-size: 4rem; }
|
||||
25% { top: 30%; left: 65%; font-size: 3.5rem; }
|
||||
50% { top: 65%; left: 15%; font-size: 4.3rem; }
|
||||
75% { top: 15%; left: 50%; font-size: 3.7rem; }
|
||||
100% { top: 75%; left: 30%; font-size: 4rem; }
|
||||
}
|
||||
|
||||
@keyframes warning-bounce {
|
||||
0% { top: 45%; left: 60%; font-size: 3.9rem; }
|
||||
20% { top: 15%; left: 25%; font-size: 4.2rem; }
|
||||
40% { top: 60%; left: 40%; font-size: 3.5rem; }
|
||||
60% { top: 30%; left: 80%; font-size: 4.1rem; }
|
||||
80% { top: 70%; left: 10%; font-size: 3.8rem; }
|
||||
100% { top: 45%; left: 60%; font-size: 3.9rem; }
|
||||
}
|
||||
|
||||
@keyframes gentle-rainbow {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Add Font Awesome for icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||
Loading…
Add table
Add a link
Reference in a new issue