HTML, CSS and JavaScript playground

<div id="link"><br />
 <a class="links" href="{%20URL%20FOR%20LINK1%20}"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389963855?profile=RESIZE_710x" width="12" height="12" /></a><a class="links" href="{%20URL%20FOR%20LINK2%20}"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389964087?profile=RESIZE_710x" width="12" height="12" /></a><a class="links" href="{%20URL%20FOR%20LINK3%20}"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389964665?profile=RESIZE_710x" width="11" height="11" /></a><a class="links" href="{%20URL%20FOR%20LINK4%20}"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389964695?profile=RESIZE_710x" width="11" height="11" /></a><a class="links" href="{%20URL%20FOR%20LINK5%20}"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389965265?profile=RESIZE_710x" width="13" height="13" /></a><a class="links" href="{%20URL%20FOR%20LINK6%20}"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389965657?profile=RESIZE_710x" width="16" height="16" /></a></div>
<div id="links"><a rel="nofollow" href="/"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389974066?profile=RESIZE_710x" width="12" height="12" /></a><a rel="nofollow" href="/"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389974668?profile=RESIZE_710x" width="12" height="12" /></a><a rel="nofollow" href="/"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389975253?profile=RESIZE_710x" width="12" height="12" /></a><a rel="nofollow" href="/"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389975452?profile=RESIZE_710x" width="11" height="11" /></a></div>
<div class="navlinks">navigation<br />
 <br />
 <a rel="nofollow" href="https://cityofmisfits.ning.com"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389994252?profile=RESIZE_710x" width="10" height="10" /></a><br />
<a rel="nofollow" href="https://cityofmisfits.ning.com/profiles/comment/list?attachedToType=User&amp;attachedTo=019431c9bdcc76479c409dd0760a785f"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389995260?profile=RESIZE_710x" width="10" height="10" /></a><br />
<a rel="nofollow" href="https://cityofmisfits.ning.com/profiles"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389996277?profile=RESIZE_710x" width="10" height="10" /></a><br />
<a rel="nofollow" href="https://cityofmisfits.ning.com/profile/galinda"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13389996664?profile=RESIZE_710x" width="10" height="10" /></a></div>
<div class="marquee">
<div class="marquee__inner"><br />
 <span>eternal sunshine - ariana grande</span><br />
 <span>eternal sunshine - ariana grande</span><br />
<span>eternal sunshine - ariana grande</span><br />
<span>eternal sunshine - ariana grande</span></div>
</div>
<p></p>
<div id="sidebar1">
<div class="box"><a rel="nofollow" class="button" href="#popup1" title="click me"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13390589690?profile=RESIZE_710x" width="32" height="32" /></a></div>
<p></p>
<div id="popup1" class="overlay">
<div class="popup"><a rel="nofollow" href="#close" class="close"><font color="white">×</font></a>
<p></p>
<p></p>
<p></p>
<h2>lipstick stained sheets,</h2>
<p></p>
<p></p>
<div class="content"></div>
</div>
<div id="main">
<div id="header1">info</div>
<div id="about">gianna roxanne ciachetti. xxv. italian. crybaby pisces. truly madly deeply love maddi, arri, amby &amp; nic so so much til the end of time. forever living with fears of abandonment while actively running away from you. ariana grande is my angel. galinda upland is my spirit animal. toss tossing my way through life.</div>
<div id="sideimage">
<div id="image"><img src="https://storage.ning.com/topology/rest/1.0/file/get/13390589055?profile=RESIZE_710x" width="268" height="350" /></div>
</div>
</div>
</div>
</div>

body {
background: #ccc;
background-size: 24px 24px;
background-image: linear-gradient(to right, #ddd 1px, transparent 1px), linear-gradient(to bottom, #ddd 1px, transparent 1px);
}
 
body, html {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), progress !important;}
 
a, a:hover {cursor:url(http://static.tumblr.com/vmteopo/DH3njhg50/help_cursor.png), crosshair; }
 
#xg_body {
left: auto;
position: fixed!important;
margin-top: -90px;
}
 
div#xg_ad_below_header, div#xg_ad_below_footer {
display: none!important;
}
 
div#xg_navigation {
visibility: hidden;
position: fixed;
}
 
