THE SITE IS CURRENTLY BEING UNDER CONSTRUCTION


When will it be ready?


That's a good question. You think it would be nice if I had an answear to it? I think that either! But I don't know the answear :c


Will it actually be ready? Ever?


No idea. I'd like this to change for somethink nice, but can't guarantee. Sorry no sorry, I'm lazy af

HTML code

<div class="anccen">
  <div class="announcement">
    <h1>
      THE SITE IS CURRENTLY BEING UNDER CONSTRUCTION
    </h1>
<br/>
    <h3>
      When will it be ready?
    </h3>
<br/>
    <p>
      That's a good question. You think it would be nice if I had an answear to it? I think that either! But I don't know the answear :c
    </p>
<br/>
    <h3>
      Will it actually be ready? Ever?
    </h3>
<br/>
    <p>
      No idea. I'd like this to change for somethink nice, but can't guarantee. Sorry no sorry, I'm lazy af
    </p>
  </div>
</div>

CSS code

.anccen{
    display: flex;
    justify-content: center;
    margin: 200px 0 400px 0;
}

h1{
    text-align: center;
}

.announcement{
    background: radial-gradient(ellipse at top, rgba(64, 126, 219, 0.4), transparent), radial-gradient(ellipse at bottom, rgba(29, 84, 84, 0.4), transparent);
    border-radius: 20px;
    backdrop-filter: blur(15px);
    color: #e1ecfc;
    padding: 25px;
    width: 500px;
    height: auto;

    -webkit-box-shadow: -87px 59px 86px 3px rgba(232, 9, 39, 0.4), -176px -142px 100px 3px rgba(167, 233, 73, 0.4), 100px 83px 100px 0px rgba(241, 190, 0, 0.4), 216px -100px 100px 0px rgba(49, 162, 232, 0.4);
    -moz-box-shadow: -87px 59px 86px 3px rgba(232, 9, 39, 0.4), -176px -142px 100px 3px rgba(167, 233, 73, 0.4), 100px 83px 100px 0px rgba(241, 190, 0, 0.4), 216px -100px 100px 0px rgba(49, 162, 232, 0.4);
    box-shadow: -87px 59px 86px 3px rgba(232, 9, 39, 0.4), -176px -142px 100px 3px rgba(167, 233, 73, 0.4), 100px 83px 100px 0px rgba(241, 190, 0, 0.4), 216px -100px 100px 0px rgba(49, 162, 232, 0.4);

    transform: rotate(-4deg);
}

.announcement:hover{

    -webkit-box-shadow: 163px 22px 100px 46px rgba(232, 9, 39, 0.4), 29px 189px 181px 41px rgba(167, 233, 73, 0.4), 32px -40px 89px 100px rgba(241, 190, 0, 0.4), -238px 88px 169px 36px rgba(49, 162, 232, 0.4);
    -moz-box-shadow: 163px 22px 100px 46px rgba(232, 9, 39, 0.4), 29px 189px 181px 41px rgba(167, 233, 73, 0.4), 32px -40px 89px 100px rgba(241, 190, 0, 0.4), -238px 88px 169px 36px rgba(49, 162, 232, 0.4);
    box-shadow: 163px 22px 100px 46px rgba(232, 9, 39, 0.4), 29px 189px 181px 41px rgba(167, 233, 73, 0.4), 32px -40px 89px 100px rgba(241, 190, 0, 0.4), -238px 88px 169px 36px rgba(49, 162, 232, 0.4);

    transition: 1s ease-out;
    transform: rotate(5deg);
}