API tools faq
paste
Advertisement
MystiqueAquanian

Old Ch Page

MystiqueAquanian
Sep 1st, 2017
111
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 42.47 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-- macfustythemes -->
  4. <head>
  5. <title>Characters</title>
  6. {block:Description}
  7. <meta name="description" content="{MetaDescription}">
  8. {/block:Description}
  9.  
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/01wstkc/Bvdnq7h99/jquery.fullpage.css" />
  14. <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  15.  
  16.  
  17. <!-- HTML5 Shiv -->
  18. <!--[if lt IE 9]>
  19. <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
  20. <![endif]-->
  21.  
  22. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  23. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  24. <script type="text/javascript">
  25. function viewTab(listitem) {
  26. var showtab = $(listitem).attr("id");
  27. $("ul#nav li.active").removeClass("active");
  28. $(listitem).addClass("active");
  29. $("#content .show").removeClass("show");
  30. $("#content #" + showtab).addClass("show");
  31. }
  32. $(document).ready(function() {
  33. $("#content #tab1").addClass("show");
  34. $("ul#nav li#tab1").addClass("active");
  35. $("ul#nav li").click(function () {
  36. viewTab(this);
  37. });
  38.  
  39. $("#filter input").change(function() {
  40. $("ul#nav li").removeClass("hidden visible");
  41. var showItems = $("ul#nav li");
  42. $("#filter input").filter(":checked").each(function() {
  43. var filt = $(this).attr("data-filter");
  44. if(filt != undefined) {
  45. showItems = $(showItems).filter("." + filt);
  46. }
  47. });
  48. $(showItems).addClass("visible");
  49. $("ul#nav li").not(".visible").addClass("hidden");
  50. viewTab($(".visible").first());
  51. });
  52. });
  53. </script>
  54.  
  55. <style>
  56.  
  57. body {
  58. background-repeat: repeat;
  59. font-size: 11px;
  60. font-family: 'Calibri', sans-serif;
  61. background-color: #f7f7f7;
  62. color: #f7f7f7;
  63. }
  64.  
  65. a {
  66. color: #9ab2ba;
  67. font-size: 12px;
  68. font-weight: bold;
  69. text-decoration: none;
  70. -moz-transition: all 0.5s ease;
  71. -o-transition: all 0.5s ease;
  72. -webkit-transition: all 0.5s ease;
  73. transition: all 0.5s ease;
  74. }
  75.  
  76. a:hover {
  77. text-decoration: underline;
  78. }
  79.  
  80. #header {
  81. font-family: 'Roboto', sans-serif;
  82. width: 800px;
  83. text-align: center;
  84. color: #1e1e1e;
  85. }
  86.  
  87. @media screen and (min-width: 1367px) {
  88. #header {
  89. margin: 5% auto;
  90. }
  91. }
  92.  
  93. @media screen and (max-width: 1366px) {
  94. #header {
  95. margin: 3% auto;
  96. }
  97. }
  98.  
  99. #header a {
  100. padding: 0 5px;
  101. text-transform: uppercase;
  102. color: #1e1e1e;
  103. }
  104.  
  105. h1 {
  106. font-size: 26px;
  107. font-weight: bold;
  108. text-transform: lowercase;
  109. letter-spacing: 3px;
  110. margin-bottom: 0;
  111. }
  112.  
  113. #main {
  114. position: absolute;
  115. top: 0;
  116. bottom: 0;
  117. left: 0;
  118. right: 0;
  119. margin: auto;
  120. width: 1000px;
  121. height: 540px;
  122. }
  123.  
  124. #container {
  125. position: fixed;
  126. margin-left: 180px;
  127. width: 800px;
  128. height: 500px;
  129. background-color: #1e1e1e;
  130. padding: 10px;
  131. }
  132.  
  133. ul#nav {
  134. position: fixed;
  135. overflow: auto;
  136. margin-top: 80px;
  137. padding: 20px 0 0 30px;
  138. width: 321px;
  139. height: 300px;
  140. }
  141.  
  142. ul#nav li {
  143. list-style-type: none;
  144. float: left;
  145. height: 80px;
  146. width: 80px;
  147. margin: 0 20px 20px 0;
  148. opacity: 0.6;
  149. cursor: pointer;
  150. }
  151.  
  152. ul#nav li img {
  153. width: 100%;
  154. height: 100%;
  155. }
  156.  
  157. ul#nav li.active {
  158. opacity: 1;
  159. }
  160.  
  161. ul#nav li.hidden {
  162. display: none;
  163. }
  164.  
  165. ul#nav::-webkit-scrollbar-track
  166. {
  167. background-color: #000000;
  168. }
  169.  
  170. ul#nav::-webkit-scrollbar
  171. {
  172. width: 5px;
  173. }
  174.  
  175. ul#nav::-webkit-scrollbar-thumb
  176. {
  177. background-color: #f7f7f7;
  178. }
  179.  
  180. #content {
  181. float: right;
  182. width: 427px;
  183. height: 500px;
  184. background-color: #000000;
  185. }
  186.  
  187. .tab {
  188. position: fixed;
  189. width: 387px;
  190. height: 460px;
  191. padding: 20px;
  192. overflow-y: auto;
  193. overflow-x: hidden;
  194. text-align: justify;
  195. display: none;
  196. }
  197.  
  198. .show {
  199. display: block;
  200. }
  201.  
  202. img.main {
  203. margin: -20px 0 0 -20px;
  204. width: 420px;
  205. height: 500px;
  206. }
  207.  
  208. .tab::-webkit-scrollbar-track
  209. {
  210. background-color: #000000;
  211. }
  212.  
  213. .tab::-webkit-scrollbar
  214. {
  215. width: 7px;
  216. }
  217.  
  218. .tab::-webkit-scrollbar-thumb
  219. {
  220. background-color: #f7f7f7;
  221.  
  222. }
  223.  
  224. h2, h3 {
  225. font-family: 'Roboto', sans-serif;
  226. font-size: 18px;
  227. font-weight: bold;
  228. text-transform: lowercase;
  229. letter-spacing: 3px;
  230. text-align: center;
  231. margin: 50px 0;
  232. }
  233.  
  234. h3 {
  235. margin: 35px 0;
  236. font-size: 14px;
  237. text-align: left;
  238. }
  239.  
  240. .quote {
  241. position: relative;
  242. text-transform: uppercase;
  243. margin: 50px 0 40px 75px;
  244. width: 300px;
  245. }
  246.  
  247. .quote::before {
  248. content: '“';
  249. font-family: 'Times New Roman', sans-serif;
  250. font-size: 150px;
  251. color: #9ab2ba;
  252. position: absolute;
  253. top: -50px;
  254. left: -70px;
  255. }
  256.  
  257. .links {
  258. font-family: 'Roboto', sans-serif;
  259. text-align: right;
  260. text-transform: uppercase;
  261. letter-spacing: 1px;
  262. }
  263.  
  264. #filter {
  265. position: fixed;
  266. width: 130px;
  267. height: 480px;
  268. padding: 20px;
  269. background-color: #1e1e1e;
  270. overflow: auto;
  271. }
  272.  
  273. #filter::-webkit-scrollbar-track
  274. {
  275. background-color: #000000;
  276. }
  277.  
  278. #filter::-webkit-scrollbar
  279. {
  280. width: 5px;
  281.  
  282. }
  283.  
  284. #filter::-webkit-scrollbar-thumb
  285. {
  286. background-color: #f7f7f7;
  287. border: 1px solid #1e1e1e;
  288. }
  289.  
  290. h4 {
  291. font-family: 'Roboto', sans-serif;
  292. font-size: 14px;
  293. font-weight: bold;
  294. text-transform: lowercase;
  295. letter-spacing: 3px;
  296. margin: 25px 0;
  297. }
  298.  
  299. label {
  300. display: inline-block;
  301. cursor: pointer;
  302. position: relative;
  303. padding-left: 20px;
  304. margin-right: 8px;
  305. font-size: 13px;
  306. -moz-transition: all 0.5s ease;
  307. -o-transition: all 0.5s ease;
  308. -webkit-transition: all 0.5s ease;
  309. transition: all 0.5s ease;
  310. }
  311.  
  312. input[type=radio] {
  313. display: none;
  314. }
  315.  
  316. label:before {
  317. content: "";
  318. display: inline-block;
  319. width: 10px;
  320. height: 10px;
  321. margin-right: 10px;
  322. position: absolute;
  323. left: 0;
  324. bottom: 4px;
  325. background-color: #f7f7f7;
  326. }
  327.  
  328. input[type=radio]:checked + label:before {
  329. content: "\274C";
  330. color: #1e1e1e;
  331. font-size: 8px;
  332. text-align: center;
  333. line-height: 10px;
  334. }
  335.  
  336. #credit {
  337. font-family: 'Roboto', sans-serif;
  338. font-size: 9px;
  339. position: absolute;
  340. right: 0;
  341. bottom: -20px;
  342. }
  343.  
  344. #credit a {
  345. color: #000000;
  346. }
  347.  
  348. </style>
  349. </head>
  350. <body>
  351. <div id="header">
  352. <h1>characters</h1>
  353. <a href="/">Home</a> | <a href="/ask">Ask</a> | <a href="/allworks">Submit</a> | <a href="/tags">Tags</a>
  354. </div>
  355. <div id="main">
  356. <div id="filter">
  357. <!-- This is the filter section of the code to the left of the screen. You can add as many categories as you like and change the names however you would like. Just remember that 'input id=" "' should equal 'label for=" "' on the next line down. Make sure the name you choose for the "data-filter" label is just one word, as this is how the filters work. -->
  358. <h4>Gender</h4>
  359.  
  360. <p><input id="anycategory1" type="radio" name="category1" checked>
  361. <label for="anycategory1">All</label>
  362.  
  363. <p><input id="option1" type="radio" name="category1" data-filter="one">
  364. <label for="option1">Male</label>
  365.  
  366. <p><input id="option2" type="radio" name="category1" data-filter="two">
  367. <label for="option2">Female</label>
  368.  
  369.  
  370.  
  371. <h4>Universe</h4>
  372.  
  373. <p><input id="anycategory2" type="radio" name="category2" checked>
  374. <label for="anycategory2">All</label>
  375.  
  376. <p><input id="optiona" type="radio" name="category2" data-filter="a">
  377. <label for="optiona">Anti-Stereotypes</label>
  378.  
  379. <p><input id="optionb" type="radio" name="category2" data-filter="b">
  380. <label for="optionb">Sovereignty</label>
  381.  
  382. <p><input id="optionc" type="radio" name="category2" data-filter="c">
  383. <label for="optionc">Out of Time</label>
  384.  
  385.  
  386. </div>
  387. <div id="container">
  388. <ul id="nav">
  389. <!-- This is the icons list in the middle of the screen. Make sure you have said 'id=" "' to the tab you would like to display when clicking on this icon. For example, clicking on the first icon below will display Tab 1.
  390.  
  391. Secondly, check the 'class=" "' label. These should correspond with the "data-filter" labels above. When a checkbox is selected, only icons which have a class matching that data-filter label will be shown. For example, if you select the checkbox with the data-filter label "one" above, only icons with the class "one" will be shown. You can have as many classes as you need, and as many icons as you need. -->
  392.  
  393. <!--anti-stereotypes-->
  394.  
  395. <li id="tab1" class="two a"><img src="http://i.imgur.com/ZyUMps1.gif"></li>
  396.  
  397. <li id="tab2" class="two a"><img src="http://i.imgur.com/Z0azNp1.gif"></li>
  398.  
  399. <li id="tab3" class="two a"><img src="http://i.imgur.com/DVFRp4h.gif"></li>
  400.  
  401. <li id="tab4" class="one a"><img src="http://i.imgur.com/7d1mhvQ.gif"></li>
  402.  
  403. <li id="tab5" class="one a"><img src="http://i.imgur.com/5ZVLpcU.gif"></li>
  404.  
  405. <li id="tab6" class="one a"><img src="http://imgur.com/gsp4WNN.gif"></li>
  406.  
  407. <!--sovereignty-->
  408.  
  409. <li id="tab7" class="two b"><img src="http://imgur.com/DPwLUWf.gif"></li>
  410.  
  411. <li id="tab8" class="two b"><img src="http://i.imgur.com/w3DRGNJ.gif"></li>
  412.  
  413. <li id="tab9" class="one b"><img src="http://i.imgur.com/GTF6iIJ.gif"></li>
  414.  
  415. <li id="tab10" class="one b"><img src="http://i.imgur.com/isvKrQx.gif"></li>
  416.  
  417. <li id="tab11" class="two b"><img src="http://i.imgur.com/3CrBmQk.gif"></li>
  418.  
  419.  
  420.  
  421. </ul>
  422.  
  423.  
  424.  
  425.  
  426. <div id="content">
  427. <!-- These are the main content tabs to the right of the screen. When an icon is selected, the corresponding tab will be shown according to the 'id=" "' label. -->
  428. <div id="tab1" class="tab">
  429. <h2>sarah deidra adrienne</h2>
  430.  
  431. <div class="links">
  432. <a href="/tagged/sarah">inspo tag</a> -
  433. <a href=" ">pinterest board</a></div>
  434.  
  435. <div class="quote">The only thing that can keep you from being crushed, is to be stronger. That's how we survive. We don't just sit and read and look pretty and someone will come and fall in love with you. </div>
  436.  
  437. <h3>BIO</h3>
  438. <p>An only child in a wealthy family, Sarah had always been a little less than sweet and mild. She had grown up to learn that if you want something, you need to go out and get it, and nothing is going to stop her, even if it means not being nice to everyone. </p>
  439.  
  440. <p>Her steel cold determination to do what it takes to protect herself and the people she loves gave her the label of the '<i>mean bitch</i> queen bee. She hated being seen as the brainless anorexic cheerleader just because of her passion for cheerleading and clothes that makes her feel good, but she knew all along that being stereotyped is inevitable. </p>
  441. </div>
  442.  
  443.  
  444.  
  445.  
  446.  
  447. <div id="tab2" class="tab">
  448. <h2>amber annalise hill</h2>
  449.  
  450. <div class="links">
  451. <a href="/tagged/amber">inspo tag</a> -
  452. <a href=" ">pinterest board</a> </div>
  453.  
  454. <div class="quote">I'm not pretty enough. I'm not smart enough. I'm not strong enough. Heck, from the day I was born, I was never <i>good</i> enough for anybody. </div>
  455.  
  456. <h3>BIO</h3>
  457. <p>As the middle child of her family with an older sister (Olivia) and younger brother (Kingston), Amber has never had an easy time getting her parents' attention. She had to do so much more to just get a glance from her family, but still, her siblings have always been in the spotlight. Even after she became part of Sarah's group, she was still just a sidekick. Amber is not super intelligent, but just enough that she was labeled as the 'dumb blonde'. She despised it, but she didn't dare protest against it, in case it will cost her the position and the little power she had by being Sarah's sidekick. </p>
  458. </div>
  459.  
  460.  
  461.  
  462.  
  463.  
  464. <div id="tab3" class="tab">
  465. <h2>courtney hayley jackson</h2>
  466.  
  467. <div class="links">
  468. <a href="/tagged/sarah">inspo tag</a> -
  469. <a href=" ">pinterest board</a> </div>
  470.  
  471. <div class="quote">Don't say that I'm 'not like other girls'. That is an insult to the rest of the beautiful, smart and strong female race. </div>
  472.  
  473. <h3>BIO</h3>
  474. <p>Courtney is your typical good girl/bookworm, but she hated how she keeps seeing these stories with protagonists like her who keeps reminding the readers that the main character is 'not like other girls'. It was so difficult for her to know that girls around the world feel like they have to put down other girls in order to show that they are unique; every single one of them says 'I have plain brown hair and I’m not beautiful but I’m pretty I guess and I’m <i>not like the other girls</i> and that just makes her sick. She has seen so many strong and talented girls whom she learns from, who inspired her, who she would love to be like, and breaking that stereotype is what she aims to do in her life. </p>
  475. </div>
  476.  
  477.  
  478.  
  479.  
  480.  
  481. <div id="tab4" class="tab">
  482. <h2>thomas leo williams</h2>
  483.  
  484. <div class="links">
  485. <a href="/tagged/thomas">inspo tag</a> -
  486. <a href=" ">pinterest board</a>
  487. </div>
  488.  
  489. <div class="quote">Everyone has the right to feel good about themselves, and you don't need to put down someone else to do that. </div>
  490.  
  491. <h3>BIO</h3>
  492. <p> </p>
  493. </div>
  494.  
  495.  
  496.  
  497.  
  498.  
  499. <div id="tab5" class="tab">
  500. <h2>andrew zachary charles</h2>
  501.  
  502. <div class="links">
  503. <a href="/tagged/andrew">inspo tag</a> -
  504. <a href=" ">pinterest board</a>
  505. </div>
  506.  
  507. <div class="quote">Of course my family has a good sense of humor, my grandad named my dad charles charles. If that ain't humor I don't know what it is. </div>
  508.  
  509. <h3>BIO</h3>
  510. <p> </p>
  511. </div>
  512.  
  513.  
  514.  
  515.  
  516.  
  517. <div id="tab6" class="tab">
  518. <h2>theo daniel dickson</h2>
  519.  
  520. <div class="links">
  521. <a href="/tagged/theo">inspo tag</a> -
  522. <a href=" ">pinterest board</a>
  523. </div>
  524.  
  525. <div class="quote">Hey, I can't escape it. It's in my blood. I'm destined to be a Dick...son. </div>
  526.  
  527. <h3>BIO</h3>
  528. <p> </p>
  529. </div>
  530.  
  531.  
  532.  
  533.  
  534.  
  535. <div id="tab7" class="tab">
  536. <h2>ara victoria montagu</h2>
  537.  
  538. <div class="links">
  539. <a href="/tagged/thomas">inspo tag</a> -
  540. <a href=" ">pinterest board</a>
  541. </div>
  542.  
  543. <div class="quote">What's the point of setting up rules when people are going to break them anyway? </div>
  544.  
  545. <h3>BIO</h3>
  546. <p> </p>
  547. </div>
  548.  
  549.  
  550.  
  551.  
  552.  
  553. <div id="tab8" class="tab">
  554. <h2>cristiana grenfell</h2>
  555.  
  556. <div class="links">
  557. <a href="/tagged/thomas">inspo tag</a> -
  558. <a href=" ">pinterest board</a>
  559. </div>
  560.  
  561. <div class="quote">I might be small, but your brain is smaller. </div>
  562.  
  563. <h3>BIO</h3>
  564. <p> </p>
  565. </div>
  566.  
  567.  
  568.  
  569.  
  570.  
  571. <div id="tab9" class="tab">
  572. <h2>lucas drummond</h2>
  573.  
  574. <div class="links">
  575. <a href="/tagged/thomas">inspo tag</a> -
  576. <a href=" ">pinterest board</a>
  577. </div>
  578.  
  579. <div class="quote">If you don't strike first and strike fast, you die. That's the truth. </div>
  580.  
  581. <h3>BIO</h3>
  582. <p> </p>
  583. </div>
  584.  
  585.  
  586.  
  587.  
  588. <div id="tab10" class="tab">
  589. <h2>stephen lyttelton</h2>
  590.  
  591. <div class="links">
  592. <a href="/tagged/thomas">inspo tag</a> -
  593. <a href=" ">pinterest board</a>
  594. </div>
  595.  
  596. <div class="quote">If you haven't noticed, kings are meant to sit back and enjoy. Queens do the work. </div>
  597.  
  598. <h3>BIO</h3>
  599. <p> </p>
  600. </div>
  601.  
  602.  
  603.  
  604.  
  605. <div id="tab11" class="tab">
  606. <h2>eliza de clare-lyttelton</h2>
  607.  
  608. <div class="links">
  609. <a href="/tagged/thomas">inspo tag</a> -
  610. <a href=" ">pinterest board</a>
  611. </div>
  612.  
  613. <div class="quote">From the start, women have been and will always be the deadliest piece on the board.</div>
  614.  
  615. <h3>BIO</h3>
  616. <p> </p>
  617. </div>
  618.  
  619.  
  620.  
  621.  
  622.  
  623.  
  624.  
  625.  
  626.  
  627. </div>
  628. <div id="credit">
  629. <a href="http://macfustythemes.tumblr.com/">macfustythemes</a>
  630. </div>
  631. </div>
  632. </div>
  633. </body>
  634. </html><!DOCTYPE html>
  635.  
  636. <!-- macfustythemes -->
  637. <head>
  638. <title>Characters</title>
  639. {block:Description}
  640. <meta name="description" content="{MetaDescription}">
  641. {/block:Description}
  642.  
  643.  
  644. <link rel="shortcut icon" href="{Favicon}">
  645.  
  646. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/01wstkc/Bvdnq7h99/jquery.fullpage.css" />
  647. <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  648.  
  649.  
  650. <!-- HTML5 Shiv -->
  651. <!--[if lt IE 9]>
  652. <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
  653. <![endif]-->
  654.  
  655. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  656. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  657. <script type="text/javascript">
  658. function viewTab(listitem) {
  659. var showtab = $(listitem).attr("id");
  660. $("ul#nav li.active").removeClass("active");
  661. $(listitem).addClass("active");
  662. $("#content .show").removeClass("show");
  663. $("#content #" + showtab).addClass("show");
  664. }
  665. $(document).ready(function() {
  666. $("#content #tab1").addClass("show");
  667. $("ul#nav li#tab1").addClass("active");
  668. $("ul#nav li").click(function () {
  669. viewTab(this);
  670. });
  671.  
  672. $("#filter input").change(function() {
  673. $("ul#nav li").removeClass("hidden visible");
  674. var showItems = $("ul#nav li");
  675. $("#filter input").filter(":checked").each(function() {
  676. var filt = $(this).attr("data-filter");
  677. if(filt != undefined) {
  678. showItems = $(showItems).filter("." + filt);
  679. }
  680. });
  681. $(showItems).addClass("visible");
  682. $("ul#nav li").not(".visible").addClass("hidden");
  683. viewTab($(".visible").first());
  684. });
  685. });
  686. </script>
  687.  
  688. <style>
  689.  
  690. body {
  691. background-repeat: repeat;
  692. font-size: 11px;
  693. font-family: 'Calibri', sans-serif;
  694. background-color: #f7f7f7;
  695. color: #f7f7f7;
  696. }
  697.  
  698. a {
  699. color: #9ab2ba;
  700. font-size: 12px;
  701. font-weight: bold;
  702. text-decoration: none;
  703. -moz-transition: all 0.5s ease;
  704. -o-transition: all 0.5s ease;
  705. -webkit-transition: all 0.5s ease;
  706. transition: all 0.5s ease;
  707. }
  708.  
  709. a:hover {
  710. text-decoration: underline;
  711. }
  712.  
  713. #header {
  714. font-family: 'Roboto', sans-serif;
  715. width: 800px;
  716. text-align: center;
  717. color: #1e1e1e;
  718. }
  719.  
  720. @media screen and (min-width: 1367px) {
  721. #header {
  722. margin: 5% auto;
  723. }
  724. }
  725.  
  726. @media screen and (max-width: 1366px) {
  727. #header {
  728. margin: 3% auto;
  729. }
  730. }
  731.  
  732. #header a {
  733. padding: 0 5px;
  734. text-transform: uppercase;
  735. color: #1e1e1e;
  736. }
  737.  
  738. h1 {
  739. font-size: 26px;
  740. font-weight: bold;
  741. text-transform: lowercase;
  742. letter-spacing: 3px;
  743. margin-bottom: 0;
  744. }
  745.  
  746. #main {
  747. position: absolute;
  748. top: 0;
  749. bottom: 0;
  750. left: 0;
  751. right: 0;
  752. margin: auto;
  753. width: 1000px;
  754. height: 540px;
  755. }
  756.  
  757. #container {
  758. position: fixed;
  759. margin-left: 180px;
  760. width: 800px;
  761. height: 500px;
  762. background-color: #1e1e1e;
  763. padding: 10px;
  764. }
  765.  
  766. ul#nav {
  767. position: fixed;
  768. overflow: auto;
  769. margin-top: 80px;
  770. padding: 20px 0 0 30px;
  771. width: 321px;
  772. height: 300px;
  773. }
  774.  
  775. ul#nav li {
  776. list-style-type: none;
  777. float: left;
  778. height: 80px;
  779. width: 80px;
  780. margin: 0 20px 20px 0;
  781. opacity: 0.6;
  782. cursor: pointer;
  783. }
  784.  
  785. ul#nav li img {
  786. width: 100%;
  787. height: 100%;
  788. }
  789.  
  790. ul#nav li.active {
  791. opacity: 1;
  792. }
  793.  
  794. ul#nav li.hidden {
  795. display: none;
  796. }
  797.  
  798. ul#nav::-webkit-scrollbar-track
  799. {
  800. background-color: #000000;
  801. }
  802.  
  803. ul#nav::-webkit-scrollbar
  804. {
  805. width: 5px;
  806. }
  807.  
  808. ul#nav::-webkit-scrollbar-thumb
  809. {
  810. background-color: #f7f7f7;
  811. }
  812.  
  813. #content {
  814. float: right;
  815. width: 427px;
  816. height: 500px;
  817. background-color: #000000;
  818. }
  819.  
  820. .tab {
  821. position: fixed;
  822. width: 387px;
  823. height: 460px;
  824. padding: 20px;
  825. overflow-y: auto;
  826. overflow-x: hidden;
  827. text-align: justify;
  828. display: none;
  829. }
  830.  
  831. .show {
  832. display: block;
  833. }
  834.  
  835. img.main {
  836. margin: -20px 0 0 -20px;
  837. width: 420px;
  838. height: 500px;
  839. }
  840.  
  841. .tab::-webkit-scrollbar-track
  842. {
  843. background-color: #000000;
  844. }
  845.  
  846. .tab::-webkit-scrollbar
  847. {
  848. width: 7px;
  849. }
  850.  
  851. .tab::-webkit-scrollbar-thumb
  852. {
  853. background-color: #f7f7f7;
  854.  
  855. }
  856.  
  857. h2, h3 {
  858. font-family: 'Roboto', sans-serif;
  859. font-size: 18px;
  860. font-weight: bold;
  861. text-transform: lowercase;
  862. letter-spacing: 3px;
  863. text-align: center;
  864. margin: 50px 0;
  865. }
  866.  
  867. h3 {
  868. margin: 35px 0;
  869. font-size: 14px;
  870. text-align: left;
  871. }
  872.  
  873. .quote {
  874. position: relative;
  875. text-transform: uppercase;
  876. margin: 50px 0 40px 75px;
  877. width: 300px;
  878. }
  879.  
  880. .quote::before {
  881. content: '“';
  882. font-family: 'Times New Roman', sans-serif;
  883. font-size: 150px;
  884. color: #9ab2ba;
  885. position: absolute;
  886. top: -50px;
  887. left: -70px;
  888. }
  889.  
  890. .links {
  891. font-family: 'Roboto', sans-serif;
  892. text-align: right;
  893. text-transform: uppercase;
  894. letter-spacing: 1px;
  895. }
  896.  
  897. #filter {
  898. position: fixed;
  899. width: 130px;
  900. height: 480px;
  901. padding: 20px;
  902. background-color: #1e1e1e;
  903. overflow: auto;
  904. }
  905.  
  906. #filter::-webkit-scrollbar-track
  907. {
  908. background-color: #000000;
  909. }
  910.  
  911. #filter::-webkit-scrollbar
  912. {
  913. width: 5px;
  914.  
  915. }
  916.  
  917. #filter::-webkit-scrollbar-thumb
  918. {
  919. background-color: #f7f7f7;
  920. border: 1px solid #1e1e1e;
  921. }
  922.  
  923. h4 {
  924. font-family: 'Roboto', sans-serif;
  925. font-size: 14px;
  926. font-weight: bold;
  927. text-transform: lowercase;
  928. letter-spacing: 3px;
  929. margin: 25px 0;
  930. }
  931.  
  932. label {
  933. display: inline-block;
  934. cursor: pointer;
  935. position: relative;
  936. padding-left: 20px;
  937. margin-right: 8px;
  938. font-size: 13px;
  939. -moz-transition: all 0.5s ease;
  940. -o-transition: all 0.5s ease;
  941. -webkit-transition: all 0.5s ease;
  942. transition: all 0.5s ease;
  943. }
  944.  
  945. input[type=radio] {
  946. display: none;
  947. }
  948.  
  949. label:before {
  950. content: "";
  951. display: inline-block;
  952. width: 10px;
  953. height: 10px;
  954. margin-right: 10px;
  955. position: absolute;
  956. left: 0;
  957. bottom: 4px;
  958. background-color: #f7f7f7;
  959. }
  960.  
  961. input[type=radio]:checked + label:before {
  962. content: "\274C";
  963. color: #1e1e1e;
  964. font-size: 8px;
  965. text-align: center;
  966. line-height: 10px;
  967. }
  968.  
  969. #credit {
  970. font-family: 'Roboto', sans-serif;
  971. font-size: 9px;
  972. position: absolute;
  973. right: 0;
  974. bottom: -20px;
  975. }
  976.  
  977. #credit a {
  978. color: #000000;
  979. }
  980.  
  981. </style>
  982. </head>
  983. <body>
  984. <div id="header">
  985. <h1>characters</h1>
  986. <a href="/">Home</a> | <a href="/ask">Ask</a> | <a href="/allworks">Submit</a> | <a href="/tags">Tags</a>
  987. </div>
  988. <div id="main">
  989. <div id="filter">
  990. <!-- This is the filter section of the code to the left of the screen. You can add as many categories as you like and change the names however you would like. Just remember that 'input id=" "' should equal 'label for=" "' on the next line down. Make sure the name you choose for the "data-filter" label is just one word, as this is how the filters work. -->
  991. <h4>Gender</h4>
  992.  
  993. <p><input id="anycategory1" type="radio" name="category1" checked>
  994. <label for="anycategory1">All</label>
  995.  
  996. <p><input id="option1" type="radio" name="category1" data-filter="one">
  997. <label for="option1">Male</label>
  998.  
  999. <p><input id="option2" type="radio" name="category1" data-filter="two">
  1000. <label for="option2">Female</label>
  1001.  
  1002.  
  1003.  
  1004. <h4>Universe</h4>
  1005.  
  1006. <p><input id="anycategory2" type="radio" name="category2" checked>
  1007. <label for="anycategory2">All</label>
  1008.  
  1009. <p><input id="optiona" type="radio" name="category2" data-filter="a">
  1010. <label for="optiona">Anti-Stereotypes</label>
  1011.  
  1012. <p><input id="optionb" type="radio" name="category2" data-filter="b">
  1013. <label for="optionb">Sovereignty</label>
  1014.  
  1015. <p><input id="optionc" type="radio" name="category2" data-filter="c">
  1016. <label for="optionc">Out of Time</label>
  1017.  
  1018.  
  1019. </div>
  1020. <div id="container">
  1021. <ul id="nav">
  1022. <!-- This is the icons list in the middle of the screen. Make sure you have said 'id=" "' to the tab you would like to display when clicking on this icon. For example, clicking on the first icon below will display Tab 1.
  1023.  
  1024. Secondly, check the 'class=" "' label. These should correspond with the "data-filter" labels above. When a checkbox is selected, only icons which have a class matching that data-filter label will be shown. For example, if you select the checkbox with the data-filter label "one" above, only icons with the class "one" will be shown. You can have as many classes as you need, and as many icons as you need. -->
  1025.  
  1026. <!--anti-stereotypes-->
  1027.  
  1028. <li id="tab1" class="two a"><img src="http://i.imgur.com/ZyUMps1.gif"></li>
  1029.  
  1030. <li id="tab2" class="two a"><img src="http://i.imgur.com/Z0azNp1.gif"></li>
  1031.  
  1032. <li id="tab3" class="two a"><img src="http://i.imgur.com/DVFRp4h.gif"></li>
  1033.  
  1034. <li id="tab4" class="one a"><img src="http://i.imgur.com/7d1mhvQ.gif"></li>
  1035.  
  1036. <li id="tab5" class="one a"><img src="http://i.imgur.com/5ZVLpcU.gif"></li>
  1037.  
  1038. <li id="tab6" class="one a"><img src="http://imgur.com/gsp4WNN.gif"></li>
  1039.  
  1040. <!--sovereignty-->
  1041.  
  1042. <li id="tab7" class="two b"><img src="http://imgur.com/DPwLUWf.gif"></li>
  1043.  
  1044. <li id="tab8" class="two b"><img src="http://i.imgur.com/w3DRGNJ.gif"></li>
  1045.  
  1046. <li id="tab9" class="one b"><img src="http://i.imgur.com/GTF6iIJ.gif"></li>
  1047.  
  1048. <li id="tab10" class="one b"><img src="http://i.imgur.com/isvKrQx.gif"></li>
  1049.  
  1050. <li id="tab11" class="two b"><img src="http://i.imgur.com/3CrBmQk.gif"></li>
  1051.  
  1052.  
  1053.  
  1054. </ul>
  1055.  
  1056.  
  1057.  
  1058.  
  1059. <div id="content">
  1060. <!-- These are the main content tabs to the right of the screen. When an icon is selected, the corresponding tab will be shown according to the 'id=" "' label. -->
  1061. <div id="tab1" class="tab">
  1062. <h2>sarah deidra adrienne</h2>
  1063.  
  1064. <div class="links">
  1065. <a href="/tagged/sarah">inspo tag</a> -
  1066. <a href=" ">pinterest board</a></div>
  1067.  
  1068. <div class="quote">The only thing that can keep you from being crushed, is to be stronger. That's how we survive. We don't just sit and read and look pretty and someone will come and fall in love with you. </div>
  1069.  
  1070. <h3>BIO</h3>
  1071. <p>An only child in a wealthy family, Sarah had always been a little less than sweet and mild. She had grown up to learn that if you want something, you need to go out and get it, and nothing is going to stop her, even if it means not being nice to everyone. </p>
  1072.  
  1073. <p>Her steel cold determination to do what it takes to protect herself and the people she loves gave her the label of the '<i>mean bitch</i> queen bee. She hated being seen as the brainless anorexic cheerleader just because of her passion for cheerleading and clothes that makes her feel good, but she knew all along that being stereotyped is inevitable. </p>
  1074. </div>
  1075.  
  1076.  
  1077.  
  1078.  
  1079.  
  1080. <div id="tab2" class="tab">
  1081. <h2>amber annalise hill</h2>
  1082.  
  1083. <div class="links">
  1084. <a href="/tagged/amber">inspo tag</a> -
  1085. <a href=" ">pinterest board</a> </div>
  1086.  
  1087. <div class="quote">I'm not pretty enough. I'm not smart enough. I'm not strong enough. Heck, from the day I was born, I was never <i>good</i> enough for anybody. </div>
  1088.  
  1089. <h3>BIO</h3>
  1090. <p>As the middle child of her family with an older sister (Olivia) and younger brother (Kingston), Amber has never had an easy time getting her parents' attention. She had to do so much more to just get a glance from her family, but still, her siblings have always been in the spotlight. Even after she became part of Sarah's group, she was still just a sidekick. Amber is not super intelligent, but just enough that she was labeled as the 'dumb blonde'. She despised it, but she didn't dare protest against it, in case it will cost her the position and the little power she had by being Sarah's sidekick. </p>
  1091. </div>
  1092.  
  1093.  
  1094.  
  1095.  
  1096.  
  1097. <div id="tab3" class="tab">
  1098. <h2>courtney hayley jackson</h2>
  1099.  
  1100. <div class="links">
  1101. <a href="/tagged/sarah">inspo tag</a> -
  1102. <a href=" ">pinterest board</a> </div>
  1103.  
  1104. <div class="quote">Don't say that I'm 'not like other girls'. That is an insult to the rest of the beautiful, smart and strong female race. </div>
  1105.  
  1106. <h3>BIO</h3>
  1107. <p>Courtney is your typical good girl/bookworm, but she hated how she keeps seeing these stories with protagonists like her who keeps reminding the readers that the main character is 'not like other girls'. It was so difficult for her to know that girls around the world feel like they have to put down other girls in order to show that they are unique; every single one of them says 'I have plain brown hair and I’m not beautiful but I’m pretty I guess and I’m <i>not like the other girls</i> and that just makes her sick. She has seen so many strong and talented girls whom she learns from, who inspired her, who she would love to be like, and breaking that stereotype is what she aims to do in her life. </p>
  1108. </div>
  1109.  
  1110.  
  1111.  
  1112.  
  1113.  
  1114. <div id="tab4" class="tab">
  1115. <h2>thomas leo williams</h2>
  1116.  
  1117. <div class="links">
  1118. <a href="/tagged/thomas">inspo tag</a> -
  1119. <a href=" ">pinterest board</a>
  1120. </div>
  1121.  
  1122. <div class="quote">Everyone has the right to feel good about themselves, and you don't need to put down someone else to do that. </div>
  1123.  
  1124. <h3>BIO</h3>
  1125. <p> </p>
  1126. </div>
  1127.  
  1128.  
  1129.  
  1130.  
  1131.  
  1132. <div id="tab5" class="tab">
  1133. <h2>andrew zachary charles</h2>
  1134.  
  1135. <div class="links">
  1136. <a href="/tagged/andrew">inspo tag</a> -
  1137. <a href=" ">pinterest board</a>
  1138. </div>
  1139.  
  1140. <div class="quote">Of course my family has a good sense of humor, my grandad named my dad charles charles. If that ain't humor I don't know what it is. </div>
  1141.  
  1142. <h3>BIO</h3>
  1143. <p> </p>
  1144. </div>
  1145.  
  1146.  
  1147.  
  1148.  
  1149.  
  1150. <div id="tab6" class="tab">
  1151. <h2>theo daniel dickson</h2>
  1152.  
  1153. <div class="links">
  1154. <a href="/tagged/theo">inspo tag</a> -
  1155. <a href=" ">pinterest board</a>
  1156. </div>
  1157.  
  1158. <div class="quote">Hey, I can't escape it. It's in my blood. I'm destined to be a Dick...son. </div>
  1159.  
  1160. <h3>BIO</h3>
  1161. <p> </p>
  1162. </div>
  1163.  
  1164.  
  1165.  
  1166.  
  1167.  
  1168. <div id="tab7" class="tab">
  1169. <h2>ara victoria montagu</h2>
  1170.  
  1171. <div class="links">
  1172. <a href="/tagged/thomas">inspo tag</a> -
  1173. <a href=" ">pinterest board</a>
  1174. </div>
  1175.  
  1176. <div class="quote">What's the point of setting up rules when people are going to break them anyway? </div>
  1177.  
  1178. <h3>BIO</h3>
  1179. <p> </p>
  1180. </div>
  1181.  
  1182.  
  1183.  
  1184.  
  1185.  
  1186. <div id="tab8" class="tab">
  1187. <h2>cristiana grenfell</h2>
  1188.  
  1189. <div class="links">
  1190. <a href="/tagged/thomas">inspo tag</a> -
  1191. <a href=" ">pinterest board</a>
  1192. </div>
  1193.  
  1194. <div class="quote">I might be small, but your brain is smaller. </div>
  1195.  
  1196. <h3>BIO</h3>
  1197. <p> </p>
  1198. </div>
  1199.  
  1200.  
  1201.  
  1202.  
  1203.  
  1204. <div id="tab9" class="tab">
  1205. <h2>lucas drummond</h2>
  1206.  
  1207. <div class="links">
  1208. <a href="/tagged/thomas">inspo tag</a> -
  1209. <a href=" ">pinterest board</a>
  1210. </div>
  1211.  
  1212. <div class="quote">If you don't strike first and strike fast, you die. That's the truth. </div>
  1213.  
  1214. <h3>BIO</h3>
  1215. <p> </p>
  1216. </div>
  1217.  
  1218.  
  1219.  
  1220.  
  1221. <div id="tab10" class="tab">
  1222. <h2>stephen lyttelton</h2>
  1223.  
  1224. <div class="links">
  1225. <a href="/tagged/thomas">inspo tag</a> -
  1226. <a href=" ">pinterest board</a>
  1227. </div>
  1228.  
  1229. <div class="quote">If you haven't noticed, kings are meant to sit back and enjoy. Queens do the work. </div>
  1230.  
  1231. <h3>BIO</h3>
  1232. <p> </p>
  1233. </div>
  1234.  
  1235.  
  1236.  
  1237.  
  1238. <div id="tab11" class="tab">
  1239. <h2>eliza de clare-lyttelton</h2>
  1240.  
  1241. <div class="links">
  1242. <a href="/tagged/thomas">inspo tag</a> -
  1243. <a href=" ">pinterest board</a>
  1244. </div>
  1245.  
  1246. <div class="quote">From the start, women have been and will always be the deadliest piece on the board.</div>
  1247.  
  1248. <h3>BIO</h3>
  1249. <p> </p>
  1250. </div>
  1251.  
  1252.  
  1253.  
  1254.  
  1255.  
  1256.  
  1257.  
  1258.  
  1259.  
  1260. </div>
  1261. <div id="credit">
  1262. <a href="http://macfustythemes.tumblr.com/">macfustythemes</a>
  1263. </div>
  1264. </div>
  1265. </div>
  1266. </body>
  1267. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!