API tools faq
paste
Advertisement
b0rn-to-be-wild

CHARACTER PAGE (bright)

b0rn-to-be-wild
Jun 21st, 2019
1,617
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <!----
  5.  
  6. © borntobewildthemes.tumblr.com | CHARACTER PAGE (bright)
  7.  
  8. + Do not redistribute this page or remove the credits.
  9. + Edit as long as you keep the credits intact.
  10. + Contact me if you have any questions or concerns.
  11. + If you want a custom theme/page you can commission me.
  12. + Thanks for using my page, I hope that you enjoy it.
  13.  
  14. Other credits:
  15.  
  16. - Jquery
  17. - Google fonts
  18. - Font awesome
  19.  
  20. ---->
  21.  
  22. <html>
  23.  
  24. <head>
  25.  
  26. <!--- Change the title of the page here --->
  27.  
  28. <title>{title}</title>
  29.  
  30. <link rel="shortcut icon" href="{Favicon}">
  31.  
  32. <style type="text/css">
  33.  
  34. /* -------- BASICS ------- */
  35.  
  36. body {
  37. margin:0;
  38. width:100%;
  39. height:100%;
  40. font-family:Raleway, Arial;
  41. font-size:12px;
  42. color:#000000;
  43. background:#ffffff;
  44. background-image:url('https://i.stack.imgur.com/ZacDb.jpg')
  45. }
  46.  
  47. /* Links */
  48.  
  49. a {
  50. text-decoration:none;
  51. outline:none;
  52. }
  53.  
  54. a:hover {
  55. -webkit-transition:all 0.8s ease-in-out;
  56. -moz-transition:all 0.8s ease-in-out;
  57. -o-transition:all 0.8s ease-in-out;
  58. }
  59.  
  60. /* Webkit scrollbar */
  61.  
  62. ::-webkit-scrollbar {
  63. width:2px;
  64. height:0px;
  65. }
  66.  
  67. ::-webkit-scrollbar-button:start:decrement,
  68. ::-webkit-scrollbar-button:end:increment {
  69. height:0px;
  70. display:block;
  71. background-color:transparent;
  72. }
  73.  
  74. ::-webkit-scrollbar-track-piece {
  75. background-color:transparent;
  76. }
  77.  
  78. ::-webkit-scrollbar-thumb:vertical {
  79. height:0px;
  80. background-color:#9E10D7;
  81. border:2px solid transparent;
  82. }
  83.  
  84. /* Tumblr controls */
  85.  
  86. #cog {
  87. position:fixed;
  88. bottom:6px;
  89. right:20px;
  90. width:200px;
  91. height:30px;
  92. text-align:right;
  93. }
  94.  
  95. #cog i {
  96. font-size:20px;
  97. color:#000000;
  98. }
  99.  
  100. iframe.tmblr-iframe {
  101. bottom:-7px!important;
  102. margin-top:auto;
  103. right:30px!important;
  104. padding:0px;
  105. padding-right:10px;
  106. opacity:0;
  107. transform:scale(0.6);
  108. transform-origin:100% 0;
  109. -webkit-transform:scale(0.8);
  110. -webkit-transform-origin:100% 0;
  111. -o-transform:scale(0.8);
  112. -o-transform-origin:100% 0;
  113. -moz-transform:scale(0.8);
  114. -moz-transform-origin:100% 0;
  115. -ms-transform:scale(0.8);
  116. -ms-transform-origin:100% 0;
  117. z-index:100000!important;
  118. }
  119.  
  120. iframe.tmblr-iframe:hover {
  121. opacity:1!important;
  122. }
  123.  
  124. /* -------- MENU ------- */
  125.  
  126. #menu {
  127. margin-top:0;
  128. margin-left:0;
  129. width:calc(100% - 60px);
  130. height:57px;
  131. padding:0 30px;
  132. background:rgba(244,244,244, 0.7);
  133. border-bottom:1px solid #dddddd;
  134. z-index:10;
  135. }
  136.  
  137. /* Blog title */
  138.  
  139. #blogtitle {
  140. float:left;
  141. margin-left:50px;
  142. margin-top:0px;
  143. font-size:30px;
  144. line-height:57px;
  145. height:57px;
  146. font-family:'Marvel', sans-serif;
  147. letter-spacing:3px;
  148. color:#000000;
  149. }
  150.  
  151. /* Main links */
  152.  
  153. #mainlinks {
  154. float:right;
  155. margin-top:0px;
  156. height:60px;
  157. line-height:60px;
  158. }
  159.  
  160. #mainlinks a {
  161. margin-right:5px;
  162. padding:4px 8px;
  163. color:#000000;
  164. font-size:14px;
  165. text-transform:uppercase;
  166. }
  167.  
  168. #mainlinks a:hover {
  169. color:#9E10D7;
  170. }
  171.  
  172. /* -------- CONTAINER ------- */
  173.  
  174. #characters {
  175. position:fixed;
  176. margin:0;
  177. width:100%;
  178. height:auto;
  179. overflow:hidden;
  180. min-height:100vh;
  181. }
  182.  
  183. /* -------- SORTING CONTENT ------- */
  184.  
  185. /*-- Character box --*/
  186.  
  187. .tabs {
  188. position:fixed;
  189. left:0;
  190. margin-top:0px;
  191. width:20vw;
  192. min-width:150px;
  193. height:calc(100vh - 78px);
  194. padding:10px 0;
  195. background:rgba(244,244,244, 0.7);
  196. border-right:1px solid #dddddd;
  197. overflow-y:auto;
  198. z-index:10000;
  199. }
  200.  
  201. .tab-links ul {
  202. margin:0;
  203. padding:0;
  204. }
  205.  
  206. .tab-links li {
  207. display:block;
  208. list-style:none;
  209. margin:15px -10px;
  210. width:calc(100% - 20px);
  211. height:120px;
  212. list-style:none;
  213. }
  214.  
  215. /* Character avatars */
  216.  
  217. .tab-links img {
  218. width:100%;
  219. height:120px;
  220. }
  221.  
  222. .tab-links a:hover, li.active a, li.active a:hover {
  223. -webkit-transition:all .3s;
  224. -moz-transition:all .3s;
  225. -o-transition:all .3s;
  226. -ms-transition:all .3s;
  227. transition:all .3s;
  228. }
  229.  
  230. .tab-links li:hover a img, .tab-links li.active a img {
  231. -webkit-filter:grayscale(90%);
  232. }
  233.  
  234. /* Character names */
  235.  
  236. .tab-links li:first-child:after, .tab-links li:nth-child(2):after, .tab-links li:nth-child(3):after, .tab-links li:nth-child(4):after, .tab-links li.active:nth-child(5):after, .tab-links li:nth-child(6):after, .tab-links li:nth-child(7):after, .tab-links li:nth-child(8):after, .tab-links li:nth-child(9):after, .tab-links li:nth-child(10):after {
  237. position:absolute;
  238. margin-top:92px;
  239. left:30px;
  240. padding:7px;
  241. color:#000000;
  242. background:rgba(244,244,244, 0.7);
  243. width:calc(100% - 70px);
  244. text-align:center;
  245. }
  246.  
  247. .tab-links li.active:after {
  248. color:#9E10D7;
  249. }
  250.  
  251. /* Character one */
  252.  
  253. .tab-links li:first-child:after {
  254. content:"THANOS";
  255. }
  256.  
  257. /* Character two */
  258.  
  259. .tab-links li:nth-child(2):after {
  260. content:"IRON MAN";
  261. }
  262.  
  263. /* Character three */
  264.  
  265. .tab-links li:nth-child(3):after {
  266. content:"CAPTAIN AMERICA";
  267. }
  268.  
  269. /* Character four */
  270.  
  271. .tab-links li:nth-child(4):after {
  272. content:"THOR";
  273. }
  274.  
  275. /* Character five */
  276.  
  277. .tab-links li.active:nth-child(5):after {
  278. content:"BLACK WIDOW";
  279. }
  280.  
  281. /* Character six */
  282.  
  283. .tab-links li.active:nth-child(6):after {
  284. content:"LOKI";
  285. }
  286.  
  287. /* Character seven */
  288.  
  289. .tab-links li.active:nth-child(7):after {
  290. content:"SCARLET WITCH";
  291. }
  292.  
  293. /* Character eight */
  294.  
  295. .tab-links li.active:nth-child(8):after {
  296. content:"BLACK PANTHER";
  297. }
  298.  
  299. /* Character nine */
  300.  
  301. .tab-links li.active:nth-child(9):after {
  302. content:"CAPTAIN MARVEL";
  303. }
  304.  
  305. .tab-links li.active:nth-child(10):after {
  306. content:"ANT-MAN";
  307. }
  308.  
  309. /*-- Bio panel --*/
  310.  
  311. .bio-panel {
  312. margin-top:0;
  313. margin-left:20vw;
  314. width:calc(80vw - 60px);
  315. height:auto;
  316. z-index:1000;
  317. overflow:hidden;
  318. }
  319.  
  320. .tab {
  321. margin:0;
  322. width:calc(80vw - 60px);
  323. height:auto;
  324. z-index:1000;
  325. overflow:hidden;
  326. display:none;
  327. }
  328.  
  329. .tab.active {
  330. display:block;
  331. }
  332.  
  333. /*-- Character title --*/
  334.  
  335. .tab h2 {
  336. margin-top:0;
  337. font-size:3.3em;
  338. letter-spacing:3px;
  339. color:#000000;
  340. }
  341.  
  342. /* Blinking underscore */
  343.  
  344. .tab h2 i {
  345. margin-left:10px;
  346. color:#9E10D7;
  347. /* Animation - delete lines below if you don't want it */
  348. -webkit-animation-name:blink;
  349. -webkit-animation-duration:1s;
  350. animation:blink 1s linear infinite;
  351. }
  352.  
  353. @-webkit-keyframes blink {
  354. 0%{opacity:0;}
  355. 50%{opacity:.5;}
  356. 100%{opacity:1;}
  357. }
  358.  
  359. @keyframes blink {
  360. 0%{opacity:0;}
  361. 50%{opacity:.5;}
  362. 100%{opacity:1;}
  363. }
  364.  
  365. /*-- Description container --*/
  366.  
  367. .tab-desc {
  368. position:absolute;
  369. font-size:1.2em;
  370. line-height:150%;
  371. margin:30px;
  372. padding:20px;
  373. width:calc(50vw - 20px);
  374. height:calc(100vh - 160px);
  375. z-index:10000!important;
  376. }
  377.  
  378. /* Description */
  379.  
  380. .description {
  381. max-height:calc(100% - 85px);
  382. padding-right:10px;
  383. color:#000000;
  384. overflow-y:auto;
  385. }
  386.  
  387. .description span {
  388. display:inline-block;
  389. margin-top:2px;
  390. margin-right:15px;
  391. color:#9E10D7;
  392. letter-spacing:1px;
  393. }
  394.  
  395. /* Character image */
  396.  
  397. .tab-right {
  398. position:fixed;
  399. bottom:20px;
  400. right:20px;
  401. width:350px;
  402. max-height:calc(100vh - 120px);
  403. z-index:1!important;
  404. }
  405.  
  406. .tab-right img {
  407. position:absolute;
  408. bottom:20px;
  409. left:50%;
  410. height:auto;
  411. max-height:calc(100vh - 120px);
  412. z-index:100!important;
  413. transform:translateX(-50%);
  414. }
  415.  
  416. /* Animated image */
  417.  
  418. .tab-image {
  419. position:absolute;
  420. right:0px;
  421. bottom:calc(50vh - 200px);
  422. width:350px;
  423. height:350px;
  424. background-image:url("https://i.imgur.com/xVWEnRq.png");
  425. background-repeat:no-repeat;
  426. background-position:center;
  427. text-align:center;
  428. z-index:1;
  429. /* Animation - delete line below if you don't want it */
  430. -webkit-animation:rotation 8s infinite linear;
  431. }
  432.  
  433. @-webkit-keyframes rotation {
  434. from {
  435. -webkit-transform:rotate(0deg);
  436. }
  437. to {
  438. -webkit-transform:rotate(359deg);
  439. }
  440. }
  441.  
  442. /*--------------------------- RESPONSIVE DESIGN ---------------------------*/
  443.  
  444. @media only screen and (max-width:900px) {
  445.  
  446. #blogtitle {
  447. font-size:2em;
  448. }
  449.  
  450. #mainlinks a {
  451. font-size:12px;
  452. }
  453.  
  454. .tab {
  455. width:80vw;
  456. }
  457.  
  458. .tab h2 {
  459. font-size:2.5em;
  460. }
  461.  
  462. .tab h2:after {
  463. margin-top:20px;
  464. }
  465.  
  466. .tab-desc {
  467. width:calc(80vw - 100px);
  468. background:rgba(244,244,244, 0.7);
  469. }
  470.  
  471. /* Description */
  472.  
  473. .description {
  474. width:calc(80vw - 110px);
  475. max-height:calc(100% - 85px);
  476. }
  477.  
  478. .tab-right img {
  479. max-height:calc(100vh - 140px);
  480. }
  481.  
  482.  
  483. }
  484. /* End media screen 900 */
  485.  
  486. /* ----------------------- CREDITS ----------------------------- */
  487.  
  488. #credit {
  489. position:fixed;
  490. left:30px;
  491. top:15px;
  492. z-index:100000;
  493. }
  494.  
  495. #credit img{
  496. border:1px solid #9E10D7;
  497. max-width:25px;
  498. }
  499.  
  500. </style>
  501.  
  502. <meta charset="utf-8">
  503. <title>{Title}</title>
  504. <link rel="shortcut icon" href="{Favicon}">
  505. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  506.  
  507. </head>
  508.  
  509. <body>
  510.  
  511. <div id="cog"><i class="fas fa-cog"></i></div>
  512.  
  513. <div id="menu">
  514.  
  515. <div id="blogtitle"> CHARACTERS </div>
  516.  
  517. <div id="mainlinks">
  518. <a href="/"> Index </a>
  519. <a href="/ask"> Ask</a>
  520. <a href="/submit"> Submit</a>
  521. <a href="/archive"> Archive</a>
  522. </div>
  523. <!-- End mainlinks-->
  524.  
  525. </div>
  526. <!-- End menu -->
  527.  
  528.  
  529. <div id="maincontainer">
  530.  
  531. <div id="characters">
  532.  
  533.  
  534. <div class="tabs">
  535.  
  536. <ul class="tab-links">
  537.  
  538. <li class="active"><a id="linkone" href="#tab1"><img src="https://66.media.tumblr.com/33d8c3c4a3f4ed8e16fb59e69258a5b6/tumblr_praw8aBp2H1w4d880o7_400.jpg"></img></a></li>
  539.  
  540. <li><a id="linktwo" href="#tab2"><img src="https://66.media.tumblr.com/4623d973842fb538eebc278c153fd438/tumblr_praw8aBp2H1w4d880o5_400.jpg"></img></a></li>
  541.  
  542. <li><a id="linkthree" href="#tab3"><img src="https://66.media.tumblr.com/d74fc06dd30ae88884383df4eb6c56c5/tumblr_praw8aBp2H1w4d880o3_400.jpg"></img></a></li>
  543.  
  544. <li><a id="linkfour" href="#tab4"><img src="https://66.media.tumblr.com/9d62aee8905aba4df9366d0bb3099825/tumblr_praw8aBp2H1w4d880o8_400.jpg"></img></a></li>
  545.  
  546. <li><a id="linkfive" href="#tab5"><img src="https://66.media.tumblr.com/c5b0defd0e88ed39286144a4d976d0e4/tumblr_praw8aBp2H1w4d880o4_400.jpg"></img></a></li>
  547.  
  548. <li><a id="linksix" href="#tab6"><img src="https://media1.popsugar-assets.com/files/thumbor/_QqImH5zp_Q10ZkUxekDE2X7_sI/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2019/04/27/750/n/1922283/tmp_slQsvY_2f3dd4df66bc2b86_MCDTHRA_EC043.jpg"></img></a></li>
  549.  
  550. <li><a id="linkseven" href="#tab7"><img src="https://66.media.tumblr.com/188f9f742a33c30b51bfc92a529650ed/tumblr_praw8aBp2H1w4d880o2_400.jpg"></img></a></li>
  551.  
  552. <li><a id="linkeight" href="#tab8"><img src="https://66.media.tumblr.com/de34f882016b811399eb512c8d0637a1/tumblr_praw8aBp2H1w4d880o1_400.jpg"></img></a></li>
  553.  
  554. <li><a id="linknine" href="#tab9"><img src="https://66.media.tumblr.com/97738782588a1e7e3b65f9e1861b162a/tumblr_praw8aBp2H1w4d880o9_400.jpg"></img></a></li>
  555.  
  556. <li><a id="linkten" href="#tab10"><img src="https://66.media.tumblr.com/8037f6f9e655868e7e97b16a847022d0/tumblr_praw8aBp2H1w4d880o6_400.jpg"></img></a></li>
  557.  
  558. </ul>
  559. <!-- End tab-links -->
  560.  
  561.  
  562. </div>
  563. <!-- End tabs -->
  564.  
  565.  
  566. <div class="bio-panel">
  567.  
  568.  
  569. <!-- Character one -->
  570.  
  571. <div id="tab1" class="tab active">
  572.  
  573. <div class="tab-desc">
  574.  
  575. <h2> THANOS <i class="far fa-window-minimize"></i> </h2>
  576.  
  577. <div class="description">
  578.  
  579. <span>REAL NAME</span> Thanos <br>
  580.  
  581. <span>ALIAS(ES)</span> Dark Lord, Mad Titan, Great Titan <br>
  582.  
  583. <span>SPECIES</span> Titan <br>
  584.  
  585. <span> GENDER </span> Male <br>
  586.  
  587. <span> TITLE(S) </span> Lord <br>
  588.  
  589. <span> AFFILIATION </span> Black Order <br>
  590.  
  591. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  592.  
  593. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  594. </div>
  595. <!-- End description -->
  596.  
  597. </div>
  598. <!-- End tab-desc -->
  599.  
  600.  
  601. <div class="tab-right">
  602.  
  603. <!-- Character image -->
  604. <img src="https://i.imgur.com/CSXkOxR.png"></img>
  605.  
  606. <div class="tab-image"></div>
  607.  
  608. </div>
  609. <!-- End tab-right -->
  610.  
  611. </div>
  612. <!-- End tab1 -->
  613.  
  614.  
  615. <!-- Character two -->
  616.  
  617. <div id="tab2" class="tab">
  618.  
  619. <div class="tab-desc">
  620.  
  621. <h2> IRON MAN <i class="far fa-window-minimize"></i> </h2>
  622.  
  623. <div class="description">
  624.  
  625. <span>REAL NAME</span> Anthony Edward Stark <br>
  626.  
  627. <span>ALIAS(ES)</span> Tony Stark, The New Kid, Visionary <br>
  628.  
  629. <span>SPECIES</span> Human <br>
  630.  
  631. <span> GENDER </span> Male <br>
  632.  
  633. <span> TITLE(S) </span> CEO of Stark Industries (formerly), Consultant (formerly) <br>
  634.  
  635. <span> AFFILIATION </span> MIT, Stark Industries, S.H.I.E.L.D., Avengers, Damage Control <br>
  636.  
  637. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  638.  
  639. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  640.  
  641. </div>
  642. <!-- End description -->
  643.  
  644. </div>
  645. <!-- End tab-desc -->
  646.  
  647.  
  648. <div class="tab-right">
  649.  
  650. <!-- Character image -->
  651. <img src="https://i.imgur.com/6V6lo13.png"></img>
  652.  
  653. <div class="tab-image"></div>
  654.  
  655. </div>
  656. <!-- End tab-right -->
  657.  
  658. </div>
  659. <!-- End tab2 -->
  660.  
  661.  
  662. <!-- Character three -->
  663.  
  664. <div id="tab3" class="tab">
  665.  
  666. <div class="tab-desc">
  667.  
  668. <h2> CAPTAIN AMERICA <i class="far fa-window-minimize"></i> </h2>
  669.  
  670. <div class="description">
  671.  
  672. <span>REAL NAME</span> Steven Grant Rogers <br>
  673.  
  674. <span>ALIAS(ES)</span> Cap, The First Avenger, American Hero <br>
  675.  
  676. <span>SPECIES</span> Human <br>
  677.  
  678. <span> GENDER </span> Male <br>
  679.  
  680. <span> TITLE(S) </span>
  681. Captain (formerly), Agent of S.H.I.E.L.D. (formerly), Grief Counselor (formerly) <br>
  682.  
  683. <span> AFFILIATION </span> United States Army, United Service Organizations, United States Department of the Treasury, SSR, Howling Commandos, S.H.I.E.L.D., Avengers<br>
  684.  
  685. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  686.  
  687. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  688.  
  689. </div>
  690. <!-- End description -->
  691.  
  692. </div>
  693. <!-- End tab-desc -->
  694.  
  695.  
  696. <div class="tab-right">
  697.  
  698. <!-- Character image -->
  699. <img src="https://i.imgur.com/FdwCPdc.png"></img>
  700.  
  701. <div class="tab-image"></div>
  702.  
  703. </div>
  704. <!-- End tab-right -->
  705.  
  706. </div>
  707. <!-- End tab3 -->
  708.  
  709.  
  710. <!-- Character four -->
  711.  
  712. <div id="tab4" class="tab">
  713.  
  714. <div class="tab-desc">
  715.  
  716. <h2> THOR <i class="far fa-window-minimize"></i> </h2>
  717.  
  718. <div class="description">
  719.  
  720. <span>REAL NAME</span> Thor Odinson <br>
  721.  
  722. <span>ALIAS(ES)</span> God of Thunder, Prince of Thunder, Prince of Asgard <br>
  723.  
  724. <span>SPECIES</span> Asgardian (Cyborg) <br>
  725.  
  726. <span> GENDER </span> Male <br>
  727.  
  728. <span> TITLE(S) </span> God of Thunder, Prince of Asgard (formerly), King of Asgard (formerly), King of New Asgard (formerly) <br>
  729.  
  730. <span> AFFILIATION </span> Asgardian Royal Family, Avengers, Revengers, Guardians of the Galaxy <br>
  731.  
  732. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  733.  
  734. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  735.  
  736. </div>
  737. <!-- End description -->
  738.  
  739. </div>
  740. <!-- End tab-desc -->
  741.  
  742.  
  743. <div class="tab-right">
  744.  
  745. <!-- Character image -->
  746. <img src="https://i.imgur.com/GlEcrjF.png"></img>
  747.  
  748. <div class="tab-image"></div>
  749.  
  750. </div>
  751. <!-- End tab-right -->
  752.  
  753. </div>
  754. <!-- End tab4 -->
  755.  
  756.  
  757. <!-- Character five -->
  758.  
  759. <div id="tab5" class="tab">
  760.  
  761. <div class="tab-desc">
  762.  
  763. <h2> BLACK WIDOW <i class="far fa-window-minimize"></i> </h2>
  764.  
  765. <div class="description">
  766.  
  767. <span>REAL NAME</span> Natalia Alianovna Romanoff <br>
  768.  
  769. <span>ALIAS(ES)</span> Nat, Natalie Rushman, Tatiana Sokolova <br>
  770.  
  771. <span>SPECIES</span> Human <br>
  772.  
  773. <span> GENDER </span> Female <br>
  774.  
  775. <span> TITLE(S) </span> Agent of S.H.I.E.L.D. <br>
  776.  
  777. <span> AFFILIATION </span> Red Room, KGB, STRIKE Team: Delta, Hammer Industries, Stark Industries, S.H.I.E.L.D., Avengers <br>
  778.  
  779. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  780.  
  781. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  782.  
  783. </div>
  784. <!-- End description -->
  785.  
  786. </div>
  787. <!-- End tab-desc -->
  788.  
  789.  
  790. <div class="tab-right">
  791.  
  792. <!-- Character image -->
  793. <img src="https://i.imgur.com/DrYJIf8.png"></img>
  794.  
  795. <div class="tab-image"></div>
  796.  
  797. </div>
  798. <!-- End tab-right -->
  799.  
  800. </div>
  801. <!-- End tab5 -->
  802.  
  803.  
  804. <!-- Character six -->
  805.  
  806. <div id="tab6" class="tab">
  807.  
  808. <div class="tab-desc">
  809.  
  810. <h2> LOKI <i class="far fa-window-minimize"></i> </h2>
  811.  
  812. <div class="description">
  813.  
  814. <span>REAL NAME</span> Loki Laufeyson <br>
  815.  
  816. <span>ALIAS(ES)</span> Loki Odinson, God of Mischief, Prince of Asgard <br>
  817.  
  818. <span>SPECIES</span> Frost Giant <br>
  819.  
  820. <span> GENDER </span> Male <br>
  821.  
  822. <span> TITLE(S) </span> God of Mischief, Prince of Asgard, King of Asgard <br>
  823.  
  824. <span> AFFILIATION </span> Asgardian Royal Family, Revengers, Sakaaran Rebellion <br>
  825.  
  826. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  827.  
  828. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  829.  
  830. </div>
  831. <!-- End description -->
  832.  
  833. </div>
  834. <!-- End tab-desc -->
  835.  
  836.  
  837. <div class="tab-right">
  838.  
  839. <!-- Character image -->
  840. <img src="https://i.imgur.com/DKOTlU5.png"></img>
  841.  
  842. <div class="tab-image"></div>
  843.  
  844. </div>
  845. <!-- End tab-right -->
  846.  
  847. </div>
  848. <!-- End tab6 -->
  849.  
  850.  
  851. <!-- Character seven -->
  852.  
  853. <div id="tab7" class="tab">
  854.  
  855. <div class="tab-desc">
  856.  
  857. <h2> SCARLET WITCH <i class="far fa-window-minimize"></i> </h2>
  858.  
  859. <div class="description">
  860.  
  861. <span>REAL NAME</span> Wanda Maximoff <br>
  862.  
  863. <span>ALIAS(ES)</span> Little Witch, The Enhanced, Strucker's Prized Pupil <br>
  864.  
  865. <span>SPECIES</span> Human <br>
  866.  
  867. <span> GENDER </span> Female <br>
  868.  
  869. <span> AFFILIATION </span> HYDRA, Avengers <br>
  870.  
  871. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  872.  
  873. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  874.  
  875. </div>
  876. <!-- End description -->
  877.  
  878. </div>
  879. <!-- End tab-desc -->
  880.  
  881.  
  882. <div class="tab-right">
  883.  
  884. <!-- Character image -->
  885. <img src="https://i.imgur.com/DwvN75A.png"></img>
  886.  
  887. <div class="tab-image"></div>
  888.  
  889. </div>
  890. <!-- End tab-right -->
  891.  
  892. </div>
  893. <!-- End tab8 -->
  894.  
  895.  
  896. <!-- Character eight -->
  897.  
  898. <div id="tab8" class="tab">
  899.  
  900. <div class="tab-desc">
  901.  
  902. <h2> BLACK PANTHER <i class="far fa-window-minimize"></i> </h2>
  903.  
  904. <div class="description">
  905.  
  906. <span>REAL NAME</span> T'Challa <br>
  907.  
  908. <span>ALIAS(ES)</span> Son of T'Chaka, His Highness, Cat Lover <br>
  909.  
  910. <span>SPECIES</span> Human <br>
  911.  
  912. <span> GENDER </span> Male <br>
  913.  
  914. <span> TITLE(S) </span> Prince of Wakanda, King of Wakanda <br>
  915.  
  916. <span> AFFILIATION </span> Golden Tribe, Tribal Council <br>
  917.  
  918. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  919.  
  920. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  921.  
  922. </div>
  923. <!-- End description -->
  924.  
  925. </div>
  926. <!-- End tab-desc -->
  927.  
  928.  
  929. <div class="tab-right">
  930.  
  931. <!-- Character image -->
  932. <img src="https://i.imgur.com/vrTLvNt.png"></img>
  933.  
  934. <div class="tab-image"></div>
  935.  
  936. </div>
  937. <!-- End tab-right -->
  938.  
  939. </div>
  940. <!-- End tab8 -->
  941.  
  942.  
  943. <!-- Character nine -->
  944.  
  945. <div id="tab9" class="tab">
  946.  
  947. <div class="tab-desc">
  948.  
  949. <h2> CAPTAIN MARVEL <i class="far fa-window-minimize"></i> </h2>
  950.  
  951. <div class="description">
  952.  
  953. <span>REAL NAME</span> Carol Danvers <br>
  954.  
  955. <span>ALIAS(ES)</span> Avenger, Vers, Twinkle Fists <br>
  956.  
  957. <span>SPECIES</span> Human/Kree Hybrid <br>
  958.  
  959. <span> GENDER </span> Female <br>
  960.  
  961. <span> TITLE(S) </span> Captain <br>
  962.  
  963. <span> AFFILIATION </span> United States Air Force, Starforce, Avengers <br>
  964.  
  965. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  966.  
  967. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  968.  
  969. </div>
  970. <!-- End description -->
  971.  
  972. </div>
  973. <!-- End tab-desc -->
  974.  
  975.  
  976. <div class="tab-right">
  977.  
  978. <!-- Character image -->
  979. <img src="https://i.imgur.com/l2GDsmo.png"></img>
  980.  
  981. <div class="tab-image"></div>
  982.  
  983. </div>
  984. <!-- End tab-right -->
  985.  
  986. </div>
  987. <!-- End tab9 -->
  988.  
  989.  
  990. <!-- Character ten -->
  991.  
  992. <div id="tab10" class="tab">
  993.  
  994. <div class="tab-desc">
  995.  
  996. <h2> ANT-MAN <i class="far fa-window-minimize"></i> </h2>
  997.  
  998. <div class="description">
  999.  
  1000. <span>REAL NAME</span> Scott Edward Harris Lang <br>
  1001.  
  1002. <span>ALIAS(ES)</span> Chang, SFPD 56210, Guy That Shrinks <br>
  1003.  
  1004. <span>SPECIES</span> Human <br>
  1005.  
  1006. <span> GENDER </span> Male <br>
  1007.  
  1008. <span> AFFILIATION </span> Vistacorp, Baskin-Robbins, X-Con Security Consultants, Avengers <br>
  1009.  
  1010. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  1011.  
  1012. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  1013.  
  1014. </div>
  1015. <!-- End description -->
  1016.  
  1017. </div>
  1018. <!-- End tab-desc -->
  1019.  
  1020.  
  1021. <div class="tab-right">
  1022.  
  1023. <!-- Character image -->
  1024. <img src="https://i.imgur.com/4sxctP9.png"></img>
  1025.  
  1026. <div class="tab-image"></div>
  1027.  
  1028. </div>
  1029. <!-- End tab-right -->
  1030.  
  1031. </div>
  1032. <!-- End tab10 -->
  1033.  
  1034.  
  1035. </div>
  1036. <!--End characters -->
  1037.  
  1038.  
  1039. <div class="grid">
  1040.  
  1041.  
  1042.  
  1043.  
  1044. </div>
  1045. <!-- End grid -->
  1046.  
  1047. </div>
  1048. <!--End maincontainer-->
  1049.  
  1050. <!--CREDIT(DO NOT REMOVE)-->
  1051. <div id="credit"><a href="http://borntobewildcodes.tumblr.com" title="page PORTFOLIO by @borntobewildcodes"><img src="https://i.imgur.com/YsnOAtA.png"></a></div>
  1052.  
  1053. <!-------------------------------- SCRIPTS -------------------------------->
  1054.  
  1055. <!--Google fonts -->
  1056.  
  1057. <link href="https://fonts.googleapis.com/css?family=Marvel|Open+Sans|Roboto|Raleway" rel="stylesheet">
  1058.  
  1059. <!-- Font awesome -->
  1060.  
  1061. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  1062.  
  1063.  
  1064. <!-- Jquery -->
  1065.  
  1066. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1067.  
  1068. <!-- TABS/ALL-INN-ONE SCRIPTS -->
  1069.  
  1070. <script>
  1071. $(document).ready(function() {
  1072. $('.tabs .tab-links a').on('click', function(e){
  1073. var currentAttrValue = $(this).attr('href');
  1074.  
  1075. // Show/Hide Tab links
  1076. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  1077.  
  1078. // Tabs active
  1079. $('.bio-panel ' + currentAttrValue).addClass('active').siblings().removeClass('active');
  1080.  
  1081. // Change/remove current tab to active
  1082. $(this).parent('li').addClass('active').siblings().removeClass('active');
  1083.  
  1084. e.preventDefault();
  1085. });
  1086. });
  1087. </script>
  1088.  
  1089. <script>
  1090. function myFunction(imgs) {
  1091. var expandImg = document.getElementById("expandedImg");
  1092. var imgText = document.getElementById("imgtext");
  1093. expandImg.src = imgs.src;
  1094. imgText.innerHTML = imgs.alt;
  1095. expandImg.parentElement.style.display = "block";
  1096. }
  1097. </script>
  1098.  
  1099. </body>
  1100.  
  1101.  
  1102. </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!