Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- RP MASTERLIST
- Page #01. (RP Page)
- http://noiretblanc-themes.tumblr.com/
- Please don't use this theme as a base or claim it as your own.
- You are free to edit this page as much as you want, please just don't erase the credits.-->
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
- <link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
- <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
- <link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
- <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
- <title>RP Masterlist</title>
- <style>
- body{
- background-color:white; /*Change the color of the main bg here */
- background-image: URL("url"); /*You can put a background image here */
- margin:0;
- padding:0;
- }
- .sidebar{
- background-color:black; /*Change the sidebar color here*/
- background-image: URL("url"); /*You can put a background image here*/
- position:fixed;
- text-align:right;
- height:100%;
- width:160px;
- }
- .sidebarlinks{
- margin-top:210px;
- margin-right:00px;
- }
- .sidebar a{
- font-family: 'Titillium Web', sans-serif;
- color:#ddd;
- text-decoration:none;
- padding-right:10px;
- display:block;
- margin-top:5px;
- border-right:solid 10px white;
- -moz-transition:all .5s ease-in-out; /*For Mozilla Browser*/
- -webkit-transition:all .5s ease-in-out; /*For Chrome and Safari*/
- -o-transition:all .5s ease-in-out; /*For Opera Browser*/
- transition:all .5s ease-in-out;
- }
- .sidebar a:hover{
- border-right:solid 40px black;
- background-color:white;
- color:#222;
- }
- .masterlist{
- width:80%;
- position:fixed;
- top:20px;
- text-align:center;
- font-family: 'Orbitron', sans-serif;
- font-size:28px;
- z-index:99;
- left:160px;
- background-color:transparent;
- }
- #box1{
- width: 85%;
- height: 650px;
- overflow: hidden;
- position: relative;
- left:150px;
- top:60px;
- }
- #box2{
- padding-top:20px;
- position: absolute;
- width: 100%;
- height: 600px;
- overflow: auto;
- padding-right: 500px;
- }
- .threadbox{
- background-color:#f1f1f1; /* Press ctrl+f and search for *BoxColor*. All this should have the same color. */
- height:160px;
- width:300px;
- border-radius:5px;
- margin-top:30px;
- margin-bottom:40px;
- margin-left:40px;
- float:left;
- font-family: 'Yanone Kaffeesatz', sans-serif;
- }
- .title{
- color:#999;
- position:relative;
- top:-20px;
- max-width:200px;
- z-index:70;
- }
- .title i{
- color:#222;
- margin-right:3px;
- }
- .class{
- color:#999;
- position:relative;
- top:-40px;
- right:5px;
- text-align:right;
- }
- .class i{
- margin-right:7px;
- margin-left:5px;
- color:#222;
- }
- .muse{
- color:#222;
- position:relative;
- font-size:18px;
- top:-25px;
- padding-left:10px;
- padding-top:5px;
- padding-bottom:5px;
- width:290px;
- border-bottom:dashed 1px #555;
- border-top:dashed 1px #555;
- background-color:white;
- }
- .subtitle{
- font-family: 'Open Sans Condensed', sans-serif !important;
- display:inline;
- font-size:13px;
- }
- .status{
- position:relative;
- text-align:right;
- float:right;
- top:-48px;
- right:5px;
- font-size:12px;
- width:100px;
- }
- .status i{
- position:relative;
- left:-4px;
- top:0px;
- }
- .loading{
- top:-1px !important;
- }
- .green{
- color:#5ab325;
- }
- .red{
- color:#af102e;
- }
- .yellow{
- color:#cdb302;
- }
- .summary{
- position:relative;
- width:284px;
- top:-35px;
- padding: 0 8px 0 8px;
- height:100px;
- font-size:15px;
- overflow:auto;
- }
- .summary p{
- padding:0;
- margin:0;
- font-family: 'Open Sans Condensed', sans-serif !important;
- font-size:12px;
- }
- ::-webkit-scrollbar {
- width: 2px;
- height: 150px;
- }
- ::-webkit-scrollbar-thumb {
- background: transparent;
- }
- ::-webkit-scrollbar-track {
- background: transparent;
- }
- .links{
- position:relative;
- top:-25px;
- left:15px;
- text-align:center;
- }
- .links a{
- text-decoration:none;
- color:#222;
- background-color:#f1f1f1; /* *BoxColor*.This should have the same color as the main box. */
- padding:3px 8px 6px 8px;
- font-size:12px;
- margin-right:35px;
- border-radius:0 0 6px 6px;
- transition:all 1s ease;
- -webkit-transition-delay:all 1s ease;
- -moz-transition-delay:all 1s ease;
- -ms-transition-delay:all 1s ease;
- -o-transition-delay:all 1s ease;
- }
- .links a:hover{
- letter-spacing:2px;
- }
- .partnername{
- position:absolute;
- left:50px;
- opacity:0;
- background-color:#222;
- color:#f1f1f1;
- border-radius:5px;
- max-width:200px;
- margin-top:10px;
- padding:1px 6px 3px 6px;
- font-size:13px;
- font-family: 'Open Sans Condensed', sans-serif;
- z-index:100;
- transition:all 1s ease;
- -webkit-transition-delay:all .5s ease;
- -moz-transition-delay:all .5s ease;
- -ms-transition-delay:all .5s ease;
- -o-transition-delay:all .5s ease;
- z-index:-100;
- }
- .links a:hover .partnername{
- opacity:1;
- letter-spacing:0;
- }
- #credits{
- position:fixed;
- padding:0;
- margin:0;
- right:0px;
- bottom:2px;
- }
- #credits a{
- font-family: 'Titillium Web', sans-serif;
- font-size:12px;
- color:#fff;
- background-color:#000;
- padding:2px 6px 2px 7px;
- text-decoration:none;
- transition:all 1s ease;
- -webkit-transition: all 1s ease;
- -moz-transition: all 1s ease;
- -o-transition: all 1s ease;
- }
- #credits a:hover{
- background-color:white;
- color:#222;
- }
- </style>
- </head>
- <body>
- <div class="masterlist">RP Masterlist</div>
- <div class="sidebar">
- <div class="sidebarlinks">
- <a href="/">Back</a>
- <a href="url">Link</a>
- <a href="url">Link</a>
- <a href="url">Link</a>
- <a href="url">Link</a>
- <a href="url">Link</a>
- <a href="url">Link</a>
- </div>
- </div>
- <div id="box1">
- <div id="box2">
- <!--Your threads begging here-->
- <!--Thread box. Copy from here-->
- <div class="threadbox">
- <!-- Name of your RP. You can use names to find threads easier in your code. -->
- <div class="title"><i class="fa fa-star"></i>Thread Name</div>
- <!-- Info about your RP -->
- <div class="class">Open RP <i class="fa fa-ellipsis-v"></i> SFW</div>
- <!-- Name of the character + Series -->
- <div class="muse">Name
- <div class="subtitle">(Series)</div></div>
- <!-- Status of the RP**!! (On-Going, Complete, Incomplete). You can replace this code with one of the codes at the bottom of this page. -->
- <div class="status green"><i class="fa-lg fa fa-spinner fa-spin loading"></i>On Going</div>
- <!-- A little summary of the RP -->
- <div class="summary">Summary:
- <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure olor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
- </div>
- <!-- Links of your thread -->
- <div class="links">
- <!-- Name + Link to the person you are rping with -->
- <a href="blog-url" class="partner">Partner <!-- DON'T EDIT THIS-->
- <div class="partnername">Name (edit this)</div></a>
- <!-- Link to the starter of this thread -->
- <a href="url">Starter</a>
- <!-- If your thread is finished, you can erase this line and just leave the next one.
- <a href="link to the last post">Last Post</a>
- Erase this line too. -->
- </div>
- </div>
- <!--End of Thread box-->
- <!--New Thread box-->
- <div class="threadbox">
- <!-- Name of your RP -->
- <div class="title"><i class="fa fa-star"></i>Thread Name</div>
- <!-- Info about your RP -->
- <div class="class">Private RP <i class="fa fa-ellipsis-v"></i> SFW</div>
- <!-- Name of the character + Series -->
- <div class="muse">Name
- <div class="subtitle">(Series)</div></div>
- <!-- Status of the RP**!! (On-Going, Complete, Incomplete). You can replace this code with one of the codes at the bottom of this page. -->
- <div class="status yellow"><i class="fa-lg fa fa-spinner fa-spin loading"></i>On Going</div>
- <!-- A little summary of the RP -->
- <div class="summary">Summary:
- <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure olor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
- </div>
- <!-- Links of your thread -->
- <div class="links">
- <!-- Name + Link to the person you are rping with -->
- <a href="blog-url" class="partner">Partner <!-- DON'T EDIT THIS-->
- <div class="partnername">Name (edit this)</div></a>
- <!-- Link to the starter of this thread -->
- <a href="url">Starter</a>
- <!-- If your thread is finished, you can erase this line and just leave the next one.
- <a href="link to the last post">Last Post</a>
- Erase this line too. -->
- </div>
- </div>
- <!--End of Thread box-->
- <!--New Thread box-->
- <div class="threadbox">
- <!-- Name of your RP -->
- <div class="title"><i class="fa fa-star"></i>Thread Name</div>
- <!-- Info about your RP -->
- <div class="class">Open RP <i class="fa fa-ellipsis-v"></i> SFW</div>
- <!-- Name of the character + Series -->
- <div class="muse">Name
- <div class="subtitle">(Series)</div></div>
- <!-- Status of the RP (On-Going, Complete, Incomplete, On hiatus). You can replace this code with one of the codes at the bottom of this page. -->
- <div class="status green"><i class="fa fa-check-square"></i>Complete</div>
- <!-- A little summary of the RP -->
- <div class="summary">Summary:
- <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure olor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
- </div>
- <!-- Links of your thread -->
- <div class="links">
- <!-- Name + Link to the person you are rping with -->
- <a href="blog-url" class="partner">Partner <!-- DON'T EDIT THIS-->
- <div class="partnername">Name (edit this)</div></a>
- <!-- Link to the starter and end of this thread -->
- <a href="url">Starter</a>
- <a href="url">Last Post</a>
- </div>
- </div>
- <!--End of Thread box-->
- <!--New Thread box-->
- <div class="threadbox">
- <!-- Name of your RP -->
- <div class="title"><i class="fa fa-star"></i>Thread Name</div>
- <!-- Info about your RP -->
- <div class="class">Private RP <i class="fa fa-ellipsis-v"></i> NSFW</div>
- <!-- Name of the character + Series -->
- <div class="muse">Name
- <div class="subtitle">(Series)</div></div>
- <!-- Status of the RP (On-Going, Complete, Incomplete, On hiatus). You can replace this code with one of the codes at the bottom of this page. -->
- <div class="status red"><i class="fa fa-times-circle"></i>Unfinished</div>
- <!-- A little summary of the RP -->
- <div class="summary">Summary:
- <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure olor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
- </div>
- <!-- Links of your thread -->
- <div class="links">
- <!-- Name + Link to the person you are rping with -->
- <a href="blog-url" class="partner">Partner <!-- DON'T EDIT THIS-->
- <div class="partnername">Name (edit this)</div></a>
- <!-- Link to the starter and end of this thread -->
- <a href="url">Starter</a>
- <a href="url">Last Post</a>
- </div>
- </div>
- <!--End of Thread box-->
- <!--Thread box. Copy from here-->
- <div class="threadbox">
- <!-- Name of your RP. You can use names to find threads easier in your code. -->
- <div class="title"><i class="fa fa-star"></i>Thread Name</div>
- <!-- Info about your RP -->
- <div class="class">Open RP <i class="fa fa-ellipsis-v"></i> SFW</div>
- <!-- Name of the character + Series -->
- <div class="muse">Name
- <div class="subtitle">(Series)</div></div>
- <!-- Status of the RP**!! (On-Going, Complete, Incomplete). You can replace this code with one of the codes at the bottom of this page. -->
- <div class="status green"><i class="fa-lg fa fa-spinner fa-spin loading"></i>On Going</div>
- <!-- A little summary of the RP -->
- <div class="summary">Summary:
- <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure olor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
- </div>
- <!-- Links of your thread -->
- <div class="links">
- <!-- Name + Link to the person you are rping with -->
- <a href="blog-url" class="partner">Partner <!-- DON'T EDIT THIS-->
- <div class="partnername">Name (edit this)</div></a>
- <!-- Link to the starter of this thread -->
- <a href="url">Starter</a>
- <!-- If your thread is finished, you can erase this line and just leave the next one.
- <a href="link to the last post">Last Post</a>
- Erase this line too. -->
- </div>
- </div>
- <!--End of Thread box-->
- <!--New Thread box-->
- <div class="threadbox">
- <!-- Name of your RP -->
- <div class="title"><i class="fa fa-star"></i>Thread Name</div>
- <!-- Info about your RP -->
- <div class="class">Private RP <i class="fa fa-ellipsis-v"></i> SFW</div>
- <!-- Name of the character + Series -->
- <div class="muse">Name
- <div class="subtitle">(Series)</div></div>
- <!-- Status of the RP**!! (On-Going, Complete, Incomplete). You can replace this code with one of the codes at the bottom of this page. -->
- <div class="status yellow"><i class="fa-lg fa fa-spinner fa-spin loading"></i>On Going</div>
- <!-- A little summary of the RP -->
- <div class="summary">Summary:
- <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure olor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
- </div>
- <!-- Links of your thread -->
- <div class="links">
- <!-- Name + Link to the person you are rping with -->
- <a href="blog-url" class="partner">Partner <!-- DON'T EDIT THIS-->
- <div class="partnername">Name (edit this)</div></a>
- <!-- Link to the starter of this thread -->
- <a href="url">Starter</a>
- <!-- If your thread is finished, you can erase this line and just leave the next one.
- <a href="link to the last post">Last Post</a>
- Erase this line too. -->
- </div>
- </div>
- <!--End of Thread box-->
- <!--New Thread box-->
- <div class="threadbox">
- <!-- Name of your RP -->
- <div class="title"><i class="fa fa-star"></i>Thread Name</div>
- <!-- Info about your RP -->
- <div class="class">Open RP <i class="fa fa-ellipsis-v"></i> SFW</div>
- <!-- Name of the character + Series -->
- <div class="muse">Name
- <div class="subtitle">(Series)</div></div>
- <!-- Status of the RP (On-Going, Complete, Incomplete, On hiatus). You can replace this code with one of the codes at the bottom of this page. -->
- <div class="status green"><i class="fa fa-check-square"></i>Complete</div>
- <!-- A little summary of the RP -->
- <div class="summary">Summary:
- <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure olor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
- </div>
- <!-- Links of your thread -->
- <div class="links">
- <!-- Name + Link to the person you are rping with -->
- <a href="blog-url" class="partner">Partner <!-- DON'T EDIT THIS-->
- <div class="partnername">Name (edit this)</div></a>
- <!-- Link to the starter and end of this thread -->
- <a href="url">Starter</a>
- <a href="url">Last Post</a>
- </div>
- </div>
- <!--End of Thread box-->
- <!--New Thread box-->
- <div class="threadbox">
- <!-- Name of your RP -->
- <div class="title"><i class="fa fa-star"></i>Thread Name</div>
- <!-- Info about your RP -->
- <div class="class">Private RP <i class="fa fa-ellipsis-v"></i> NSFW</div>
- <!-- Name of the character + Series -->
- <div class="muse">Name
- <div class="subtitle">(Series)</div></div>
- <!-- Status of the RP (On-Going, Complete, Incomplete, On hiatus). You can replace this code with one of the codes at the bottom of this page. -->
- <div class="status red"><i class="fa fa-times-circle"></i>Unfinished</div>
- <!-- A little summary of the RP -->
- <div class="summary">Summary:
- <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure olor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
- </div>
- <!-- Links of your thread -->
- <div class="links">
- <!-- Name + Link to the person you are rping with -->
- <a href="blog-url" class="partner">Partner <!-- DON'T EDIT THIS-->
- <div class="partnername">Name (edit this)</div></a>
- <!-- Link to the starter and end of this thread -->
- <a href="url">Starter</a>
- <a href="url">Last Post</a>
- </div>
- </div>
- <!--End of Thread box-->
- <!--New Thread box-->
- <div class="threadbox">
- <!-- Name of your RP -->
- <div class="title"><i class="fa fa-star"></i>Thread Name</div>
- <!-- Info about your RP -->
- <div class="class">Private RP <i class="fa fa-ellipsis-v"></i> NSFW</div>
- <!-- Name of the character + Series -->
- <div class="muse">Name
- <div class="subtitle">(Series)</div></div>
- <!-- Status of the RP (On-Going, Complete, Incomplete, On hiatus). You can replace this code with one of the codes at the bottom of this page. -->
- <div class="status red"><i class="fa fa-times-circle"></i>Unfinished</div>
- <!-- A little summary of the RP -->
- <div class="summary">Summary:
- <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure olor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
- </div>
- <!-- Links of your thread -->
- <div class="links">
- <!-- Name + Link to the person you are rping with -->
- <a href="blog-url" class="partner">Partner <!-- DON'T EDIT THIS-->
- <div class="partnername">Name (edit this)</div></a>
- <!-- Link to the starter and end of this thread -->
- <a href="url">Starter</a>
- <a href="url">Last Post</a>
- </div>
- </div>
- <!--End of Thread box-->
- <!--End of all threads -->
- </div>
- </div>
- <div id="credits"><a href="http://noiretblanc-themes.tumblr.com/">Credits</a></div>
- <!--
- Replace the Status code with one of the following:
- For a complete RP use:
- <div class="status green"><i class="fa fa-check-square"></i>Complete</div>
- For an active RP use:
- <div class="status green"><i class="fa-lg fa fa-spinner fa-spin loading"></i>On Going</div>
- For a cancelled RP use:
- <div class="status red"><i class="fa fa-times-circle"></i>Incomplete</div>
- For an RP in hiatus use:
- <div class="status yellow"><i class="fa-lg fa fa-spinner fa-spin loading"></i>On Going</div>
- -->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement