"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 46 comments ( View all | Add Comment )

froggy	1758942030 using but the text looks weird Report Comment oh no, is there a chance your other css was targetting the text?? i assume u mean the text on the buttons and not the background text because thats an image by woodlouse .𖥔 ݁ ˖✶⋆.˚; 1758958943; Report
urf4vc@nn1bal^_0	1758718605 using Report Comment
deadstarcry	1757241178 usingggg Report Comment
Pine !!	1755680880 DEFINITELY using <3 Report Comment
𝜗𝜚 ࣪Princess Saki˖ ִ𐙚	1754107421 usigg Report Comment
🦇𝓯𝓻𝓮𝓪𝓴𝔂 XØEle击	1752831939 using prob Report Comment
S9!D6R	1751095545 using Report Comment
×𝐗𝐀𝐍×	1750802403 USING!!! Report Comment
⋆༺𓆩ᐺᗩᘜᑘᘿ𓆪༻⋆🪽🪽	1748410208 USGINGGGGGGGGGGGG ill change it tho Report Comment THATS SO COOLLLL i love what uve done w it omg!!! by woodlouse .𖥔 ݁ ˖✶⋆.˚; 1748596315; Report
Nvyx	1744761102 USANDOO Report Comment
gummyLungz ★★	1744474080 using!! Report Comment
MARYORI!!	1743807108 Usando! Report Comment
Sleepy.VirusZzz...	1740336014 using ! Report Comment
yhan !!	1739530363 using Report Comment
ggabss	1739282449 usingggg Report Comment
Edward_Elric	1738888491 using Report Comment
T	1738143507 Using Report Comment
DUDE/CAMO	1737369961 using for a miku popup Report Comment
×♡benz0ylHeart♡×	1736638810 Changed it a little bit but usingggg >0< Report Comment