div.xg_theme #xg_navigation ul li a, .xg_theme #xg_navigation ul {
display: none;
}
 
div#xg_masthead {
position: relative;
}
 
div#xn_bar {
display: none;
}
 
.xg_theme #xg:before{
content:"";
position: fixed;
margin-top: 32px;
margin-left: 180px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
width: 702px;
height: 470px;
background: #ddd;
border-radius: 6px;
border: 1px solid #c5c5c5;
-webkit-box-shadow: 2px 2px 15px -2px #e8e6e7;
box-shadow: 2px 2px 15px -2px #e8e6e7;
}
 
.xg_theme #xg:after{
content:"";
position: fixed;
margin-top: 35px;
margin-left: 181px;
width: 700px;
height: 45px;
border-radius: 6px 6px 0px 0px;
background: #eee;
border-bottom: #ddd;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
}
 
#xg_body:before {
content:"cityofmisfits.ning.com/profile/galinda"; 
position: absolute;
top: 132px;
left: 277px;
font: 9px 'montserrat';
color: #808080;
width: 460px;
height: 32px;
background: #ddd;
padding: 10px 0px 0px 28px;
box-sizing: border-box;
border-radius: 45px;
}
 
div#xg_layout_column_1 {
position: relative;
z-index: 1;
top: 100px;
left: 100px;
width: 900px;
height: auto;
overflow: hidden;
background: #;
}
 
div#xg_layout_column_1:before { 
visibility: visible!important;
z-index: 0;
content:"i showed you all my demons"; 
position: absolute;
top: 130px;
left: 160px;
width: 200px;
height: 240px;
border-radius: 6px;
border: solid #ccc 1px;
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 40px 40px;
background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
background-color: #ddd;
-webkit-box-shadow: 2px 2px 15px -2px #e8e6e7;
box-shadow: 2px 2px 15px -2px #e8e6e7;
padding: 160px 0px 0px 0px;
box-sizing: border-box;
font-family: shutter stone standard;
color: #aaa;
text-shadow: 0px 1px 10px #fff;
font-size: 70px;
text-align: center;
line-height: 30px;
overflow: hidden;
}
 
@font-face { font-family:'Shutter Stone Standard'; src:url('https://dl.dropbox.com/s/sc6zmxzyo5q5eb0/Shutter%20Stone%20Standar.ttf?dl=0') }
 
div#xg_layout_column_1:after {
content:"it's giving “oh no! my bestie is a bad bitch!”";
position: absolute;
top: 100px;
left: 0px;
background: url(https://storage.ning.com/topology/rest/1.0/file/get/13390056891?profile=RESIZE_710x) 0px -20px no-repeat; 
background-size: cover;
width: 255px;
height: 170px;
overflow: hidden;
border-radius: 4px;
outline: 1px solid #e8e6e7;
border-top: #e8e6e7 solid 30px;
-webkit-box-shadow: 2px 2px 15px -2px #e8e6e7;
box-shadow: 2px 2px 15px -2px #e8e6e7;
color: #fff;
font-family: montserrat;
text-align: center;
font-size: 8.6px;
line-height: 314px;
}
 
