First commit

css/style.css

@@ -0,0 +1,308 @@
+@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
+@import url('font-awesome.min.css');
+
+*{
+    margin: 0px;
+    padding: 0px;
+}
+
+@media screen and (max-width: 1080px) {
+    html, body {margin: 0; height: 100%; overflow: hidden}
+}
+
+
+body{
+    font-family: 'Exo', sans-serif;
+}
+
+
+.context {
+    z-index: 100;
+    width: 100%;
+    position: absolute;
+    top:40vh;
+}
+
+.context h1{
+    text-align: center;
+    color: #fff;
+    font-size: 50px;
+}
+
+@media screen and (max-width: 1080px) {
+    .context h1{
+        font-size: 70px;
+    }
+}
+
+.context p{
+    text-align: center;
+    color: #ffffffd0;
+    font-size: 25px;
+}
+@media screen and (max-width: 1080px) {
+    .context p{
+        font-size: 45px;
+    }
+}
+
+.social_button a {
+    color: #ffffff !important;
+    text-decoration: none;
+    font-size: 18px;
+}
+
+.social_button {
+    margin-top: 30px !important;
+}
+
+/* @media screen and (max-width: 1080px) {
+    .social_button {
+        margin-top: 30px !important;
+    }
+    
+} */
+
+.area{
+    /* background: #c44747;   */
+    background-image: url('../assets/background.webp');
+    /* background: -webkit-linear-gradient(to left, #e1756d, #ff0f0f);   */
+    background-size: 100% 100%;
+    width: 100%;
+    height:100vh;
+}
+
+@media screen and (max-width: 1080px) {
+    .area{
+        /* background: #c44747;   */
+        background-image: url('../assets/background_vertical.webp');
+        /* background: -webkit-linear-gradient(to left, #e1756d, #ff0f0f);   */
+
+    }
+}
+
+
+.circles{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.circles li{
+    position: absolute;
+    display: block;
+    list-style: none;
+    /* background: rgba(255, 255, 255, 0.2); */
+    animation: animate 25s linear infinite;
+    bottom: -150px;
+    
+}
+
+
+.circles li:nth-child(1){
+    left: 25%;
+    width: 80px;
+    height: 80px;
+    animation-delay: 0s;
+}
+
+
+.circles li:nth-child(2){
+    left: 10%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 2s;
+    animation-duration: 12s;
+}
+
+.circles li:nth-child(3){
+    left: 70%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 4s;
+}
+
+.circles li:nth-child(4){
+    left: 40%;
+    width: 60px;
+    height: 60px;
+    animation-delay: 0s;
+    animation-duration: 18s;
+}
+
+.circles li:nth-child(5){
+    left: 65%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 0s;
+}
+
+.circles li:nth-child(6){
+    left: 75%;
+    width: 110px;
+    height: 110px;
+    animation-delay: 3s;
+}
+
+.circles li:nth-child(7){
+    left: 35%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 7s;
+}
+
+.circles li:nth-child(8){
+    left: 50%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 15s;
+    animation-duration: 45s;
+}
+
+.circles li:nth-child(9){
+    left: 20%;
+    width: 15px;
+    height: 15px;
+    animation-delay: 2s;
+    animation-duration: 35s;
+}
+
+.circles li:nth-child(10){
+    left: 85%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 0s;
+    animation-duration: 11s;
+}
+
+
+
+@keyframes animate {
+
+    0%{
+        transform: translateY(0) rotate(0deg);
+        opacity: 1;
+        border-radius: 0;
+    }
+
+    100%{
+        transform: translateY(-1000px) rotate(720deg);
+        opacity: 0;
+        border-radius: 50%;
+    }
+
+}
+
+@keyframes on_click_animate {
+    0%{
+        opacity: 1;
+
+    }
+
+    70%{
+        opacity: 0;
+    }
+
+    100%{
+        opacity: 0;
+    }
+}
+
+
+.icon_container ul {
+    display: inline;
+}
+
+/* Icon */
+
+.icon {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    text-transform: none !important;
+    color: #fff;
+    align-self: center;
+}
+
+
+
+
+
+
+/* Footer */
+
+#footer {		
+    bottom: 0;
+    cursor: default;
+    color: #fff;
+    left: 0;
+    line-height: 3;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+}
+
+@media screen and (max-width: 1080px) {
+    #footer {	
+        line-height: 2;
+        font-size: 24px;
+    }
+}
+
+
+.flying {
+    z-index: 50;
+    display: block;
+    max-width: 100%;
+}
+
+@media screen and (max-width: 1080px) {
+    .flying {
+        display: none;
+    }
+}
+
+.animated_img {
+    height: 3.5%;
+    width: 3.5%;
+    -webkit-transition: all 1s ease; /* Safari and Chrome */
+    -moz-transition: all 1s ease; /* Firefox */
+    -ms-transition: all 1s ease; /* IE 9 */
+    -o-transition: all 1s ease; /* Opera */
+    transition: all 1s ease;
+}
+
+@media screen and (max-width: 1080px) {
+    .animated_img {
+        height: 13%;
+        width: 13%;
+    }
+}
+
+.animated_img:hover {
+    -webkit-transform:scale(1.25); /* Safari and Chrome */
+    -moz-transform:scale(1.25); /* Firefox */
+    -ms-transform:scale(1.25); /* IE 9 */
+    -o-transform:scale(1.25); /* Opera */
+     transform:scale(1.25);
+}
+
+.hidden {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    transition:
+      opacity 0.5s ease-out,
+      width 0.5s ease 0.5s,
+      height 0.5s ease 0.5s;
+}
+
+span.nobr { 
+    white-space: nowrap; 
+}
+

