не могу поиграть, так хоть распишу
Arthur "Art" Waise, 23
пробник. диз. заготовки. |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » пробник. диз. заготовки. » всякий разный » шастунчик
не могу поиграть, так хоть распишу
Arthur "Art" Waise, 23
<!--HTML--> <style> .trial {background-image: url(225X280 IMG, OTHER SIZES WILL RESIZE - RECOMMEND PORTRAIT IMAGES); } .fleek {background-image: url(90X90IMG OR GIF, WILL RESIZE;} </style> <link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,800,700,900' rel='stylesheet' type='text/css'> <div id="pacify"> <div class="trial"> </div> <div class="indigo"> <div class="fleek"></div> <div class="royal" style="top: 160px">OCCUPATION</div> <div class="royal" style="top: 190px">AGE</div> <div class="royal" style="top: 220px">MEMBERGROUP</div> </div> <div class="strong">WORDS HERE</div> <a href="http://shine.b1.jcink.com/index.php?showuser=6723"><div class="elephant">FIRST LAST</div></a> </div> <style> #pacify {height: 330px; width: 450px; border: 10px solid #fcfcfc; margin: 10px auto; position: relative; overflow: hidden} .elephant {height: 50px; font-family: raleway; width: 450px; background: #A0DC51; position: absolute; bottom: 0; line-height: 50px; text-align: center; color: #fff; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; font-size: 25px} .trial {height: 280px; width: 225px; position: absolute; top: 0; background-size: 280px auto; background-repeat: no-repeat;} #pacify .trial {-webkit-filter: grayscale(0%); -webkit-transition: 0.8s; -moz-filter: grayscale(0%); -moz-transition: 0.8s; filter: grayscale(0%); transition: 0.8s} #pacify:hover .trial {-webkit-filter: grayscale(100%); -webkit-transition: 0.8s; -moz-filter: grayscale(100%); -moz-transition: 0.8s; filter: grayscale(100%); transition: 0.8s} .strong {height: 260px; width: 205px; position: absolute; right: 0; border-color: #fff; border-style: solid; border-width: 10px 5px 10px 10px; padding-right: 5px; font-family: calibri; font-size: 11px; text-align: justify; line-height: 12px; overflow: auto; background: #fff} .strong p:first-letter {color: #fff; font-family: raleway; font-weight: 800; font-size: 25px; float: left; padding: 10px 8px; background: #A0DC51; margin: 0px 4px 0px 0px} .strong p:nth-child(even):first-letter {background: #DC519B} .strong::-webkit-scrollbar {width: 5px} .strong::-webkit-scrollbar-thumb {background-color: #fff; border-left: 1px solid #A0DC51; border-right: 1px solid #A0DC51;border-top: 1px solid #DC519B; border-bottom: 1px solid #DC519B} .indigo {height: 100%; width: 100%; position: absolute} #pacify .indigo {top: -280px; -webkit-transition: 0.5s ease-in-out 0.1s; -moz-transition: 0.5s ease-in-out 0.1s; transition: 0.5s ease-in-out 0.1s;} #pacify:hover .indigo {top: 0px; -webkit-transition: 0.5s ease-in-out 0.1s; -moz-transition: 0.5s ease-in-out 0.1s; transition: 0.5s ease-in-out 0.1s} .fleek {height: 90px; width: 90px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 8px solid #fff; position: absolute; top: 45px; left: 59.5px; background-size: 90px 90px} .royal {height: 25px; width: 120px; font-family: raleway; text-transform: uppercase; text-align: center; color: white; font-size: 10px; line-height: 25px; font-weight: 700; letter-spacing: 1px; left: 52.5px; position: absolute} .royal:nth-child(even) {background: #A0DC51} .royal:nth-child(odd) {background: #DC519B} </style>
[/dohtml]
<!--HTML--> <link href='http://fonts.googleapis.com/css?family=Raleway:400,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://static.tumblr.com/gezmuyb/bRDnptdr9/steverogers.css"><link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900' rel='stylesheet' type='text/css'> <style type="text/css"> .cookie-two { cursor: url(http://www.themesltd.com/cursors/random/tiny_cursor.png), auto; width: 740px; padding: 15px; background-color: #fafafa; border: 4px solid #fff; outline: 1px solid #ccc; } .cookie-one { width: 612px; height: 304px; padding: 18px; background-image: url(http://subtlepatterns.com/patterns/crossword.png); border: 5px solid #fff; outline: 1px solid #f7f7f7; } .cookie-ten { position: relative; width: 540px; height: 290px; clear: both; overflow: hidden; } .cookie-eleven { display: block; } .cookie-eleven label { cursor: url(http://media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png), auto; display: block; width: 50px; height: 50px; padding: 5px; border-radius: 100%; background-color: #fff; border: 1px solid #f7f7f7; position: relative; left: 190px; background-color: #fff; margin-bottom: 10px; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; } .cookie-eleven label img { opacity: 0; position: relative; top: -20px; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; } .cookie-eleven [type=radio] { display: none; baseline-tab-shift: true, retrieve; } .cookie-twelve { position: absolute; bottom: 0px; right: 0px; top: 0px; background: white; padding: 9px; width: 400px; left: -420px; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; border: 1px solid #f7f7f7f7; } .cookie-ten .cookie-eleven [type=radio]:checked ~ label { background: white; opacity: 1; z-index: 2; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; } .cookie-ten .cookie-eleven [type=radio]:checked ~ label img { opacity: 1; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; } .cookie-ten .cookie-eleven [type=radio]:checked ~ label ~ .cookie-twelve { z-index: 1; left: 0px; } .cookie-three { border-radius: 100%; width: 50px; height: 50px; background-color: #000; } .cookie-blue { width: 50px; height: 50px; background-color: #B5D8EB; border-radius: 100%; } .cookie-orange { width: 50px; height: 50px; background-color: #FFC8BA; border-radius: 100%; } .cookie-green { width: 50px; height: 50px; background-color: #93DFB8; border-radius: 100%; } .cookie-pink { width: 50px; height: 50px; background-color: #FFBDD8; border-radius: 100%; } .cookie-purple { width: 50px; height: 50px; background-color: #E3AAD6; border-radius: 100%; } .cookie-four { font-family: arial; font-size: 18px; text-align: justify; line-height: 100%; color: #fff; font-weight: bold; position: relative; top: 15px; } .cookie-five { width: 150px; height: 250px; padding: 9px; border: 1px solid #f7f7f7; background-image: url(http://subtlepatterns.com/patterns/crossword.png); } .cookie-six { width: 210px; padding-right: 5px; font-family: source sans pro; font-size: 11px; text-align: justify; line-height: 95%; color: #777; height: 409px; overflow: auto; margin-right: 10px; } .cookie-six::-webkit-scrollbar { width: 10px; } .cookie-six::-webkit-scrollbar-track { background-color: #fff; } .cookie-six::-webkit-scrollbar-thumb { background-color: #fff; border: 1px solid #eee; } .cookie-seven { letter-spacing: -3px; font-family: raleway; font-size: 42px; text-transform: uppercase; font-weight: 900; line-height: 100%; text-align: center; } .cookie-eight { font-family: raleway; font-size: 10px; text-transform: uppercase; line-height: 100%; font-weight: 400; text-align: center; letter-spacing: 1px; margin-bottom: 10px; color: #999; } .cookie-cblue { color: #B5D8EB; } .cookie-corange { color: #FFC8BA; } .cookie-cgreen { color: #93DFB8; } .cookie-cpurple { color: #E3AAD6; } .cookie-cpink { color: #FFBDD8; } .cookie-nine { width: 170px; height: 127px; font-family: raleway; font-size: 7px; text-transform: uppercase; letter-spacing: 1px; line-height: 100%; color: #999; overflow: hidden; margin-top: 12px; text-align: justify; } .cookiecredit { cursor: url(http://33.media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png), auto; padding: 5px 19px; max-width: 300px; border: 1px solid #eee; font-family: source sans pro; font-size: 9px; text-transform: uppercase; text-align: center; line-height: 100%; color: #B5D8EB; background-color: #fff; margin-top: 10px; } </style> <center> <div class="cookie-two"> <div class="cookie-one"> <div class="cookie-ten"> <div class="cookie-eleven"> <input type="radio" id="cookie-eleven-8" name="cookie-eleven-group-2" checked> <label for="cookie-eleven-8"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-blue"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label> <div class="cookie-twelve"> <div class="cookie-seven cookie-cblue">FIRST LAST</div> <div class="cookie-eight">##. CAREER. PLAYBY.</div> <table cellspacing="0" cellpadding="0"> <td><div class="cookie-six"> SHIPPER! </div></td> <Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine"> LYRICS! </div></td> </table> </div> </div> <div class="cookie-eleven"> <input type="radio" id="cookie-eleven-9" name="cookie-eleven-group-2"> <label for="cookie-eleven-9"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-orange"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label> <div class="cookie-twelve"> <div class="cookie-seven cookie-corange">FIRST LAST</div> <div class="cookie-eight">##. CAREER. PLAYBY.</div> <table cellspacing="0" cellpadding="0"> <td><div class="cookie-six"> SHIPPER! </div></td> <Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine"> LYRICS! </div></td> </table> </div> </div> <div class="cookie-eleven"> <input type="radio" id="cookie-eleven-10" name="cookie-eleven-group-2"> <label for="cookie-eleven-10"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-green"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label> <div class="cookie-twelve"> <div class="cookie-seven cookie-cgreen">FIRST LAST</div> <div class="cookie-eight">##. CAREER. PLAYBY.</div> <table cellspacing="0" cellpadding="0"> <td><div class="cookie-six"> SHIPPER! </div></td> <Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine"> LYRICS! </div></td> </table> </div> </div> <div class="cookie-eleven"> <input type="radio" id="cookie-eleven-11" name="cookie-eleven-group-2"> <label for="cookie-eleven-11"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-pink"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label> <div class="cookie-twelve"> <div class="cookie-seven cookie-cpink">FIRST LAST</div> <div class="cookie-eight">##. CAREER. PLAYBY.</div> <table cellspacing="0" cellpadding="0"> <td><div class="cookie-six"> SHIPPER! </div></td> <Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine"> LYRICS! </div></td> </table> </div> </div> <div class="cookie-eleven"> <input type="radio" id="cookie-eleven-12" name="cookie-eleven-group-2"> <label for="cookie-eleven-12"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-purple"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label> <div class="cookie-twelve"> <div class="cookie-seven cookie-cpurple">FIRST LAST</div> <div class="cookie-eight">##. CAREER. PLAYBY.</div> <table cellspacing="0" cellpadding="0"> <td><div class="cookie-six"> SHIPPER! </div></td> <Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine"> LYRICS! </div></td> </table> </div> </div> <div class="cookie-eleven"> <input type="radio" id="cookie-eleven-13" name="cookie-eleven-group-2"> <label for="cookie-eleven-13"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-blue"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label> <div class="cookie-twelve"> <div class="cookie-seven cookie-cblue">FIRST LAST</div> <div class="cookie-eight">##. CAREER. PLAYBY.</div> <table cellspacing="0" cellpadding="0"> <td><div class="cookie-six"> SHIPPER! </div></td> <Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine"> LYRICS! </div></td> </table> </div> </div> <div class="cookie-eleven"> <input type="radio" id="cookie-eleven-14" name="cookie-eleven-group-2"> <label for="cookie-eleven-14"><span class="hint--left" data-hint="FIRST LAST"><div class="cookie-orange"><div class="cookie-four"><i class="fa fa-user-plus"></i></div><img src="SQUARE IMAGE HERE! IT WILL RESIZE!" width="50" style="border-radius: 100%;"></div></span></label> <div class="cookie-twelve"> <div class="cookie-seven cookie-corange">FIRST LAST</div> <div class="cookie-eight">##. CAREER. PLAYBY.</div> <table cellspacing="0" cellpadding="0"> <td><div class="cookie-six"> SHIPPER! </div></td> <Td valign="top"><div class="cookie-five"><img src="http://placehold.it/150x250"></div><div class="cookie-nine"> LYRICS! </div></td> </table> </div> </div> </div> </div> </div> </center><center><A href="http://shine.jcink.net/index.php?showuser=10542"><div class="cookiecredit">© FELICITY</div></a>
<!--HTML--><div class="alias"> <div class="capt">alias</div> <div class="pott"> <div class="infobox">I'm afraid I still don't understand, sir. I've had twelve years to think about it. And if I had it to do over again, I would have grabbed the phaser and pointed it at you instead of them. Wouldn't that bring about chaos?</div> <div class="playerinfo1">00 years // pronouns // timezone // <a href="http://shine.b1.jcink.com/index.php?showuser=11414" style="color: white; text-decoration: none;">▼</a></div> <div class="pl1">000</div> <div class="playerinfo2">characters</div> <img src="http://placehold.it/50"> </div> <table><tr><td> <div class="peep"> <img src="http://placehold.it/100"> <div class="peepword"><a href="link">name mcname</a></div> <div class="peepword2">00 // thing</div> </div> </td> <td> <div class="peep"> <img src="http://placehold.it/100"> <div class="peepword"><a href="link">other mcname</a></div> <div class="peepword2">oo // thing</div> </div> </td> <td> <div class="peep"> <img src="http://placehold.it/100"> <div class="peepword"><a href="link">name mcname</a></div> <div class="peepword2">00 // thing</div> </div> </td> <td> <div class="peep"> <img src="http://placehold.it/100"> <div class="peepword"><a href="link">other mcname</a></div> <div class="peepword2">oo // thing</div> </div> </td> </tr><tr><td> <div class="peep"> <img src="http://placehold.it/100"> <div class="peepword"><a href="link">name mcname</a></div> <div class="peepword2">00 // thing</div> </div> </td> <td> <div class="peep"> <img src="http://placehold.it/100"> <div class="peepword"><a href="link">other mcname</a></div> <div class="peepword2">oo // thing</div> </div> </td> <td> <div class="peep"> <img src="http://placehold.it/100"> <div class="peepword"><a href="link">name mcname</a></div> <div class="peepword2">00 // thing</div> </div> </td> <td> <div class="peep"> <img src="http://placehold.it/100"> <div class="peepword"><a href="link">other mcname</a></div> <div class="peepword2">oo // thing</div> </div> </td> </tr></table> </div> <link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> <style type="text/css"> .alias { width: 400px; background-color: #e9e9e9; margin: 0 auto; padding: 0 0 10px 0; position: relative; overflow: hidden; border: 10px solid #fefefe; border-image: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4813/4813807.png) 30 30 round; } .capt { height: 50px; width: 400px; padding: 8px 0; background-color: #006E8C; font: 40px raleway; text-transform: uppercase; text-align: center; color: white; letter-spacing: 3px; position: relative; top: 0; left: 0; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; } .pott { height: 50px; width: 380px; background-color: #006E8C; position: absolute; top: 0; left: 400px; padding: 8px 10px; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; font: 9px calibri; text-transform: uppercase; color: white; } .pott img { width: 48px; float: right; border: 1px solid white; } .infobox { width: 100px; height: 50px; overflow: auto; position: absolute; left: 10px; top: 8px; text-align: justify; line-height: 100%; padding-right: 4px; font-size: 8px; } .infobox::-webkit-scrollbar { width: 5px; } .infobox::-webkit-scrollbar-track { background-color: white; border-right: 2px solid #006E8C; border-left: 2px solid #006E8C; } .infobox::-webkit-scrollbar-thumb { background-color: white; border-top: 2px solid #006E8C; border-bottom: 2px solid #006E8C; } .playerinfo1 { width: 210px; position: absolute; top: 8px; left: 124px; text-align: center; } .playerinfo2 { width: 210px; position: absolute; top: 50px; left: 124px; text-align: center; } .pl1 { width: 210px; font-size: 40px; position: absolute; top: 16px; left: 124px; text-align: center; } .peep { width: 85px; height: 85px; background-color: lightgrey; padding: 3px; margin: 2px; overflow: hidden; } .peep img { width: 85px; } .peepword { height: 13px; padding: 1px 0; position: relative; top: 10px; left: 0; background-color: grey; font: 11px economica; text-transform: uppercase; text-align: center; color: white; -webkit-transition: .4s; -o-transition: .4s; -moz-transition: .4s; transition: .4s; } .peepword a { color: white; text-decoration: none; } .peepword2 { height: 8px; padding-bottom: 1px; position: relative; top: 10px; left: 0; background-color: #006E8C; font: 8px calibri; text-transform: uppercase; text-align: center; color: white; -webkit-transition: .4s; -o-transition: .4s; -moz-transition: .4s; transition: .4s; } .peep:hover .peepword { top: -28px; -webkit-transition: .4s; -o-transition: .4s; -moz-transition: .4s; transition: .4s; } .peep:hover .peepword2 { top: -28px; -webkit-transition: .4s; -o-transition: .4s; -moz-transition: .4s; transition: .4s; } .alias:hover .capt { left: -400px; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; } .alias:hover .pott { left: 0px; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; } </style>
<!--HTML--> <link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'> <center><div class="b-facepad"> <section class="facetabl"> <div><input id="ac-22" name="accordion-1" type="radio" checked/> <label for="ac-22"><div class="b-fctitle">CLAIMED</div></label><article class="ac-face"><div class="b-fcpad"><table cellpadding="0" cellspacing="0"><TR><td> <div class="b-smttl"> THE LADIES </div> <div class="b-face01"> <br><a href="LINK">name listed however you please</a> <br><a href="LINK">celeb name </a> <br><a href="LINK">celeb name </a> <br><a href="LINK">celeb name </a> <br><a href="LINK">celeb name </a> <br><br> </div></td> <td> <div class="b-smttl"> THE GENTS </div> <div class="b-face02"> <br><a href="LINK">name listed however you please</a> <br><a href="LINK">celeb name </a> <br><a href="LINK">celeb name </a> <br><a href="LINK">celeb name </a> <br><a href="LINK">celeb name </a> <br><br> </div></td></TR></table></div></article></div><div> <input id="ac-21" name="accordion-1" type="radio" /> <article class="ac-face"><div class="b-fcpad"><table cellpadding="0" cellspacing="0"><TR><td> <div class="b-smttl"> requested </div> <div class="b-face03"> <br> <a href="LINK TO ADVERT">celeb name </a> <br>- for member - <br> <a href="LINK TO ADVERT">celeb name </a> <br>- for member - </div></td> <td> <div class="b-smttl"> reserved </div> <div class="b-face03"> <br> <a href="LINK TO PROFILE">celeb name </a> <br>- for member, 3 days - </div></td></TR></table></div></article><label for="ac-21"><div class="b-fctitle">PENDING</div></label></div> <br> <div><input id="ac-23" name="accordion-1" type="checkbox" /> <label for="ac-23"><div class="b-fctitle" style="font-size: 18px; padding: 20px 30px 20px 30px;">CODES</div></label><article class="ac-code"><div class="b-fcpad" style="height: 200px; padding: 0px; border: 10px solid #fff; overflow: auto;"> <div class="b-smtitle2"> to claim </div> [**CODE]<br><a href="LINK TO PROFILE">celeb last, first</a>[/CODE**] <br><br> <div class="b-smtitle2"> to reserve </div> [**CODE]<a href="LINK TO ACCOUNT">last, first name </a> <br>- name, 3 days -[/CODE**] <br><br> <div class="b-smtitle2"> to request </div> [**CODE]<br> <a href="lLINK TO WANT AD">celeb last, celeb first</a> <br>- for member name - [/CODE**] <br> </div></article></div> </section> </div><div style="padding-left: 380px; font-family: trebuchet ms; font-size: 8px;"> <a href="http://shine.b1.jcink.com/index.php?showuser=3621">❥ bee</a></div></center> <style type="text/css"> .facetabl label{ position: relative; z-index: 20; display: block; cursor: pointer; color: black; } .facetabl label:hover{ background: #fff; } .facetabl input:checked + label,.facetabl input:checked + label:hover{ background: #fff;} .facetabl label:hover:after,.facetabl input:checked + label:hover:after{ content: ''; position: absolute; width: 24px; height: 24px; right: 13px; top: 7px; } .facetabl input:checked + label:hover:after{} .facetabl input{ display: none; } .facetabl article{ background: fff; margin: -0px; overflow: hidden; height: 0px; position: relative; z-index: 10; -webkit-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.6s linear; transition: height 0.5s ease-in-out, box-shadow 0.6s linear; } .facetabl input:checked ~ article{ -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; transition: height 0.5s ease-in-out, box-shadow 0.1s linear; } .facetabl article p{ font-family: courier new; color: black; font-size: 14px; padding: 0px; } .facetabl input:checked ~ article.ac-face{ height: 290px; } .facetabl input:checked ~ article.ac-code{ height: 220px; } .b-facepad { background: #f8f8f8; width: 430px; padding: 10px; margin-top: 10px;} .b-fctitle { background: #000; width: 370px; height: 10px; padding: 30px 30px 30px 30px; color: #fff; font-family: oswald; text-transform: uppercase; font-size: 20px; letter-spacing: 2px; } .b-fctitle:hover { background: #323232; } .b-face01 { width:160px; height:220px; padding-left: 30px; overflow:auto; text-align: left; line-height:120%; overflow: auto; trebuchet ms; font-size: 9px; border-top: 5px solid #fff; text-transform: uppercase; padding-top: -5px; } .b-face02 { width:160px; height:220px; padding-left: 30px; overflow:auto; text-align: left; line-height:120%; overflow: auto; trebuchet ms; font-size: 9px; border-top: 5px solid #fff; text-transform: uppercase; } .b-face03 { width:190px; height:220px; overflow:auto; text-align: center; line-height:120%; overflow: auto; font-family: trebuchet ms; font-size: 9px; border-top: 5px solid #fff; text-transform: uppercase; } .b-fcpad { width: 380px; height: 280px; padding: 0px 10px; background-color: #fff; border-top: 15px solid #fff; overflow:auto; } .b-fcpad ::-webkit-scrollbar { background:#eaeaea; width: 3px; } .b-fcpad ::-webkit-scrollbar-thumb { background: #800000; width: 3px; } .b-fcpad ::-webkit-scrollbar-track { background:#eaeaea} .b-smttl { width: 170px; height: 30px; font-family: 'oswald'; text-transform: uppercase; font-size: 20px; color: #000; border-bottom: 5px solid #800000; line-height: 100%; text-align: center; padding-left: 10px; } .b-smtitle2 { width: 380px; font-family: oswald; text-transform: uppercase; font-size: 15px; color: #000; text-align: center; letter-spacing: 2px; padding-top: 10px; } .b-face01 a:link, .b-face01 a:active, .b-face01 a:visited { text-transform: uppercase; color: #a50e18; } .b-face02 a:link, .b-face02 a:active, .b-face02 a:visited { text-transform: uppercase; color: #0e75a5; } .b-face03 a:link, .b-face03 a:active, .b-face03 a:visited { text-transform: uppercase; color: #a5670e; } </style>
<!--HTML--><link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto' rel='stylesheet' type='text/css'> <style type="text/css"> .appbox { width: 475px; padding: 10px; background: #fff; border: 1px solid #ccc; } .appname { font-family: roboto mono; font-size: 24px; font-weight: 700; text-align: right; padding: 5px; margin-top: -20px; text-transform: uppercase; color: #000; } .appgif { width: 100px; height: 100px; background: url(placehold.it/100x100); border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; -webkit-border-radius: 100%; } .appgif img { max-width: 100px; max-height: 100px; overflow: hidden; border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; -webkit-border-radius: 100%; } .appd { width: 144px; padding: 3px; background: #f2f2f2; font-family: roboto mono; font-weight: 700; letter-spacing: 1px; margin-bottom: 5px; } .appd2 { font-size: 9px; font-family: roboto; text-transform: lowercase; text-align: right; color: #bbb; } .appword { width: 285px; height: 373px; padding: 15px; background: #F2F2F2; margin-left: 10px; } .appword2 { width: 285px; height: 373px; text-align: justify; font-family: roboto; font-size: 11px; overflow: auto; } </style><center> <div class="appbox"> <div style="width: 475px; height: 300px; background: url( 475PX X 300PX IMAGE HERE );"> <div style="width: 475px; height: 60px; padding-top: 240px;"><div style="font-size: 0px; line-height: 0%; width: 0px; border-top:60px solid transparent; border-right: 475px solid #fff;"></div></div></div> <div class="appname"> FIRST M. LAST </div> <div style="height: 15px;"></div> <table cellspacing="0" cellpadding="0"><tr><td> <div style="padding: 20px;"><div class="appgif"> <img src=" SQUARE GIF HERE "> </div></div> <div class="appd">NICKNAMES: <div class="appd2">nicknames listed here</div> </div> <div class="appd">AGE: <div class="appd2">in letters</div></div> <div class="appd">BIRTHDAY: <div class="appd2">00/00/0000</div></div> <div class="appd">GENDER: <div class="appd2">gender / pronouns</div></div> <div class="appd">OCCUPATION: <div class="appd2">occupation here</div></div> <div class="appd">MEMBER GROUP: <div class="appd2">group here</div></div> <div class="appd">FACE CLAIM: <div class="appd2">first last</div></div> <div class="appd">PLAYER: <div class="appd2">alias here</div></div> </td> <td><div class="appword"><div class="appword2"> Application here </div></div></td></tr></table></div> <a href="http://shine.jcink.net/index.php?showuser=15286"><div style="font-size: 8px; font-weight: bold; font-family: karla; text-align: center; padding-top: 5px;">TOM HARDY MADE ME THIS BRACELET</div></a></center>
<!--HTML--> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://sunshinepumpkin.b1.jcink.com/uploads/sunshinepumpkin/foundation_icons.css"> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Raleway:100,400,900' rel='stylesheet' type='text/css'> <link href='http://sunshinepumpkin.b1.jcink.com/uploads/sunshinepumpkin/bennett.css' rel='stylesheet' type='text/css'> <div class="bcphone"><div class="bcphonebi"><img src="http://i.imgur.com/pl24B63.png"/></div><div class="bcphonebii"></div><div class="bcphonet"> <i class="fa fa-circle"></i> <i class="fa fa-circle"></i> <i class="fa fa-circle"></i> <i class="fa fa-circle"></i> <i class="fa fa-circle-thin"></i> <span>spark nz</span> <span style="padding-left: 35px;">7:10 pm</span> <div style="float: right; font-size: 8px; font-weight: 900; vertical-align: middle; margin-top: -1px;"> 100% <span style="font-size: 8px;"><i class="fi-battery-full"></i></span> </div></div> <div class="bcphonen"> соединить с: <div class="bcphonebn"> Abigail Blackwood </div> </div> <div class="bcphoneend"> конец звонка </div> <div class="bcphoneimg"> <a href="http://shine.jcink.net/index.php?showuser=54"> <img src="http://goo.gl/KTNftC"/> </a></div> <div class="bcphonetextb"> <div class="bcphonetext"> Cupcake ipsum dolor sit amet jujubes oat cake. Sweet roll gummies apple pie muffin dessert marshmallow. Marzipan powder candy. </div> <div class="bcphonetext"> Chocolate bar cookie halvah. Dessert gingerbread chupa chups lemon drops. Muffin muffin marshmallow sweet jujubes halvah jelly. </div> <div class="bcphonetext"> Cupcake ipsum dolor sit amet tart. Carrot cake soufflé chocolate. Topping pie dessert tart. Biscuit lemon drops toffee pie dragée. </div> <div class="bcphonetext"> Tootsie roll tart chocolate cake. Chocolate bar icing wafer icing fruitcake. Chocolate cake pie cake oat cake pudding croissant. Toffee cupcake lemon drops chocolate bar cake tiramisu caramels. </div></div></div>
<!--HTML--> <style> .ilanaphone { width: 265px; height: 555px; background-image: url(http://i.imgur.com/RIcIGMo.png); } .ilanatop { position: relative; top: 80px; width: 211px; height: 10px; padding: 5px; background-image: url(http://i.imgur.com/VRhk8y4.png); background-color: #AEADDE; font-family: lato; font-size: 9px; color: #fff; font-weight: 300; text-align: center; text-transform: uppercase; letter-spacing: 1px; line-height: 10px; } .ilananametop { position: relative; top: 80px; width: 201px; padding: 10px; background: #C4C3EE; font-family: lato; font-size: 11px; color: #fff; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 1px; line-height: 10px; } .ilanatxtbg { position: relative; top: 80px; width: 221px; height: 301px; background: #fff; } .ilanatoptxt { position: relative; top: 0px; width: 201px; height: 40px; padding: 10px; background: #C4C3EE; } .ilanatoptxt img { margin-top: -10px; width: 110px; height: 110px; border: 5px solid #fff; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; box-shadow: 0px 0px 10px #fff; } .ilanatxtcont { position: relative; top: 60px; width: 200px; height: 165px; background: #fff; padding: 5px; overflow: auto; } .ilanatxt { margin-left: 10px; width: 140px; padding: 10px; background: #AEADDE; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; font-family: arial; font-size: 9px; color: #fff; text-align: justify; text-transform: none; letter-spacing: 1px; line-height: 10px; } .ilanatxtsend { position: relative; top: 80px; width: 201px; padding: 10px; background: #C4C3EE; font-family: lato; font-size: 9px; color: #fafafa; font-weight: 300; text-align: left; text-transform: uppercase; letter-spacing: 1px; line-height: 10px; } .ilanatxtsend img { width: 15px; height: 10px; background: #AEADDE; padding: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; margin-right: 10px; } </style> <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'> <center><div class="ilanaphone"><div class="ilanatop">12:00</div> <div class="ilananametop">NAME</div> <div class="ilanatxtbg"> <div class="ilanatoptxt"><img src="http://placehold.it/110x110"></div> <div class="ilanatxtcont"> <div class="ilanatxt">a text goes in here</div><p> <div class="ilanatxt">another txt here.</div><p> </div> </div> <div class="ilanatxtsend"><a href="http://shine.jcink.net/index.php?showuser=3079"><img src="http://i.imgur.com/IHlMECy.png"></a> SEND MESSAGE...</div> </div></center>
<!--HTML--> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <center> <style type="text/css"> @-webkit-keyframes light { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} } @-moz-keyframes light { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} } @keyframes light { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} } #basebg {height: 577px; width: 299px; position: relative; background-image:url(http://i.imgur.com/gPmFPNP.png)} .baselight {height: 15px; width: 15px; position: absolute; left: 221px; top: 12px; background-color: #76EB00; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-filter: blur(3px); -moz-filter: blur(3px); -ms-filter: blur(3px); -o-filter: blur(3px); filter: blur(3px); -webkit-animation: light 2s ease-in-out infinite; -moz-animation: light 2s ease-in-out infinite; animation: light 2s ease-in-out infinite;} .base1 {height: 466px; width: 260px; position: absolute; left: 19.5px; top: 55.5px; background-color: transparent; overflow: hidden} .base1s {height: 466px; width: 260px; position: absolute; background-image: url(http://i.imgur.com/CV8ZmDi.png); z-index: 2} .base1sa {position: relative; top: 190px; opacity: 0.7; background-color: #000; z-index: 3; width: 120px; height: 22px; line-height: 22px; font-family: 'PT Sans Narrow'; color: #fff; -webkit-border-radius: 5%; -moz-border-radius: 5%; -ms-border-radius: 5%; -o-border-radius: 5%; border-radius: 5%; font-size: 12px} .base1 .base1s {left: 0px; top: 0px; -webkit-transition: linear 0.5s; -moz-transition: linear 0.5s; -ms-transition: linear 0.5s; -o-transition: linear 0.5s; transition: linear 0.5s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;} .base1:hover .base1s {left: -260px; top: 0px; -webkit-transition: linear 0.5s; -moz-transition: linear 0.5s; -ms-transition: linear 0.5s; -o-transition: linear 0.5s; transition: linear 0.5s;} .base2 {height: 466px; width: 260px; background-image:url(http://i.imgur.com/htB43t9.png); position: absolute;} .base1 .base2 {opacity: 0; transform:scale(0.7); -webkit-transition: ease-in-out 0.4s; -moz-transition: ease-in-out 0.4s; -o-transition: ease-in-out 0.4s; -ms-transition: ease-in-out 0.4s; transition: ease-in-out 0.4s;} .base1:hover .base2 {opacity: 1; transform:scale(1); -webkit-transition: ease-in-out 0.4s; -moz-transition: ease-in-out 0.4s; -o-transition: ease-in-out 0.4s; -ms-transition: ease-in-out 0.4s; transition: ease-in-out 0.4s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;} .base2t {width: 253px; height: 20px; padding-right: 7px; position: absolute; color: #fff; background-color: #1C1C1C; font-size: 10px; text-align: right} .base2tc {font-family: 'PT Sans Narrow'; color: #fff; font-size: 10px; width: 260px; height: 20px; line-height: 20px; position: absolute; text-align: center; top: 2px} .base2n {padding: 7px 0px 7px 0px; width: 260px; background-color: #fff; color: #1c1c1c; font-family: 'Roboto', arial; font-size: 15px; position: absolute; top: 20px; letter-spacing: -0.7px} .base2msg {width: 240px; border-color: transparent; border-style: solid; border-width: 5px; padding: 5px; height: 366px; background-color: transparent; position: absolute; top: 65px; overflow: auto} .base2msg::-webkit-scrollbar {width: 0px} .lftmsg {min-height: 50px; box-shadow: 2px 2px 10px #CFCFCF; font-family: arial; color: #1c1c1c; text-align: justify; padding: 9px; margin: 10px 0px 0px 10px; width: 150px; float: left; background-color: #fff; font-size: 9px; line-height: 95%} .rtmsg {min-height: 50px; box-shadow: 2px 2px 10px #CFCFCF; font-family: 'Roboto'; color: #1c1c1c; text-align: justify; padding: 10px; margin: 10px 10px 0px 0px; width: 150px; float: right; background-color: #FFFED2; font-size: 9px; line-height: 95%} </style> <div id="basebg"> <div class="baselight"></div> <div class="base1"> <div class="base1s"> <div class="base1sa"><i class="fa fa-envelope-o"></i> 1 New Message</div> </div> <div class="base2"> <div class="base2t"><i class="fa fa-wifi"></i><i class="fa fa-signal"></i></div> <div class="base2tc">12:45PM</div> <div class="base2n">First Last <img src="http://placehold.it/30" style="-webkit-border-radius: 50%; margin-left: 3px"></div> <div class="base2msg"> <div class="lftmsg"> <img src="http://placehold.it/20" style="float: left; padding: 0px 5px 2px 0px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus. Etiam vitae nunc porta, mattis erat non, fermentum augue. Mauris iaculis sed nisi in fermentum. Donec non turpis gravida, aliquam sem vitae, consequat sem. Praesent at quam tellus. Nullam nec lacus ante. Mauris pellentesque rutrum consectetur. Cras porta nulla non sagittis dignissim.</font></div> <div class="rtmsg"> <img src="http://placehold.it/20" style="float: right; padding: 0px 0px 2px 5px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus.</font> </div> <div class="rtmsg"> <img src="http://placehold.it/20" style="float: right; padding: 0px 0px 2px 5px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus.</font> </div> <div class="lftmsg"> <img src="http://placehold.it/20" style="float: left; padding: 0px 5px 2px 0px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus. Etiam vitae nunc porta, mattis erat non, fermentum augue. Mauris iaculis sed nisi in fermentum. Donec non turpis gravida, aliquam sem vitae, consequat sem. Praesent at quam tellus. Nullam nec lacus ante. Mauris pellentesque rutrum consectetur. Cras porta nulla non sagittis dignissim.</font></div> </div> </div> </div> </div> <div style="text-align: center; font-family: calibri; font-size: 8px; text-transform: uppercase;"><a href="http://shine.b1.jcink.com/index.php?showuser=6723">holly at shine</a></div> </center>
<!--HTML--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Karla|Montserrat:400,700" rel="stylesheet"> <center><div class="warhols"> <div class="screen"> <div class="head"><table><tr> <td><div class="pic"> <img src="http://placehold.it/60"> </div></td> <td><div class="name">NAME HERE</div> </td></tr></table></div> <div class="messages"> <table> <tr><td class="txt">copy and paste between the <*tr> tags for a new message </td> <td><div class="tr"><i class="fa fa-caret-right" aria-hidden="true"></i></div> </td></tr> <tr><td class="txt">this will scroll eventually dw </td> <td><div class="tr"><i class="fa fa-caret-right" aria-hidden="true"></i></div> </td></tr> </table> </div> </div> </div> <div style="font: bold 8px/20px calibri; opacity: .5; text-align:center;"><a href="http://shine.jcink.net/index.php?showuser=8549">BY MITZI</a></div></center> <style> /*** 240x425 BACKGROUND ***/ .warhols .screen { background: url(http://i.imgbox.com/5zyE1Vzk.png); } /*** CONTACT ACCENT ***/ .warhols .head .name { color: #21b6ce; } /*** ICON BORDER ***/ .warhols .head img { border: solid 5px #21b6ce; } .warhols { width: 290px; height: 550px; overflow: hidden; background: url(http://i.imgbox.com/dVJRjK6L.png) } .warhols .screen { border-radius: 6px; border: solid 1px #fff; margin: 55px 0 0 -2px; height: 425px; width: 240px; overflow: hidden; } .warhols .head { background: rgba(255,255,255,.40); margin: 20px 0; padding: 15px; } .warhols .head img { width: 60px; height: 60px; border-radius: 50px; } .warhols .head .name { font: bold 22px/18px montserrat; padding-left: 10px; text-shadow: 1px 1px 0px #fff; } .warhols .messages { padding: 0 20px; height: 250px; overflow: auto; } .warhols .messages .txt { display: block; margin: 5px 0; padding: 10px; border-radius: 7px; background: rgba(255,255,255,.5); font: 10px karla; letter-spacing: 1px; text-align: right; color: #000; box-shadow: -1px -1px 4px rgba(0,0,0,.1); } .warhols .messages .tr { color: rgba(255,255,255,.5); font-size: 16px; } .warhols .messages::-webkit-scrollbar { width: 1px!important; background: transparent!important; } .warhols .messages::-webkit-scrollbar-thumb { width: 1px!important; background: #000!important; } </style>
<!--HTML--> <link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'><style type='text/css'> .louisblackbg { width:300px; height:566px; background-image:url(http://i.imgur.com/v21mg1y.png); position:relative; overflow:hidden; } .louisblacklockscreen { position:absolute; top:83px; left:36px; width:224px; height:399px; overflow:hidden; } .louisblackbgimg { position:absolute; top:0px; left:0px; width:224px; height:399px; opacity:1; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackdarken { position:absolute; top:0px; left:0px; width:224px; height:399px; background-color:#222; opacity:.2; } .louisblackstats { position:absolute; top:2px; left:4px; width:217px; height:10px; background-image:url(http://i.imgur.com/6RLyMWZ.png); transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackslide { position:absolute; left:100px; top:5px; width:25px; height:5px; background-image:url(http://i.imgur.com/TPmD3dR.png); transition-duration: .8s; -webkit-transition-duration: .8s; } .louisblacktime { position:absolute; top:35px; width:224px; height:43px; text-align:center; line-height:43px; font-size:50px; color:#fff; font-family:lato; font-weight:100; } .louisblackdate { position:absolute; top:85px; width:224px; line-height:13px; text-align:center; font-size:12px; color:#fff; font-family:lato; font-weight:100; text-transform:none; } .louisblackcamera { position:absolute; top:375px; left:98px; width:121px; height:16px; background-image:url(http://i.imgur.com/X0mXLoH.png); transition-duration: .8s; -webkit-transition-duration: .8s; } .louisblackunlock { position:absolute; top:315px; left:52px; width:120px; height:15px; background-image:url(http://i.imgur.com/1xuqS8G.png); } .louisblackslideright { position:absolute; top:0px; left:0px; width:224px; height:399px; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackbg:hover .louisblackslideright { left:399px; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackbg:hover .louisblackbgimg { transform: scale(1.5); -ms-transform: scale(1.5); -webkit-transform: scale(1.5); opacity:0; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackbg:hover .louisblackslide { top:-10px; transition-duration: .8s; -webkit-transition-duration: .8s; } .louisblackbg:hover .louisblackcamera { top:399px; transition-duration: .8s; -webkit-transition-duration: .8s; } .louisblackbg:hover .louisblackdarken { opacity:0; transition-duration: .8s; -webkit-transition-duration: .8s; } .louisblackbg:hover .louisblackstats { position:absolute; top:2px; left:4px; width:217px; height:10px; background-image:url(http://i.imgur.com/cz7Km8B.png); transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackbg:hover .louisblackmessages { opacity:1; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackmessages { position:absolute; top:0px; left:0px; width:224px; height:399px; background-color:#fff; opacity:0; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackmenu {position:absolute; top:0px; left:0px; width:224px; height:48px; background-color:#f8f8f8; border-bottom:1px solid #e5e5e5; } .louisblackblue { position:absolute; top:22px; left:6px; width:213px; height:14px; background-image:url(http://i.imgur.com/pP1Grtz.png); } .louisblackmtime { position:absolute; top:4px; width:224px; height:10px; line-height:10px; font-family:Arial; color:#000; font-size:10px; text-align:center; text-transform:none; font-weight:none; } .louisblackname { position:absolute; top:25px; width:224px; height:10px; line-height:10px; font-family:Arial; color:#000; font-size:10px; text-align:center; text-transform:none; font-weight:bold; } .louisblackpic { position:absolute; top:60px; left:10px; width:75px; height:75px; border-radius:75px; } .louisblackfiller { position:absolute; top:60px; left:100px; width:124px; height:75px; line-height:75px; color:#8e8e93; font-family:arial; font-size:7px; text-align:center; text-transform:none; } .louisblackyay { position:absolute; top:140px; left:0px; width:204px; height:240px; padding:10px; overflow:auto; } .louisblackbubble { width:184px; padding:10px; background-color:#37a9fc; border-radius:10px; text-align:justify; color:#fff; font-family:arial; font-size:10px; line-height:100%; } .louisblackarrow { position:relative; left:-50px; width:0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #37a9fc; } </style><center> <div class='louisblackbg'><div class='louisblacklockscreen'><div class='louisblackbgimg' style='background-image:url(http://placehold.it/225x400);'></div><div class='louisblackdarken'></div><div class='louisblackstats'></div><div class='louisblackslide'></div><div class='louisblackcamera'></div><div class='louisblackslideright'><div class='louisblacktime'> 4:21 </div><div class='louisblackdate'> Wednesday 29 January </div><div class='louisblackunlock'></div></div><div class='louisblackmessages'><div class='louisblackmenu'><div class='louisblackblue'></div><div class='louisblackname'> Recipient Name </div></div><div class='louisblackmtime'> 4:21 PM </div><div class='louisblackpic' style=' background-image:url(http://placehold.it/75);'></div><div class='louisblackfiller'> <b>Wed, 29 Jan,</b> 4:21 PM </div><div class='louisblackyay'><div class='louisblackarrow'></div><div class='louisblackbubble'> message here </div></div></div></div></div><div style='margin-top:8px; width:450px; text-align:center; font-family:calibri; font-size:8px; color:#777; line-height:100%; letter-spacing:4px;'>[URL=http://shine.b1.jcink.com/index.php?showuser=599] THANKS TO LOUIS AT SHINE![/URL]</div></center>
<!--HTML--> <link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'><style type='text/css'> .louisblackbgcall { width:300px; height:566px; background-image:url(http://i.imgur.com/v21mg1y.png); position:relative; overflow:hidden; } .louisblacklockscreencall { position:absolute; top:83px; left:36px; width:224px; height:399px; overflow:hidden; } .louisblackbgcallimg { position:absolute; top:0px; left:0px; width:224px; height:399px; opacity:1; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackdarkencall { position:absolute; top:0px; left:0px; width:224px; height:399px; background-color:#222; opacity:.2; transition-duration: .8s; -webkit-transition-duration: .8s; } .louisblackstatscall { position:absolute; top:2px; left:4px; width:217px; height:10px; background-image:url(http://i.imgur.com/6RLyMWZ.png); transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackmtimecall { position:absolute; top:4px; width:224px; height:10px; line-height:10px; font-family:Arial; color:#fff; font-size:10px; text-align:center; text-transform:none; font-weight:none; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackcaller { position:absolute; top:35px; width:224px; height:43px; text-align:center; line-height:43px; font-size:30px; color:#fff; font-family:lato; font-weight:100; text-transform:none; } .louisblacktype { position:absolute; top:85px; width:224px; line-height:13px; text-align:center; font-size:12px; color:#fff; font-family:lato; font-weight:100; text-transform:none; } .louisblackunlockcall { position:absolute; top:315px; left:0px; width:224px; height:50px; background-color:#4cd964; opacity:.9; text-transform:none; color:#fff; font-family:lato; font-weight:100; text-align:center; line-height:50px; font-size:25px; } .louisblackendcall { position:absolute; top:315px; left:-224px; width:224px; height:50px; background-color:#ff3a30; opacity:.9; text-transform:none; color:#fff; font-family:lato; font-weight:100; text-align:center; line-height:50px; font-size:25px; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblacksliderightcall { position:absolute; top:0px; left:0px; width:224px; height:399px; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackbgcall:hover .louisblacksliderightcall { left:224px; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackbgcall:hover .louisblackendcall { left:0px; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackbgcall:hover .louisblackdarkencall { opacity:.8; transition-duration: .8s; -webkit-transition-duration: .8s; } .louisblackbgcall:hover .louisblackcall { opacity:1; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackcall { position:absolute; top:0px; left:0px; width:224px; height:399px; opacity:0; transition-duration: 1.2s; -webkit-transition-duration: 1.2s; } .louisblackpiccall { position:absolute; top:40px; left:10px; width:75px; height:75px; border-radius:75px; } .louisblackfillercall { position:absolute; top:40px; left:100px; width:124px; height:75px; line-height:75px; color:#fff; font-family:arial; font-size:7px; text-align:center; text-transform:none; } .louisblackcallwords { position:absolute; top:125px; left:10px; width:204px; height:190px; overflow:auto; text-align:justify; color:#fff; font-family:arial; font-size:10px; line-height:100%; } </style><center> <div class='louisblackbgcall'><div class='louisblacklockscreencall'><div class='louisblackbgcallimg' style='background-image:url(http://placehold.it/225x400);'></div><div class='louisblackdarkencall'></div><div class='louisblackstatscall'></div><div class='louisblackmtimecall'>4:21 PM</div><div class='louisblacksliderightcall'><div class='louisblackcaller'> Who's Calling </div><div class='louisblacktype'> iPhone </div><div class='louisblackunlockcall'>Slide to Answer</div></div> <div class='louisblackendcall'>End</div> <div class='louisblackcall'><div class='louisblackpiccall' style='background-image:url(http://placehold.it/75);'></div><div class='louisblackfillercall'> <b>Wed, 29 Jan,</b> 4:21 PM </div><div class='louisblackcallwords'> your message here </div></div> </div></div><div style='margin-top:8px; width:450px; text-align:center; font-family:calibri; font-size:8px; color:#777; line-height:100%; letter-spacing:4px;'>[URL=http://shine.b1.jcink.com/index.php?showuser=599] THANKS TO LOUIS AT SHINE![/URL]</div></center>
<!--HTML--> <link href='http://fonts.googleapis.com/css?family=Lato:300,400,900' rel='stylesheet' type='text/css'><link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <style type="text/css"> #stucky { width: 287px; background-size: cover; height: 559px; background-image: url(https://40.media.tumblr.com/70fa4c77c028a73d110f3361b0b86965/tumblr_nrm8wvblFK1ti8owgo1_400.png); overflow: hidden; } .stucky { width: 245px; position: relative; left: 2px; top: 69px; } #stucky-one { width: 245px; height: 160px; overflow: hidden; } .stucky-two { width: 245px; height: 160px; background-size: cover; } .nico1tcredit { width: 200px; padding: 4px; border: 1px solid #eee; background-color: #fff; font-family: calibri; font-size: 8px; letter-spacing: 1px; color: #7a7a7a; text-transform: uppercase; margin-top: 10px; text-align: center; line-height: 100%; } .stucky-three { width: 24px; height: 24px; border-radius: 100%; background-color: rgba(245,162,162,1); position: relative; top: -12px; margin-bottom: -24px; left: 90px; -webkit-transition-duration: .5s; -webkit-transform: rotate(0deg); -moz-transition-duration: .5s; -moz-transform: rotate(0deg);transition-duration: .5s; transform: rotate(0deg); -ms-transition-duration: .5s; -ms-transform: rotate(0deg); -o-transition-duration: .5s; -o-transform: rotate(0deg);z-index: 1; } #stucky:hover .stucky-three { top: -160px; left: 0px; border-radius: 0%; -webkit-transform: rotate(360deg); width: 245px; background-color: rgba(245,162,162,.8); height: 160px; margin-bottom: -160px; } .stucky-four { width: 40px; position: relative; top: -95px; padding: 10px 0px; background-color: rgba(255,255,255,.5); border-radius: 100%; opacity: 0; -webkit-transform: scale(0,0); -o-transform: scale(0,0); transform: scale(0,0); -ms-transform: scale(0,0); -moz-transform: scale(0,0); -webkit-transition-duration: .5s; -moz-transform: scale(0,0); -moz-transition-duration: .5s; -o-transform: scale(0,0); -o-transition-duration: .5s; -ms-transform: scale(0,0); -ms-transition-duration: .5s; transform: scale(0,0); transition-duration: .5s; -webkit-transition-delay: .1s; -moz-transition-delay: .1s; -ms-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; color: #fff; font-family: lato; font-size: 20px; text-align: center; line-height: 100%; font-weight: 300; margin-bottom: -65px; z-index: 2; } #stucky:hover .stucky-four { opacity: 1; -webkit-transform: scale(1,1); -o-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1); } .stucky-five { width: 40px; position: relative; top: -95px; padding: 10px 0px; background-color: rgba(255,255,255,.5); border-radius: 100%; opacity: 0; -webkit-transform: scale(0,0); -webkit-transition-duration: .5s; -moz-transform: scale(0,0); -moz-transition-duration: .5s; -o-transform: scale(0,0); -o-transition-duration: .5s; -ms-transform: scale(0,0); -ms-transition-duration: .5s; transform: scale(0,0); transition-duration: .5s; -webkit-transition-delay: .2s; -moz-transition-delay: .2s; -ms-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; color: #fff; font-family: lato; font-size: 20px; text-align: center; line-height: 100%; font-weight: 300; margin-left: 20px; margin-right: 20px; margin-bottom: -65px; z-index: 2; } #stucky:hover .stucky-five { opacity: 1; -webkit-transform: scale(1,1); -o-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1); } .stucky-six { width: 40px; position: relative; top: -95px; padding: 10px 0px; background-color: rgba(255,255,255,.5); border-radius: 100%; opacity: 0; -webkit-transform: scale(0,0); -webkit-transition-duration: .5s; -moz-transform: scale(0,0); -moz-transition-duration: .5s; -o-transform: scale(0,0); -o-transition-duration: .5s; -ms-transform: scale(0,0); -ms-transition-duration: .5s; transform: scale(0,0); transition-duration: .5s; -webkit-transition-delay: .3s; -moz-transition-delay: .3s; -ms-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; color: #fff; font-family: lato; font-size: 20px; text-align: center; line-height: 100%; font-weight: 300; margin-bottom: -65px; z-index: 2; } #stucky:hover .stucky-six { opacity: 1; -webkit-transform: scale(1,1); -o-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); transform: scale(1,1); } .stucky-seven { opacity: 1; color: #fff; font-family: lato; font-weight: 300; font-size: 12px; padding: 6px 0px; text-align: center; line-height: 100%; -webkit-transition-duration: .5s; transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; } #stucky:hover .stucky-seven { opacity: 0; } .stucky-nine { width: 225px; height: 130px; padding: 17px 10px; background-color: #fff; position: relative; } .stucky-ten { margin-bottom: 10px; clear: both; color: #777; position: relative; padding: 10px; background-color: #eee; border-radius: 14px; font-family: lato; max-width: 190px; min-width: 70px; font-size: 10px; text-align: justify; line-height: 100%; display: inline-block; clear: both; float: right;} .stucky-ten:after { content: ""; position: absolute; width: 22px; height: 17px; clip: rect(13px,18px,30px,0px); border-radius: 100%; border-color: #eee; z-index: 5; border-width: 0px 10px; border-style: solid; bottom: -3px; left: 80%; } .stucky-eleven { clear: both; } .stucky-twelve { width: 225px; position: relative; left: -10px; border-top: 1px solid #eee; background-color: #f9f9f9; padding: 10px; } .stucky-thirteen { padding: 10px; color: #777; background-color: #fff; font-family: lato; font-size: 10px; text-align: justify; line-height: 100%; } .stucky-fourteen { font-family: lato; font-size: 15px; margin-top: 5px; color: rgba(245,162,162,1); line-height: 100%; text-align: justify; } .stucky-fifteen { float: right; font-weight: 400; font-size: 10px; } .stucky-sixteen { height: 120px; width: 220px; overflow-y: auto; overflow-x: hidden; padding-right: 5px; } .stucky-scroll { padding-bottom: 10px; height: 120px; } .stucky-sixteen::-webkit-scrollbar-thumb { background-color: #D0ECEA; height: auto; border: 2px solid #fff; } .stucky-sixteen::-webkit-scrollbar { background-color: #D0ECEA; height: 10px; width:11px; border: 5px solid #fff; } .stucky-seventeen { width: 235px; padding: 5px; background-color: #f9f9f9; margin-bottom: -8px; max-height: 18px; font-family: lato; font-size: 6px; text-transform: uppercase; text-align: Justify; line-height: 100%; color: #777; } .stucky-eighteen { position: relative; top: -2px; margin-bottom: -2px; } .stucky-nineteen { position: relative; top: -8px; margin-bottom: -8px; font-family: lato; font-weight: 400; text-align: center; line-height: 100%; color: #777; line-height: 100%; text-transform: uppercase; font-size: 8px; line-height: 100%; } .stucky-twenty { position: relative; top: -8px; margin-bottom: -8px; text-align: right; } .stucky-tone { position: relative; font-size: 6px; margin-bottom: -2px; margin-right: 5px; } .stucky-ttwo { padding: 8px; font-family: lato; font-weight: 900; background-color: #D0ECEA; color: #fff; text-align: center; line-height: 100%; font-size: 14px; } .stucky-tthree { float: left; } </style> <center> <div id="stucky"> <div class="stucky"> <div class="stucky-seventeen"><i class="ion-connection-bars" style="margin-right: 5px; font-size: 8px;"></i> <font class="stucky-eighteen">VERIZON </font><i style="margin-left: 5px; font-size: 8px;" class="ion-wifi"></i> <div class="stucky-nineteen">4:45 PM <div class="stucky-twenty">100% <i style="font-size: 8px;" class="ion-battery-half"></i></div></div></div> <div class="stucky-ttwo"><font class="stucky-tthree"><i class="ion-ios-arrow-back"></i></font> Natasha</div> <div id="stucky-one"><div class="stucky-two" style="background-image: url(http://placehold.it/245x160);"></div></div> <div class="stucky-three"><div class="stucky-seven"><i class="ion-email-unread"></i></div></div> <table cellspacing="0" cellpadding="0"> <td><div class="stucky-four"><i class="ion-ios-telephone"></i></div></td> <td><div class="stucky-five"><i class="ion-ios-camera"></i></div></td> <td><div class="stucky-six"><i class="ion-ios-mic"></i></div></td> </table> <div class="stucky-nine"> <div class="stucky-scroll"> <div class="stucky-sixteen"> <div class="stucky-ten">hey</div> <div class="stucky-ten">u r such a cute</div> <div class="stucky-ten">lolol emoji <3 long text yay</div> <div class="stucky-ten">u r such a cute</div> <div class="stucky-ten">lolol emoji <3 long text yay</div> </div> </div> <div class="stucky-twelve"><div class="stucky-thirteen">Text Message</div> <div class="stucky-fourteen"><i class="ion-ios-camera"></i> <i class="ion-ios-videocam"></i> <font class="stucky-fifteen"><i class="ion-ios-paperplane"></i> SEND</font></div> </div> <div class="stucky-eleven"></div></div> </div> </div> </center><center><div class="nico1tcredit"><A href="http://shine.jcink.net/index.php?showuser=10542">© STEVE ROGERS.</a></div></center>
<!--HTML--> <link rel="stylesheet" href="http://ames.b1.jcink.com/uploads/ames/codes/whitecell.css"><style type="text/css"> .atm-text-img { width: 100px; height: 100px; padding: 3px; border-radius: 100%; border: 4px solid #dedede; background-color: #eee; margin-top: 15px; } .ames-credit { width: 185px; text-align: right; line-height: 100%; } .ames-credit a { text-transform: uppercase; letter-spacing: 1px; font-size: 8px; font-family: calibri; } </style> <center> <div class="atm-text"><div class="atm-text-box"> <div class="atm-text-name">RECIPIENT NAME HERE</div> <img src="IMG URL HERE" class="atm-text-img"> <div class="atm-text-num">1</div> <div class="atm-text-from">Text From: YOUR CHARACTER NAME HERE</div> <div class="atm-text-mbox"> <div class="atm-text-msg"> TEXT MESSAGE GOES HERE </div> </div> </div></div> <div class="ames-credit"><a href="http://shine.b1.jcink.com/index.php?showuser=1892" target="_blank">♛ Ames</a></div> </center>
<!--HTML--> <link href='http://fonts.googleapis.com/css?family=Roboto:300,400|Inconsolata' rel='stylesheet' type='text/css'><link href='http://takingthehobbitstoisengard.b1.jcink.com/uploads/takingthehobbitstoisengard/ophonesix.css' rel='stylesheet' type='text/css'><center> <div class=o-phback><div class=o-spacer-a> <div class=o-contact> name </div> <div class=o-navline></div><div class=o-screen><div class=o-spacer-b></div> <div class=o-msg> <div class=o-bub> message here! </div><br></div><div class=o-spacer-c></div> <img src="GIF OF YOUR CHARACTER" class=o-you> <img src="GIF OF THEM" class=o-them> <img src="http://i.imgur.com/omA1VaZ.gif" class=o-reply></div></div></div> <div class=o-cred> <a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=39229">♔</a> <a href="http://shine.jcink.net/index.php?showuser=5714">ellie</a> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=9998">♕</a> </div></center>
<!--HTML--> <center><div class="fearless"><div class="fearlessimg"><div class="fearlesshead"><div class="fearlessname">name</div><div class="fearlessat">@ name </div><div class="fearlesstext">bio goes here</div></div></div><div class="fearlesstweets">tweets following followers<div class="fearlessnumber">0 0 0 </div></div><div class="fearlessedit">edit profile</div></div><div class="fearlesscredit"> <a href="http://shine.jcink.net/index.php?showuser=1195">☾</a></center> <style> .fearless { width:500px; height:300px; background-color: #FCFCFC; position: relative; } .fearlessimg { width:500px; height:220px; background-image:url(http://placehold.it/500x220); position: relative; } .fearlesshead { width:75px; height:75px; background-image:url(http://placehold.it/75x75); text-align:center; position: relative; border: 3px solid white; top: 20px; } .fearlessname { font-famiy: century gothic; font-size:12px; color:white; position:relative; top:80px; text-align:center; } .fearlessat { font-famiy: century gothic; font-size:11px; color:white; position:relative; top:85px; text-align:center; } .fearlesstext { font-famiy: century gothic; font-size:10px; color:white; position:relative; top:95px; text-align:center; word-wrap: break-word; } .fearlesstweets { color: #CBCFCD; text-transform: uppercase; font-size:12px; position:relative; top:20px; font-family:century gothic; text-align:left; left:35px; } .fearlessnumber { color: #2E8CB1; font-size:20px; position:relative; top:15px; font-family:century gothic; text-align:left; left:15px; } .fearlessedit { color:black; font-family: century gothic; font-size:12px; text-transform:uppercase; top:-10px; left:155px; position: relative; border:2px solid black; padding:5px; width:90px; } .fearlesscredit { postion:relative; font-size:15px; top:15px; } </style>
<!--HTML--> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> <style>.emailwrap {margin: auto; background: #fefefe; width: 630px; min-height: 250px; } .emailleft, .emailright {display: inline-block; vertical-align: top; } .emailleft {background: #f4f4f4; width: 220px; padding: 10px; min-height: 250px; } .emailimg, .sendername {display: inline-block; vertical-align: top} .emailimg {width: 40px; height: 40px; padding: 3px;} .emailimg img {width: 40px; height: 40px; border: solid 1px #fff} .sendername {font-family: open sans, sans-serif; text-transform: capitalize; font-size: 25px; padding: 5px 2px; color: #555;} .senderemail {font-size: 15px; text-transform: lowercase; padding: 15px 3px} .lefttitle {font-family: open sans, sans-serif; font-size: 15px; color: #555; text-transform: lowercase; padding: 3px 8px;} .add {width: 10px; vertical-align: top;} .tobox, .ccbox {background: #fdfdfd; border: solid 2px rgba(177,177,177,0.8); padding: 5px; font-size: 13px; line-height: 14px; margin: 3px; margin-bottom: 6px; text-align: left} .emailright {width: 360px; padding: 10px; } .emailtitle {border-bottom: solid 2px #008299; padding: 9px 5px; font-family: open sans, sans-serif; font-size: 20px;} .emailcontent {padding: 10px; font-size: 13px; line-height: 14px;} </style> <div class="emailwrap"><div class="emailleft"><div class="emailsender"><div class="emailimg"> <img src="http://www.placehold.it/40x40.png"></img> </div> <div class="sendername"> sender name <div class="senderemail"> sender email </div></div><div class="sendingto"><div class="lefttitle">To</div><div class="tobox"> recipient's name; recipient's email; another; another </div><div class="lefttitle">CC</div><div class="ccbox"> cc name; cc email; another; another </div></div></div></div><div class="emailright"><div class="emailtitle"> email title </div><div class="emailcontent"> email content goes here! </div></div></div><div style="font-size: 9px; text-align: center;"><a href="http://shine.b1.jcink.com/index.php?showuser=903">▼</a></div>
<!--HTML--> <link href='http://louiscodes.b1.jcink.com/uploads/louiscodes/louistwitter1.css' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'><style type='text/css'> #CHARACTERNAME .follow { background-color:#HEX CODE HERE!important; } #CHARACTERNAME .box b { color:#HEX CODE HERE!important; } #CHARACTERNAME a { color:#HEX CODE HERE!important; } </style><center><div id='CHARACTERNAME'><div id='louistwit1'><div class='bgpic'> <img src='http://placehold.it/300x100/fdfdfd'> </div><div class='icon'><a href='http://shine.jcink.net/index.php?showuser=599'> <img src='http://placehold.it/100/fdfdfd'> </a></div><div class='name'> First Last </div><div class='handle'> @handlehere </div><div class='follow'>follow</div><div class='bio'> your twitter bio goes here </div><div class='boxes'><div class='box'> Tweets<b>#</b></div><div class='box'> Following<b>#</b></div><div class='box'> Followers<b>#</b></div><div class='box'> Favorites<b>#</b></div></div></div></div></center>
<!--HTML--> <link href='http://louiscodes.b1.jcink.com/uploads/louiscodes/louistwitter1.css' rel='stylesheet' type='text/css'><style type='text/css'> #CHARACTERNAME-tweet a { color:#HEX CODE HERE!important; } </style><center> <div id='CHARACTERNAME-tweet'><div id='louistwitb1'><table cellpadding='0' cellspacing='0'><td valign='top'><div class='icon'><img src='http://placehold.it/100/fdfdfd'></div></td><td valign='top'><div class='second'><div class='name'>First Last <i>@handlehere</i></div><p> Willow. this girls got talent. look out! </p></div></td></table></div></div> </center>
<!--HTML--> <style type="text/css"> #jinxsevena { position: relative; width: 500px; height: 450px; background: #e7e7e7; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; overflow: hidden; } .avatara img { position: absolute; width: 120px; height: 120px; top: 100px; left: 20px; border: 5px solid #fff; -webkit-border-radius: 5%; -moz-border-radius: 5%; border-radius: 5%; } .stat { width: 70px; padding: 10px 5px 0px; color: #555; font: 10px arial; text-transform: uppercase; text-align: center; } .stats { padding: 5px; color: #06a2cb; font: 18px arial; text-align: center; } .following { position: absolute; width: 75px; height: 5px; top: 15px; margin-left: 5px; padding: 10px; background: #54aaec; color: #fff; font: bold 13px/5px arial; display: inline-block; text-align: center; -webkit-border-radius: 5%; -moz-border-radius: 5%; border-radius: 5%; border: 1px solid #3b88c3; } .tweetm { width: 290px; padding: 10 10 0px; background: #fff; color: #000; font: 11px arial; } </style><center><div id="jinxsevena"><div style="width: 500px; height: 175px; background: url(500X150 IMG HERE);"></div><div class="avatara"><a href="http://shine.b1.jcink.com/index.php?showuser=13521"><img src="120X120 IMG HERE" width="120" height="120"></a></div><table cellspacing="0" cellpadding="0" style="position: absolute; top: 175px; left: 150px;"><tr><td class="stat">TWEETS</td><td class="stat">FOLLOWING</td><td class="stat">FOLLOWERS</td></tr></tr><td class="stats">824</td> <td class="stats">126</td> <td class="stats">15.8M</td><td><div class="following">Following</div></td></tr></table><table cellspacing="10" cellpadding="0" style="position: absolute; height: 200px; top: 230px; left: 10px; overflow: auto;"><tr><td style="width: 150px; font: 14px arial;"> <span style="font: bold 18px arial;">NAME</span><br><font color="#aaaaaa">@USERNAME</font><p> BRIEF DESCRIPTION/BIOGRAPHY <p><table cellspacing="1" cellpadding="0"><td><img src="http://i.imgur.com/dWf0Tlf.png"></td><td style="font: 14px/23px arial; padding-left: 5px;">LOCATION<br><span style="color: #06a2cb;">WEBSITE</span><br>Joined MONTH YEAR </td></tr></table></td><td><div class="tweetm" style="position: absolute; top: 10px;"><img src="AVATAR IMG HERE" width="30" height="30" style="position: absolute; padding-right: 10px;"><div style="padding-left: 40px;"><b>NAME</b><font color="#aaaaaa">@USERNAME · MON D</font><br> TWEET EQUAL OR UNDER 140 CHARACTERS GOES HERE <p><img src="http://i.imgur.com/VIGC0CN.png" height="15"></div> </tr></table></div></center>
<!--HTML--> <style type="text/css"> #jinxsevenb { position: relative; width: 420px; height: 245px; padding: 15px; background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 1px solid #ccc; overflow: hidden; } .avatarb img { width: 70px; height: 70px; -webkit-border-radius: 5%; -moz-border-radius: 5%; border-radius: 5%; } .handle { width: 225px; color: #aaa; font: 11px arial; text-align: left; } .follow { width: 75px; height: 5px; padding: 10px; background: #54aaec; color: #fff; font: bold 13px/5px arial; display: inline-block; text-align: center; -webkit-border-radius: 5%; -moz-border-radius: 5%; border-radius: 5%; border: 1px solid #3b88c3; } .tweet { width: 410px; height: 100px; color: #000; font: 20px/22px georgia; text-align: left; } .tweet img { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } </style><center><div id="jinxsevenb"><table cellspacing="15" cellpadding="0" width="450" style="float: left;"><tr><td class="avatarb"><a href="http://shine.b1.jcink.com/index.php?showuser=13521"><img src="AVATAR IMG HERE"></a></td><td class="handle"><span style="color: #000; font: bold 15px arial;">NAME</span><br>@USERNAME</td><td><div class="follow">Following</div></td></tr></table><p><div class="tweet"> TWEET EQUAL OR UNDER 140 CHARACTERS GOES HERE <p><img src="http://i.imgur.com/VIGC0CN.png"><p><span class="handle">7:42 AM - 5 Jan 2015</div></table></div></center>
<!--HTML--> <link href='http://sunshinepumpkin.b1.jcink.com/uploads/sunshinepumpkin/tweet.css' rel='stylesheet' type='text/css'> <center><div class="tweet" style="background-image: url(http://placehold.it/450x250);"><div class="tweeti"><a href="http://shine.b1.jcink.com/index.php?showuser=54"><img src="http://placehold.it/100"/></a></div><div class="tweetn"> first last </div><div class="tweeth"> @username </div></div><div class="tweetb"><table cellpadding="0" cellspacing="0"><td>1923<br>[b]tweets[/b]</td><td>96<br>[b]followers[/b]</td><td>194<br>[b]following[/b]</td><td><div class="tweetf">+ followed</div></td></table></div></center>
<!--HTML--> <link href='http://sunshinepumpkin.b1.jcink.com/uploads/sunshinepumpkin/tweet.css' rel='stylesheet' type='text/css'><center><div class="tweets"><div style="float: left;"><a href="http://shine.b1.jcink.com/index.php?showuser=54"><img src="http://placehold.it/100"/></a></div><h1> @username </h1><br><h2> first last </h2> tweet goes here lol tweet goes here lol tweet goes here lol tweet goes here lol tweet goes here lol tweet goes here lol tweet goes here lol tweet goes here lol [b]#hashtag[/b] <div class="tweetsl"> ##/## @ ##:## a/pm © username</div></div></center>
<!--HTML--> <center><link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><style type="text/css"> .hobts { width: 500px; box-shadow: 0px 0px 5px rgba(0,0,0,0.1); } .hobts1 { width: 500px; height: 45px; background-color: #fbfbfb; } .hobts1a { width: 45px; height: 45px; color: #565656; font-size: 30px; text-align: center; line-height: 45px; } .hobts1a i { text-align: center; line-height: 45px; } .hobts1b { width: 258px; height: 45px; padding: 0px 15px; background-color: #fcfcfc; color: #d1d1d1; font-family: source sans pro; font-size: 11px; font-weight: 400; font-style: normal; text-align: left; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 45px; border-left: 1px solid #f3f3f3; border-right: 1px solid #f3f3f3; cursor: text; } .hobts1b i { margin-right: 5px; -webkit-transition: .6s ease-in-out; -moz-transition: .6s ease-in-out; -ms-transition: .6s ease-in-out; -o-transition: .6s ease-in-out; transition: .6s ease-in-out; } .hobts1b:hover i { color: #ec2828; } .hobts1c { width: 54px; height: 35px; padding: 5px 15px; color: #d1d1d1; font-size: 12px; line-height: 35px; cursor: pointer; } .hobts1c img { width: 35px; height: 35px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .hobts1c i { margin-left: 5px; -webkit-transition: .6s ease-in-out; -moz-transition: .6s ease-in-out; -ms-transition: .6s ease-in-out; -o-transition: .6s ease-in-out; transition: .6s ease-in-out; } .hobts1c:hover i { color: #ec2828; } .hobts1d { width: 70px; height: 35px; padding: 5px; background-color: #ec2828; color: #fafafa; font-family: source sans pro; font-size: 11px; font-weight: 400; font-style: normal; text-align: center; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 35px; cursor: pointer; } .hotbs2 { width: 420px; padding: 0px 40px; background-color: #1C2022; overflow: hidden; } .hotbs2 iframe { display: block; width: 420px; height: 236px; box-shadow: 0px 0px 8px rgba(0,0,0,0.5); } .hotbs3 { width: 470px; padding: 15px; background-color: #272C2E; } .hotbs3a { width: 45px; } .hotbs3a img { display: inline-block; width: 45px; height: 45px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; margin-right: 15px; } .hotbs3b { width: 100px; padding: 0px 15px; color: #68737B; font-family: source sans pro; font-size: 11px; font-weight: 700; font-style: normal; text-align: left; text-transform: uppercase; text-decoration: none; letter-spacing: -1px; word-spacing: 1px; line-height: 100%; } .hotbs3c { width: 60px; height: 34px; padding: 8px 0px; color: #3e4549; font-family: source sans pro; font-size: 10px; font-weight: 700; font-style: normal; text-align: center; text-transform: uppercase; text-decoration: none; letter-spacing: -1px; word-spacing: 1px; line-height: 100%; border-left: 1px solid #34393d; -webkit-transition: .6s ease-in-out; -moz-transition: .6s ease-in-out; -ms-transition: .6s ease-in-out; -o-transition: .6s ease-in-out; transition: .6s ease-in-out; cursor: pointer; } .hotbs3c i { display: block; font-size: 17px; margin-bottom: 5px; } .hotbs3c:hover { color: #68737B; } .hotbs4 { width: 400px; padding: 25px 50px; background-color: #fbfbfb; color: #686868; font-family: source sans pro; font-size: 10px; font-weight: 400; font-style: normal; text-align: left; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 1px; line-height: 100%; } .hotbs4 b { color: #686868; font-family: source sans pro; font-size: 17px; font-weight: 700; font-style: normal; text-align: inherit; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 1px; line-height: 100%; margin-right: 15px; } .hotbs4 i { color: #B4C4CF; font-family: source sans pro; font-size: 10px; font-weight: 400; font-style: italic; text-align: inherit; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 1px; line-height: 100%; } .hotbs4 a { color: #B4C4CF; font-family: source sans pro; font-size: 10px; font-weight: 400; font-style: normal; text-align: inherit; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 1px; line-height: 100%; } </style><div class="hobts"> <div class="hobts1"><table cellpadding="0" cellspacing="0"><td><a href="http://shine.jcink.net/index.php?showuser=3019"><div class="hobts1a"><i class="fa fa-youtube"></i></div></a></td><td><div class="hobts1b"><i class="fa fa-search"></i> Search</div></td><td><div class="hobts1c"><img src="http://placehold.it/100x100"><i class="fa fa-chevron-down"></i></div></td><td><div class="hobts1d">Upload <i class="fa fa-upload"></i></div></td></table></div> <div class="hotbs2"> PASTE EMBED CODE HERE!!! </div> <div class="hotbs3"><table cellpadding="0" cellspacing="0"><td><div class="hotbs3a"><img src="http://placehold.it/100x100"></div</td><td><div class="hotbs3b"> NAME </div></td><td><div class="hotbs3c"><i class="fa fa-comments"></i>comments</div></td><td><div class="hotbs3c"><i class="fa fa-plus-circle"></i>add to</div></td><td><div class="hotbs3c"><i class="fa fa-share-square-o"></i>share</div></td><td><div class="hotbs3c"><i class="fa fa-thumbs-up"></i>like</div></td><td><div class="hotbs3c"><i class="fa fa-thumbs-down"></i>dislike</div></td></table></div> <div class="hotbs4"><b>Title</b><br><i>Published on Month DD, YEAR</i><p> VIDEO DESCRIPTION HERE </div> </div> </center>
<!--HTML--> <center><link href='http://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' type='text/css'><link rel='stylesheet' type='text/css' href='http://nevermore.b1.jcink.com/uploads/nevermore/skinnylove.css'><style type='text/css'> #name #tba-header { background-color: #c76e92; } #name div.tba-text { background-color: #c76e92; } #name .tba-footer a { color: #c76e92; } #name div.tba-text::after { border-color: #c76e92; } /* STATUS */ #name .tba-status span.fa.fa-check-circle { color: #a9da88; } </style> <div id="name"><div id="tba-aim"> <div id="tba-header"><img src="http://placehold.it/85x85"/><div class="tba-info"><div class="tba-name">username</div><div class="tba-display">first last</div><div class="tba-status"><span class="fa fa-check-circle"></span>short status</div></div></div> <div class="tba-box"> <div class="tba-text">text here!</div> </div> <div class="tba-footer"><table cellpadding="0" cellspacing="0"><td class="tba-msg"><img src="http://i.imgur.com/jTJZWEE.gif" /></td><td><a href="http://shine.b1.jcink.com/index.php?showuser=3019">Send</a></td></table></div></div></div> </center>
<!--HTML--> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><style type="text/css"> .bch1 { width: 110px; height: 200px; padding: 45px 25px; background-color: #827ccd; } .bch1a { position: relative; width: 90px; height: 90px; margin: 10px 10px 15px; } .bch1a img { position: relative; width: 90px; height: 90px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } .bch1b { color: #fcfcfc; font-family: montserrat; font-size: 15px; font-weight: 700; font-style: normal; text-align: center; text-transform: uppercase; text-decoration: none; letter-spacing: -1px; word-spacing: 0px; line-height: 100%; } .bch1a .online { position: absolute; bottom: 0px; right: 5px; width: 13px; height: 13px; background-color: #78c366; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; z-index: 2; border: 3px solid #827ccd; } .bch1c { margin-top: 5px; color: rgba(255,255,255,0.5); font-family: montserrat; font-size: 8px; font-weight: 400; font-style: normal; text-align: center; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 100%; } .bch2 { width: 248px; height: 288px; background-color: #fefefe; border: 1px solid #EDEEF3; } .bch2a { padding: 10px; color: #B2BAC3; font-family: montserrat; font-size: 8px; font-weight: 400; font-style: normal; text-align: left; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 1px; line-height: 100%; border-bottom: 1px solid #E7EAF2; } .bch2a i { float: right; } .bch2b { height: 190px; padding: 10px; overflow-y: auto; overflow-x: hidden; margin-right: 5px; } .bch2b::-webkit-scrollbar { width: 3px; } .bch2b::-webkit-scrollbar-track { background: transparent; } .bch2b::-webkit-scrollbar-thumb { background-color: #e5e5e5; border-radius: 20px; } .bch2b::-webkit-scrollbar-button:start:decrement, .bch2b::-webkit-scrollbar-button:end:increment { height: 5px; display: block; background-color: #fcfcfc; border: 0px; } .bch2c { width: 228px; height: 28px; padding: 10px; background-color: #F8F8F8; color: #B2BAC3; font-family: montserrat; font-size: 8px; font-weight: 400; font-style: normal; text-align: left; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; border-top: 1px solid #E7EAF2; } .bch2d { width: 206px; height: 6px; padding: 10px; background-color: #fefefe; color: #B2BAC3; font-family: montserrat; font-size: 8px; font-weight: 400; font-style: normal; text-align: left; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 6px; border: 1px solid #EDEFF3; } .bch2d span { float: right; color: #A49FDB; font-family: montserrat; font-size: 8px; font-weight: 400; font-style: normal; text-align: left; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 6px; } .bch2d i { float: left; font-size: 12px; line-height: 6px; margin-right: 8px; } .bchbubble { display: inline-block; clear: both; float: right; position: relative; max-width: 130px; padding: 8px 12px; background-color: #827ccd; color: #fafafa; font-family: montserrat; font-size: 9px; font-weight: 400; font-style: normal; text-align: left; text-transform: none; text-decoration: none; letter-spacing: 0px; word-spacing: 0px; line-height: 100%; word-wrap: break-word; margin: 3px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; z-index: 4; } .bchbubble:after { content: ""; position: absolute; bottom: 0px; right: -26px; width: 15px; height: 30px; clip: rect(15px,20px,45px,0px); border-color: #827ccd; border-width: 0px 12px; border-style: solid; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; z-index: 3; } #NAME .bch1, #NAME .bchbubble { background-color: #HEXCODE } #NAME .bchbubble:after, #NAME .bch1a .online { border-color: #HEXCODE } #NAME .bch2d span { color: #HEXCODE } </style><center><div id="NAME"> <table cellpadding="0" cellspacing="0"><tr><td><div class="bch2"> <div class="bch2a">To: First Last<i class="fa fa-chevron-right"></i></div><div class="bch2b"> <div class="bchbubble">message here~</div> <div class="bchbubble">also a message?</div> <div class="bchbubble">holy cakeballs, batman! another message!</div> </div><div class="bch2c"><div class="bch2d"><i class="fa fa-camera"></i>Send Message...<span>Send</span></div></div></div></td><td><div class="bch1"><div class="bch1a"><a href="http://shine.jcink.net/index.php?showuser=3019"><img src="https://placehold.it/100x100"></a><div class="online"></div></div><div class="bch1b">First Last</div><div class="bch1c">"status message here"</div></div></td></tr></table></div> </center>
Вы здесь » пробник. диз. заготовки. » всякий разный » шастунчик