div.module_user_summary:before {
z-index: -100!important;
visibility: visible!important;
content:"";
position: absolute;
top: 50px;
left: 130px;
width: 240px;
height: 350px; 
background: url(https://storage.ning.com/topology/rest/1.0/file/get/13390040456?profile=RESIZE_710x) 0px 0px no-repeat; 
background-size: cover;
}
 
div.module_user_summary:after {
z-index: -100!important;
visibility: visible;
content:"Won't break, can't shake This fate, rewrite Deep breaths, tight chest Life, death, rewind Won't break, can't shake This fate, rewrite Deep breaths, tight chest Life, death, rewind.Won't break, can't shake This fate, rewrite Deep breaths, tight chest Life, death, rewind";
position: absolute;
top: 100px;
left: 420px;
background: url(https://storage.ning.com/topology/rest/1.0/file/get/13390033489?profile=RESIZE_710x) 0px -40px no-repeat; 
background-size: cover;
width: 285px;
height: 170px;
overflow: hidden;
border-radius: 4px;
outline: 1px solid #e8e6e7;
border-top: #eee solid 30px;
text-shadow: 3px 3px 0px #;
-webkit-text-stroke: 0.5px #fff;
-webkit-text-fill-color: rgba(0, 0, 0, 0);
font-family: poppins;
font-size: 18px;
text-transform: lowercase;
text-align: justify;
-webkit-box-shadow: 2px 2px 15px -2px #e8e6e7;
box-shadow: 2px 2px 15px -2px #e8e6e7;
}
 
div.xg_span-16:before {
visibility: visible!important;
content:"all my lies.";
position: absolute; 
top: 216px; 
left: 182px; 
background-image: linear-gradient(100deg, #7f8d47, #606d2d, #363123);
width: 300px;
height: 360px;
border-radius: 0px 10px 10px 0px;
padding: 260px 0px 0px 0px;
box-sizing: border-box;
font-family: poppins;
font-size: 80px;
letter-spacing: -2px;
word-spacing: -1px;
line-height: 50px;
text-align: right;
color: #eee;
overflow: hidden;
}
 
div.module_user_thumbnail:before {
visibility: visible;
content:""; 
position: absolute; 
z-index: 1; 
top: 96px; 
left: 500px; 
width: 200px; 
height: 205px;  
background: url(https://storage.ning.com/topology/rest/1.0/file/get/13390058469?profile=RESIZE_710x) 0px 0px no-repeat; 
background-size: cover;
}
 
div.xg_3col:before { 
content:"1:54"; 
position: absolute;
margin-top: 430px; 
margin-left: 620px;
width: 303px;
height: 115px;
border-radius: 4px;
border-top: solid 30px #fff;
outline: solid 1px #d4d4d4;
-webkit-box-shadow: 2px 2px 15px -2px #e8e6e7;
box-shadow: 2px 2px 15px -2px #e8e6e7;
background-color: rgba(17,17,17,.10);
backdrop-filter: blur(5px);
padding: 51px 0px 0px 200px;
box-sizing: border-box;
font-family: montserrat;
font-size: 9px;
color: #333;
}
 
#xg_body:after {
z-index: 1;
visibility: visible;
position: absolute; 
content: "";  
width: 12px; 
height: 12px; 
left: 632px; 
top: 511px; 
background: url(https://storage.ning.com/topology/rest/1.0/file/get/13390079883?profile=RESIZE_710x) 0px 0px no-repeat; 
background-size: cover;
}
 
#xg_layout_column_2:before {
content:"";
position:absolute;
top: 445px;
margin-left: 575px;
width: 100px;
height: 4px;
background: #fff;
outline: solid 1px #aaa;
border-left: solid 40px #ccc;
}
 
#xg_layout_column_2:after {
content:"";
position:absolute;
top: 440px;
margin-left: 548px;
width: 15px;
height: 15px;
background: url(https://storage.ning.com/topology/rest/1.0/file/get/13393779870?profile=RESIZE_710x) 0px 0px no-repeat; 
background-size: cover;
}
 
div.module_user_thumbnail:after {
visibility: visible;
content:""; 
position: absolute; 
top: 396px; 
left: 765px; 
width: 40px; 
height: 40px;  
border-radius: 4px;
border: solid 1px #e8e6e7;
background: url(https://i.pinimg.com/736x/db/9f/8e/db9f8e2e356da77dbc9971aab28265fe.jpg) 0px 0px no-repeat; 
background-size: cover;
}
 
.dy-avatar.dy-avatar-full-width:after {
z-index: 100!important;
visibility: visible;
content:""; 
position: absolute; 
top: 401px; 
left: 403px; 
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
background: url(https://storage.ning.com/topology/rest/1.0/file/get/13390092290?profile=RESIZE_710x) -20px -100px no-repeat; 
background-size: 180%;
filter: brightness(90%);
width: 80px;
height: 80px;
border-radius: 4px;
outline: 1px solid #e8e6e7;
}
 
.dy-avatar.dy-avatar-full-width:before {
visibility: visible;
z-index: 0;
content:""; 
position: absolute;
top: 312px;
left: 400px;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
background: url(https://storage.ning.com/topology/rest/1.0/file/get/13390092856?profile=RESIZE_710x) -110px -120px no-repeat; 
background-size: 350%;
width: 80px;
height: 80px;
border-radius: 4px;
outline: 1px solid #e8e6e7;
border-top: #fbfbfb solid 8px;
border-left: #fbfbfb solid 8px;
border-right: solid #fbfbfb 8px;
border-bottom: solid #fbfbfb 110px;
-webkit-box-shadow: 2px 2px 15px -2px #e8e6e7;
box-shadow: 2px 2px 15px -2px #e8e6e7;
}
 
div#xg_layout_column_2 {
position: absolute;
z-index: 100!important;
width: 900px;
height: 40px;
top: 70px;
font-size: 11px;
left: 9%;
background: #trans;
font-family:'montserrat';
color: #808080;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
 
div.module_user_summary {
visibility: hidden;
}  
 
.dy-avatar.dy-avatar-full-width {
z-index: -1!important;
width: 900px;
margin-left: 0px;
margin-top: 0px;
height: 30px;
background: #trans;
}
 
img#xj_photo_img_tag {
visibility: hidden;
}
 
div.xg_span-16 {
visibility: visible;
z-index: -1!important;
}
 
div.xg_3col {
  visibility: visible;
}
 
.xg_floating_container.xg_lightborder {
background-color: #eee;
}
 
input.button.action-primary {
background-color: #eee;
}
 
p.buttongroup {
background-color: #eee;
padding: 5px;
}
 
a.xj_cancel.action-secondary {
color: #7f8d47;
}
 
.online {
display: none;
}
 
.xg_module_body.profile.vcard {
display: none;
}
 
.account-links {
display: none;
}
 
#xg_foot {
display: none;
}
 
p.left {
display: none;
}
 
p.right.xg_lightfont {
display: none;
}
 
#xg_sitedesc {
display: none;
}
 
#xg_sitename {
display: none;
}
 
img.poweredbyLogo {
display: none;
}
 
.xg_module_head {
display: auto;
border-bottom: 0px solid #fff!important;
}
 
#xg_profile_activity{
display:none;
}
 
.xg_sprite {
background: transparent;
}
 
a.send-message-link {
display: none;
}
 
dd.profile-like-button {
display: none;
}
 
dd.profile-social-buttons {
display: none;
}
 
.module_blog {
display: none!important;
}
 
a.xj_block_messages {
display: none;
}
 
h1, h2, h3, #xj_approvalBox, .module_groups, .xg_sprite.xg_sprite-add, .xg_module_comment_wall, .xg_chatBar, .xg_span-5, .module_feed, .module_about_user, .module_members, #xj_module_gift {
display: none;
}
 