index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
+        <link rel="icon" href="assets/icon.png">
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+        <script type="text/javascript" src="js/main.js"></script>
+        <link href="media-queries.css" rel="stylesheet" type="text/css">
+        <title>CarcadeX</title>
+    </head>
+    <body>
+        
+
+        <!-- Header -->
+        <header id="header" class="context">
+            <h1>itzRedTea <span class="nobr">(aka Денис Истратов)</span></h1>
+            <p>Java/Kotlin &nbsp;&bull;&nbsp; Spring &nbsp;&bull;&nbsp; Spigot</p>
+            <p class="social_button priority">
+                <a href="https://vk.com/itzredtea">
+                    <img class="animated_img" src="assets/vk.png" height="50" width="50">
+                </a> &nbsp;&nbsp;&nbsp;
+                <a href="https://t.me/itzredtea">
+                    <img class="animated_img" src="assets/telegram.png" height="50" width="50">
+                </a> &nbsp;&nbsp;&nbsp;
+                <a href="mailto:red__tea@outlook.com">
+                    <img class="animated_img" src="assets/email.png" height="50" width="50">
+                </a>
+            </p>
+        </header>
+
+
+    <!-- Footer -->
+        <footer id="footer">
+            <span class="copyright">&copy; CarcadeX Project. 2024 ©️</span>
+        </footer>
+        
+        <div class="area" >
+            <ul class="circles">
+                <li><img class="flying" src="assets/icon.png"></li>
+                <li><img class="flying" src="assets/icon.png"></li>
+                <li><img class="flying" src="assets/icon.png"></li>
+                <li><img class="flying" src="assets/icon.png"></li>
+                <li><img class="flying" src="assets/icon.png"></li>
+                <li><img class="flying" src="assets/icon.png"></li>
+                <li><img class="flying" src="assets/icon.png"></li>
+                <li><img class="flying" src="assets/icon.png"></li>
+                <li><img class="flying" src="assets/icon.png"></li>
+                <li><img class="flying" src="assets/icon.png"></li>
+            </ul>
+        </div>
+
+
+    </body>
+</html>

js/main.js

@@ -0,0 +1,10 @@
+$(window).on('load', function() {
+    $('.flying').on('click', function() {
+        let item = $(this)
+        item.fadeOut(300);
+        setTimeout(function() { 
+            item.fadeIn(250); 
+        }, 8000);
+    });
+});
+