Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- THEME CREATED BY CORDEECEPS !
- DO NOT STEAL, REDISTRIBUTE, USE AS A BASE, REMOVE THE CREDIT OR CLAIM AS YOUR OWN !!
- -->
- <html>
- <head>
- <title>if i ever were to lose you</title> <!-- PAGE TITLE -->
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap" rel="stylesheet">
- <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Kumar+One&display=swap" rel="stylesheet">
- <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
- <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap" rel="stylesheet">
- <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
- <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&display=swap" rel="stylesheet">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("a[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:90,
- tip_fade_speed:600,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
- <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
- <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
- <script>
- $(document).ready(function() {
- var $container = $(".grid"); // the container with all the elements to filter inside
- var filters = {}; //should be outside the scope of the filtering function
- /* --- read the documentation on isotope.metafizzy.co for more options --- */
- var $grid = $container.isotope({
- itemSelector: ".item", // the elements to filter
- percentPosition: true // put true if you use percentage widths, otherwise put false
- });
- $(".option-set a").click(function(e) {
- var $this = $(this); // cache the clicked link
- var filterAttr = "data-filter-value";
- var filterValue = $this.attr(filterAttr); // cache the filter
- var $optionSet = $this.parents(".option-set"); // cache the parent element
- var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
- var filterGroup = filters[group];
- if (!filterGroup) {
- filterGroup = filters[group] = [];
- }
- var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
- var activeClass = "selected", // the class for active links
- exclClass = "exclusive"; // the class for exclusive groups
- comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
- var comboFilter = getComboFilter(filters);
- $grid.isotope({
- filter: comboFilter
- });
- $this.toggleClass(activeClass);
- e.preventDefault();
- });
- });
- </script>
- </head>
- <style type="text/css">
- #s-m-t-tooltip { /* HOVER NAME */
- max-width:400px;
- margin:-20px 10px 10px 10px;
- background-color:#151515; /* HOVER NAME BG COLOUR */
- font-family: 'Kumar One';
- padding-top:5px;
- padding-bottom:0px;
- padding-left:10px;
- padding-right:10px;
- font-size:18px;
- letter-spacing:1px;
- text-transform:uppercase;
- color:#358e82; /* HOVER NAME TEXT COLOUR */
- text-shadow: 0px 0px 5px #00656a; /* HOVER NAME TEXT SHADOW COLOUR */
- z-index:999999999999999999999999999999999999;
- border-radius: 2px 2px 2px 2px;
- -moz-border-radius: 2px 2px 2px 2px;
- -webkit-border-radius: 2px 2px 2px 2px;
- border: 1px solid #8f5242; /* HOVER NAME BORDER COLOUR */
- }
- ::-webkit-scrollbar {
- width: 0px;
- height: 0px;
- }
- ::-webkit-scrollbar-button {
- width: 0px;
- height: 0px;
- }
- ::-webkit-scrollbar-thumb {
- background: white;
- border: 0px none #151515;
- border-radius: 50px;
- }
- ::-webkit-scrollbar-thumb:hover {
- background:#151515;
- }
- ::-webkit-scrollbar-thumb:active {
- background: #151515;
- }
- ::-webkit-scrollbar-track {
- background: #151515;
- border: 0px none #151515;
- border-radius: 0px;
- }
- ::-webkit-scrollbar-track:hover {
- background: #151515;
- }
- ::-webkit-scrollbar-track:active {
- background: #151515;
- }
- ::-webkit-scrollbar-corner {
- background: transparent;
- }
- body {
- background-color: #202020; /* BACKGROUND COLOUR */
- font-family: 'Inconsolata', monospace;
- font-size: 13px;
- color: #eeeeee; /* BODY TEXT COLOUR */
- letter-spacing:0.5px;
- }
- sub, small, sup {
- font-size:13px;
- }
- a {
- text-decoration:none;
- color: #3dbca6; /* LINKS COLOUR */
- -webkit-transition: all 0.5s ease;
- -moz-transition: all 0.5s ease;
- -o-transition: all 0.5s ease;
- }
- a:hover {
- color: #d3b790; /* LINKS HOVER COLOUR */
- }
- b, strong {
- color: #bc5437; /* BOLD COLOUR */
- font-weight:900;
- text-shadow: 0px 0px 5px #00656a; /* BOLD TEXT SHADOW COLOUR */
- font-size:14px;
- }
- i, em {
- color: #d3b790; /* ITALICS COLOUR */
- font-family: 'Syne Mono', monospace;
- font-size:14px;
- }
- h1 {
- font-size:14px;
- padding:0px;
- text-transform:uppercase;
- line-height:0px;
- }
- h2 {
- font-size:30px;
- line-height:0px;
- text-align: left;
- padding-right:0px;
- padding-left:0px;
- font-family: 'Kumar One';
- color: #3dbca6; /* TITLE COLOUR */
- letter-spacing: 2px;
- text-shadow: 0px 0px 5px #00656a; /* TITLE TEXT SHADOW COLOUR */
- }
- img {
- max-width: 100%;
- }
- #container {
- position:absolute;
- margin:auto;
- left:0px;
- right:0px;
- top:0px;
- bottom:0px;
- background-color: #151515; /* CONTAINER BG COLOUR */
- height: 460px;
- width: 800px;
- padding:30px;
- border-radius: 2px 2px 2px 2px;
- -moz-border-radius: 2px 2px 2px 2px;
- -webkit-border-radius: 2px 2px 2px 2px;
- border:1px solid #303030; /* CONTAINTER BORDER COLOUR */
- z-index:9!important;
- display:block;
- }
- #topbanner {
- position:absolute;
- margin:auto;
- left:0px;
- right:0px;
- top:-610px;
- bottom:0px;
- background-color: #151515; /* TOP BANNER COLOUR - if no image bg */
- height: 60px;
- width: 860px;
- border-radius: 2px 2px 2px 2px;
- -moz-border-radius: 2px 2px 2px 2px;
- -webkit-border-radius: 2px 2px 2px 2px;
- border: 1px solid #303030; /* TOP BANNER BORDER COLOUR */
- z-index:9!important;
- display:block;
- }
- #tbimage {
- max-height:60px;
- max-width:860px;
- }
- #bottombanner {
- position:absolute;
- margin:auto;
- left:0px;
- right:0px;
- top:610px;
- bottom:0px;
- background-color: #151515; /* BOTTOM BANNER COLOUR - if no image bg */
- height: 60px;
- width: 860px;
- border-radius: 2px 2px 2px 2px;
- -moz-border-radius: 2px 2px 2px 2px;
- -webkit-border-radius: 2px 2px 2px 2px;
- border: 1px solid #303030; /* BOTTOM BANNER BORDER COLOUR */
- z-index:9!important;
- display:block;
- }
- #bbimage {
- max-height:60px;
- max-width:860px;
- }
- .grid {
- width:720px;
- max-height:381px !important;
- min-height:381px !important;
- position:relative;
- margin-top:85px;
- overflow:auto;
- left:40px;
- }
- .item {
- position:relative;
- width:150px;
- height:110px;
- background-color:transparent;
- margin-left:15px;
- margin-right:15px;
- margin-bottom:22px;
- margin-top:1px;
- }
- .item img {
- width:150px;
- height:110px;
- overflow:hidden;
- display:block;
- outline:1px solid #8f5242; /* CHARACTER IMAGE BORDER COLOUR */
- }
- .title {
- position:fixed;
- width:600px;
- margin-left: 20px;
- margin-top: -52px;
- font-size:17px;
- text-align:left;
- padding:1px;
- letter-spacing: 2px;
- overflow:hidden;
- text-transform:uppercase;
- }
- .filters {
- margin-top:-15px;
- height:90px;
- position:absolute;
- width:850px;
- padding:0px;
- text-align:center;
- margin-left:-25px;
- }
- .filters ul {
- color:#bc5437; /* FILTER TITLE COLOUR */
- font-family: 'Share Tech Mono', monospace;
- display: inline-block;
- padding:0px;
- margin-left:5px;
- margin-right:5px;
- text-align:center;
- max-width:280px;
- margin-bottom:10px;
- margin-top:3px;
- }
- .filters li {
- color: #3dbca6; /* FULL STOP AFTER FILTER COLOUR */
- font-weight:900;
- display: inline;
- max-width: 100px;
- line-height:18px;
- }
- .filters h1 {
- margin-bottom:1px;
- }
- .filters a {
- color:#bbb; /* FILTER COLOUR */
- }
- .filters a.selected {
- background-color: #3dbca6; /* SELECTED FILTER BG COLOUR */
- color:#151515; /* SELECTED FILTER TEXT COLOUR */
- font-weight:900;
- text-transform:uppercase;
- }
- .mainlinks {
- font-size:14px;
- color: #eee;
- text-align:right;
- overflow:hidden;
- height:auto;
- background:black;
- margin-left:650px;
- margin-top:-50px;
- max-width:300px;
- line-height:20px;
- padding-right:20px;
- font-weight:600;
- text-transform:uppercase;
- }
- #credit {
- z-index:9;
- bottom:20px;
- right:20px;
- position:fixed;
- padding:10px;
- color: #3dbca6; /* CREDIT COLOUR, DON'T MAKE IT INVISIBLE!! */
- }
- </style><body>
- <div id="topbanner">
- <div id="tbimage">
- <img src="https://i.imgur.com/SpFq56C.jpg"> <!-- TOP BANNER IMAGE -->
- <div class="title">
- <h2>if i ever were to lose you,</h2></div> <!-- TITLE TEXT -->
- </div>
- </div>
- <div id="bottombanner">
- <div id="tbimage">
- <img src="https://i.imgur.com/SpFq56C.jpg"> <!-- BOTTOM BANNER IMAGE -->
- <div class="mainlinks"> <!-- BOTTOM BANNER LINKS -->
- <a href="/">back.</a>
- <a href="/">another link.</a>
- <a href="/">navigation.</a>
- <a href="/">rp main.</a>
- </div>
- </div>
- </div>
- <div id="container">
- <!-- FILTER INSTRUCTIONS:
- 1. make sure each 'data-filter-group' has a different name.
- 2. make sure each 'data-filter-value' has a different name.
- 3. you might need to add a <br> at the end of some filter names to make them all fit onto three lines, the titles fall at different heights otherwise.
- 4. keep the '.' at the beginning of the 'data-filter-value' name.
- 5. for a character to fall into the right filter, copy the name of the 'data-filter-value' WITHOUT the '.'
- 5a. paste the name after 'item' where it says
- <div class="item
- (control+f to search)
- 6. don't remove 'item' from
- <div class="item
- because this is how they show up when you click 'all'.
- to add more filter categories, copy and past the below:
- <ul class="filter option-set exclusive" data-filter-group="group1">
- <ul><h1>a filter title</h1></ul>
- <br><li><a href="#" data-filter-value="" class="selected">all</a>.</li><br>
- <li><a href="#" data-filter-value=".thisisa">oc's</a>.</li>
- <li><a href="#" data-filter-value=".12">canon</a>.</li><br>
- <li><a href="#" data-filter-value=".13">semi canon</a>.</li>
- </ul>
- -->
- <div class="filters">
- <ul class="filter option-set exclusive" data-filter-group="group1">
- <ul><h1>a filter title</h1></ul> <!-- FILTER CATEGORY TITLE -->
- <br><li><a href="#" data-filter-value="" class="selected">all</a>.</li><br>
- <li><a href="#" data-filter-value=".thisisa">oc's</a>.</li>
- <li><a href="#" data-filter-value=".12">canon</a>.</li><br>
- <li><a href="#" data-filter-value=".13">semi canon</a>.</li>
- </ul>
- <ul class="filter option-set exclusive" data-filter-group="group2">
- <ul><h1>moral alignment</h1></ul><br>
- <li><a href="#" data-filter-value="" class="selected">all</a>.</li>
- <li><a href="#" data-filter-value=".21">lawful g</a>.</li>
- <li><a href="#" data-filter-value=".22">neutral g</a>.</li>
- <li><a href="#" data-filter-value=".23">chaotic g</a>.</li>
- <li><a href="#" data-filter-value=".24">lawful n</a>.</li>
- <li><a href="#" data-filter-value=".25">true n</a>.</li>
- <li><a href="#" data-filter-value=".26">chaotic n</a>.</li>
- <li><a href="#" data-filter-value=".27">lawful e</a>.</li>
- <li><a href="#" data-filter-value=".28">neutral e</a>.</li>
- <li><a href="#" data-filter-value=".30">chaotic e</a>.</li>
- </ul>
- <ul class="filter option-set exclusive" data-filter-group="group3">
- <ul><h1>sexuality</h1></ul><br>
- <li><a href="#" data-filter-value="" class="selected">all</a>.</li><br>
- <li><a href="#" data-filter-value=".31">homosexual</a>.</li><br>
- <li><a href="#" data-filter-value=".32">bisexual</a>.</li>
- <li><a href="#" data-filter-value=".33">asexual</a>.</li>
- </ul>
- <ul class="filter option-set exclusive" data-filter-group="group4">
- <ul><h1>slaps hood</h1></ul><br>
- <li><a href="#" data-filter-value="" class="selected">all</a>.</li>
- <li><a href="#" data-filter-value=".41">this bad boy</a>.</li><br>
- <li><a href="#" data-filter-value=".42">can fit so many</a>.</li><br>
- <li><a href="#" data-filter-value=".43">filters in it</a>.</li>
- </ul>
- </div>
- <div class="grid">
- <!-- CHAR 01 -->
- <a href="/" title="ellie"> <!-- LINK & HOVER NAME -->
- <div class="item 11 21 31"> <!-- DATA FILTER VALUES -->
- <div id="item img">
- <img src="https://i.imgur.com/Sg2lXts.jpg"> <!-- CHAR IMG -->
- </div>
- </div></a>
- <!-- CHAR 02 -->
- <a href="/" title="abby">
- <div class="item 12 22 32">
- <div id="item img">
- <img src="https://i.imgur.com/62yEXOH.jpg">
- </div>
- </div></a>
- <!-- CHAR 03 -->
- <a href="/" title="joel">
- <div class="item 11 21 31">
- <div id="item img">
- <img src="https://i.imgur.com/WsRfe8I.jpg">
- </div>
- </div></a>
- <!-- CHAR 04 -->
- <a href="/" title="dina">
- <div class="item 12 22 32">
- <div id="item img">
- <img src="https://i.imgur.com/KKo8Ojn.jpg">
- </div>
- </div></a>
- <!-- CHAR 05 -->
- <a href="/" title="lev">
- <div class="item 11 21 31">
- <div id="item img">
- <img src="https://i.imgur.com/oAqUgwm.jpg">
- </div>
- </div></a>
- <!-- CHAR 06 -->
- <a href="/" title="jesse">
- <div class="item 12 22 32">
- <div id="item img">
- <img src="https://i.imgur.com/NqSczxX.jpg">
- </div>
- </div></a>
- <!-- CHAR 07 -->
- <a href="/" title="yara">
- <div class="item 11 21 31">
- <div id="item img">
- <img src="https://i.imgur.com/r0Zgxe5.jpg">
- </div>
- </div></a>
- <!-- CHAR 08 -->
- <a href="/" title="manny">
- <div class="item 12 22 32">
- <div id="item img">
- <img src="https://i.imgur.com/zwonr5D.png">
- </div>
- </div></a>
- <!-- CHAR 09 -->
- <a href="/" title="nora">
- <div class="item 11 21 31">
- <div id="item img">
- <img src="https://i.imgur.com/Yuut4RV.png">
- </div>
- </div></a>
- <!-- CHAR 10 -->
- <a href="/" title="tommy">
- <div class="item 12 22 32">
- <div id="item img">
- <img src="https://i.imgur.com/Kwz4KUz.jpg">
- </div>
- </div></a>
- <!-- CHAR 11 -->
- <a href="/" title="maria">
- <div class="item 11 21 31">
- <div id="item img">
- <img src="https://i.imgur.com/ImsFo1v.png">
- </div>
- </div></a>
- <!-- CHAR 12 -->
- <a href="/" title="owen">
- <div class="item 12 22 32">
- <div id="item img">
- <img src="https://i.imgur.com/jyH4hcr.jpg">
- </div>
- </div></a>
- <!-- CHAR 13 -->
- <a href="/" title="ellie">
- <div class="item 11 21 31">
- <div id="item img">
- <img src="https://i.imgur.com/Sg2lXts.jpg">
- </div>
- </div></a>
- <!-- CHAR 14 -->
- <a href="/" title="abby">
- <div class="item 12 22 32">
- <div id="item img">
- <img src="https://i.imgur.com/62yEXOH.jpg">
- </div>
- </div></a>
- <!-- CHAR 15 -->
- <a href="/" title="joel">
- <div class="item 11 21 31">
- <div id="item img">
- <img src="https://i.imgur.com/WsRfe8I.jpg">
- </div>
- </div></a>
- <!-- CHAR 16 -->
- <a href="/" title="dina">
- <div class="item 12 22 32">
- <div id="item img">
- <img src="https://i.imgur.com/KKo8Ojn.jpg">
- </div>
- </div></a>
- <!-- CHAR 17 -->
- <a href="/" title="lev">
- <div class="item 11 21 31">
- <div id="item img">
- <img src="https://i.imgur.com/oAqUgwm.jpg">
- </div>
- </div></a>
- <!-- CHAR 18 -->
- <a href="/" title="jesse">
- <div class="item 12 22 32">
- <div id="item img">
- <img src="https://i.imgur.com/NqSczxX.jpg">
- </div>
- </div></a>
- <!-- CHAR 19 -->
- <a href="/" title="yara">
- <div class="item 11 21 31">
- <div id="item img">
- <img src="https://i.imgur.com/r0Zgxe5.jpg">
- </div>
- </div></a>
- <!-- CHAR 20 -->
- <a href="/" title="manny">
- <div class="item 12 22 32">
- <div id="item img">
- <img src="https://i.imgur.com/zwonr5D.png">
- </div>
- </div></a>
- </div>
- </div>
- <div id="credit"><a href="https://cordeeceps.tumblr.com/tagged/themes%3A-mine." title="theme by cordeeceps"><span class="th th-alien-o"></span></a></div>
- </body></html>
Add Comment
Please, Sign In to add comment