Peachy Popup 01 by Pillow Themes

PUT THE FOLLOWING IN <head> OR IN YOUR META TAGS
<meta name="text:popup description" content=""/>

<meta name="text:quote" content=""/>
<meta name="text:source" content=""/>

<meta name="image:stamp" content=""/>



PUT THE FOLLOWING IN <style type="text/css">
/* POPUP BY PILLOW THEMES / CARA / PT / 2019 */
/* The text to click to show the popup */
.activator {
color:{color:text};
}

/* The background when you click on the text to show the popup */
.overlay {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,0.6); /* 0.6 is the opacity */
transition:opacity 0.5s;
visibility:hidden;
opacity:0;
transition:all 0.5s ease-out;
}

.overlay:target {
visibility:visible;
opacity:1;
transition:all 0.5s ease-out;
}

/* Popup box customizations */
.popup {
width:750px;
height:350px;
margin:150px auto 100px auto;
background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
position:relative;
transition:all 0.5s ease-in-out;
padding:20px;
}

/* Close the popup customizations */
.popup .close {
position:absolute;
top:-10px;
right:-60px;
transition:all 0.5s ease-out;
font-size:25px;
color:#fff;
text-align:center;
}

/* DO NOT TOUCH MY CREDITS */
#carapillowthemes {
width:150px;
margin-top:-80px;
margin-left:320px;
text-transform:uppercase;
color:#000;
text-align:center;
}

#carapillowthemes a {
color:#fff;
/* DO NOT TOUCH MY CREDITS */
}

#leftbox {
width:375px;
height:350px;
float:left;
background-color:#fff;
}

#est {
width:300px;
margin-top:20px;
margin-bottom:40px;
margin-left:50px;
font-family: 'Walkway';
font-size:30px;
text-decoration:underline #faaca8;
text-align:left;
}

#data {
width:250px;
height:170px;
margin:-10px auto;
padding:20px;
border:1px solid #f6f6f6;
overflow:scroll;
overflow-x:hidden;
}

#rightbox {
width:375px;
height:350px;
float:right;
background-color:#f6f6f6;
}

#stamp {
width:90px;
height:90px;
margin-top:50px;
margin-left:50px;
}

#stamp img {
width:90px;
height:90px;
border-radius:50%;
background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
padding:10px;
}

#marker {
width:100px;
height:5px;
background-color:#fff;
position:absolute;
margin-left:140px;
margin-top:-30px;
}

#marker1 {
width:100px;
height:5px;
background-color:#fff;
position:absolute;
margin-left:140px;
margin-top:-40px;
}

#quote {
width:280px;
margin-top:40px;
margin-left:50px;
}

#love {
width:280px;
margin-top:10px;
margin-left:50px;
font-family: 'Walkway';
font-size:30px;
text-decoration:underline #faaca8;
}
/* POPUP BY PILLOW THEMES / CARA / PT / 2019 */



PUT THE FOLLOWING IN <body>
<!--- PILLOW THEMES --->
<div id="?w=auto" class="overlay">
	<div class="popup">
		<a class="close" href="#">&times;</a>
        <div id="leftbox">
            <div id="est">greetings!</div>
            <div id="data">{text:popup description}</div>
        </div>

        <div id="rightbox">
            <div id="stamp"><img src="{image:stamp}"></div>
            <div id="marker"></div><div id="marker1"></div>
            <div id="quote">
“Maybe this heart of yours that longs for something more is being prepared for something so much greater than you.”
                <br>
                <br>
                - Morgan Harper Nichols
            </div>
            <div id="love">
                love, cara
            </div>
        </div>

	</div>

	<div id="carapillowthemes">
        <a href="https://pillowthemes.tumblr.com/">Popup by Pillow Themes</a>
    </div>
<!--- PILLOW THEMES --->
</div>
<!--- PILLOW THEMES --->

HOW DOES IT WORK THOUGH? LOOK AT THIS SAMPLE:
<div id="links">
	<a class="activator" href="#?w=auto">THIS IS THE LINK WITH THE POPUP. WHEN CLICKED, THE POPUP WILL APPEAR.</a>
	<a href="/">LINK 2</a>
	<a href="/">LINK 3</a>
	<a href="/">LINK 4</a>
</div>