Followers 1

Say I Love You When You're Not Listening

(0 reviews)

Template Preview
Template Code

Template code

<link href="https://fonts.googleapis.com/css?family=Fira+Mono|Great+Vibes" rel="stylesheet">
<center>
<style>
  .box {height: 400px; width: 475px; position: relative; background: #F2EBBF; border-top: 10px solid black; border-bottom: 10px solid black; border-left: 25px solid black; border-right: 20px solid black; overflow: hidden; margin-top: 15px;}
  .line {height: 325px; width: 1px; position: absolute; background: gray; left: 225px; top: 30px; opacity: .5}
  .postbox1 {height: 263px; width: 180px; padding: 10px; background: white; border: 1px solid black; position: absolute; color: black; font-family: 'Fira Mono', monospace; font-size: 10px; left: 12px; top: 85px; overflow: auto; text-indent: 10px; text-align: justify;}
  .postbox2 {height: 263px; width: 180px; padding: 10px; background: white; border: 1px solid black; position: absolute; color: black; font-family: 'Fira Mono', monospace; font-size: 10px; left: 236px; top: 85px; overflow: auto; text-indent: 10px; text-align: justify;}
  .title1 {height: 44px; width: 180px; padding: 10px; background: white; border: 1px solid black; position: absolute; font-family: 'Great Vibes', cursive; color: black; font-size: 25px; top: 12px; left: 12px; line-height: 2; letter-spacing: 1.5; text-align: center; box-shadow: 0px 0px 5px gray;}
  .title2 {height: 44px; width: 180px; padding: 10px; background: white; border: 1px solid black; position: absolute; font-family: 'Great Vibes', cursive; color: black; font-size: 25px; top: 12px; left: 236px; line-height: 2; letter-spacing: 1.5; text-align: center; box-shadow: 0px 0px 5px gray;}
  .totaltitle {padding: 5px; width: 465px; height: 10px;; z-index: 15; background: rgba(173,0,0,.75); font-family: 'Great Vibes', cursive; font-size: 18px; position: absolute; top: 376px; font-weight: bold; line-height: .8; text-align: center; letter-spacing: 1.5; color: black;}
  .pagetab {float: left}
  .pagetab [type=radio] {display: none}
  .pagetab label {display: block; padding: 5px; background-color: gray; height: 10px; width: 10px; border: 1px solid black; position: absolute; left: 455px; top: 0px; z-index: 20; font-family: 'Great Vibes', cursive; font-size: 10px; color: black;}
  .pagecontent {top: 0px; height: 400px; width: 450px; position: absolute; left: 500px;  transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; z-index: 10;}
  [type=radio]:checked ~ label {width: 15px; background-color: #00B5B2; left: 450px; z-index: 20;}
  [type=radio]:checked ~label ~ .pagecontent {left: 0px; top: 0px; z-index: 10}
  .pagecredit {font-family: 'space mono', monospace; color: red; font-size: 8px; position: absolute;  left: 222px; top: 360px; z-index: 20;}
  .pagecredit a {font-family: 'space mono', monospace; color: red; font-size: 8px; text-decoration: none;}
</style>
<div class="box">
  <div class="pagetab"><input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1">1</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">Post here, it scrolls!</div>
    <div class="title2">Name</div>
    <div class="postbox2">Post here, it scrolls!</div>
    <div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2" style="top: 21px">2</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">Post here, it scrolls!</div>
    <div class="title2">Name</div>
    <div class="postbox2">Post here, it scrolls!</div>
    <div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-3" name="tab-group-1"><label for="tab-3" style="top: 42px">3</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">Post here, it scrolls!
</div>
    <div class="title2">Name</div>
    <div class="postbox2">Post here, it scrolls!</div>
    <div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-4" name="tab-group-1"><label for="tab-4" style="top: 63px">4</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">Post here, it scrolls!
</div>
    <div class="title2">Name</div>
    <div class="postbox2">Post here, it scrolls!</div>
    <div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-5" name="tab-group-1"><label for="tab-5" style="top: 84px">5</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">
Post here, it scrolls!</div>
<div class="title2">Name</div>
    <div class="postbox2">
Post here, it scrolls!</div>
<div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-6" name="tab-group-1"><label for="tab-6" style="top: 105px">6</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">
Post here, it scrolls!</div>
    <div class="title2">Name</div>
    <div class="postbox2">
Post here, it scrolls!</div>
<div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-7" name="tab-group-1"><label for="tab-7" style="top:126px">7</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">
Post here, it scrolls!</div>
    <div class="title2">Name</div>
    <div class="postbox2">
Post here, it scrolls!</div>
    <div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-8" name="tab-group-1"><label for="tab-8" style="top: 147px">8</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">
Post here, it scrolls!</div>
    <div class="title2">Name</div>
    <div class="postbox2">
Post here, it scrolls!</div>
    <div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-9" name="tab-group-1"><label for="tab-9" style="top: 168px">9</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">
Post here, it scrolls!</div>
    <div class="title2">Name</div>
    <div class="postbox2">
Post here, it scrolls!</div>
    <div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-10" name="tab-group-1"><label for="tab-10" style="top: 189px">10</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">
Post here, it scrolls!</div>
    <div class="title2">Name</div>
    <div class="postbox2">
Post here, it scrolls!</div>
    <div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-11" name="tab-group-1"><label for="tab-11" style="top: 210px">11</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">
Post here, it scrolls!</div>
    <div class="title2">Name</div>
    <div class="postbox2">
Post here, it scrolls!</div>
    <div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-12" name="tab-group-1"><label for="tab-12" style="top: 231px">12</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">
Post here, it scrolls!</div>
    <div class="title2">Name</div>
    <div class="postbox2">
Post here, it scrolls!</div>
    <div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-13" name="tab-group-1"><label for="tab-13" style="top: 252px">13</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">
Post here, it scrolls!</div>
    <div class="title2">Name</div>
    <div class="postbox2">
Post here, it scrolls!</div>
    <div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-14" name="tab-group-1"><label for="tab-14" style="top: 273px">14</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">
Post here, it scrolls!</div>
    <div class="title2">Name</div>
    <div class="postbox2">
Post here, it scrolls!</div>
    <div class="totaltitle">Title goes here!</div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-15" name="tab-group-1"><label for="tab-15" style="top: 294px">15</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1">
Post here, it scrolls!</div>
    <div class="title2">Name</div>
    <div class="postbox2"></div>
    <div class="totaltitle">Penny Title goes here! </div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-16" name="tab-group-1"><label for="tab-16" style="top: 315px">16</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1"></div>
    <div class="title2">Name</div>
    <div class="postbox2"></div>
    <div class="totaltitle"> Title goes here! </div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-17" name="tab-group-1"><label for="tab-17" style="top: 336px">17</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1"></div>
    <div class="title2">Name</div>
    <div class="postbox2"></div>
    <div class="totaltitle"> Title goes here! </div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-18" name="tab-group-1"><label for="tab-18" style="top: 357px">18</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1"></div>
    <div class="title2">Name</div>
    <div class="postbox2"></div>
    <div class="totaltitle"> Title goes here! </div>
  </div>
  </div>
  <div class="pagetab"><input type="radio" id="tab-19" name="tab-group-1"><label for="tab-19" style="top: 378px">19</label>
  <div class="pagecontent">
    <div class="line"></div>
    <div class="title1">Name</div>
    <div class="postbox1"></div>
    <div class="title2">Name</div>
    <div class="postbox2"></div>
    <div class="totaltitle"> Title goes here! </div>
  </div>
  </div>
  <div class="pagecredit"><a href="https://rpginitiative.com/profile/2592-penny/">♔</a></div>
</div>
</center>

By Penny

Report Code

Followers 1

Go to codes Thread Trackers

User Feedback

0 Reviews

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Your name
Your rating Required

1 2 3 4 5
Your review Required
Add a review...

× Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.

× Your link has been automatically embedded.   Display as a link instead

× Your previous content has been restored.   Clear editor

× You cannot paste images directly. Upload or insert images from URL.

Insert other media

Insert existing attachment

Insert image from URL
×

Desktop

Tablet

Phone

Announcements

Join or Create a Coterie!

What is the Codex?

The Codex is a collection of copy and paste codes for use within roleplays. While the colors, sizes and use vary these codes are available for free from the author of the code available on the Initiative. For codes that require more than copying and pasting please check out our coding guides.
Remember to review your code!

When you use a code within our Codex we encourage you to review it and to post a screenshot of it's use. This encourages our contributors to make more.
Categories
Show all categories
Recent Codes
- 0
  
  Who's Who Challenge Entry
  
  By The Rebel
  January 11
- 0
  
  A shipper with place for current ships
  
  By Kit the Human
  January 31
- 0
  
  Who's Who List with user's Avatar
  
  By Morrigan
  January 12
- 0
  
  Simple Who's Who List
  
  By Kit the Human
  January 5
- 0
  
  Another Site Top Box
  
  By Kit the Human
  October 4, 2018
- 0
  
  Best Friends
  
  By memoria
  July 25, 2018
- 0
  
  Banner Code Generator
  
  By memoria
  September 16, 2018
- 0
  
  Friends Not Food
  
  By memoria
  June 24, 2018
- 0
  
  Swan Lake
  
  By Jones
  August 16, 2018
- 0
  
  From Outer Space
  
  By Penny
  July 25, 2018
- 0
  
  "Your File" Challenge Application Template
  
  By The Rebel
  July 24, 2018
- 0
  
  Wandering Child of the Earth
  
  By Penny
  July 30, 2018
- 0
  
  Sleeping with the Moon and the Stars
  
  By Penny
  July 30, 2018
- 0
  
  Dance the Night Away
  
  By Penny
  July 30, 2018
- 0
  
  Showtime
  
  By Penny
  July 30, 2018

Sign In

Say I Love You When You're Not Listening

Actual Template Not Responsive

Template code

User Feedback

Join the conversation

Announcements

What is the Codex?

Remember to review your code!

Categories

Recent Codes

RPG Resources

Activity

My Activity Streams

Community

Sponsors

Important Information