[html]<link href="https://fonts.googleapis.com/css?family=Righteous|Sunflower:300" rel="stylesheet">
<style>
#spoofyplaylist { width: 350px; height: 480px; background-image: url(https://78.media.tumblr.com/bd7575c93c6 … o1_400.png); position: relative; margin: 20px auto; padding: 20px; line-height: 220%; }
#spoofyplaylist in { background: white; height: 480px; width: 350px; display: block; }
#spoofyplaylist name { font-family: 'Righteous', cursive; color: #8bc4a5; text-align: center; display: block; font-size: 30px; padding-top: 20px; }
#spoofyplaylist playlist { position: absolute; left: 25px; top: 80px; display: block; }
#spoofyplaylist subtitle { font-family: 'Sunflower', sans-serif; color: #a0a0a0; font-style: italic; letter-spacing: 25px; text-align: center; display: block; text-transform: uppercase; position: relative; left: 11px; }
#spoofyplaylist icon { height: 55px; width: 55px; background: white; margin: 10px; padding: 5px; display: block; position: absolute; bottom: -10px; border-radius: 100%; right: -10px; }
#spoofyplaylist icon img { height: 55px; width: 55px; border-radius: 100%; }
</style>
<div id="spoofyplaylist"><div style="position: relative">
<in>
<name>Name McName</name>
<subtitle>A Playlist</subtitle>
<playlist><iframe src="https://open.spotify.com/embed/user/hlwns0315zcmsztnxr6rnyouv/playlist/2EzIexUKwwtRqqFH4P1jvY" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe></playlist>
<icon><img src="http://placehold.it/55"></icon>
</in>
</div></div> </div><br /><div style="width: 300px; height: 1px; background-color:rgba(0,0,0,0.7); margin: auto;"></div><br />
<div class='signature'><link href="https://fonts.googleapis.com/css?family=Libre+Franklin|Inconsolata|Playfair+Display:400,400i,600,700,900|Roboto" rel="stylesheet"> <style> #wownewsig {height: 200px; width: 500px; background: #191919; position: relative; margin: auto;overflow: hidden;} .newsigname { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #444; color: transparent; position: absolute; top: 50px; font-family: playfair display; text-transform: uppercase; font-size: 150px; left: -20px; line-height: 130%;} .nsbackover { background: rgba(237, 237, 237, 0.4); height: 160px; width: 460px; position: absolute; top: 20px; left: 20px;overflow: hidden;opacity: 0;} .nsbox1 { width: 50px; height: 50px; position: absolute; border-right: 1px solid #4a7887; border-top: 1px solid #4a7887; top: 10px; right: 10px; transition: 1s; transition-delay: 0s; } #wownewsig:hover .nsbox1 { transform: rotate(180deg); right: 440px; top: 140px; transition-delay: 0s; } .nsbox2 { width: 50px; height: 50px; position: absolute; border-bottom: 1px solid #4a7887; border-left: 1px solid #4a7887; bottom: 10px; left: 10px; transition: 1s; transition-delay: 0s; } #wownewsig:hover .nsbox2 { transform: rotate(180deg); left: 440px; bottom: 140px; transition-delay: 0s; } .nsmainback { width: 450px; height: 150px; top: 25px; left: 25px; position: relative; background: rgba(74, 120, 135, 0.8); transition: 0.5s; transition-delay: 0s; opacity: 0; } #wownewsig:hover .nsmainback { opacity: 1; transition-delay: 0.5s; } .nspic { position: absolute; background-size: cover; height: 100px; width: 100px; top: 25px; left: 25px; } .nspic:after { background: #4a7887; position: absolute; content: ""; display: block; height: 100px; width: 100px; mix-blend-mode: multiply; } .nsscroll { height: 100px; width: 100px; position: absolute; font-family: arial; color: #aaa; line-height: 140%; text-align: justify; padding-right: 5px; top: 25px; left: 177px; font-size: 10px; overflow: auto; text-transform: lowercase; } .nsscroll::-webkit-scrollbar { width: 1px; } .nsscroll::-webkit-scrollbar-track { background: none!important; border: none !important; } .nsscroll::-webkit-scrollbar-thumb { background: #aaa !important; border: none !important; } .nsdetailing { font-family: inconsolata; color: #aaa; height: 20px; width: 110px; font-size: 10px; text-transform: uppercase; font-weight: 900; text-align: center; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); position: absolute; top: 66px; left: 100px; line-height: 100%; } #wownewsig a { font-family: inconsolata; letter-spacing: 4px; font-size: 11px; position: relative; text-decoration: none; display: block; line-height:330%; left: 305px; top: 20px; color: #aaa; transition: 0.2s; } #wownewsig a:hover { color: #191919; letter-spacing: 6px; } .nslyrics { color: #4a7887; font-family: inconsolata; font-size: 12px; position: absolute; text-transform: lowercase; letter-spacing: 8px; width: 50px; left: 25px; top: 20px; line-height: 134%; transition: 0.5s; } #wownewsig:hover .nslyrics { opacity: 0; transition: 0.5s; } </style> <div id="wownewsig"> <div class="newsigname">Monty</div> <div class="nslyrics">Gonna give you my heart in spite of my soul</div> <div class="nsbox1"></div> <div class="nsbox2"></div> <div class="nsbackover"></div> <div class="nsmainback"> <div class="nspic" style="background-image: url(https://i.pinimg.com/564x/10/35/10/1035 … b1f020.jpg)"></div> <div class="nsscroll"> hey, I'm monty and I like to code! I've been doing it for about a year now, though I mostly just do it as a hobby/stress reliever. Please do not message me about changes to codes on here, as I am unlike to answer those requests. If you need help at all, please direct your attention to the coding support forum! </div> <div class="nsdetailing">19, canada, student</div> <a href="http://wecode.jcink.net/index.php?showtopic=4330&hl=">001. gallery</a> <a href="http://wecode.jcink.net/index.php?showtopic=4247&hl=">002. tester</a> <a href="https://montycodes.tumblr.com/">003. tumblr</a> </div> </div>[/html]
