From 9d59e668d89e1f97a29727ba6405a592bf135927 Mon Sep 17 00:00:00 2001 From: Sherlock <82929505+AvMavs@users.noreply.github.com> Date: Thu, 1 Aug 2024 00:24:27 +0530 Subject: [PATCH] Add files via upload --- styles.css | 150 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 styles.css diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..8fd812d --- /dev/null +++ b/styles.css @@ -0,0 +1,150 @@ +/* styles.css */ +@font-face { + font-family: "Array-Regular"; + src: + url("fonts/Array-Regular.woff") format("woff2"), + url("fonts/Array-Regular.woff2") format("woff"); + font-weight: normal; + font-style: normal; +} + +body { + margin: 0; + background-color: #0f0f0f; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + overflow: hidden; + font-family: "Space Mono", monospace; +} + +.container { + position: relative; +} + +.overlay { + width: 100vw; + height: 100vh; + object-fit: cover; + mix-blend-mode: color-dodge; +} + +.centered-box { + position: absolute; + top: 20%; + left: 50%; + transform: translate(-50%, -10%); + padding: 10px 20px; + background: linear-gradient( + 135deg, + rgba(0, 0, 0, 0.2), + rgba(67, 67, 67, 0.2) + ); + border: 2px solid rgba(255, 255, 255, 0.1); + border-radius: 15px; + text-align: center; + font-size: 1em; + color: #ffffff; /* White text */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); +} + +.we-are { + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%, -30%); + font-size: 1.2em; + color: #ffffff; + text-align: center; + font-family: "Space Mono", monospace; +} + +.mist { + position: absolute; + top: 35%; + left: 51%; + transform: translate(-50%, -40%); + font-size: 6em; + color: #ff00ff; + font-family: "Array-Regular", sans-serif; + text-align: center; + text-shadow: 0 0 10px rgba(255, 0, 255, 0.7); +} + +.info { + position: absolute; + top: 43.5%; + left: 50%; + transform: translate(-50%, -55%); + font-size: 1.2em; + color: #d9d9d9; + text-align: center; + font-family: "Array-Regular", sans-serif; +} + +.additional-info { + position: absolute; + top: 55%; + left: 50%; + transform: translate(-50%, -70%); + font-size: 1em; + color: #d9d9d9; + text-align: center; + font-family: "Space Mono", monospace; + font-weight: bold; + line-height: 1.2; +} + +/* Buttons Start */ +.buttons { + position: absolute; + top: 75%; + left: 50%; + transform: translate(-50%, -70%); + display: flex; + flex-direction: column; + align-items: center; + gap: 0px; +} + +.button { + display: inline-block; + padding: 15px 30px; + margin: 10px 0; + width: 150px; + text-align: center; + font-size: 1em; + font-family: "Space Mono", monospace; + text-decoration: none; + text-transform: uppercase; + font-weight: bold; + border-radius: 15px; + transition: + background 0.3s, + color 0.3s; +} + +.explore-mist { + color: #ffffff; + background: linear-gradient( + 135deg, + rgba(0, 0, 0, 0.2), + rgba(67, 67, 67, 0.2) + ); + border: 2px solid rgba(255, 255, 255, 0.1); +} + +.join-us { + color: #0f0f0f; + background: #ffffff; + border: 2px solid rgba(255, 255, 255, 0.4); +} + +.explore-mist:hover { + background: rgba(0, 0, 0, 0.4); +} + +.join-us:hover { + background: rgba(255, 255, 255, 0.8); +}