(UPDATED SO IT'S CORRECT) Warning Screen!!! :D

2 weeks ago — by ⋆˚౨ৎ ⋆. ꜍奏꜉꜍好꜉꜍き꜉ ˚༘⋆✿ — Backgrounds & Overlays — used 8 times

I think this would count as an overlay but please correct me if I'm wrong! CREDITS TO TAE/PUP/OBSESSIVE ON SPACEHEY!

Basically it's like a warning screen but you can make it to whatever you want!
!!YOU MUST PUT THIS CODE FIRST IN YOUR LAYOUTS SECTION!!

When it says to "REPLACE!!" you can either leave it empty or replace it with an image/gif of your choice. You can change the colors by using hex code (example #000000 is black and #FFFFFF is white!) You can also change the "See my profile?," "Yes," and "No" to whatever text you want it to say.

DO NOT BE LIKE ME. Don't change the "#profile" to your profile link!!! It won't work that way! Just leave it be. That is unless you know how to code and stuff.

Example of warning screen is on my profile and the picture I submitted, which I hope works :D

Lemme know if ya got any questions :)
I hope the code works...

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save.

<div id="profile">

<ul>

<center>
<h1> wait.</h1>


<img src="REPLACE!!" style="float:right;width:30%;"/>
<img src="REPLACE!!" style="float:left;width:30%;"/>



<p>info info info info info<br/>

<br/>info info info info info<br/>
<br/> info info info info info
<br/>info info info info info





<br/>info info info info info
<br/>info info info info info
<br/> info info info info info<br/>
<br/>info info info info info
<br/>info info info info info
info info info info info<br/><br/>
info info info info info

<br/><br/><br/>See my profile?<br/>




<a href="#profile"> Yes</a>
<br/><a href="https://friendrewind.com/home.php">No</a>
<br/><br/><br/>

</p><center><img src="REPLACE!!"/>
<br/>

<a href="https://spacehey.com/obsessive">creds to tae!</a>





</center></center></ul></div>


<style> 

:root {
  --warning-background-image: white;
  --warning-text-color: black;
}

#profile {
 position: fixed;
 background-image: url('REPLACE!!');
 background-color: #000000;
 z-index: 100;
 top: 0; 
 left: 0;
 width: 100vw;
 height: 100vh;
 padding: 50px 100px;
 font-size: 150%;
 overflow-y: scroll;
 opacity: 1;
 transition: .2s;
}

#profile > * {
 width: 100%;
 max-width: 700px!important;
 margin: 20px auto;
 display: block;
}

#profile:target {
 opacity: 0;
 visibility: hidden;
}

#profile > ul {
 padding: 10px 50px;
 border: 5px double #ffc4d0;
 border-radius: 20px;
 background-color: white;
}
</style>

How to use: copy the code above → open your layout editor → paste it at the bottom of the Advanced CSS tab → save → refresh your profile. Elements stack — you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Backgrounds & Overlays

« Back to Backgrounds & Overlays | « All Profile Elements