ul.nobullets.last-child {
display: none;
}
 
span.fn {
display: none;
}
 
span.fn:before {
content:"";
}
 
a.xj_appearance_editor_profile {
display: none;
}
 
.xg_module.topmsg.birthday_msg {
display: none!important;
}
 
#xg_body a {
color: auto!important;
background-color: transparent;
font-style: normal;
-webkit-transition: 1s;
}
 
p {
color: auto!important;
font-size: 11px;
font-family: 'montserrat';  
}
 
::selection {
background: #eee;
color: #606d2d;
}
 
::-webkit-scrollbar {
width: 10px;
height: 0px;
background: transparent;
}
 
::-webkit-scrollbar-thumb {
background-color: #606d2d;
border-radius: 6px;
}
 
::-webkit-scrollbar-corner {
background: transparent;
}
 
#links {
z-index: 1!important;
position: fixed;
margin-top: 45px;
margin-left: 90px;
width: 300px;
height: 30px!important;
background: #trans;
}
 
#links a {
color: #!important;
margin-left: 0px;
}
 
#link {
display: inline-block;
position: fixed;
width: 450px;
opacity: 1;
margin-top: 28px;
margin-left: 566px;
}
 
#link  a.links {
display: inline-block;
width: 35px;
}
 
.navlinks { 
position: fixed;
width: 180px;
height: 175px;
margin-left: -45px;
font-size: 10px;
color: #!important;
background-color: rgb(254,254,254,0.6);
backdrop-filter: blur(4px);
-webkit-box-shadow: 2px 2px 15px -2px #e8e6e7;
box-shadow: 2px 2px 15px -2px #e8e6e7;
text-align: left;
margin-top: 330px; 
-webkit-transition: 1.5s all ease-in-out;
padding: 10px 0px 0px 10px;
box-sizing: border-box;
border-radius: 4px;
outline: solid #ccc 1px;
font-family: poppins;
font-size: 13px;
color: #7f8d47;
border-top: solid 25px #fff;
}
 
