feat: ✨ Added coming soon page

2026-06-28 02:32:23 +00:00 · 2022-06-17 22:22:23 +03:00
parent 1984cffa2f
commit 3977939e87
4 changed files with 133 additions and 1 deletions
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -0,0 +1,110 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-blue-color: #ffffff;
+  --white-color: rgb(0, 0, 0);
+  --primary-color: #181e5c;
+}
+
+body {
+  background: var(--dark-blue-color);
+  color: var(--white-color);
+  user-select: none;
+}
+
+.wrapper {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  animation: fadeIn 1000ms ease;
+  -webkit-animation: fadeIn 1000ms ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    top: 30%;
+    opacity: 0;
+  }
+  to {
+    top: 90;
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    top: 20%;
+    opacity: 0;
+  }
+  to {
+    top: 90;
+    opacity: 1;
+  }
+}
+
+.wrapper img {
+  max-width: 35%;
+  width: 150px;
+}
+
+.wrapper h1 {
+  font-size: 50px;
+  font-family: "Poppins", sans-serif;
+  margin: 10px 0;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.wrapper .dot {
+  color: var(--primary-color);
+}
+
+.wrapper p {
+  text-align: center;
+  margin: 18px;
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-size: 20px;
+}
+
+.wrapper .icons {
+  text-align: center;
+  margin-top: 15px;
+}
+
+.wrapper .icons a {
+  color: var(--dark-blue-color);
+}
+
+.wrapper .icons i {
+  background: var(--white-color);
+  height: 50px;
+  width: 50px;
+  padding: 13px;
+  font-size: 18px;
+  margin: 0 6px;
+  border-radius: 50px;
+  border: 2px solid var(--white-color);
+  transition: all 200ms ease;
+  text-decoration: none;
+  position: relative;
+}
+
+.wrapper .icons i:hover,
+.wrapper .icons i:active {
+  color: var(--primary-color);
+  border-color: var(--primary-color);
+  background: none;
+  cursor: pointer !important;
+  transform: scale(1.2);
+  -webkit-transform: scale(1.2);
+  text-decoration: none;
+}
--- a/assets/images/icon.png
+++ b/assets/images/icon.png
--- a/assets/images/logo.png
+++ b/assets/images/logo.png
--- a/index.html
+++ b/index.html
@@ -1 +1,23 @@
-<h1>hi</h1>
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Coming Soon</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
+    <link rel="stylesheet" href="assets/css/style.css">
+    <link rel="icon" href="assets/images/icon.png">
+</head>
+<body>
+    <div class="wrapper">
+        <img src="assets/images/logo.png">
+
+      <h1>Coming Soon<span class="dot">.</span></h1>
+      <p>Our website is under heavy development and not ready to use.</p>
+      <div class="icons">
+        <a href="https://github.com/sern-handler/"><i class="fab fa-github"></i></i></a>
+        <a href="https://discord.gg/123456"><i class="fab fa-discord"></i></a>
+      </div>
+    </div>
+</body>
+</html>
+