Advertisement
Guest User

fampage

a guest
May 25th, 2015
238
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.46 KB | None | 0 0
  1. <!--
  2.  
  3. BASIC BIAS PAGE 001
  4. by nmwhn
  5.  
  6. MAKER & QUESTIONS
  7. http://nmwhn.tumblr.com/
  8.  
  9. DO NOT REMOVE CREDIT ♡ THANK YOU
  10.  
  11. -->
  12.  
  13.  
  14. <!doctype html>
  15. <html>
  16. <head>
  17. <meta charset="utf-8">
  18. <title>{Title}</title>
  19.  
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23. <link href='http://fonts.googleapis.com/css?family=Quicksand:700' rel='stylesheet' type='text/css'>
  24. <link href='http://fonts.googleapis.com/css?family=Buenard' rel='stylesheet' type='text/css'>
  25. <link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC:400,700' rel='stylesheet' type='text/css'>
  26. <!-- scripts --->
  27. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  28. <script language="javascript">
  29. $(document).ready(function() {
  30. $('a#hiditem').click(function() {
  31. $('.abc',this).toggle();
  32. });
  33.  
  34. $("#hidden").css({"height": "0px", "opacity":"0" });
  35.  
  36. $("#hiditem").toggle(
  37. function () {
  38. $("#hidden").animate({"height": "60px", "opacity":"1.0"}, "slow");
  39. },
  40. function () {
  41. $("#hidden").animate({"height": "0px", "opacity":"0"}, "slow");
  42. });
  43. });
  44. </script>
  45. <!-- scripts end -->
  46. <!-- css start -->
  47. <style type="text/css">
  48. body {
  49. padding: 0;
  50. margin: 0;
  51. font-size: 13px;
  52. font-family: "Buenard", serif;
  53. background: url(//);
  54. background-repeat: no-repeat;
  55. background-attachment: fixed;
  56. background-size: cover;
  57. }
  58. #container {
  59. margin: 0em auto 10em auto;
  60. height: 465px;
  61. max-width: 1000px;
  62. width: 100%;
  63. box-sizing: border-box;
  64. background-color: #ffffff;
  65. overflow-y: scroll;
  66. overflow-x: hidden;
  67. }
  68. #container::-webkit-scrollbar {
  69. width: 0.7em;
  70. background-color: #9a9a9a;
  71. }
  72. #container::-webkit-scrollbar-thumb {
  73. background-color: #bfbfbf;
  74. }
  75. /*ult box*/
  76. .bias {
  77. width: 100%;
  78. background-color: #ffffff;
  79. padding: 0 0 4em 0;
  80. margin: 0 0 4em 0;
  81. }
  82. .bias_img {
  83. width: 30%;
  84. float: left;
  85. -webkit-transition: opacity 1s ease-out;
  86. -moz-transition: opacity 1s ease-out;
  87. -ms-transition: opacity 1s ease-out;
  88. -o-transition: opacity 1s ease-out;
  89. transition: opacity 1s ease-out;
  90. }
  91. .bias_img:hover {
  92. zoom: 1;
  93. filter: alpha(opacity=30);
  94. opacity: 0.7;
  95. }
  96. .bias_img img {
  97. width: 100%;
  98. }
  99. .bias_desc {
  100. padding: 6em 0 0 0;
  101. float: left;
  102. width: 65%;
  103. box-sizing: border-box;
  104. background-color: #ffffff;
  105. text-align: center;
  106. }
  107. .bias_desc p {
  108. padding: 1em 8% 2em 8%;
  109. font-size: 1.1em;
  110. line-height: 1.8em;
  111. }
  112. .bias_name {
  113. font-size: 2.6em;
  114. letter-spacing: 0.1em;
  115. color: #262626;
  116. font-family: "Playfair Display SC", serif;
  117. font-weight: 700;
  118. text-transform: uppercase;
  119. }
  120. .bias_hr {
  121. width: 85%;
  122. border: 0;
  123. height: 1px;
  124. background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  125. background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  126. background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  127. background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  128. }
  129. /*nav*/
  130. nav {
  131. background-color: #3c3c3c;
  132. margin: 13em auto 0 auto;
  133. padding: 0.5em 0 0.9em 0;
  134. max-width: 1000px;
  135. height: 3.6em;
  136. }
  137. nav ul li {
  138. list-style: none;
  139. font-size: 1em;
  140. line-height: 2em;
  141. text-align: center;
  142. color: #fff;
  143. text-transform: uppercase;
  144. letter-spacing: 0.2em;
  145. font-family: "Quicksand", sans-serif;
  146. font-weight: 700;
  147. display: inline;
  148. float: left;
  149. width: 33%;
  150. }
  151. ul li a {
  152. text-decoration: none;
  153. color: #fff;
  154. }
  155. ul li a:hover {
  156. color: #9a9a9a;
  157. -webkit-transition-duration: 1s;
  158. transition-duration: 1s;
  159. }
  160. #hidden {
  161. background: rgba(256, 256, 256, 0.3);
  162. margin: 0 auto 0 auto;
  163. max-width: 1000px;
  164. width: 100%;
  165. }
  166. .hidnav {
  167. margin: 0;
  168. }
  169. .hidnav li {
  170. height: 0;
  171. line-height: 60px;
  172. padding: 0.1em 0 0 0;
  173. list-style-type: none;
  174. text-align: center;
  175. display: block;
  176. float: left;
  177. width: 20%;
  178. }
  179. .hidnav a {
  180. font-size: 0.9em;
  181. font-family: "Quicksand", sans-serif;
  182. font-weight: 700;
  183. text-transform: uppercase;
  184. letter-spacing: 0.2em;
  185. color: #9a9a9a;
  186. }
  187. .hidnav a:hover {
  188. color: #3c3c3c;
  189. -webkit-transition-duration: 1s;
  190. transition-duration: 1s;
  191. }
  192. /*text*/
  193. h2 {
  194. font-size: 0.8em;
  195. text-transform: uppercase;
  196. font-family: "Quicksand", sans-serif;
  197. }
  198. /*other*/
  199. hr.dontshow {
  200. clear: both;
  201. border: 0;
  202. }
  203. .credit {
  204. width: 100%;
  205. position: fixed;
  206. bottom: 1em;
  207. left: 1em;
  208. width: 100%;
  209. }
  210. .credit a {
  211. color: #000;
  212. font-size: 0.8em;
  213. text-decoration: none;
  214. font-family: "Montserrat", sans-serif;
  215. padding-right: 2em;
  216. }
  217. </style>
  218. <!-- css end -->
  219. </head>
  220.  
  221.  
  222. <body>
  223. <!-- main nav -->
  224. <nav>
  225. <ul>
  226. <li><a href="#">characters</a></li>
  227. <li><a id="hiditem" class="abc" style="cursor:pointer;"><span class="abc">Menu</span><span class="abc" style="display:none">Hide</span></a></li>
  228. <li><a href="{BlogURL}">go back</a>
  229. </h1>
  230. </li>
  231. </ul>
  232. </nav>
  233.  
  234. <!-- second nav -->
  235.  
  236. <!--
  237.  
  238. IF YOU CAN'T UNDERSTAND HTML, SEE THE FOLLOWING LINK FOR INSTRUCTIONS IN ORDER FOR THE HIDDEN NAVIGATION TO WORK THE WAY IT SHOULD:
  239. http://static.tumblr.com/q5tz95j/HPBnk1iz9/guide.jpg
  240.  
  241. -->
  242.  
  243. <div id="hidden">
  244. <ul class="hidnav">
  245. <li><a href="#marie">Marie</a></li>
  246. <li><a href="#elisabeth">Elisabeth</a></li>
  247. <li><a href="#portia">Portia</a></li>
  248. <li><a href="#pauline">Pauline</a></li>
  249. <li><a href="#ivanna">Ivanna</a></li>
  250. </ul>
  251.  
  252. <hr class="dontshow">
  253. </div>
  254. <!-- navs end -->
  255.  
  256.  
  257. <!-- container start --->
  258. <div id="container">
  259.  
  260.  
  261. <!--
  262.  
  263. ADD MORE BIASES BY COPYING THE CODE BETWEEN THE 'BIAS start' AND 'bias end' COMMENTS
  264.  
  265. -->
  266.  
  267. <!-- BIAS start -->
  268. <div class="bias" id="marie">
  269. <div class="bias_img">
  270. <!-- replace the url below with your own image, size 335x450 px !-->
  271. <img src="http://static.tumblr.com/q5tz95j/ATpnjzjtc/gyu3.png" alt="ult1"></div>
  272. <div class="bias_desc">
  273. <span class="bias_name">Marie Bradford</span>
  274. <hr class="bias_hr">
  275. <!-- here whatever you want to say, go wild -->
  276. <h2>LILAH PARSONS - <i>NEW INDOHOGWARTS</i> - HUFFLEPUFF 1799</h2>
  277. <p>"I savored bitterness, the spice of those who have lived long and wildly.<br>
  278. Perhaps you, too, should learn to prefer it.<br>
  279. <br>After all, when all else is gone, still you may have it."</p>
  280. </div>
  281. <hr class="dontshow">
  282. </div>
  283. <!-- bias end -->
  284.  
  285.  
  286. <!-- BIAS start -->
  287. <div class="bias" id="elisabeth">
  288. <div class="bias_img">
  289. <!-- replace the url below with your own image, size 335x450 px !-->
  290. <img src="http://static.tumblr.com/q5tz95j/f4Jnjzjww/hakyeon.png" alt="bias1"></div>
  291. <div class="bias_desc"><span class="bias_name">ELISABETH LANSLET</span>
  292. <hr class="bias_hr">
  293. <!-- here whatever you want to say -->
  294. <h2>jacquelyn jablonski - <i>new indohogwarts</i> - slytherin 1805</h2>
  295. <p>"Why do you think all men paint themselves when they go to fight?<br>
  296. <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>
  297. </div>
  298. <hr class="dontshow">
  299. </div>
  300. <!-- bias end -->
  301.  
  302.  
  303. <!-- BIAS start -->
  304. <div class="bias" id="portia">
  305. <div class="bias_img">
  306. <!-- replace the url below with your own image, size 335x450 px !-->
  307. <img src="http://static.tumblr.com/q5tz95j/cNGnjzjvk/boa2.png" alt="bias2"></div>
  308. <div class="bias_desc"><span class="bias_name">portia lovelace</span>
  309. <hr class="bias_hr">
  310. <!-- here whatever you want to say -->
  311. <h2>darla baker - <i>new indohogwarts</i> - hufflepuff 1806</h2>
  312. <p>"I love your loneliness.
  313. <br>It is brave.
  314. <br>It makes the universe wants to protect you."</p>
  315. </div>
  316. <hr class="dontshow">
  317. </div>
  318. <!-- bias end -->
  319.  
  320.  
  321. <!-- BIAS start -->
  322. <div class="bias" id="pauline">
  323. <div class="bias_img">
  324. <!-- replace the url below with your own image, size 335x450 px !-->
  325. <img src="http://static.tumblr.com/q5tz95j/z4injzjvy/kibum.png" alt="bias3"></div>
  326. <div class="bias_desc"><span class="bias_name">pauline jane</span>
  327. <hr class="bias_hr">
  328. <!-- here whatever you want to say -->
  329. <h2>blanca padilla - <i>new indohogwarts</i> - slytherin 1808</h2>
  330. <p>"I will not ask you where you came from, <br>I will not ask and neither should you."</p>
  331. </div>
  332. <hr class="dontshow">
  333. </div>
  334. <!-- bias end -->
  335.  
  336.  
  337. <!-- BIAS start -->
  338. <div class="bias" id="ivanna">
  339. <div class="bias_img">
  340. <!-- replace the url below with your own image, size 335x450 px ! -->
  341. <img src="http://static.tumblr.com/q5tz95j/fDSnjzjwl/moon.png" alt="bias4"></div>
  342. <div class="bias_desc"><span class="bias_name">Ivanna Lufkin</span>
  343. <hr class="bias_hr">
  344. <!-- here whatever you want to say -->
  345. <h2>anna speckhart - <i>new indohogwarts</i> - unsorted yet</h2>
  346. <p>"A raven haired beauty, with eyes reminiscent of light blue skies, <br>and a heart capable of loving a monster."</p>
  347. </div>
  348. <hr class="dontshow">
  349. </div>
  350. <!-- bias end -->
  351.  
  352. <!-- ADD MORE BIASES HERE -->
  353.  
  354.  
  355.  
  356.  
  357.  
  358.  
  359.  
  360. <!-- stop biases here -->
  361.  
  362. </div>
  363. <!-- container end -->
  364.  
  365.  
  366. <!-- DO NOT DELETE CREDIT ♡ THANK YOU -->
  367. <div class="credit"><a href="http://nmwhn.tumblr.com/">©</a></div>
  368. </body>
  369. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement