diff --git a/assets/background.webp b/assets/background.webp
new file mode 100644
index 0000000..eb36685
Binary files /dev/null and b/assets/background.webp differ
diff --git a/assets/background_vertical.webp b/assets/background_vertical.webp
new file mode 100644
index 0000000..f424c4b
Binary files /dev/null and b/assets/background_vertical.webp differ
diff --git a/assets/email.png b/assets/email.png
new file mode 100644
index 0000000..688c2e4
Binary files /dev/null and b/assets/email.png differ
diff --git a/assets/icon.png b/assets/icon.png
new file mode 100644
index 0000000..61b1fca
Binary files /dev/null and b/assets/icon.png differ
diff --git a/assets/telegram.png b/assets/telegram.png
new file mode 100644
index 0000000..7736bbb
Binary files /dev/null and b/assets/telegram.png differ
diff --git a/assets/vk.png b/assets/vk.png
new file mode 100644
index 0000000..b60d0d8
Binary files /dev/null and b/assets/vk.png differ
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..7abd7d3
--- /dev/null
+++ b/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;
+}
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c729b64
--- /dev/null
+++ b/index.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
+ CarcadeX
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..cd845e2
--- /dev/null
+++ b/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);
+ });
+});
+
+ 
+ 
+