First commit
This commit is contained in:
redtea committed
1 parent
399d75678d
commit
a17d7bc9dd
9 files changed
+373
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
+308
@@ -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;
|
||||
}
|
||||
|
||||
+55
@@ -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 • Spring • 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>
|
||||
<a href="https://t.me/itzredtea">
|
||||
<img class="animated_img" src="assets/telegram.png" height="50" width="50">
|
||||
</a>
|
||||
<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">© 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>
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
$(window).on('load', function() {
|
||||
$('.flying').on('click', function() {
|
||||
let item = $(this)
|
||||
item.fadeOut(300);
|
||||
setTimeout(function() {
|
||||
item.fadeIn(250);
|
||||
}, 8000);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in new issue
Block a user