Add ReplyNew Thread

 i got a heavy soul, plot page/want ad
MAX ROCKATANSKY
 Posted: March 13th, 2014, 04:39 PM
Quote
Advanced Member
Posts:65Group:MemberJoined:November 19th, 2013
Send Message


HELLO BEAUTIFUL!

I see you're thinking about using my template and that's way super cool like whoa. You can totes change the colours if'n you want (if you know how) just don't remove my credit because that would make you a meanie and meanies make me cry. The colour used in this template is #542D91. It would also be pretty super cool if you linked me to where you're using it. Thanks for being beautiful. Also this code takes a wee bit of DIY to make it expand! I promise it's not hard at all if you just follow my instructions, though.

Instructions: The final line in the second section of CSS (selector = .hvysl:hover .inner), the first styling item reads as follows: height: XXpx;. To make this code work, you simply need to change the XX to however many ads you're including TIMES 325. So one ad = 325, two ads = 650, five ads = 1625, etc. If you need help, feel free to PM me!




i always walk tall, taller than the clouds


khaleesi

daenerys
targaryen

mother of dragons
fifteen
emilia clarke

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac ornare nisi, vitae ultrices enim. Mauris vitae fermentum felis, eget venenatis nibh. Donec non vulputate quam, non viverra lorem. Vestibulum non rhoncus nisl. Integer at purus nec turpis aliquam mattis at quis dui. Pellentesque eget lacinia odio, ac tincidunt massa. Etiam feugiat, velit sit amet molestie semper, tortor ipsum dapibus sem, sit amet malesuada libero velit quis dolor. Donec in lacus et magna mollis rhoncus fringilla at lorem. Sed a dui mollis, dictum orci consequat, lobortis nunc.

Vestibulum dapibus enim augue, sed iaculis justo dignissim quis. Ut id bibendum velit. Ut sed massa id enim pharetra vehicula id ac justo. Quisque non mollis risus. In vehicula orci pretium lobortis fermentum. Curabitur sit amet urna nibh. Maecenas vitae auctor nulla. Proin bibendum ipsum quis nunc placerat, in rhoncus nulla tempor. Morbi non quam nec lorem viverra blandit.

Nullam sodales condimentum porttitor. Sed quis feugiat dui, ut hendrerit sem. Aenean vehicula, lorem nec posuere lacinia, risus massa facilisis massa, in sagittis sapien odio vitae libero. Nunc eget enim at urna pellentesque convallis ac lacinia nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius vulputate metus. Etiam porta ornare libero, feugiat pharetra odio mattis sed. Proin cursus mauris in hendrerit ultrices. Phasellus convallis iaculis condimentum. Duis et tortor nec lectus aliquam sollicitudin ut quis mauris. Praesent et turpis vel leo lacinia semper. Ut pharetra odio massa, id accumsan elit molestie id. Morbi auctor arcu velit, sed pharetra tortor convallis tempor. Curabitur hendrerit tortor quam, hendrerit bibendum lorem blandit a. Proin in leo tellus. Quisque at metus enim.

Aenean iaculis magna ut mollis mollis. Curabitur scelerisque vehicula lectus eu volutpat. Donec feugiat diam eu lorem interdum bibendum. Suspendisse libero magna, pretium ut ipsum eu, congue elementum nunc. Maecenas rutrum blandit erat, at ullamcorper magna dapibus at. Morbi tincidunt dolor neque, ut mattis tortor tempus ut. Nullam faucibus, nisl ut adipiscing dictum, dui sem viverra erat, eu scelerisque turpis est at enim. Suspendisse potenti. Duis non urna malesuada, ullamcorper quam ut, tempus odio. Ut eu leo vel elit dictum sollicitudin. Nulla ipsum magna, tincidunt nec blandit sed, scelerisque non dolor.

Nullam condimentum est ac tristique fringilla. Vivamus blandit lorem turpis, sed dapibus augue dapibus sed. Nulla facilisi. Mauris mi nisi, viverra vitae arcu ac, lacinia mollis lacus. Aenean porttitor imperdiet urna, non pellentesque nibh volutpat quis. Duis fermentum enim quis facilisis euismod. Pellentesque malesuada aliquam nibh, id viverra nibh mollis ultricies. Donec tellus ante, porttitor id odio vel, vestibulum consectetur sapien. Quisque dignissim porta libero, non mattis augue egestas eget. Nullam a est vestibulum, commodo dolor in, aliquet metus. Etiam volutpat fringilla ante, ut euismod purus porttitor vitae.


when the rain starts to fall




CODE
[dohtml]<style type="text/css">

.jscred { width: 480px; text-align: right; }
.jscred a { font-size: 8px; font-family: Times,serif; margin-top: 5px; line-height: 100%; text-transform: uppercase; color: black; font-style: italic; }

.hvysl { width: 500px; }
.hvysl .inner { height: 0px; overflow: hidden; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; }
.hvysl:hover .inner { height: XXpx;  -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; }

