oNdwxqP

index.html

<div class="container">
<div class="cf-holder">
::IM_UNDER_ATTACK_BOX::
  <div></div>

<div class="bg-holder"><div class="bg"/></div>

script.js

if (getCookie('theme') === 'dark') $('body').attr('data-dark', '')

function getCookie(cookieName) {
  let cookie = {};
  document.cookie.split(';').forEach(function(el) {
    let [key,value] = el.split('=');
    cookie[key.trim()] = value;
  })
  return cookie[cookieName];
}

style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

::root {
  --hfd-colors-whiteAlpha-100: rgba(255, 255, 255, 0.06);
}

body {
  font-family: 'Inter', sans-serif;
  margin: none;
  padding: none;
}

body[data-dark] {
  background-color: #0E1012;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.cf-holder {
  text-align: center;
}

.bg-holder {
      display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.bg {
      width: 100%;
    height: 50%;
    opacity: 0.2;
    background-image: linear-gradient(currentColor 1px, transparent 1px),linear-gradient(to right, currentColor 1px, transparent 1px);
    -webkit-background-size: 50px 50px;
    background-size: 50px 50px;
    -webkit-background-position: center;
    background-position: center;
    background-repeat: repeat;
    -webkit-transform: perspective(600px) rotateX(75deg) scale(1.3) translateY(50%);
    -moz-transform: perspective(600px) rotateX(75deg) scale(1.3) translateY(50%);
    -ms-transform: perspective(600px) rotateX(75deg) scale(1.3) translateY(50%);
    transform: perspective(600px) rotateX(75deg) scale(1.3) translateY(50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
}