Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- PAGE BY EVIE , @ DIAMCNDCLAWS
- CREATED FOR @WE-THEFAIRFOLK'S PERSONAL USE. DO NOT STEAL! -->
- <!DOCTYPE html>
- <html>
- <head>
- <title>MUSE LIST</title> <!--- Change the title of your page here. This is the title that shows up on your browser's tab. --->
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&display=swap" rel="stylesheet">
- <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
- <script type="text/javascript">
- $(document).ready( function() {
- // init Isotope
- var $grid = $('.musecon').isotope({
- itemSelector: '.muse'
- });
- // store filter for each group
- var filters = {};
- $('.filters').on( 'click', '.button', function() {
- var $this = $(this);
- // get group key
- var $buttonGroup = $this.parents('.button-group');
- var filterGroup = $buttonGroup.attr('data-filter-group');
- // set filter for group
- filters[ filterGroup ] = $this.attr('data-filter');
- // combine filters
- var filterValue = concatValues( filters );
- // set filter for Isotope
- $grid.isotope({ filter: filterValue });
- });
- // change is-checked class on buttons
- $('.button-group').each( function( i, buttonGroup ) {
- var $buttonGroup = $( buttonGroup );
- $buttonGroup.on( 'click', 'button', function() {
- $buttonGroup.find('.is-checked').removeClass('is-checked');
- $( this ).addClass('is-checked');
- });
- });
- });
- // flatten object by concatting values
- function concatValues( obj ) {
- var value = '';
- for ( var prop in obj ) {
- value += obj[ prop ];
- }
- return value;
- }
- </script>
- <style>
- @font-face { font-family:'comic neue sans'; src: url('https://dl.dropboxusercontent.com/s/5uoi6gv2usk1ojb/ComicNeueSansID.ttf') ;}
- /* LINKS, BOLDS, & HEADINGS */
- a {
- color:#8b8fc9; /* Link colour */
- text-decoration:none;
- font-weight:bold;
- }
- b, strong {
- font-weight:bold;
- color:#164160; /* Colour of bolded items */
- font-family: 'Open Sans', sans-serif;
- font-weight:bold;
- }
- u {
- color:#164160; /* Colour of underlined items */
- text-decoration:underline;
- }
- i, em {
- color:#164160; /* Colour of italic items */
- font-weight:800;
- font-style:italic;
- }
- body {
- background-color:#000; /* Page background */
- font-family: 'Open Sans', sans-serif;
- font-size:10.5px;
- color:#164160; /* Main text colour. */
- line-height:1.5;
- letter-spacing:.5px;
- }
- #cont {
- position:fixed;
- margin:auto;
- top:0px;
- bottom:0px;
- left:0px;
- right:0px;
- width:1100px;
- height:100%;
- overflow:hidden;
- }
- #title {
- width:800px;
- height:10%;
- margin-top:1.5%;
- margin-left:150px;
- position:absolute;
- text-align:center;
- font-family:'comic neue sans';
- font-size:32px;
- font-weight:bold;
- line-height:44px;
- text-transform:uppercase;
- letter-spacing:1px;
- background: red;
- background: -webkit-linear-gradient(right, red, orange , yellow, green, cyan, blue, violet);
- background: -o-linear-gradient(left, red, orange, yellow, green, cyan, blue, violet);
- background: -moz-linear-gradient(left, red, orange, yellow, green, cyan, blue, violet);
- background: linear-gradient(to left, red, orange , yellow, green, cyan, blue, violet);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- z-index:9999;
- }
- #nav {
- width:600px;
- margin-top:-10px;
- margin-left:100px;
- text-align:center;
- background-image:url('https://static.tumblr.com/6ca53f3be0199f8bf8eb1bb43440ebf9/dxziwmo/14fptdwq6/tumblr_static_8ymgsbo6jisc8cw080cosksos.gif');
- }
- #nav a {
- padding-left:40px;
- padding-right:40px;
- padding-bottom:5px;
- -webkit-text-fill-color:#8b8fc9; /* Link colour beneath page title */
- font-size:14px;
- font-weight:800;
- text-transform:uppercase;
- font-family:'open sans';
- border-bottom:1px dashed #d3e5f8;
- }
- .musecon {
- width:1100px;
- max-height:87%;
- margin-top:10%;
- margin-left:5px;
- overflow-y:scroll;
- }
- .musecon::-webkit-scrollbar-thumb {
- height:9px;
- border:7px solid #000;
- background-color:#cecece; /* scrollbar color */
- }
- .musecon::-webkit-scrollbar {
- width:15px;
- height:4px;
- border:7px solid #000;
- background:#000;
- margin-right:5px;
- }
- .muse {
- background-color:#d3e5f8; /* colour of muse boxes */
- width:308px;
- height:310px;
- padding:14px;
- overflow:hidden;
- margin-top:15px;
- margin-left:15px;
- border-radius:5px;
- border:2px outset #fff;
- }
- #micon {
- width:90px;
- height:90px;
- margin-top:10px;
- }
- #micon img {
- width:90px;
- height:90px;
- border-radius:90px;
- margin-top:5px;
- margin-left:5px;
- }
- #name {
- color:#164160; /* colour of muse name */
- letter-spacing:1px;
- font-size:22px;
- text-transform:uppercase;
- font-weight:bold;
- font-family: 'Roboto', sans-serif;
- text-align:center;
- margin-top:-5px;
- margin-left:5px;
- width:285px;
- height:auto;
- }
- #source {
- width:165px;
- color:#164160; /* colour of series name */
- text-align:center;
- font-weight:bold;
- font-style:italic;
- text-transform:uppercase;
- margin-top:-65px;
- margin-left:115px;
- background-color:#fff;
- padding:6px;
- border:4px double #000;
- border-radius:5px;
- }
- #mnav {
- margin-top:0px;
- margin-left:105px;
- text-align:center;
- word-spacing:10px;
- position:relative;
- font-size:12px;
- }
- #mnav a {
- color:#8b8fc9; /* link colour of muse nav */
- font-weight:800;
- text-transform:uppercase;
- padding:3px 8px 3px 8px;
- display:inline-block;
- }
- #desc {
- width:283px;
- height:65px;
- padding:10px;
- margin-top:30px;
- color:#8b8fc9;
- font-family: 'Open Sans', sans-serif;
- font-size:11px;
- text-align:justify;
- overflow:hidden;
- font-weight:400;
- border:2px dashed #fff;
- background-color:#5c5a7e;
- position:absolute;
- }
- #ex {
- width:275px;
- height:auto;
- margin-top:130px;
- margin-left:0px;
- padding-left:15px;
- padding-right:15px;
- position:absolute;
- }
- info {
- color:#164160; /* text colour of info boxes */
- text-transform:uppercase;
- text-align:center;
- font-size:10.5px;
- background-color:#c1e6ff; /* bg colour of info boxes (for age, gender, etc.) */
- line-height:30px;
- border:2px inset #fff;
- margin-left:10px;
- margin-right:10px;
- padding:3px 8px 3px 8px;
- }
- #credit {
- position:fixed;
- bottom:12px;
- right:8px;
- font-size:15px;
- }
- #credit a {
- width:60px;
- height:60px;
- color:#164160;
- padding:4px 6px 2px 6px;
- text-shadow:none;
- background-color:#d3e5f8;
- }
- </style>
- </head>
- <body>
- <div id="cont">
- <div id="title">we-thefairfolk's muses <!-- page title , change it to whatever you want! -->
- <div id="nav"><a href="urlhere">back</a> <a href="urlhere">rules</a> <a href="urlhere">mun</a> <a href="urlhere">dash</a></div> <!-- replace urlhere with your links. change the titles to whatever you want -->
- </div>
- <div class="musecon">
- <!--- MUSE START --->
- <div class="muse">
- <div id="name"> muse name </div>
- <div id="micon"><img src="urlhere"></div> <!-- replace urlhere with your icon link -->
- <div id="source">series name</div>
- <div id="mnav"> <a href="urlhere">bio</a> • <a href="urlhere">tag</a> </div>
- <div id="desc"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis quam accumsan, hendrerit augue vel, volutpat est. Quisque laoreet eros suscipit facilisis congue. </div>
- <div id="ex"> <info>## years</info> <info>dragon</info> <info>gender</info> <info>sexuality</info> <info>residence</info> <info>etc</info> </div>
- </div>
- <!--- MUSE END --->
- </div>
- </div>
- <div id="credit"><a href="http://diamcndclaws.tumblr.com" title="coded by evie !"><span class="th th-heart-1"></span></a></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement