Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- BASIC BIAS PAGE 001
- by nmwhn
- MAKER & QUESTIONS
- http://nmwhn.tumblr.com/
- DO NOT REMOVE CREDIT ♡ THANK YOU
- -->
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <link href='http://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Buenard' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC:400,700' rel='stylesheet' type='text/css'>
- <!-- scripts --->
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
- <script language="javascript">
- $(document).ready(function() {
- $('a#hiditem').click(function() {
- $('.abc',this).toggle();
- });
- $("#hidden").css({"height": "0px", "opacity":"0" });
- $("#hiditem").toggle(
- function () {
- $("#hidden").animate({"height": "60px", "opacity":"1.0"}, "slow");
- },
- function () {
- $("#hidden").animate({"height": "0px", "opacity":"0"}, "slow");
- });
- });
- </script>
- <!-- scripts end -->
- <!-- css start -->
- <style type="text/css">
- body {
- padding: 0;
- margin: 0;
- font-size: 13px;
- font-family: "Buenard", serif;
- background: url(//);
- background-repeat: no-repeat;
- background-attachment: fixed;
- background-size: cover;
- }
- #container {
- margin: 0em auto 10em auto;
- height: 465px;
- max-width: 1000px;
- width: 100%;
- box-sizing: border-box;
- background-color: #ffffff;
- overflow-y: scroll;
- overflow-x: hidden;
- }
- #container::-webkit-scrollbar {
- width: 0.7em;
- background-color: #9a9a9a;
- }
- #container::-webkit-scrollbar-thumb {
- background-color: #bfbfbf;
- }
- /*ult box*/
- .bias {
- width: 100%;
- background-color: #ffffff;
- padding: 0 0 4em 0;
- margin: 0 0 4em 0;
- }
- .bias_img {
- width: 30%;
- float: left;
- -webkit-transition: opacity 1s ease-out;
- -moz-transition: opacity 1s ease-out;
- -ms-transition: opacity 1s ease-out;
- -o-transition: opacity 1s ease-out;
- transition: opacity 1s ease-out;
- }
- .bias_img:hover {
- zoom: 1;
- filter: alpha(opacity=30);
- opacity: 0.7;
- }
- .bias_img img {
- width: 100%;
- }
- .bias_desc {
- padding: 6em 0 0 0;
- float: left;
- width: 65%;
- box-sizing: border-box;
- background-color: #ffffff;
- text-align: center;
- }
- .bias_desc p {
- padding: 1em 8% 2em 8%;
- font-size: 1.1em;
- line-height: 1.8em;
- }
- .bias_name {
- font-size: 2.6em;
- letter-spacing: 0.1em;
- color: #262626;
- font-family: "Playfair Display SC", serif;
- font-weight: 700;
- text-transform: uppercase;
- }
- .bias_hr {
- width: 85%;
- border: 0;
- height: 1px;
- background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
- background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
- background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
- background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
- }
- /*nav*/
- nav {
- background-color: #3c3c3c;
- margin: 13em auto 0 auto;
- padding: 0.5em 0 0.9em 0;
- max-width: 1000px;
- height: 3.6em;
- }
- nav ul li {
- list-style: none;
- font-size: 1em;
- line-height: 2em;
- text-align: center;
- color: #fff;
- text-transform: uppercase;
- letter-spacing: 0.2em;
- font-family: "Quicksand", sans-serif;
- font-weight: 700;
- display: inline;
- float: left;
- width: 33%;
- }
- ul li a {
- text-decoration: none;
- color: #fff;
- }
- ul li a:hover {
- color: #9a9a9a;
- -webkit-transition-duration: 1s;
- transition-duration: 1s;
- }
- #hidden {
- background: rgba(256, 256, 256, 0.3);
- margin: 0 auto 0 auto;
- max-width: 1000px;
- width: 100%;
- }
- .hidnav {
- margin: 0;
- }
- .hidnav li {
- height: 0;
- line-height: 60px;
- padding: 0.1em 0 0 0;
- list-style-type: none;
- text-align: center;
- display: block;
- float: left;
- width: 20%;
- }
- .hidnav a {
- font-size: 0.9em;
- font-family: "Quicksand", sans-serif;
- font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 0.2em;
- color: #9a9a9a;
- }
- .hidnav a:hover {
- color: #3c3c3c;
- -webkit-transition-duration: 1s;
- transition-duration: 1s;
- }
- /*text*/
- h2 {
- font-size: 0.8em;
- text-transform: uppercase;
- font-family: "Quicksand", sans-serif;
- }
- /*other*/
- hr.dontshow {
- clear: both;
- border: 0;
- }
- .credit {
- width: 100%;
- position: fixed;
- bottom: 1em;
- left: 1em;
- width: 100%;
- }
- .credit a {
- color: #000;
- font-size: 0.8em;
- text-decoration: none;
- font-family: "Montserrat", sans-serif;
- padding-right: 2em;
- }
- </style>
- <!-- css end -->
- </head>
- <body>
- <!-- main nav -->
- <nav>
- <ul>
- <li><a href="#">characters</a></li>
- <li><a id="hiditem" class="abc" style="cursor:pointer;"><span class="abc">Menu</span><span class="abc" style="display:none">Hide</span></a></li>
- <li><a href="{BlogURL}">go back</a>
- </h1>
- </li>
- </ul>
- </nav>
- <!-- second nav -->
- <!--
- IF YOU CAN'T UNDERSTAND HTML, SEE THE FOLLOWING LINK FOR INSTRUCTIONS IN ORDER FOR THE HIDDEN NAVIGATION TO WORK THE WAY IT SHOULD:
- http://static.tumblr.com/q5tz95j/HPBnk1iz9/guide.jpg
- -->
- <div id="hidden">
- <ul class="hidnav">
- <li><a href="#marie">Marie</a></li>
- <li><a href="#elisabeth">Elisabeth</a></li>
- <li><a href="#portia">Portia</a></li>
- <li><a href="#pauline">Pauline</a></li>
- <li><a href="#ivanna">Ivanna</a></li>
- </ul>
- <hr class="dontshow">
- </div>
- <!-- navs end -->
- <!-- container start --->
- <div id="container">
- <!--
- ADD MORE BIASES BY COPYING THE CODE BETWEEN THE 'BIAS start' AND 'bias end' COMMENTS
- -->
- <!-- BIAS start -->
- <div class="bias" id="marie">
- <div class="bias_img">
- <!-- replace the url below with your own image, size 335x450 px !-->
- <img src="http://static.tumblr.com/q5tz95j/ATpnjzjtc/gyu3.png" alt="ult1"></div>
- <div class="bias_desc">
- <span class="bias_name">Marie Bradford</span>
- <hr class="bias_hr">
- <!-- here whatever you want to say, go wild -->
- <h2>LILAH PARSONS - <i>NEW INDOHOGWARTS</i> - HUFFLEPUFF 1799</h2>
- <p>"I savored bitterness, the spice of those who have lived long and wildly.<br>
- Perhaps you, too, should learn to prefer it.<br>
- <br>After all, when all else is gone, still you may have it."</p>
- </div>
- <hr class="dontshow">
- </div>
- <!-- bias end -->
- <!-- BIAS start -->
- <div class="bias" id="elisabeth">
- <div class="bias_img">
- <!-- replace the url below with your own image, size 335x450 px !-->
- <img src="http://static.tumblr.com/q5tz95j/f4Jnjzjww/hakyeon.png" alt="bias1"></div>
- <div class="bias_desc"><span class="bias_name">ELISABETH LANSLET</span>
- <hr class="bias_hr">
- <!-- here whatever you want to say -->
- <h2>jacquelyn jablonski - <i>new indohogwarts</i> - slytherin 1805</h2>
- <p>"Why do you think all men paint themselves when they go to fight?<br>
- <br>When I paint my eyes to match my soup, it is not because I have nothing better to do than worry over trifles. It says, <i>I belong here, and you will not deny me.</i> When I streak my lips red as foxgloves, I say, <i>Come here, male. I am your mate, and you will not deny me.</i> When I pinch my cheeks and dust them with mother-of-pearl, I say, <i>Death, keep off, I am your enemy, and you will not deny me.</i> I say these things, and the world listens.<br> Because my magic is as strong as an arm. I am never denied."</p>
- </div>
- <hr class="dontshow">
- </div>
- <!-- bias end -->
- <!-- BIAS start -->
- <div class="bias" id="portia">
- <div class="bias_img">
- <!-- replace the url below with your own image, size 335x450 px !-->
- <img src="http://static.tumblr.com/q5tz95j/cNGnjzjvk/boa2.png" alt="bias2"></div>
- <div class="bias_desc"><span class="bias_name">portia lovelace</span>
- <hr class="bias_hr">
- <!-- here whatever you want to say -->
- <h2>darla baker - <i>new indohogwarts</i> - hufflepuff 1806</h2>
- <p>"I love your loneliness.
- <br>It is brave.
- <br>It makes the universe wants to protect you."</p>
- </div>
- <hr class="dontshow">
- </div>
- <!-- bias end -->
- <!-- BIAS start -->
- <div class="bias" id="pauline">
- <div class="bias_img">
- <!-- replace the url below with your own image, size 335x450 px !-->
- <img src="http://static.tumblr.com/q5tz95j/z4injzjvy/kibum.png" alt="bias3"></div>
- <div class="bias_desc"><span class="bias_name">pauline jane</span>
- <hr class="bias_hr">
- <!-- here whatever you want to say -->
- <h2>blanca padilla - <i>new indohogwarts</i> - slytherin 1808</h2>
- <p>"I will not ask you where you came from, <br>I will not ask and neither should you."</p>
- </div>
- <hr class="dontshow">
- </div>
- <!-- bias end -->
- <!-- BIAS start -->
- <div class="bias" id="ivanna">
- <div class="bias_img">
- <!-- replace the url below with your own image, size 335x450 px ! -->
- <img src="http://static.tumblr.com/q5tz95j/fDSnjzjwl/moon.png" alt="bias4"></div>
- <div class="bias_desc"><span class="bias_name">Ivanna Lufkin</span>
- <hr class="bias_hr">
- <!-- here whatever you want to say -->
- <h2>anna speckhart - <i>new indohogwarts</i> - unsorted yet</h2>
- <p>"A raven haired beauty, with eyes reminiscent of light blue skies, <br>and a heart capable of loving a monster."</p>
- </div>
- <hr class="dontshow">
- </div>
- <!-- bias end -->
- <!-- ADD MORE BIASES HERE -->
- <!-- stop biases here -->
- </div>
- <!-- container end -->
- <!-- DO NOT DELETE CREDIT ♡ THANK YOU -->
- <div class="credit"><a href="http://nmwhn.tumblr.com/">©</a></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement