"ur a basic bitch" - mini pop up

Tags: pop up, popup, old web, loading screen, snippet

Description:

mini pop up w working buttons (they j take u to the profile tho) feel free to edit this however u want, change the bg image, change the link adresses/text!! bg img cred: https://www.pinterest.co.uk/pin/939422803507188814/

i know

cry

idc

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by woodlouse (https://layouts.spacehey.com/layout?id=88333) -->

<div id="profile">
<ul>
<a href="#profile" id="thex">×</a>
<a href="#profile" id="iknow">i know</a>
<a href="#profile" id="cry">cry</a>
<a href="#profile" id="idc">idc</a>
</ul></div>

<style> 
a {
    text-align:center;
}
#profile {
    position: fixed;
    background-color: transparent;
    z-index: 100;
    top: 0; 
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: 50px 100px;
    font-size: 150%;
    overflow-y: scroll;
    opacity: 1;
    transition: 0.1s;
}

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

#profile:target {
    opacity: 0;
    visibility: hidden;
}
#profile > ul {
    position: absolute;
    padding: 0px 0px;
    background-color: white;
    background-image: url("https://i.pinimg.com/564x/10/bf/ef/10bfef3a733a04b0263ca3e0173012c3.jpg");
    height: 120px;
    width: 300px;
    background-size: contain;
    top: 210px;
    left: calc(50% - 150px);
    background-size: 360px;
    background-position: center center;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}
a#thex {
    right: 3px;
    position: absolute;
    top: 4px;
    background-color: #eb4822;
    height: 24px;
    line-height: 17px;
    padding-top: 0px;
    width: 24px;
    font-size: 28px;
    color: white;
    border: 0.5px outset #4e4e4d;
    box-shadow: -0.5px -0.5px 1px inset #000000;
    border-radius: 5px;
    font-family: verdana;
    text-decoration: none!important;
}

a#thex:hover {
    border: 1px black inset;
    text-decoration: none;
    box-shadow: 0.5px 0.5px 1px inset #000000;
    font-style: normal;
}
a#iknow {
    height: 24px;
    display: block;
    bottom: 16px;
    position: absolute;
    left: 28px;
    font-size: 11px;
    font-family: ms ui gothic;
    color: black!important;
    border: black inset 1px;
    background-color: #ece9d8;
    width: 76px;
    line-height: 13px;
    padding: 5px;
    border-radius: 0;
    box-shadow: -0.5px -0.5px 3px inset black;
    font-style: normal;
    text-decoration: none!important;
    font-family: ms ui gothic;
}
a#cry {
height: 24px;
    display: block;
    bottom: 16px;
    position: absolute;
    left: 125px;
    font-size: 11px;
    font-family: ms ui gothic;
    color: black!important;
    border: black inset 1px;
    background-color: #ece9d8;
    width: 60px;
    line-height: 13px;
    padding: 5px;
    border-radius: 0;
    box-shadow: -0.5px -0.5px 3px inset black;
    font-style: normal;
    text-decoration: none!important;
}
a#idc {
    height: 24px;
    display: block;
    bottom: 16px;
    position: absolute;
    right: 33px;
    font-size: 11px;
    font-family: ms ui gothic;
    color: black!important;
    border: black inset 1px;
    background-color: #ece9d8;
    width: 62px;
    line-height: 13px;
    padding: 5px;
    border-radius: 0;
    box-shadow: -0.5px -0.5px 3px inset black;
    font-style: normal;
    text-decoration: none!important;
}
a#iknow:hover {
    text-decoration: none;
    box-shadow: 0.5px 0.5px 3px inset black;
}
a#cry:hover {
    text-decoration: none;
    box-shadow: 0.5px 0.5px 3px inset black;
}
a#idc:hover {
    text-decoration: none;
    box-shadow: 0.5px 0.5px 3px inset black;
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 35 comments ( View all | Add Comment )

yhan !!	1739530363 using Report Comment
Gabzz	1739282449 usingggg Report Comment
old-Net	1738888491 using Report Comment
Bobo/T(NOT MOBILE FRIENDLY.)	1738143507 Using Report Comment
𓎟𓎟　 ry　 𝜗𝜚	1737369961 using for a miku popup Report Comment
mastershit	1736751941 Using Report Comment
benz0ylHeart	1736638810 Changed it a little bit but usingggg >0< Report Comment
nerd	1736359444 using! Report Comment
michaelcera27	1735786353 using Report Comment
leo	1734898800 using but i'l prolly change it somehow Report Comment Your profile is so cool! how did you get the background image to work? by FishOnABicycle; 1735347985; Report my entire profile is built from a layout made by !!𖤐Sleepy_Gh0st𖤐!!. i just crtl+f "background", found which link was for each part of the layout and replaced the link with the link of a gif of my choice! eventually i edited it so much it stopped resembling the original layout lol. by leo; 1735348932; Report thankyou so much! yeah i was editing it for ages and it just ended up being a garbled mess, i've never really used this coding language before so its a bit difficult. thx for the reply! by FishOnABicycle; 1735349701; Report HOW/WHAT did you use for your "im high rn" popup??!! by Kelton Smith; 1735543634; Report i had to use this layout-> https://layouts.spacehey.com/layout?id=88333 and then change the background image in ibis paint x to "im high rn" and then go in the code and change the buttons into 'me too' and 'cool'. took a while but it wasn't very hard by leo; 1735592372; Report Ohh thanks man! if you dont mind like.... i may perchance copy off of you with the high thing thats me lol, ur awesome tho love your profile by Kelton Smith; 1735676016; Report woahhhhhhhhh can I have the code to the I'm high rn popup plz I'll credit you fr:3 by ꒰🦴꒱﹒ mac ﹒⟢; 1736062075; Report yo i totally would give it to you but i cant send it in a message cus it's too long and i cant publish a layout :(( by leo; 1736126664; Report aw dang its wtv, cant you js publish a blog thoooooo? by ꒰🦴꒱﹒ mac ﹒⟢; 1736137549; Report omg i didn't even think of that thank you bru i'll send you the link in a minute by leo; 1736166818; Report
Denzieexx	1734675253 usingg Report Comment
jordi	1734175119 Using!! I changed the bg image to a different message and it works perfectly! Report Comment yayayay it looks super cool!!!! by woodlouse; 1734181004; Report how do you change the message by 333half-evil (prof wip); 1735494610; Report
BunBun	1733567945 using ^^ Report Comment
florsita la flor feliz	1732562449 using :D Report Comment
moni	1732044243 usingggg Report Comment
🎧🎼Tori-Joon🎼🎧	1731115373 uSING!!!! Report Comment
Membranöse_Flügel⌆	1731062988 usiiing!! Report Comment
★﹒NEPTUNO ⸝⸝ BYTE ﹒⺌﹒	1730654696 using! Report Comment
abiiiiixx	1730303929 Usinggg Report Comment
Feral Lili	1729879219 using xD Report Comment