.navlinks a { 
display: inline-block;
width: 150px;
font-size: 0px;
letter-spacing: 0px;
margin-top: 0px;
border-bottom: #ccc solid 1px;
padding: 0px 0px 0px 0px;
box-sizing: border-box;
text-transform: uppercase; 
color: #!important;
background-color: #!important;
}
 
@font-face { font-family: 'Poppins';  src: url(https://fonts.gstatic.com/s/poppins/v9/pxiByp8kv8JHgFVrLBT5Z1xlFQ.woff2);}
@font-face { font-family: karla; src: url(https://fonts.gstatic.com/s/karla/v8/qkBbXvYC6trAT7RVLtyU5rZP.woff2) ;}
 
@font-face { font-family: 'Montserrat'; src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2'); }
 
.marquee{
margin-top: 375px;
margin-left: 520px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
overflow: hidden;
--offset: 10vw;
--item-font-size: 10vw;
--move-initial: calc(-25% + var(--offset));
--move-final: calc(-50% + var(--offset));
height: 30px;
width: 300px;
}
 
.marquee__inner{
width: fit-content;
display: flex;
position: relative;
transform: translate3d(var(--move-initial),0,0);
animation: marquee 5s linear infinite;
// animation-play-state: paused;
}
 
.marquee span{
white-space: nowrap;
font-size: 0.7vw;
padding: 0 1vw;
color: #808080;
line-height: 30px;
font-family: montserrat;
}
 
.marquee:hover .marquee__inner{
// animation-play-state: running;
// opacity: 1;
// transition-duration: 0.4s;
}
 
@keyframes marquee {
0% {
transform: translate3d(var(--move-initial), 0, 0);
}
 
100% {
transform: translate3d(var(--move-final), 0, 0);
}}
 
.box {
z-index:100000;
margin: 0 auto;
background-clip: padding-box;
margin-top: -30px;
margin-left: 350px;
}
 
.button {
margin-top: 20x;
z-index:100000;
font-size: 1em;
padding: 10px;
color: #;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: transparent;
}
 
.overlay {
z-index:100000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgb(127,141,71,0.5);
backdrop-filter: blur(6px);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
 
.popup {
overflow: auto;
top: 0px;
z-index:100000;
margin: 50px auto;
color: #fff;
width: 800px;
text-align: justify;
height: 700px;
position: relative;
transition: all 5s ease-in-out;
font-family: poppins;
font-size: 10px;
}
 
.popup img{}
 
.popup h2 {
margin-top: 0;
font-size: 30px;
color: #fff;
font-family: poppins;
}
.popup .close {
z-index:100000;
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
color: #ddd;
}
 
#sideimage img {}
#image img {margin: 0px; width: 268px;}
#sideimage {width: 268px; height: 350px; margin-left: 0px; margin-top: 0px;  filter: contrast(120%)brightness(90%);}
#image {width: 268px; height: 350px; outline: solid 1px #ddd; border-top: solid 35px #fff; border-bottom: solid 25px #fff; border-radius: 6px;}
 
#main {position: fixed; top: 150px; left: 490px; }
 
#header1 {font-family: shutter stone standard; color: #7f8d47;
font-size: 80px; height: 14px; position: fixed; margin-top: 260px; margin-left: 80px; width: 90px; z-index: 100;}
 
#about {position: fixed; margin-top: 290px; margin-left: 45px; width: 240px; font-family: montserrat; text-align: justify; font-size: 9px; color: #808080; line-height: 16px; height: 120px; z-index: 1; background: #eee; outline: solid #ccc 1px; border-top: solid 30px #fff; padding: 15px 30px 0px 30px; box-sizing-border-box; border-radius: 4px;}