.hvysl .acnt { width: 500px; height: 100px; padding: 50px 0px; border-top: 25px solid #222222; }
.hvysl .acnt:first-of-type { border: none; }
.hvysl .acnt h1 { color: white; text-align: center; margin: 0px; font-weight: normal; width: 270px; font-family: times, serif; font-size: 7px; letter-spacing: 1px; border-top: 1px solid white; border-bottom: 1px solid white; padding: 40px 0px; text-transform: uppercase; }
.hvysl .acnt hr { border: none; height: 1px; background-color: white; width: 260px; }

.hvysl .ad { width: 500px; height: 300px; position: relative; overflow: hidden; border-top: 25px solid #222222; }
.hvysl .ad img { width: 500px!important; height: 300px!important; display: block!imporant; }
.hvysl .ad h1 { z-index: 2; background-color: 542D91; width: 100px; height: 8px; padding: 46px 0px; text-align: center; font-weight: normal; font-size: 7px; text-transform: uppercase; line-height: 8px; letter-spacing: 1px; font-family: Times, serif; color: white; opacity: 0.7; position: absolute; top: 25px; left: 50px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; -webkit-transform:rotate(-7deg); -moz-transform:rotate(-7deg); -o-transform: rotate(-7deg); -webkit-transition: 0.8s all ease-in-out 0.6s; -moz-transition: 0.8s all ease-in-out 0.6s; -o-transition: 0.8s all ease-in-out 0.6s; }
.hvysl .ad:hover h1 { opacity: 0; -webkit-transform:rotate(713deg); -moz-transform:rotate(713deg); -o-transform: rotate(713deg); -webkit-transition: 0.8s all ease-in-out 0.6s; -moz-transition: 0.8s all ease-in-out 0.6s; -o-transition: 0.8s all ease-in-out 0.6s; }

.hvysl .ad h3 { z-index: 2; background-color: 542D91; width: 100px; height: 24px; padding: 38px 0px; text-align: center;  -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; font-weight: normal; font-size: 7px; text-transform: uppercase; line-height: 12px; letter-spacing: 1px; font-family: Times, serif; -webkit-transform:rotate(-7deg); -moz-transform:rotate(-7deg); -o-transform: rotate(-7deg); color: white; opacity: 0; position: absolute; top: 25px; left: 50px; -webkit-transition: 0.8s all ease-in-out 0.6s; -moz-transition: 0.8s all ease-in-out 0.6s; -o-transition: 0.8s all ease-in-out 0.6s; }
.hvysl .ad:hover h3 { opacity: 0.7; -webkit-transform:rotate(713deg); -moz-transform:rotate(713deg); -o-transform: rotate(713deg); -webkit-transition: 0.8s all ease-in-out 0.6s; -moz-transition: 0.8s all ease-in-out 0.6s; -o-transition: 0.8s all ease-in-out 0.6s; }

.hvysl .ad .ban { width: 120px; height: 0px; background-color: 222222; -webkit-transition: 0.8s all ease-in-out 0.6s; -moz-transition: 0.8s all ease-in-out 0.6s; -o-transition: 0.8s all ease-in-out 0.6s; position: absolute; top: 0px; left: 40px; opacity: 0.6; }
.hvysl .ad:hover .ban { height: 300px; -webkit-transition: 0.8s all ease-in-out 0.6s; -moz-transition: 0.8s all ease-in-out 0.6s; -o-transition: 0.8s all ease-in-out 0.6s; }

.hvysl .ad h2 { font-family: white; font-size: 7px; line-height: 14px; letter-spacing: 1px; width: 100px; margin: 0px; text-transform: uppercase; font-family: Times, serif; position: absolute; left: 50px; bottom: 0px; opacity: 0; -webkit-transition: 0.8s all ease-in-out 0.2s; -moz-transition: 0.2s all ease-in-out 0.2s; -o-transition: 0.8s all ease-in-out 0.2s; font-weight: normal; color: white; }
.hvysl .ad:hover h2 { bottom: 25px; opacity: 0.8; -webkit-transition: 0.8s all ease-in-out 1.4s; -moz-transition: 0.8s all ease-in-out 1.4s; -o-transition: 0.8s all ease-in-out 1.4s; }

.hvysl .ad .content {width: 0px; height: 200px; position: absolute; top: 50px; right: 50px; background-color: white; opacity: 0.7; -webkit-transition: 0.8s all ease-in-out 1s; -moz-transition: 0.2s all ease-in-out 0.2s; -o-transition: 0.8s all ease-in-out 0.2s; }
.hvysl .ad:hover .content { width: 290px; -webkit-transition: 0.8s all ease-in-out 1.4s; -moz-transition: 0.8s all ease-in-out 1.4s; -o-transition: 0.8s all ease-in-out 1.4s; }

.hvysl .ad .txt { color: black; opacity: 0; font-family: Times, serif; font-size: 10px; line-height: 150%; width: 266px; height: 180px; padding-right: 4px; overflow: auto; text-align: justify; -webkit-transition: 0.8s all ease-in-out 0.2s; -moz-transition: 0.2s all ease-in-out 0.2s; -o-transition: 0.8s all ease-in-out 0.2s; position: absolute; top: 60px; right: 60px; }
.hvysl .ad:hover .txt { opacity: 0.9; -webkit-transition: 0.8s all ease-in-out 2.2s; -moz-transition: 0.8s all ease-in-out 1.4s; -o-transition: 0.8s all ease-in-out 1.4s; }
.hvysl .ad .txt::-webkit-scrollbar { width: 4px; background-color: transparent; }
.hvysl .ad .txt::-webkit-scrollbar-thumb { background-color: 222222; }

</style>

<div class="hvysl"><div class="acnt" style="background-image: url(500x200IMG);"><hr><h1>

line of lyrics

</h1><hr></div><div class="inner">

<div class="ad"><img src="500x300IMG" /><h1>

one word

</h1><h3>

first <br />
last

</h3><div class="ban"></div><h2>

membergroup <br />
age <br />
playby

</h2><div class="content"></div><div class="txt">

Content.

</div></div>

</div><div class="acnt" style="background-image: url(500x200IMG);"><hr><h1>

line of lyrics

</h1><hr></div><div class="jscred"><a href="http://code.jfbs.net/index.php?showuser=20" target="_blank">JON SNOW</a></div>[/dohtml]


FOR MORE THAN ONE AD, PASTE THIS IMMEDIATELY AFTER THE TWO CLOSE DIVS (</div>) THAT FOLLOW THE WORD CONTENT:
CODE
<div class="ad"><img src="500x300IMG" /><h1>

one word

</h1><h3>

first <br />
last

</h3><div class="ban"></div><h2>

membergroup <br />
age <br />
playby

</h2><div class="content"></div><div class="txt">

Content.

</div></div>


This post has been edited by JON SNOW.: March 13th, 2014, 09:03 PM
xXSeraphina
 Posted: December 6th, 2014, 05:57 PM
Quote
Newbie
Posts:1Group:New MemberJoined:December 6th, 2014
Send Message


This template's beautiful! Anyway, I'll be using it here c:
MAX ROCKATANSKY
 Posted: December 6th, 2014, 10:03 PM
Quote
Advanced Member
Posts:65Group:MemberJoined:November 19th, 2013
Send Message


awh, well thanks!
RR of DD
 Posted: January 13th, 2015, 07:27 AM
Quote
Member
Posts:13Group:MemberJoined:July 9th, 2014
Send Message


Wow, really awesome template!

Using here

Thank you <3
Website
Pathicord
 Posted: February 13th, 2015, 02:26 AM
Quote
Newbie
Posts:1Group:New MemberJoined:February 13th, 2015
Send Message


Such an awesome template using it here smile.gif
Rabbit
 Posted: March 18th, 2015, 07:44 PM
Quote
Newbie
Posts:1Group:New MemberJoined:March 18th, 2015
Send Message


I love this. I used it. HERE. Thanks so much!!
Email
Jasiko
 Posted: October 18th, 2015, 03:41 AM
Quote
Newbie
Posts:1Group:New MemberJoined:October 18th, 2015
Send Message


Really gorgeous template. Thanks very much. Using it HERE.

This post has been edited by Jasiko: January 5th, 2016, 08:21 PM
Ally
 Posted: October 21st, 2015, 05:10 PM
Quote
Newbie
Posts:2Group:New MemberJoined:October 21st, 2015
Send Message


Such an awesome layout, I'll be using it here
Aira
 Posted: May 5th, 2016, 12:46 AM
Quote
Newbie
Posts:1Group:New MemberJoined:May 5th, 2016
Send Message


Pandasaurus Dragon
 Posted: August 6th, 2016, 03:54 PM
Quote
Newbie
Posts:1Group:New MemberJoined:August 6th, 2016
Send Message


storing in this thread for later use as a posting template or a plot/tracker thing...probably both. i really, really love this table.
Shilohx
 Posted: January 15th, 2017, 05:22 PM
Quote
Newbie
Posts:4Group:New MemberJoined:November 22nd, 2016
Send Message


why is this so beautiful??? ;;
using here!
Mermaid Ariel
 Posted: July 29th, 2017, 10:07 AM
Quote
Newbie
Posts:2Group:New MemberJoined:July 29th, 2017
Send Message


I love this theme! I used it here!
Moonbeam
 Posted: September 5th, 2017, 11:51 PM
Quote
Newbie
Posts:1Group:New MemberJoined:September 4th, 2017
Send Message


<3 This. You made it so easy to make your own too, so thanks!
Using it here

Topic Options Add ReplyNew Thread


 


 

Latest Shouts In The Shoutbox -- View The Shoutbox · Rules   


's reputation