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

Tookewl4urbs	1783873765 pretty kewl, tweaked it a little also thx Report Comment oooh super cool!! i love it by woodlouse; 1783967567; Report
miyu⊹ ₊ ݁.	1781226444 i want t o use but my layout might be messing the code up? idk it shows up on the side instead of middle Report Comment probably, but i can't help you if you dont have it currently on your profile! by woodlouse; 1781275753; Report
Clicky910 !!	1781222623 using Report Comment
zo	1779605265 Using Report Comment
AUDR3Y	1779039055 usinnnngggg!!! Report Comment
AUDR3Y	1779039052 usinnnngggg!!! Report Comment
FAMOUS FEEF33	1777435414 USING!! Report Comment
clauxd3ad	1775661078 Usingg Report Comment
𓏲 ๋࣭ ࣪ ˖Rottr.𝜗ৎ	1775291598 using Report Comment
BONEEATERCOM	1772902615 usingg Report Comment
Lpversi	1770558457 usingg Report Comment
piercetheana	1767592031 using Report Comment
kayrara	1766924591 using ! Report Comment
FC	1766803331 usingg Report Comment
CASPER COOLAID	1766774357 using Report Comment
hanan	1761040739 using :) Report Comment
𝕮𝖍𝖆𝖗𝖑𝖎𝖊	1760916130 usingg>< Report Comment
seeka๑┈•✦	1760731318 Using! Report 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