API tools faq
paste
Advertisement
joss1226

Muses Page

joss1226
Jan 20th, 2018
566
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 139.24 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--THEME #4: AFTERIMAGE by @nonspace.
  4. Don't steal.
  5. Don't claim as your own.
  6. Don't use as base code.
  7. Editing for personal use is fine!-->
  8.  
  9. <html>
  10.  
  11. <head>
  12.  
  13. <title>{Title}</title>
  14. <link rel="icon" type="image/png" href="{Favicon}">
  15.  
  16. <!--FONTS-->
  17. <link href="https://fonts.googleapis.com/css?family=Libre+Barcode+128|Libre+Barcode+39+Text" rel="stylesheet">
  18.  
  19. <link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i&amp;subset=cyrillic,greek,hebrew,latin-ext,vietnamese" rel="stylesheet">
  20.  
  21. <!--FONT AWESOME ICONS-->
  22. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  23.  
  24. <!--JQUERY-->
  25. <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  26. <!--ISOTOPE PLUGIN https://isotope.metafizzy.co/ (for filtering)-->
  27. <script src="https://unpkg.com/isotope-layout@3.0.4/dist/isotope.pkgd.min.js"></script>
  28.  
  29.  
  30. <style type="text/css">
  31. /*SET GROUP COLORS*/
  32. /*This is where you can set the colours for every group. These will
  33. apply to:
  34. the triangles on the front card
  35. info card: traits & character data background
  36. the group legend at the bottom
  37.  
  38. /*WANT MORE GROUPS/COLOURS?*/
  39. /*This will require a bit of knowledge of mostly CSS. You can add more
  40. variables as seen below. You'll also have to add these variables to
  41. the respective style groups at the bottom of the style, there's a
  42. headline. If you're having trouble with this let me know!
  43. Quick guide: https://nonspace.tumblr.com/post/167013254044/hi-there-im-trying-to-use-your-afterimage-theme */
  44.  
  45. :root {
  46. /*GROUP 1*/
  47. --g1: #427ea3;
  48. /*GROUP 2*/
  49. --g2: #427ea3;
  50. /*GROUP 3*/
  51. --g3: #427ea3;
  52. /*GROUP 4*/
  53. --g4: #427ea3;
  54. /*GROUP 5*/
  55. --g5: #427ea3;
  56.  
  57. /*ADDITIONAL COLOURS
  58. --g6: #ff9600;
  59. --g7: #ff9600;
  60. --g8: #ff9600;
  61. --g9: #ff9600;
  62. --g10: #ff9600;*/
  63. }
  64. html,
  65. body {
  66. padding: 0px;
  67. margin: 0px;
  68. font-family: 'Arimo', Helvetica, sans-serif;
  69. min-height: 100%;
  70. }
  71. body {
  72. overflow: auto;
  73. background: -webkit-linear-gradient(left top, #f1f1f1, #d6d9d6);
  74. /* For Safari 5.1 to 6.0 */
  75.  
  76. background: -o-linear-gradient(bottom right, #f1f1f1, #d6d9d6);
  77. /* For Opera 11.1 to 12.0 */
  78.  
  79. background: -moz-linear-gradient(bottom right, #f1f1f1, #d6d9d6);
  80. /* For Firefox 3.6 to 15 */
  81.  
  82. background: linear-gradient(to bottom right, #f1f1f1, #d6d9d6);
  83. /* Standard syntax */
  84. }
  85. #container {
  86. position: relative;
  87. margin: 5% auto;
  88. width: 891px;
  89. height: auto;
  90. vertical-align: center;
  91. }
  92.  
  93.  
  94. /*HEADER*/
  95.  
  96. header {
  97. margin: 0px;
  98. position: relative;
  99. height: 150px;
  100. background: rgba(255, 255, 255, 0.3);
  101. }
  102. h1 {
  103. font-family: Helvetica, sans-serif;
  104. font-size: 50px;
  105. margin: 10px 0px;
  106. }
  107. header .sub {
  108. font-size: 30px;
  109. font-family: 'Libre Barcode 128';
  110. }
  111. article#desc {
  112. float: left;
  113. height: 100%;
  114. width: auto;
  115. left: 0;
  116. right: 0;
  117. margin: 0px auto;
  118. text-align: left;
  119. padding-left: 20px;
  120. }
  121. /*LINKS*/
  122. nav a {
  123. font-family: 'Helvetica';
  124. text-decoration: none;
  125. text-transform: uppercase;
  126. font-size: 11px;
  127. padding: 0 15px;
  128. color: #000;
  129. }
  130. nav a:first-child {
  131. padding-left: 0px;
  132. }
  133. article#desctxt {
  134. float: right;
  135. width: 450px;
  136. max-height: 96px;
  137. margin: 25px 17px;
  138. padding-right: 15px;
  139. text-align: justify;
  140. line-height: 140%;
  141. font-size: 12px;
  142. overflow-y: scroll;
  143. }
  144. article#desctxt b {
  145. text-transform: uppercase;
  146. }
  147.  
  148.  
  149. /*NEXT & PREV ARROWS*/
  150.  
  151. #prev,
  152. #next {
  153. color: #cccccc;
  154. font-size: 25px;
  155. padding: 13px 10px;
  156. -webkit-transition: all 0.5s ease;
  157. -moz-transition: all 0.5s ease;
  158. -ms-transition: all 0.5s ease;
  159. transition: all 0.5s ease;
  160. }
  161. #prev:hover,
  162. #next:hover {
  163. color: #7a7a7a;
  164. font-size: 25px;
  165. padding: 13px 10px;
  166. cursor: pointer;
  167. }
  168. #next {
  169. float: right;
  170. }
  171. #prev {
  172. float: left;
  173. }
  174.  
  175.  
  176. /*CHARACTER CARD GALLERY*/
  177. #gallery {
  178. position: relative;
  179. padding: 45px 0px 20px;
  180. overflow-x: auto;
  181. overflow-y: hidden;
  182. height: 380px;
  183. white-space: nowrap;
  184. margin: 0px 0px 25px 0px;
  185. }
  186. #gallery-track {
  187. position: relative;
  188. width: auto;
  189. }
  190. /*CHARACTER BOXES*/
  191. .cbox {
  192. position: relative;
  193. height: 370px;
  194. width: 175px;
  195. display: inline-block;
  196. -webkit-transition: all 1s ease;
  197. -moz-transition: all 1s ease;
  198. -ms-transition: all 1s ease;
  199. transition: all 1s ease;
  200. }
  201. .cbox:last-child {
  202. margin-right: -2px;
  203. }
  204. .cbox img {
  205. height: 370px;
  206. width: 175px;
  207. -webkit-filter: grayscale(0%);
  208. filter: grayscale(0%);
  209. -webkit-transition: all 1s ease;
  210. -moz-transition: all 1s ease;
  211. -ms-transition: all 1s ease;
  212. transition: all 1s ease;
  213. -webkit-backface-visibility: hidden;
  214. backface-visibility: hidden;
  215. }
  216. /*CHARACTER NAME*/
  217. .cname {
  218. position: absolute;
  219. height: 90px;
  220. width: 195px;
  221. right: 0;
  222. transform: rotate(-90deg) translate(0, -100%);
  223. transform-origin: 100% 0;
  224. display: table;
  225. z-index: 2;
  226. -webkit-backface-visibility: hidden;
  227. backface-visibility: hidden;
  228. -webkit-user-select: none;
  229. -moz-user-select: none;
  230. -ms-user-select: none;
  231. user-select: none;
  232. }
  233. .cname span {
  234. font-family: Helvetica;
  235. line-height: 78%;
  236. color: #427ea3;
  237. opacity: 0.8;
  238. font-weight: bold;
  239. text-transform: uppercase;
  240. display: table-cell;
  241. vertical-align: bottom;
  242. /*padding-bottom: 0px; adjust for positioning*/
  243. }
  244. .triangle {
  245. position: absolute;
  246. width: 0px;
  247. height: 0px;
  248. bottom: 0px;
  249. border-style: solid;
  250. border-width: 87.5px 87.5px 87.5px 87.5px;
  251. border-color: transparent transparent transparent transparent;
  252. z-index: 1;
  253. -webkit-transition: all 1s ease;
  254. -moz-transition: all 1s ease;
  255. -ms-transition: all 1s ease;
  256. transition: all 1s ease;
  257. -webkit-user-select: none;
  258. -moz-user-select: none;
  259. -ms-user-select: none;
  260. user-select: none;
  261. -webkit-backface-visibility: hidden;
  262. backface-visibility: hidden;
  263. }
  264.  
  265.  
  266. /*CONTENT CARD TAB NAVIGATION*/
  267.  
  268. .cfooter {
  269. position: absolute;
  270. top: -30px;
  271. width: 895px;
  272. height: 17;
  273. z-index: 2;
  274. right: 0;
  275. left: -180;
  276. text-align: center;
  277. }
  278. .cfooter a {
  279. color: #dbdbdb;
  280. margin: 0 2px;
  281. }
  282.  
  283.  
  284. /*CONTENT CARDS*/
  285.  
  286. .ccard {
  287. position: relative;
  288. display: none;
  289. background: rgba(255, 255, 255, 0.3);
  290. width: 715px;
  291. height: 370px;
  292. padding: 0;
  293. vertical-align: top;
  294. -webkit-transition: all 1s ease;
  295. -moz-transition: all 1s ease;
  296. -ms-transition: all 1s ease;
  297. transition: all 1s ease;
  298. transition-delay: 0s, 0s, 0.5s;
  299. }
  300. .ccontent {
  301. position: relative;
  302. width: 680px;
  303. height: 340px;
  304. margin: 15px auto;
  305. display: none;
  306. }
  307.  
  308.  
  309. /*BIO(1ST) TAB*/
  310.  
  311. .cbio {
  312. position: relative;
  313. width: 510px;
  314. height: 305px;
  315. }
  316. .headline {
  317. position: relative;
  318. width: 440px;
  319. height: 80px;
  320. }
  321. .headline p {
  322. margin: 0;
  323. color: #7a7a7a;
  324. font-size: 12px;
  325. text-align: justify;
  326. word-wrap: break-word;
  327. white-space: normal;
  328. overflow: hidden;
  329. width: 440px;
  330. }
  331. h2 {
  332. font-family: helvetica;
  333. font-size: 30px;
  334. margin: 0;
  335. font-weight: normal;
  336. }
  337. /*first part of title*/
  338. h2 span {
  339. font-style: italic;
  340. font-weight: normal;
  341. color: #7a7a7a;
  342. }
  343. .flavorimg {
  344. position: absolute;
  345. top: 0;
  346. right: 3px;
  347. width: 180px;
  348. height: 340px;
  349. background-position: bottom right;
  350. background-size: 100%;
  351. background-repeat: no-repeat;
  352. -webkit-filter: grayscale(0%);
  353. filter: grayscale(0%);
  354. -webkit-transition: all 1s ease;
  355. -moz-transition: all 1s ease;
  356. -ms-transition: all 1s ease;
  357. transition: all 1s ease;
  358. }
  359. .biocontent {
  360. position: relative;
  361. height: 240px;
  362. font-size: 14px;
  363. text-align: justify;
  364. line-height: 145%;
  365. margin-top: 20px;
  366. word-wrap: break-word;
  367. white-space: normal;
  368. overflow-y: auto;
  369. overflow-x: hidden;
  370. width: 450px;
  371. padding-right: 22px;
  372. }
  373. /*GRID LINKS*/
  374. .clinks {
  375. display: grid;
  376. position: absolute;
  377. right: 0;
  378. top: 0px;
  379. height: 80px;
  380. padding: 5px;
  381. width: 180px;
  382. grid-template-rows: repeat(2, 1fr);
  383. grid-template-columns: repeat(3, 1fr);
  384. grid-gap: 2px;
  385. }
  386. .clinks a {
  387. display: flex;
  388. justify-content: center;
  389. align-items: center;
  390. font-size: 20px;
  391. color: #7a7a7a;
  392. background: #dbdbdb;
  393. text-decoration: none;
  394. }
  395. /*TRAITS*/
  396. .ctraits {
  397. height: 320px;
  398. position: absolute;
  399. right: 0;
  400. top: 105px;
  401. width: 180px;
  402. font-family: helvetica;
  403. text-align: left;
  404. line-height: 130%;
  405. font-size: 17px;
  406. padding-right: 5px;
  407. color: #fff;
  408. }
  409. .ctraits span {
  410. padding: 3px 10px;
  411. }
  412. .ctraits p {
  413. margin: 15px 0px;
  414. }
  415.  
  416.  
  417. /*INFO(2ND) TAB*/
  418.  
  419. .cell1,
  420. .cell2 {
  421. height: auto;
  422. width: 200px;
  423. padding: 0 0 0 0;
  424. margin: 0;
  425. font-size: 14px;
  426. overflow: hidden;
  427. }
  428. .cell1 {
  429. float: left;
  430. }
  431. .cell2 {
  432. float: right;
  433. }
  434. .cell1 ul,
  435. .cell2 ul {
  436. margin: 0;
  437. padding: 0;
  438. }
  439. .cell1 li:first-child,
  440. .cell2 li:first-child {
  441. margin: 0;
  442. }
  443. .cell1 li,
  444. .cell2 li {
  445. list-style-type: none;
  446. text-align: left;
  447. color: #fff;
  448. line-height: 180%;
  449. margin: 5.7px 0 0 0;
  450. padding-left: 5px;
  451. }
  452. .cell1 p,
  453. .cell2 p {
  454. padding: 0.3px;
  455. }
  456. .cell1 span,
  457. .cell2 span {
  458. color: #000;
  459. background: #ecedec!important;
  460. line-height: 186%;
  461. margin: -1px;
  462. padding: 0px 15px 0px;
  463. float: right;
  464. }
  465.  
  466.  
  467. /*CONNECTIONS(3RD) TAB*/
  468.  
  469. .con {
  470. width: 83px;
  471. height: 83px;
  472. float: left;
  473. background-size: 110%;
  474. background-position: center center;
  475. -webkit-transition: all 0.5s ease;
  476. -moz-transition: all 0.5s ease;
  477. -ms-transition: all 0.5s ease;
  478. transition: all 0.5s ease;
  479. margin: 0 1px 2px 1px;
  480. }
  481. .navcon {
  482. position: absolute;
  483. top: 0px;
  484. right: 0px;
  485. height: 340px;
  486. width: 180px;
  487. padding-right: 0px;
  488. overflow-x: hidden;
  489. overflow-y: auto;
  490. /*display: grid;
  491. grid-template-rows: repeat(2, 1fr);
  492. grid-template-columns: repeat(2, 1fr);
  493. grid-gap: 2px;*/
  494. }
  495. .connections {
  496. height: 340px;
  497. margin: 0px 0;
  498. width: 450px;
  499. padding-right: 40px;
  500. overflow-x: hidden;
  501. overflow-y: auto;
  502. display: none;
  503. }
  504. .connections .cbio {
  505. padding-right: 30px;
  506. }
  507. /*CONNECTION NAME*/
  508. .connections span {
  509. font-weight: bold;
  510. font-size: 14px;
  511. text-transform: uppercase;
  512. }
  513.  
  514.  
  515. /*GROUP SELECTION STYLES*/
  516.  
  517. footer {
  518. position: relative;
  519. margin: 0px;
  520. padding: 0px;
  521. width: auto;
  522. height: 50px;
  523. background: rgba(255, 255, 255, 0.3);
  524. }
  525. #legend {
  526. position: relative;
  527. width: auto;
  528. height: 50px;
  529. margin: 0 auto;
  530. text-align: center;
  531. }
  532. /*GROUP LINK SQUARES*/
  533. .square {
  534. position: relative;
  535. height: 10px;
  536. font-size: 9px;
  537. padding: 5px 5px;
  538. display: inline-block;
  539. margin: 15px 5px;
  540. border-radius: 5px;
  541. color: #fff;
  542. font-family: helvetica;
  543. text-transform: uppercase;
  544. }
  545.  
  546.  
  547. /*ACTIVE STYLES*/
  548.  
  549. /*CONTENT CARD*/
  550. .ccard.active {
  551. display: inline-block;
  552. margin: 0px 0px;
  553. }
  554. /*CONTENT CARD INNER TABS*/
  555. .ccontent.active,
  556. .connections.active {
  557. display: block;
  558. }
  559. /*CARD CONTENT NAV*/
  560. .cfooter a.active {
  561. color: #cccccc;
  562. }
  563. /*CONNECTIONS NAV*/
  564. .con.active {
  565. -webkit-filter: grayscale(0%);
  566. filter: grayscale(0%);
  567. }
  568.  
  569.  
  570. /*GROUP COLOURS*/
  571.  
  572. /*LEGEND & TRAITS & INFO DATA*/
  573. /*GROUP 1*/
  574. #legend .g1,
  575. .ctraits.g1 span,
  576. .cell1.g1 li,
  577. .cell2.g1 li {
  578. background: var(--g1);
  579. }
  580. /*GROUP 2*/
  581. #legend .g2,
  582. .ctraits.g2 span,
  583. .cell1.g2 li,
  584. .cell2.g2 li {
  585. background: var(--g2);
  586. }
  587. /*GROUP 3*/
  588. #legend .g3,
  589. .ctraits.g3 span,
  590. .cell1.g3 li,
  591. .cell2.g3 li {
  592. background: var(--g3);
  593. }
  594. /*GROUP 4*/
  595. #legend .g4,
  596. .ctraits.g4 span,
  597. .cell1.g4 li,
  598. .cell2.g4 li {
  599. background: var(--g4);
  600. }
  601. /*GROUP 5*/
  602. #legend .g5,
  603. .ctraits.g5 span,
  604. .cell1.g5 li,
  605. .cell2.g5 li {
  606. background: var(--g5);
  607. }
  608.  
  609. /*TRIANGLE*/
  610. /*GROUP 1*/
  611. .triangle.g1 {
  612. border-color: transparent var(--g1) var(--g1) transparent;
  613. }
  614. /*GROUP 2*/
  615. .triangle.g2 {
  616. border-color: transparent var(--g2) var(--g2) transparent;
  617. }
  618. /*GROUP 3*/
  619. .triangle.g3 {
  620. border-color: transparent var(--g3) var(--g3) transparent;
  621. }
  622. /*GROUP 4*/
  623. .triangle.g4 {
  624. border-color: transparent var(--g4) var(--g4) transparent;
  625. }
  626. /*GROUP 5*/
  627. .triangle.g5 {
  628. border-color: transparent var(--g5) var(--g5) transparent;
  629. }
  630.  
  631.  
  632. /*HOVER STYLES*/
  633.  
  634. .triangle:hover,
  635. .cname:hover,
  636. .con:hover,
  637. .cbox:hover > img,
  638. .flavorimg:hover,
  639. .square:hover {
  640. cursor: pointer;
  641. }
  642. .cbox:hover,
  643. .cbox:hover img {
  644. z-index: 3;
  645. -webkit-transform: scale(1.05);
  646. -moz-transform: scale(1.05);
  647. -ms-transform: scale(1.05);
  648. -o-transform: scale(1.05);
  649. transform: scale(1.05);
  650. }
  651. .cbox:hover .triangle {
  652. transform: scale(1.05);
  653. -webkit-transform-origin: 50% 100%;
  654. -moz-transform-origin: 50% 100%;
  655. -o-transform-origin: 50% 100%;
  656. -ms-transform-origin: 50% 100%;
  657. transform-origin: 45% 0%;
  658. }
  659. .clinks a i {
  660. -webkit-transition: all 0.5s ease;
  661. -moz-transition: all 0.5s ease;
  662. -ms-transition: all 0.5s ease;
  663. transition: all 0.5s ease;
  664. }
  665. .clinks a:hover i {
  666. -webkit-transform: scale(1.3);
  667. -moz-transform: scale(1.3);
  668. -ms-transform: scale(1.3);
  669. -o-transform: scale(1.3);
  670. transform: scale(1.3);
  671. }
  672. .flavorimg:hover,
  673. .con:hover {
  674. background-size: 100%;
  675. }
  676. .cbox:hover > img,
  677. .flavorimg:hover,
  678. .con:hover {
  679. -webkit-filter: grayscale(0%);
  680. filter: grayscale(0%);
  681. }
  682.  
  683.  
  684. /*SCROLLBAR STYLES*/
  685.  
  686. ::-webkit-scrollbar {
  687. width: 5px;
  688. height: 5px;
  689. }
  690. ::-webkit-scrollbar-track {
  691. border-radius: 1px;
  692. background-color: #f8f8f8;
  693. }
  694. ::-webkit-scrollbar-thumb {
  695. border-radius: 1px;
  696. background-color: #ddd;
  697. }
  698. article#desctxt::-webkit-scrollbar-track {
  699. border-radius: 1px;
  700. background: -webkit-linear-gradient(bottom, #ecedee, #eceeec 100%);
  701. }
  702. article#desctxt::-webkit-scrollbar-thumb {
  703. border-radius: 1px;
  704. background: -webkit-linear-gradient(top, #ddd, #eee 100%);
  705. /*background: -webkit-linear-gradient(top, #edeeed, #eceeec 100%); if transparent*/
  706. }
  707. .biocontent::-webkit-scrollbar-track,
  708. .connections::-webkit-scrollbar-track,
  709. .navcon::-webkit-scrollbar-track {
  710. border-radius: 1px;
  711. width: 10px!important;
  712. background: -webkit-linear-gradient(bottom, #ecedee, #eceeec 100%);
  713. }
  714. .biocontent::-webkit-scrollbar-thumb,
  715. .connections::-webkit-scrollbar-thumb,
  716. .navcon::-webkit-scrollbar-thumb {
  717. border-radius: 1px;
  718. width: 10px!important;
  719. background: -webkit-linear-gradient(top, #ddd, #eee 100%);
  720. /*background: -webkit-linear-gradient(top, #edeeed, #eceeec 100%); if transparent*/
  721. }
  722. </style>
  723. </head>
  724. <body>
  725.  
  726. <div id="container">
  727.  
  728. <!--HEADER-->
  729. <header>
  730.  
  731. <!--TITLE & LINKS-->
  732. <article id="desc">
  733. <h1>afterimage.</h1>
  734. <span class="sub">sdkjglskjdglsjkglsjglskjdlgjsklj</span>
  735.  
  736. <!--HEADER LINKS-->
  737. <!--enter URL for your about page-->
  738. <nav>
  739. <a href="/">
  740. <i class="fa fa-home" aria-hidden="true"></i>
  741. Home</a>
  742. <a href="/navi">
  743. <i class="fa fa-user" aria-hidden="true"></i>
  744. Navigation</a>
  745. <a href="/ask">
  746. <i class="fa fa-envelope" aria-hidden="true"></i>
  747. Message</a>
  748. <!--CREDIT, DON'T CHANGE!!!-->
  749. <a href="https://nonspace.tumblr.com">
  750. <i class="fa fa-copyright" aria-hidden="true"></i>
  751. NNSPC</a>
  752. </nav>
  753. </article>
  754.  
  755. <!--DESCRIPTION-->
  756. <article id="desctxt">
  757. All of my current muses
  758. </article>
  759.  
  760. </header>
  761.  
  762. <!--HOW TO ADD GROUPS-->
  763. <!--To add a group (g1-g5) you need to add the respective group as a
  764. second class to the cbox (class="cbox GROUPNUMBER").
  765. You can add several groups to one card, however, the first group
  766. determines the card colour.-->
  767.  
  768. <!--TABS & TAB LINKS-->
  769. <!--The href attribute in the cbox div is what links you to the
  770. corresponding ccard (content card).
  771. You can link to these tabs using the URL
  772. (http://YOURURL.com/YOURPAGE/#TABNAME) so if you want to change them
  773. to the character name you need to edit the cbox href and give the
  774. right ccard div the id.
  775.  
  776. For example:
  777.  
  778. Your character's name is Musterman.
  779.  
  780. In the cbox:
  781. <div class="cbox g1" href="#MUSTERMAN">
  782. take note to not leave out the hashtag(#)
  783. In the ccard:
  784. <div class="ccard" id="MUSTERMAN">
  785.  
  786.  
  787. <!--CHARACTER CARDS-->
  788. <section id="gallery">
  789. <div id="gallery-track">
  790.  
  791. <!--CHARACTER ONE-->
  792.  
  793. <div class="cbox g1" href="#OLIVERYOUNG">
  794. <div class="cname">
  795. <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
  796. change the opacity of the names in the CSS-->
  797. <span style="font-size: 45px;">
  798. OLIVER <br />
  799. YOUNG
  800. </span>
  801. </div> <!--cname-->
  802. <div class="triangle"></div>
  803. <!--The image is 175x370px but because it zooms to 105% ideally
  804. you can use an image that's ~ 183.75x388.5-->
  805. <img src="https://static.tumblr.com/qxjwntd/2EPp31rdi/oliver1.png"></img>
  806. </div> <!--cbox-->
  807.  
  808.  
  809. <div class="ccard" id="OLIVERYOUNG">
  810.  
  811. <!--INNER TAB NAVIGATION-->
  812. <div class="cfooter">
  813. <a href="#c1p1" class="active">
  814. <i class="fa fa-stop" aria-hidden="true"></i></a>
  815. <a href="#c1p2">
  816. <i class="fa fa-stop" aria-hidden="true"></i></a>
  817. <a href="#c1p3">
  818. <i class="fa fa-stop" aria-hidden="true"></i></a>
  819. </div>
  820.  
  821. <div class="ccontent active" id="c1p1">
  822. <div class="cbio">
  823.  
  824. <div class="headline">
  825. <h2><span class="h2front">Biography</span></h2>
  826. <p />Currently, Oliver resides in Santa Monica living with his roommate, Kara Cavanaugh, in Ocean Avenue. He is a freelance photographer hoping to open his own gallery and studio soon.
  827. </div><!--headline-->
  828.  
  829. <div class="biocontent">
  830. <p>Born in Cincinnati, Ohio, Oliver lived there until he was seven when his parents died. He lost his parents in a car accident, but he didn’t like to talk about that. He was taken in and raised by his grandparents, forcing him to move to Santa Monica, California at the age of seven. He absolutely adored the two of them more than anything in the world. They believed in him and his dreams, even when he showed less than promising results. After losing his parents, Oliver went through a period of not talking. He spoke nothing, not even to his concerned grandparents. It was like something in him switched off and he was barely able to function.</p>
  831. <p>Being concerned for younger Oliver, by age ten they sent him to see a psychologist in hopes that it would get him to speak and to open up about how he felt about the death of his parents, but it hardly worked. From the age of seven to the age of ten, Oliver was mute, so therapy sessions were awfully quiet. It wasn’t until his therapist brought in his grandparents to his sessions that he saw how much it was hurting them. He wasn’t a changed boy, but he was more willing to give an effort.</p>
  832. <p>This was where photography came in. Photography had always been Oliver’s way of escape. Seeing the world through a camera lens made dealing with things bearable. It was almost like seeing the world differently through a viewfinder. He could actually see the beauty in the world as opposed to a world without a camera. His grandfather had given him an old camera when he was younger, teaching him the basics and after that, Oliver was hooked. He learned everything he could with the old camera. And on occasional birthdays and Christmases, his grandparents would gift him newer more advanced cameras. He kept each one and still even used them. During school, he’d join any club that would use his photography - school newspaper, yearbook, and of course photography club. Into college, he studied photography, fully determined to take pictures as a profession. Being a professional skateboarder was out of the question anyway - according to his grandma, that is.</p>
  833. <p>When he was younger, it was hard for Oliver to make friends since he never spoke. He was the kid that often times got bullied. Once older and after his therapy sessions, he compensated for all those years of not talking by talking a lot. His therapist taught him that the best way to keep a conversation going was by question, thus Oliver asked a lot of questions to help him talk more. Although he became talkative, it was still hard for him to form any deep connections with people. He often times struggled with letting people in. However, his therapist kept pushing for him to make some kind of acquaintance. In order not to be a complete loner and to get his therapist and grandparents off his back, Oliver would push aside his stubborn ways and only showed people the wittier, dorky side of him. If anyone wanted to even catch a glimpse of any other side to Oliver, they only had his pictures to see. That was all anyone was getting out of him unless they somehow managed to get close.</p>
  834. <p>Despite how shitty he knew the world could be, there was this caring side to him. He liked to see others happy even though he wasn’t exactly one hundred percent happy himself. Oliver found himself caring and trying to look out for others, especially the people he would consider friends. No matter how hard he tried not to look out for others, sometimes even strangers, he just couldn’t stop. He didn’t even know why he cared so much about others, especially when he didn’t bother to let them get close to him. His therapist had given him numerous theories, but Oliver tended to ignore and dismiss them. All he knew was that he cared a lot and he couldn’t imagine that would be considered a bad thing.</p>
  835. </div><!--biocontent-->
  836.  
  837. </div><!--cbio-->
  838.  
  839. <div class="clinks">
  840. <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
  841. http://fontawesome.io/icons/-->
  842. <a href="/tagged/muse:oliver young">
  843. <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  844. <a href="http://oliveryoung.tumblr.com/paras">
  845. <i class="fa fa-book" aria-hidden="true"></i></a>
  846. <a href="http://oliveryoung.tumblr.com/tagged/instagram">
  847. <i class="fa fa-instagram" aria-hidden="true"></i></a>
  848. <a href="http://oliveryoung.tumblr.com/">
  849. <i class="fa fa-pencil" aria-hidden="true"></i></a>
  850. <a href="http://oliverdinah.tumblr.com/tagged/playlist:oliver young">
  851. <i class="fa fa-music" aria-hidden="true"></i></a>
  852. <a href="http://oliveryoung.tumblr.com/tagged/*outfit">
  853. <i class="fa fa-male" aria-hidden="true"></i></a>
  854. </div><!--clinks-->
  855.  
  856.  
  857. </div><!--ccontent-->
  858.  
  859. <!--PAGE 2-->
  860. <div class="ccontent" id="c1p2">
  861. <div class="cbio">
  862.  
  863. <div class="headline">
  864. <h2><span class="h2front">About</span></h2>
  865. <p />"I'm still a little bent, a little crooked, but all things considered, I can't complain."
  866. </div><!--headline-->
  867.  
  868. <div class="biocontent">
  869.  
  870. <!--LEFT DATA-->
  871. <ul class="cell1">
  872. <li> <b><font color="D3D3D3">Full name:</font></b> <span> </span> Oliver Peter Young </li>
  873. <li> <b><font color="D3D3D3">Nickname:</font></b> <span> </span> Lollie, Ollie </li>
  874. <li> <b><font color="D3D3D3">Age:</font></b> <span> </span> 26 </li>
  875. <li> <b><font color="D3D3D3">D.o.B:</font></b> <span> </span> December 22, 1991 </li>
  876. <li> <b><font color="D3D3D3">Birthplace:</font></b> <span> </span> Cincinnati, Ohio </li>
  877. <li> <b><font color="D3D3D3">Residence:</font></b> <span> </span> Santa Monica, California </li>
  878. <li> <b><font color="D3D3D3">Occupation:</font></b> <span> </span> Photographer </li>
  879. <li> <b><font color="D3D3D3">Religion:</font></b> <span> </span> Grew up Christian, currently Atheist </li>
  880. <li> <b><font color="D3D3D3">Ethnicity:</font></b> <span> </span> English and German </li>
  881.  
  882. <br>
  883. <li> <b><font color="D3D3D3">Parents:</font></b> <span> </span> Joy Young (deceased), Robert Young (deceased) </li>
  884. <li> <b><font color="D3D3D3">Grandparents:</font></b> <span> </span> Evelyn Young, Dennis Young </li>
  885. <li> <b><font color="D3D3D3">Siblings:</font></b> <span> </span> Only Child </li>
  886.  
  887. <br>
  888. <li> <b><font color="D3D3D3">Sexual Orientation:</font></b> <span> </span> Straight </li>
  889. <li> <b><font color="D3D3D3">Relationship Status:</font></b> <span> </span> Single </li>
  890. <li> <b><font color="D3D3D3">Drinks:</font></b> <span> </span> Yes, on a occasion </li>
  891. <li> <b><font color="D3D3D3">Drugs:</font></b> <span> </span> No </li>
  892. <li> <b><font color="D3D3D3">Smokes:</font></b> <span> </span> No </li>
  893.  
  894. <br>
  895. <li><b><font color="D3D3D3">Traits</font></b> <span> </span> </li>
  896. <li> <b><font color="D3D3D3">+ :</font></b> <span> </span> Witty, Caring, Artistic </li>
  897. <li> <b><font color="D3D3D3">- :</font></b> <span> </span> Pessimistic, Lonely, Fearful </li>
  898. </ul>
  899.  
  900. <!--RIGHT DATA-->
  901. <ul class="cell2">
  902. <li><b><font color="D3D3D3">Label:</font></b> <span> </span> The Artist </li>
  903.  
  904. <br>
  905. <li> <b><font color="D3D3D3">Scars:</font></b> <span> </span> A few around arms and legs due to skateboard injuries </li>
  906. <li> <b><font color="D3D3D3">Piercings:</font></b> <span> </span> None </li>
  907. <li> <b><font color="D3D3D3">Tattoos:</font></b> <span> </span> None </li>
  908. <li> <b><font color="D3D3D3">Height:</font></b> <span> </span> 6'0" </li>
  909. <li> <b><font color="D3D3D3">Clothing Style:</font></b> <span> </span> Street style, usually skinny jeans and a graphic t-shirt </li>
  910. <li> <b><font color="D3D3D3">Eye Color:</font></b> <span> </span> Brown </li>
  911. <li> <b><font color="D3D3D3">Hair Color:</font></b> <span> </span> Brown </li>
  912. <li> <b><font color="D3D3D3">Hair Style:</font></b> <span> </span> [ <a href="http://static.tumblr.com/qxjwntd/P84o5qwxh/tasm1__188_.gif"><font color="D0FFFE">x</font></a> ] </li>
  913. <li> <b><font color="D3D3D3">Facial Hair:</font></b> <span> </span> No </li>
  914. <li> <b><font color="D3D3D3">Eyeglasses:</font></b> <span> </span> Yes, usually when he's working on editing photos </li>
  915.  
  916. <br>
  917. <li><b><font color="D3D3D3">Vehicle:</font></b> <span> </span> Quite a few skateboards, but his <a href="http://static.tumblr.com/qxjwntd/0yDo5rm0b/oliversboard.jpg"> <font color="D0FFFE">favorite</font></a> one mostly </li>
  918. </ul>
  919.  
  920. </div><!--biocontent-->
  921.  
  922. </div><!--cbio-->
  923.  
  924. <!--You can put another picture of your character or a flavour
  925. picture or whatever you like. Dimensions are: 165x340-->
  926. <div class="flavorimg" style="background-image:
  927. url('https://static.tumblr.com/qxjwntd/NV3p31rfy/oliver2.png');">
  928. </div>
  929.  
  930. </div> <!--ccontent c1p2-->
  931.  
  932. <!--PAGE 3-->
  933. <div class="ccontent" id="c1p3">
  934.  
  935. <!--CONNECTION IMAGES/NAVIGATION-->
  936. <div class="navcon">
  937. <div class="con" href="#c1con1" style="background-image:
  938. url('http://placehold.it/83x83');"></div>
  939. <div class="con" href="#c1con2" style="background-image:
  940. url('http://placehold.it/83x83');"></div>
  941. <div class="con" href="#c1con3" style="background-image:
  942. url('http://placehold.it/83x83');"></div>
  943. <div class="con" href="#c1con4" style="background-image:
  944. url('http://placehold.it/83x83');"></div>
  945. <div class="con" href="#c1con5" style="background-image:
  946. url('http://placehold.it/83x83');"></div>
  947. <div class="con" href="#c1con6" style="background-image:
  948. url('http://placehold.it/83x83');"></div>
  949. <div class="con" href="#c1con7" style="background-image:
  950. url('http://placehold.it/83x83');"></div>
  951. <div class="con" href="#c1con8" style="background-image:
  952. url('http://placehold.it/83x83');"></div>
  953. </div>
  954.  
  955. <div class="cbio">
  956. <div class="headline">
  957. <h2><span class="h2front">Connections</span></h2>
  958. <p />"I like observing people. I like looking at things."
  959. </div><!--headline-->
  960.  
  961. <div class="biocontent">
  962.  
  963. <div class="connections active" id="c1con1">
  964. <span>KARA CAVANAUGH :: </span>
  965. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  966. </div><!--connections-->
  967.  
  968. <!--ADD CONNECTION INFO-->
  969. <!--Add as many connection info text fields as you like. If
  970. you need less than 12, remove them from the navigation
  971. above as well. To add new info:
  972. copy the follow div .connections
  973. change the id to id="c#con# (replace hashtags with the right numbers.
  974. c# = card number, con# = connection number.
  975.  
  976. Make sure only the first connection div has the class
  977. 'active' see above.
  978. You can also change these to names but then you need to
  979. edit the 'href' in the navigation (.clinks .navcon) as well
  980. .-->
  981.  
  982. <div class="connections" id="c1con2">
  983. <span>Connection Name :: </span> CONNECTIONS TEXT
  984. </div>
  985.  
  986. </div><!--biocontent-->
  987. </div><!--cbio-->
  988. </div> <!--ccontent c1p3-->
  989.  
  990. </div> <!--ccard-->
  991.  
  992.  
  993.  
  994. <!--CHARACTER CARDS-->
  995. <section id="gallery">
  996. <div id="gallery-track">
  997.  
  998. <!--CHARACTER TWO-->
  999.  
  1000. <div class="cbox g1" href="#MATTHEWLANCE">
  1001. <div class="cname">
  1002. <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
  1003. change the opacity of the names in the CSS-->
  1004. <span style="font-size: 45px;">
  1005. MATTHEW <br />
  1006. LANCE
  1007. </span>
  1008. </div> <!--cname-->
  1009. <div class="triangle"></div>
  1010. <!--The image is 175x370px but because it zooms to 105% ideally
  1011. you can use an image that's ~ 183.75x388.5-->
  1012. <img src="https://static.tumblr.com/qxjwntd/2EPp31rdi/oliver1.png"></img>
  1013. </div> <!--cbox-->
  1014.  
  1015.  
  1016. <div class="ccard" id="MATTHEWLANCE">
  1017.  
  1018. <!--INNER TAB NAVIGATION-->
  1019. <div class="cfooter">
  1020. <a href="#c1p1" class="active">
  1021. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1022. <a href="#c1p2">
  1023. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1024. <a href="#c1p3">
  1025. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1026. </div>
  1027.  
  1028. <div class="ccontent active" id="c1p1">
  1029. <div class="cbio">
  1030.  
  1031. <div class="headline">
  1032. <h2><span class="h2front">Biography</span></h2>
  1033. <p />Matthew resides in the Santa Monica neighborhood Pico Boulevard where he's lived there for a couple years. He works as a personal trainer in Wilshire Boulevard, being the self proclaimed best personal trainer around.
  1034. </div><!--headline-->
  1035.  
  1036. <div class="biocontent">
  1037. <p>Ever since he could remember, Matt’s dad would drink from sun up until sundown. It was a hard living in the Lance household from the very start. They weren’t exactly wealthy. In fact, they barely got by at times. There were days that the family went without electricity or hot water or sometimes even food. Matt’s father claimed this was the reason why he drank, but even at a young age, Matt knew their problems stemmed from his father’s drinking. Maybe if he had stopped with the excessive drinking, the old man could keep a job.</p>
  1038.  
  1039. <p>With the drinking came the hits. Matt’s father didn’t only just abuse him, but his mother was also a victim, which only fueled Matt’s hatred for the man. The beatings were never easy. There were some instances that the abuse sent Matthew and his mother to the emergency room. Bruises and scars littered their bodies from how bad it would get at times. At a young age, he could take it - he had no choice but to learn how to - but he could never stand his mother being on the receiving end of his father’s drunken rage. It was hard for him to defend himself or his mother, however, considering his father was always too big and strong for him to do so.</p>
  1040.  
  1041. <p>This was where Matt began to become obsessed with working out. It wasn’t for the health benefits - although, later that was the main factor. Back then, he figured that the stronger he got, the easier it would be to eventually stop his dad’s backhand. One day, it worked. Matt was fifteen when it happened, his dad drunk in a way he had never seen before. The man came home with such a rage that left Matt wondering what in the world happened. It didn’t matter, though, because whatever had happened, his dad was going to take it out on him. Except on that day, Matt wasn’t having it. Threat after threat, he had enough and when his father was about to slap his mother, Matt lost it. Grabbing the man and beating his face into a bloody mess, he let years of hatred out.</p>
  1042.  
  1043. <p>Self defense wasn’t a good enough reason to keep him out of juvie, though. The police found ways to put the two of them behind bars, leaving his mother devastated. The judge gave his father seven years, while he got three, being stuck in juvie until he was eighteen. Matthew was never a very talkative person and being in juvie only made that more true. He kept to himself and never bothered to be friendly. During his time there, he made more enemies than friends. He may not have been the speaking type, but when he did speak, nothing good ever came out of it. It usually ended in him getting into fights with the fellow kids locked up in there.</p>
  1044.  
  1045. <p>The angry child his father created grew into an angry adult after juvie. It was like Matthew walked around with a hatred for the world except for his mother. However, he did find a way to channel all that anger - fitness, boxing, and music. Though, he did like to keep the music part a secret, he focused more on the fitness. Working out and hitting punching bags were therapeutic for him and that was when he realized he could make some living out of it. Getting his GED and studying to become a personal trainer, he wanted to start fresh with his mother. So, packing their bags, they left Salinas, California and moved to Santa Monica. Now living there for a couple years and working as a personal trainer at a local gym in Wilshire Boulevard, he figured that was as good as it was going to get.</p>
  1046. </div><!--biocontent-->
  1047.  
  1048. </div><!--cbio-->
  1049.  
  1050. <div class="clinks">
  1051. <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
  1052. http://fontawesome.io/icons/-->
  1053. <a href="/tagged/muse:matthew lance">
  1054. <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1055. <a href="http://matthewlance.tumblr.com/paras">
  1056. <i class="fa fa-book" aria-hidden="true"></i></a>
  1057. <a href="http://matthewlance.tumblr.com/tagged/instagram">
  1058. <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1059. <a href="http://matthewlance.tumblr.com/">
  1060. <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1061. <a href="http://oliverdinah.tumblr.com/tagged/playlist:matthew lance">
  1062. <i class="fa fa-music" aria-hidden="true"></i></a>
  1063. <a href="http://matthewlance.tumblr.com/tagged/*outfit">
  1064. <i class="fa fa-male" aria-hidden="true"></i></a>
  1065. </div><!--clinks-->
  1066.  
  1067.  
  1068. </div><!--ccontent-->
  1069.  
  1070. <!--PAGE 2-->
  1071. <div class="ccontent" id="c1p2">
  1072. <div class="cbio">
  1073.  
  1074. <div class="headline">
  1075. <h2><span class="h2front">About</span></h2>
  1076. <p />"I used to punch walls until my knuckles bled because I was filled with rage and anger, now I punch walls until they bleed just to fucking feel something, or to at least try."
  1077. </div><!--headline-->
  1078.  
  1079. <div class="biocontent">
  1080.  
  1081. <!--LEFT DATA-->
  1082. <ul class="cell1">
  1083. <li> <b><font color="D3D3D3">Full name:</font></b> <span> </span> Matthew Shane Lance </li>
  1084. <li> <b><font color="D3D3D3">Nickname:</font></b> <span> </span> Matt </li>
  1085. <li> <b><font color="D3D3D3">Age:</font></b> <span> </span> 29 </li>
  1086. <li> <b><font color="D3D3D3">D.o.B:</font></b> <span> </span> March 8, 1988 </li>
  1087. <li> <b><font color="D3D3D3">Birthplace:</font></b> <span> </span> Salinas, California </li>
  1088. <li> <b><font color="D3D3D3">Residence:</font></b> <span> </span> Santa Monica, California </li>
  1089. <li> <b><font color="D3D3D3">Occupation:</font></b> <span> </span> Personal Trainer </li>
  1090. <li> <b><font color="D3D3D3">Religion:</font></b> <span> </span> Never practiced any religion </li>
  1091. <li> <b><font color="D3D3D3">Ethnicity:</font></b> <span> </span> Welsh, Scottish, and Dutch </li>
  1092.  
  1093. <br>
  1094. <li> <b><font color="D3D3D3">Parents:</font></b> <span> </span> Joy Young (deceased), Robert Young (deceased) </li>
  1095. <li> <b><font color="D3D3D3">Grandparents:</font></b> <span> </span> Evelyn Young, Dennis Young </li>
  1096. <li> <b><font color="D3D3D3">Siblings:</font></b> <span> </span> Only Child </li>
  1097.  
  1098. <br>
  1099. <li> <b><font color="D3D3D3">Sexual Orientation:</font></b> <span> </span> Straight </li>
  1100. <li> <b><font color="D3D3D3">Relationship Status:</font></b> <span> </span> Single </li>
  1101. <li> <b><font color="D3D3D3">Drinks:</font></b> <span> </span> Yes, on a occasion </li>
  1102. <li> <b><font color="D3D3D3">Drugs:</font></b> <span> </span> No </li>
  1103. <li> <b><font color="D3D3D3">Smokes:</font></b> <span> </span> No </li>
  1104.  
  1105. <br>
  1106. <li><b><font color="D3D3D3">Traits</font></b> <span> </span> </li>
  1107. <li> <b><font color="D3D3D3">+ :</font></b> <span> </span> Witty, Caring, Artistic </li>
  1108. <li> <b><font color="D3D3D3">- :</font></b> <span> </span> Pessimistic, Lonely, Fearful </li>
  1109. </ul>
  1110.  
  1111. <!--RIGHT DATA-->
  1112. <ul class="cell2">
  1113. <li><b><font color="D3D3D3">Label:</font></b> <span> </span> The Artist </li>
  1114.  
  1115. <br>
  1116. <li> <b><font color="D3D3D3">Scars:</font></b> <span> </span> A few around arms and legs due to skateboard injuries </li>
  1117. <li> <b><font color="D3D3D3">Piercings:</font></b> <span> </span> None </li>
  1118. <li> <b><font color="D3D3D3">Tattoos:</font></b> <span> </span> None </li>
  1119. <li> <b><font color="D3D3D3">Height:</font></b> <span> </span> 6'0" </li>
  1120. <li> <b><font color="D3D3D3">Clothing Style:</font></b> <span> </span> Street style, usually skinny jeans and a graphic t-shirt </li>
  1121. <li> <b><font color="D3D3D3">Eye Color:</font></b> <span> </span> Brown </li>
  1122. <li> <b><font color="D3D3D3">Hair Color:</font></b> <span> </span> Brown </li>
  1123. <li> <b><font color="D3D3D3">Hair Style:</font></b> <span> </span> [ <a href="http://static.tumblr.com/qxjwntd/P84o5qwxh/tasm1__188_.gif"><font color="D0FFFE">x</font></a> ] </li>
  1124. <li> <b><font color="D3D3D3">Facial Hair:</font></b> <span> </span> No </li>
  1125. <li> <b><font color="D3D3D3">Eyeglasses:</font></b> <span> </span> Yes, usually when he's working on editing photos </li>
  1126.  
  1127. <br>
  1128. <li><b><font color="D3D3D3">Vehicle:</font></b> <span> </span> Quite a few skateboards, but his <a href="http://static.tumblr.com/qxjwntd/0yDo5rm0b/oliversboard.jpg"> <font color="D0FFFE">favorite</font></a> one mostly </li>
  1129. </ul>
  1130.  
  1131. </div><!--biocontent-->
  1132.  
  1133. </div><!--cbio-->
  1134.  
  1135. <!--You can put another picture of your character or a flavour
  1136. picture or whatever you like. Dimensions are: 165x340-->
  1137. <div class="flavorimg" style="background-image:
  1138. url('https://static.tumblr.com/qxjwntd/NV3p31rfy/oliver2.png');">
  1139. </div>
  1140.  
  1141. </div> <!--ccontent c1p2-->
  1142.  
  1143. <!--PAGE 3-->
  1144. <div class="ccontent" id="c1p3">
  1145.  
  1146. <!--CONNECTION IMAGES/NAVIGATION-->
  1147. <div class="navcon">
  1148. <div class="con" href="#c1con1" style="background-image:
  1149. url('http://placehold.it/83x83');"></div>
  1150. <div class="con" href="#c1con2" style="background-image:
  1151. url('http://placehold.it/83x83');"></div>
  1152. <div class="con" href="#c1con3" style="background-image:
  1153. url('http://placehold.it/83x83');"></div>
  1154. <div class="con" href="#c1con4" style="background-image:
  1155. url('http://placehold.it/83x83');"></div>
  1156. <div class="con" href="#c1con5" style="background-image:
  1157. url('http://placehold.it/83x83');"></div>
  1158. <div class="con" href="#c1con6" style="background-image:
  1159. url('http://placehold.it/83x83');"></div>
  1160. <div class="con" href="#c1con7" style="background-image:
  1161. url('http://placehold.it/83x83');"></div>
  1162. <div class="con" href="#c1con8" style="background-image:
  1163. url('http://placehold.it/83x83');"></div>
  1164. </div>
  1165.  
  1166. <div class="cbio">
  1167. <div class="headline">
  1168. <h2><span class="h2front">Connections</span></h2>
  1169. <p />"I like observing people. I like looking at things."
  1170. </div><!--headline-->
  1171.  
  1172. <div class="biocontent">
  1173.  
  1174. <div class="connections active" id="c1con1">
  1175. <span>KARA CAVANAUGH :: </span>
  1176. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  1177. </div><!--connections-->
  1178.  
  1179. <!--ADD CONNECTION INFO-->
  1180. <!--Add as many connection info text fields as you like. If
  1181. you need less than 12, remove them from the navigation
  1182. above as well. To add new info:
  1183. copy the follow div .connections
  1184. change the id to id="c#con# (replace hashtags with the right numbers.
  1185. c# = card number, con# = connection number.
  1186.  
  1187. Make sure only the first connection div has the class
  1188. 'active' see above.
  1189. You can also change these to names but then you need to
  1190. edit the 'href' in the navigation (.clinks .navcon) as well
  1191. .-->
  1192.  
  1193. <div class="connections" id="c1con2">
  1194. <span>Connection Name :: </span> CONNECTIONS TEXT
  1195. </div>
  1196.  
  1197. </div><!--biocontent-->
  1198. </div><!--cbio-->
  1199. </div> <!--ccontent c1p3-->
  1200.  
  1201. </div> <!--ccard-->
  1202.  
  1203.  
  1204.  
  1205. <!--CHARACTER TWO-->
  1206.  
  1207. <div class="cbox g3" href="#c3">
  1208. <div class="cname">
  1209. <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
  1210. change the opacity of the names in the CSS-->
  1211. <span style="font-size: 55px;">
  1212. FIRST <br />
  1213. LASTN
  1214. </span>
  1215. </div> <!--cname-->
  1216. <div class="triangle"></div>
  1217. <!--The image is 175x370px but because it zooms to 105% ideally
  1218. you can use an image that's ~ 183.75x388.5-->
  1219. <img src="https://placehold.it/175x370"></img>
  1220. </div> <!--cbox-->
  1221.  
  1222.  
  1223. <div class="ccard" id="c3">
  1224.  
  1225. <!--INNER TAB NAVIGATION-->
  1226. <div class="cfooter">
  1227. <a href="#c3p1" class="active">
  1228. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1229. <a href="#c3p2">
  1230. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1231. <a href="#c3p3">
  1232. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1233. </div>
  1234.  
  1235. <div class="ccontent active" id="c3p1">
  1236. <div class="cbio">
  1237.  
  1238. <div class="headline">
  1239. <h2><span class="h2front">short</span>bio</h2>
  1240. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1241. elit, sed do eiusmod tempor incididunt ut labore et dolore
  1242. magna aliqua.
  1243. </div><!--headline-->
  1244.  
  1245. <div class="biocontent">
  1246. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1247. </div><!--biocontent-->
  1248.  
  1249. </div><!--cbio-->
  1250.  
  1251. <div class="clinks">
  1252. <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
  1253. http://fontawesome.io/icons/-->
  1254. <a href="#">
  1255. <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1256. <a href="#">
  1257. <i class="fa fa-book" aria-hidden="true"></i></a>
  1258. <a href="#">
  1259. <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1260. <a href="#">
  1261. <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1262. <a href="#">
  1263. <i class="fa fa-music" aria-hidden="true"></i></a>
  1264. <a href="#">
  1265. <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1266. </div><!--clinks-->
  1267.  
  1268. <div class="ctraits">
  1269. <!--span is needed for the style-->
  1270. <span>+ positive trait</span><p />
  1271. <span>+ positive trait</span><p />
  1272. <span>+ positive trait</span><p />
  1273. <br />
  1274. <span>- negative trait</span><p />
  1275. <span>- negative trait</span><p />
  1276. <span>- negative trait</span><p />
  1277. </div><!--ctraits-->
  1278.  
  1279. </div><!--ccontent-->
  1280.  
  1281. <!--PAGE 2-->
  1282. <div class="ccontent" id="c3p2">
  1283. <div class="cbio">
  1284.  
  1285. <div class="headline">
  1286. <h2><span class="h2front">the</span>title</h2>
  1287. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1288. elit, sed do eiusmod tempor incididunt ut labore et dolore
  1289. magna aliqua.
  1290. </div><!--headline-->
  1291.  
  1292. <div class="biocontent">
  1293.  
  1294. <!--LEFT DATA-->
  1295. <ul class="cell1">
  1296. <li> Full name: <span> - </span> </li>
  1297. <li> Nickname: <span> - </span> </li>
  1298. <li> Age: <span> - </span> </li>
  1299. <li> D.o.B: <span> - </span> </li>
  1300. <li> Gender: <span> - </span> </li>
  1301. <li> Pronouns: <span> - </span> </li>
  1302. <li> Sexuality: <span> - </span> </li>
  1303. <li> Species: <span> - </span></li>
  1304. </ul>
  1305.  
  1306. <!--RIGHT DATA-->
  1307. <ul class="cell2">
  1308. <li> Occupation: <span> - </span> </li>
  1309. <li> Nationality: <span> - </span> </li>
  1310. <li> Residence: <span> - </span> </li>
  1311. <li> Education: <span> - </span> </li>
  1312. <li> Height: <span> - </span> </li>
  1313. <li> Alignment: <span> - </span> </li>
  1314. <li> Jung Type: <span> - </span> </li>
  1315. <li> Affiliation: <span> - </span></li>
  1316. </ul>
  1317.  
  1318. </div><!--biocontent-->
  1319.  
  1320. </div><!--cbio-->
  1321.  
  1322. <!--You can put another picture of your character or a flavour
  1323. picture or whatever you like. Dimensions are: 165x340-->
  1324. <div class="flavorimg" style="background-image:
  1325. url('https://placehold.it/180x340');">
  1326. </div>
  1327.  
  1328. </div> <!--ccontent-->
  1329.  
  1330. <!--PAGE 3-->
  1331. <div class="ccontent" id="c3p3">
  1332.  
  1333. <!--CONNECTION IMAGES/NAVIGATION-->
  1334. <div class="navcon">
  1335. <div class="con" href="#c3con1" style="background-image:
  1336. url('http://placehold.it/84x84');"></div>
  1337. <div class="con" href="#c3con2" style="background-image:
  1338. url('http://placehold.it/84x84');"></div>
  1339. <div class="con" href="#c3con3" style="background-image:
  1340. url('http://placehold.it/84x84');"></div>
  1341. <div class="con" href="#c3con4" style="background-image:
  1342. url('http://placehold.it/84x84');"></div>
  1343. <div class="con" href="#c3con5" style="background-image:
  1344. url('http://placehold.it/84x84');"></div>
  1345. <div class="con" href="#c3con6" style="background-image:
  1346. url('http://placehold.it/84x84');"></div>
  1347. <div class="con" href="#c3con7" style="background-image:
  1348. url('http://placehold.it/50x50');"></div>
  1349. <div class="con" href="#c3con8" style="background-image:
  1350. url('http://placehold.it/50x50');"></div>
  1351. </div>
  1352.  
  1353. <div class="cbio">
  1354. <div class="headline">
  1355. <h2><span class="h2front">social</span>connections</h2>
  1356. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1357. elit, sed do eiusmod tempor incididunt ut labore et dolore
  1358. magna aliqua.
  1359. </div><!--headline-->
  1360.  
  1361. <div class="biocontent">
  1362.  
  1363. <div class="connections active" id="c3con1">
  1364. <span>Connection name :: </span>
  1365. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  1366. </div><!--connections-->
  1367.  
  1368. <!--ADD CONNECTION INFO-->
  1369. <!--Add as many connection info text fields as you like. If
  1370. you need less than 12, remove them from the navigation
  1371. above as well. To add new info:
  1372. copy the follow div .connections
  1373. change the id to id="c#con# (replace hashtags with the right numbers.
  1374. c# = card number, con# = connection number.
  1375.  
  1376. Make sure only the first connection div has the class
  1377. 'active' see above.
  1378. You can also change these to names but then you need to
  1379. edit the 'href' in the navigation (.clinks .navcon) as well
  1380. .-->
  1381.  
  1382. <div class="connections" id="c3con2">
  1383. <span>Connection Name :: </span> CONNECTIONS TEXT
  1384. </div>
  1385.  
  1386. </div><!--biocontent-->
  1387. </div><!--cbio-->
  1388. </div> <!--ccontent-->
  1389.  
  1390. </div> <!--ccard-->
  1391.  
  1392.  
  1393.  
  1394. <!--CHARACTER FOUR-->
  1395.  
  1396. <div class="cbox g4" href="#c4">
  1397. <div class="cname">
  1398. <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
  1399. change the opacity of the names in the CSS-->
  1400. <span style="font-size: 55px;">
  1401. FIRST <br />
  1402. LASTN
  1403. </span>
  1404. </div> <!--cname-->
  1405. <div class="triangle"></div>
  1406. <!--The image is 175x370px but because it zooms to 105% ideally
  1407. you can use an image that's ~ 183.75x388.5-->
  1408. <img src="https://placehold.it/175x370"></img>
  1409. </div> <!--cbox-->
  1410.  
  1411.  
  1412. <div class="ccard" id="c4">
  1413.  
  1414. <!--INNER TAB NAVIGATION-->
  1415. <div class="cfooter">
  1416. <a href="#c4p1" class="active">
  1417. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1418. <a href="#c4p2">
  1419. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1420. <a href="#c4p3">
  1421. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1422. </div>
  1423.  
  1424. <div class="ccontent active" id="c4p1">
  1425. <div class="cbio">
  1426.  
  1427. <div class="headline">
  1428. <h2><span class="h2front">short</span>bio</h2>
  1429. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1430. elit, sed do eiusmod tempor incididunt ut labore et dolore
  1431. magna aliqua.
  1432. </div><!--headline-->
  1433.  
  1434. <div class="biocontent">
  1435. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1436. </div><!--biocontent-->
  1437.  
  1438. </div><!--cbio-->
  1439.  
  1440. <div class="clinks">
  1441. <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
  1442. http://fontawesome.io/icons/-->
  1443. <a href="#">
  1444. <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1445. <a href="#">
  1446. <i class="fa fa-book" aria-hidden="true"></i></a>
  1447. <a href="#">
  1448. <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1449. <a href="#">
  1450. <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1451. <a href="#">
  1452. <i class="fa fa-music" aria-hidden="true"></i></a>
  1453. <a href="#">
  1454. <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1455. </div><!--clinks-->
  1456.  
  1457. <div class="ctraits">
  1458. <!--span is needed for the style-->
  1459. <span>+ positive trait</span><p />
  1460. <span>+ positive trait</span><p />
  1461. <span>+ positive trait</span><p />
  1462. <br />
  1463. <span>- negative trait</span><p />
  1464. <span>- negative trait</span><p />
  1465. <span>- negative trait</span><p />
  1466. </div><!--ctraits-->
  1467.  
  1468. </div><!--ccontent-->
  1469.  
  1470. <!--PAGE 2-->
  1471. <div class="ccontent" id="c4p2">
  1472. <div class="cbio">
  1473.  
  1474. <div class="headline">
  1475. <h2><span class="h2front">the</span>title</h2>
  1476. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1477. elit, sed do eiusmod tempor incididunt ut labore et dolore
  1478. magna aliqua.
  1479. </div><!--headline-->
  1480.  
  1481. <div class="biocontent">
  1482.  
  1483. <!--LEFT DATA-->
  1484. <ul class="cell1">
  1485. <li> Full name: <span> - </span> </li>
  1486. <li> Nickname: <span> - </span> </li>
  1487. <li> Age: <span> - </span> </li>
  1488. <li> D.o.B: <span> - </span> </li>
  1489. <li> Gender: <span> - </span> </li>
  1490. <li> Pronouns: <span> - </span> </li>
  1491. <li> Sexuality: <span> - </span> </li>
  1492. <li> Species: <span> - </span></li>
  1493. </ul>
  1494.  
  1495. <!--RIGHT DATA-->
  1496. <ul class="cell2">
  1497. <li> Occupation: <span> - </span> </li>
  1498. <li> Nationality: <span> - </span> </li>
  1499. <li> Residence: <span> - </span> </li>
  1500. <li> Education: <span> - </span> </li>
  1501. <li> Height: <span> - </span> </li>
  1502. <li> Alignment: <span> - </span> </li>
  1503. <li> Jung Type: <span> - </span> </li>
  1504. <li> Affiliation: <span> - </span></li>
  1505. </ul>
  1506.  
  1507. </div><!--biocontent-->
  1508.  
  1509. </div><!--cbio-->
  1510.  
  1511. <!--You can put another picture of your character or a flavour
  1512. picture or whatever you like. Dimensions are: 165x340-->
  1513. <div class="flavorimg" style="background-image:
  1514. url('https://placehold.it/180x340');">
  1515. </div>
  1516.  
  1517. </div> <!--ccontent-->
  1518.  
  1519. <!--PAGE 3-->
  1520. <div class="ccontent" id="c4p3">
  1521.  
  1522. <!--CONNECTION IMAGES/NAVIGATION-->
  1523. <div class="navcon">
  1524. <div class="con" href="#c4con1" style="background-image:
  1525. url('http://placehold.it/84x84');"></div>
  1526. <div class="con" href="#c4con2" style="background-image:
  1527. url('http://placehold.it/84x84');"></div>
  1528. <div class="con" href="#c4con3" style="background-image:
  1529. url('http://placehold.it/84x84');"></div>
  1530. <div class="con" href="#c4con4" style="background-image:
  1531. url('http://placehold.it/84x84');"></div>
  1532. <div class="con" href="#c4con5" style="background-image:
  1533. url('http://placehold.it/84x84');"></div>
  1534. <div class="con" href="#c4con6" style="background-image:
  1535. url('http://placehold.it/84x84');"></div>
  1536. <div class="con" href="#c4con7" style="background-image:
  1537. url('http://placehold.it/50x50');"></div>
  1538. <div class="con" href="#c4con8" style="background-image:
  1539. url('http://placehold.it/50x50');"></div>
  1540. </div>
  1541.  
  1542. <div class="cbio">
  1543. <div class="headline">
  1544. <h2><span class="h2front">social</span>connections</h2>
  1545. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1546. elit, sed do eiusmod tempor incididunt ut labore et dolore
  1547. magna aliqua.
  1548. </div><!--headline-->
  1549.  
  1550. <div class="biocontent">
  1551.  
  1552. <div class="connections active" id="c4con1">
  1553. <span>Connection name :: </span>
  1554. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  1555. </div><!--connections-->
  1556.  
  1557. <!--ADD CONNECTION INFO-->
  1558. <!--Add as many connection info text fields as you like. If
  1559. you need less than 12, remove them from the navigation
  1560. above as well. To add new info:
  1561. copy the follow div .connections
  1562. change the id to id="c#con# (replace hashtags with the right numbers.
  1563. c# = card number, con# = connection number.
  1564.  
  1565. Make sure only the first connection div has the class
  1566. 'active' see above.
  1567. You can also change these to names but then you need to
  1568. edit the 'href' in the navigation (.clinks .navcon) as well
  1569. .-->
  1570.  
  1571. <div class="connections" id="c4con2">
  1572. <span>Connection Name :: </span> CONNECTIONS TEXT
  1573. </div>
  1574.  
  1575. </div><!--biocontent-->
  1576. </div><!--cbio-->
  1577. </div> <!--ccontent-->
  1578.  
  1579. </div> <!--ccard-->
  1580.  
  1581.  
  1582.  
  1583. <!--CHARACTER FIVE-->
  1584.  
  1585. <div class="cbox g5" href="#c5">
  1586. <div class="cname">
  1587. <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
  1588. change the opacity of the names in the CSS-->
  1589. <span style="font-size: 55px;">
  1590. FIRST <br />
  1591. LASTN
  1592. </span>
  1593. </div> <!--cname-->
  1594. <div class="triangle"></div>
  1595. <!--The image is 175x370px but because it zooms to 105% ideally
  1596. you can use an image that's ~ 183.75x388.5-->
  1597. <img src="https://placehold.it/175x370"></img>
  1598. </div> <!--cbox-->
  1599.  
  1600.  
  1601. <div class="ccard" id="c5">
  1602.  
  1603. <!--INNER TAB NAVIGATION-->
  1604. <div class="cfooter">
  1605. <a href="#c5p1" class="active">
  1606. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1607. <a href="#c5p2">
  1608. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1609. <a href="#c5p3">
  1610. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1611. </div>
  1612.  
  1613. <div class="ccontent active" id="c5p1">
  1614. <div class="cbio">
  1615.  
  1616. <div class="headline">
  1617. <h2><span class="h2front">short</span>bio</h2>
  1618. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1619. elit, sed do eiusmod tempor incididunt ut labore et dolore
  1620. magna aliqua.
  1621. </div><!--headline-->
  1622.  
  1623. <div class="biocontent">
  1624. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1625. </div><!--biocontent-->
  1626.  
  1627. </div><!--cbio-->
  1628.  
  1629. <div class="clinks">
  1630. <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
  1631. http://fontawesome.io/icons/-->
  1632. <a href="#">
  1633. <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1634. <a href="#">
  1635. <i class="fa fa-book" aria-hidden="true"></i></a>
  1636. <a href="#">
  1637. <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1638. <a href="#">
  1639. <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1640. <a href="#">
  1641. <i class="fa fa-music" aria-hidden="true"></i></a>
  1642. <a href="#">
  1643. <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1644. </div><!--clinks-->
  1645.  
  1646. <div class="ctraits">
  1647. <!--span is needed for the style-->
  1648. <span>+ positive trait</span><p />
  1649. <span>+ positive trait</span><p />
  1650. <span>+ positive trait</span><p />
  1651. <br />
  1652. <span>- negative trait</span><p />
  1653. <span>- negative trait</span><p />
  1654. <span>- negative trait</span><p />
  1655. </div><!--ctraits-->
  1656.  
  1657. </div><!--ccontent-->
  1658.  
  1659. <!--PAGE 2-->
  1660. <div class="ccontent" id="c5p2">
  1661. <div class="cbio">
  1662.  
  1663. <div class="headline">
  1664. <h2><span class="h2front">the</span>title</h2>
  1665. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1666. elit, sed do eiusmod tempor incididunt ut labore et dolore
  1667. magna aliqua.
  1668. </div><!--headline-->
  1669.  
  1670. <div class="biocontent">
  1671.  
  1672. <!--LEFT DATA-->
  1673. <ul class="cell1">
  1674. <li> Full name: <span> - </span> </li>
  1675. <li> Nickname: <span> - </span> </li>
  1676. <li> Age: <span> - </span> </li>
  1677. <li> D.o.B: <span> - </span> </li>
  1678. <li> Gender: <span> - </span> </li>
  1679. <li> Pronouns: <span> - </span> </li>
  1680. <li> Sexuality: <span> - </span> </li>
  1681. <li> Species: <span> - </span></li>
  1682. </ul>
  1683.  
  1684. <!--RIGHT DATA-->
  1685. <ul class="cell2">
  1686. <li> Occupation: <span> - </span> </li>
  1687. <li> Nationality: <span> - </span> </li>
  1688. <li> Residence: <span> - </span> </li>
  1689. <li> Education: <span> - </span> </li>
  1690. <li> Height: <span> - </span> </li>
  1691. <li> Alignment: <span> - </span> </li>
  1692. <li> Jung Type: <span> - </span> </li>
  1693. <li> Affiliation: <span> - </span></li>
  1694. </ul>
  1695.  
  1696. </div><!--biocontent-->
  1697.  
  1698. </div><!--cbio-->
  1699.  
  1700. <!--You can put another picture of your character or a flavour
  1701. picture or whatever you like. Dimensions are: 165x340-->
  1702. <div class="flavorimg" style="background-image:
  1703. url('https://placehold.it/180x340');">
  1704. </div>
  1705.  
  1706. </div> <!--ccontent-->
  1707.  
  1708. <!--PAGE 3-->
  1709. <div class="ccontent" id="c5p3">
  1710.  
  1711. <!--CONNECTION IMAGES/NAVIGATION-->
  1712. <div class="navcon">
  1713. <div class="con" href="#c5con1" style="background-image:
  1714. url('http://placehold.it/84x84');"></div>
  1715. <div class="con" href="#c5con2" style="background-image:
  1716. url('http://placehold.it/84x84');"></div>
  1717. <div class="con" href="#c5con3" style="background-image:
  1718. url('http://placehold.it/84x84');"></div>
  1719. <div class="con" href="#c5con4" style="background-image:
  1720. url('http://placehold.it/84x84');"></div>
  1721. <div class="con" href="#c5con5" style="background-image:
  1722. url('http://placehold.it/84x84');"></div>
  1723. <div class="con" href="#c5con6" style="background-image:
  1724. url('http://placehold.it/84x84');"></div>
  1725. <div class="con" href="#c5con7" style="background-image:
  1726. url('http://placehold.it/50x50');"></div>
  1727. <div class="con" href="#c5con8" style="background-image:
  1728. url('http://placehold.it/50x50');"></div>
  1729. </div>
  1730.  
  1731. <div class="cbio">
  1732. <div class="headline">
  1733. <h2><span class="h2front">social</span>connections</h2>
  1734. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1735. elit, sed do eiusmod tempor incididunt ut labore et dolore
  1736. magna aliqua.
  1737. </div><!--headline-->
  1738.  
  1739. <div class="biocontent">
  1740.  
  1741. <div class="connections active" id="c5con1">
  1742. <span>Connection name :: </span>
  1743. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  1744. </div><!--connections-->
  1745.  
  1746. <!--ADD CONNECTION INFO-->
  1747. <!--Add as many connection info text fields as you like. If
  1748. you need less than 12, remove them from the navigation
  1749. above as well. To add new info:
  1750. copy the follow div .connections
  1751. change the id to id="c#con# (replace hashtags with the right numbers.
  1752. c# = card number, con# = connection number.
  1753.  
  1754. Make sure only the first connection div has the class
  1755. 'active' see above.
  1756. You can also change these to names but then you need to
  1757. edit the 'href' in the navigation (.clinks .navcon) as well
  1758. .-->
  1759.  
  1760. <div class="connections" id="c5con2">
  1761. <span>Connection Name :: </span> CONNECTIONS TEXT
  1762. </div>
  1763.  
  1764. </div><!--biocontent-->
  1765. </div><!--cbio-->
  1766. </div> <!--ccontent-->
  1767.  
  1768. </div> <!--ccard-->
  1769.  
  1770.  
  1771.  
  1772. <!--CHARACTER SIX-->
  1773.  
  1774. <div class="cbox g2" href="#c6">
  1775. <div class="cname">
  1776. <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
  1777. change the opacity of the names in the CSS-->
  1778. <span style="font-size: 55px;">
  1779. FIRST <br />
  1780. LASTN
  1781. </span>
  1782. </div> <!--cname-->
  1783. <div class="triangle"></div>
  1784. <!--The image is 175x370px but because it zooms to 105% ideally
  1785. you can use an image that's ~ 183.75x388.5-->
  1786. <img src="https://placehold.it/175x370"></img>
  1787. </div> <!--cbox-->
  1788.  
  1789.  
  1790. <div class="ccard" id="c6">
  1791.  
  1792. <!--INNER TAB NAVIGATION-->
  1793. <div class="cfooter">
  1794. <a href="#c6p1" class="active">
  1795. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1796. <a href="#c6p2">
  1797. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1798. <a href="#c6p3">
  1799. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1800. </div>
  1801.  
  1802. <div class="ccontent active" id="c6p1">
  1803. <div class="cbio">
  1804.  
  1805. <div class="headline">
  1806. <h2><span class="h2front">short</span>bio</h2>
  1807. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1808. elit, sed do eiusmod tempor incididunt ut labore et dolore
  1809. magna aliqua.
  1810. </div><!--headline-->
  1811.  
  1812. <div class="biocontent">
  1813. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  1814. </div><!--biocontent-->
  1815.  
  1816. </div><!--cbio-->
  1817.  
  1818. <div class="clinks">
  1819. <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
  1820. http://fontawesome.io/icons/-->
  1821. <a href="#">
  1822. <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  1823. <a href="#">
  1824. <i class="fa fa-book" aria-hidden="true"></i></a>
  1825. <a href="#">
  1826. <i class="fa fa-instagram" aria-hidden="true"></i></a>
  1827. <a href="#">
  1828. <i class="fa fa-pencil" aria-hidden="true"></i></a>
  1829. <a href="#">
  1830. <i class="fa fa-music" aria-hidden="true"></i></a>
  1831. <a href="#">
  1832. <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  1833. </div><!--clinks-->
  1834.  
  1835. <div class="ctraits">
  1836. <!--span is needed for the style-->
  1837. <span>+ positive trait</span><p />
  1838. <span>+ positive trait</span><p />
  1839. <span>+ positive trait</span><p />
  1840. <br />
  1841. <span>- negative trait</span><p />
  1842. <span>- negative trait</span><p />
  1843. <span>- negative trait</span><p />
  1844. </div><!--ctraits-->
  1845.  
  1846. </div><!--ccontent-->
  1847.  
  1848. <!--PAGE 2-->
  1849. <div class="ccontent" id="c6p2">
  1850. <div class="cbio">
  1851.  
  1852. <div class="headline">
  1853. <h2><span class="h2front">the</span>title</h2>
  1854. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1855. elit, sed do eiusmod tempor incididunt ut labore et dolore
  1856. magna aliqua.
  1857. </div><!--headline-->
  1858.  
  1859. <div class="biocontent">
  1860.  
  1861. <!--LEFT DATA-->
  1862. <ul class="cell1">
  1863. <li> Full name: <span> - </span> </li>
  1864. <li> Nickname: <span> - </span> </li>
  1865. <li> Age: <span> - </span> </li>
  1866. <li> D.o.B: <span> - </span> </li>
  1867. <li> Gender: <span> - </span> </li>
  1868. <li> Pronouns: <span> - </span> </li>
  1869. <li> Sexuality: <span> - </span> </li>
  1870. <li> Species: <span> - </span></li>
  1871. </ul>
  1872.  
  1873. <!--RIGHT DATA-->
  1874. <ul class="cell2">
  1875. <li> Occupation: <span> - </span> </li>
  1876. <li> Nationality: <span> - </span> </li>
  1877. <li> Residence: <span> - </span> </li>
  1878. <li> Education: <span> - </span> </li>
  1879. <li> Height: <span> - </span> </li>
  1880. <li> Alignment: <span> - </span> </li>
  1881. <li> Jung Type: <span> - </span> </li>
  1882. <li> Affiliation: <span> - </span></li>
  1883. </ul>
  1884.  
  1885. </div><!--biocontent-->
  1886.  
  1887. </div><!--cbio-->
  1888.  
  1889. <!--You can put another picture of your character or a flavour
  1890. picture or whatever you like. Dimensions are: 165x340-->
  1891. <div class="flavorimg" style="background-image:
  1892. url('https://placehold.it/180x340');">
  1893. </div>
  1894.  
  1895. </div> <!--ccontent-->
  1896.  
  1897. <!--PAGE 3-->
  1898. <div class="ccontent" id="c6p3">
  1899.  
  1900. <!--CONNECTION IMAGES/NAVIGATION-->
  1901. <div class="navcon">
  1902. <div class="con" href="#c6con1" style="background-image:
  1903. url('http://placehold.it/84x84');"></div>
  1904. <div class="con" href="#c6con2" style="background-image:
  1905. url('http://placehold.it/84x84');"></div>
  1906. <div class="con" href="#c6con3" style="background-image:
  1907. url('http://placehold.it/84x84');"></div>
  1908. <div class="con" href="#c6con4" style="background-image:
  1909. url('http://placehold.it/84x84');"></div>
  1910. <div class="con" href="#c6con5" style="background-image:
  1911. url('http://placehold.it/84x84');"></div>
  1912. <div class="con" href="#c6con6" style="background-image:
  1913. url('http://placehold.it/84x84');"></div>
  1914. <div class="con" href="#c6con7" style="background-image:
  1915. url('http://placehold.it/50x50');"></div>
  1916. <div class="con" href="#c6con8" style="background-image:
  1917. url('http://placehold.it/50x50');"></div>
  1918. </div>
  1919.  
  1920. <div class="cbio">
  1921. <div class="headline">
  1922. <h2><span class="h2front">social</span>connections</h2>
  1923. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1924. elit, sed do eiusmod tempor incididunt ut labore et dolore
  1925. magna aliqua.
  1926. </div><!--headline-->
  1927.  
  1928. <div class="biocontent">
  1929.  
  1930. <div class="connections active" id="c6con1">
  1931. <span>Connection name :: </span>
  1932. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  1933. </div><!--connections-->
  1934.  
  1935. <!--ADD CONNECTION INFO-->
  1936. <!--Add as many connection info text fields as you like. If
  1937. you need less than 12, remove them from the navigation
  1938. above as well. To add new info:
  1939. copy the follow div .connections
  1940. change the id to id="c#con# (replace hashtags with the right numbers.
  1941. c# = card number, con# = connection number.
  1942.  
  1943. Make sure only the first connection div has the class
  1944. 'active' see above.
  1945. You can also change these to names but then you need to
  1946. edit the 'href' in the navigation (.clinks .navcon) as well
  1947. .-->
  1948.  
  1949. <div class="connections" id="c6con2">
  1950. <span>Connection Name :: </span> CONNECTIONS TEXT
  1951. </div>
  1952.  
  1953. </div><!--biocontent-->
  1954. </div><!--cbio-->
  1955. </div> <!--ccontent-->
  1956.  
  1957. </div> <!--ccard-->
  1958.  
  1959.  
  1960.  
  1961. <!--CHARACTER SEVEN-->
  1962.  
  1963. <div class="cbox g3" href="#c7">
  1964. <div class="cname">
  1965. <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
  1966. change the opacity of the names in the CSS-->
  1967. <span style="font-size: 55px;">
  1968. FIRST <br />
  1969. LASTN
  1970. </span>
  1971. </div> <!--cname-->
  1972. <div class="triangle"></div>
  1973. <!--The image is 175x370px but because it zooms to 105% ideally
  1974. you can use an image that's ~ 183.75x388.5-->
  1975. <img src="https://placehold.it/175x370"></img>
  1976. </div> <!--cbox-->
  1977.  
  1978.  
  1979. <div class="ccard" id="c7">
  1980.  
  1981. <!--INNER TAB NAVIGATION-->
  1982. <div class="cfooter">
  1983. <a href="#c7p1" class="active">
  1984. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1985. <a href="#c7p2">
  1986. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1987. <a href="#c7p3">
  1988. <i class="fa fa-stop" aria-hidden="true"></i></a>
  1989. </div>
  1990.  
  1991. <div class="ccontent active" id="c7p1">
  1992. <div class="cbio">
  1993.  
  1994. <div class="headline">
  1995. <h2><span class="h2front">short</span>bio</h2>
  1996. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  1997. elit, sed do eiusmod tempor incididunt ut labore et dolore
  1998. magna aliqua.
  1999. </div><!--headline-->
  2000.  
  2001. <div class="biocontent">
  2002. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  2003. </div><!--biocontent-->
  2004.  
  2005. </div><!--cbio-->
  2006.  
  2007. <div class="clinks">
  2008. <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
  2009. http://fontawesome.io/icons/-->
  2010. <a href="#">
  2011. <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2012. <a href="#">
  2013. <i class="fa fa-book" aria-hidden="true"></i></a>
  2014. <a href="#">
  2015. <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2016. <a href="#">
  2017. <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2018. <a href="#">
  2019. <i class="fa fa-music" aria-hidden="true"></i></a>
  2020. <a href="#">
  2021. <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2022. </div><!--clinks-->
  2023.  
  2024. <div class="ctraits">
  2025. <!--span is needed for the style-->
  2026. <span>+ positive trait</span><p />
  2027. <span>+ positive trait</span><p />
  2028. <span>+ positive trait</span><p />
  2029. <br />
  2030. <span>- negative trait</span><p />
  2031. <span>- negative trait</span><p />
  2032. <span>- negative trait</span><p />
  2033. </div><!--ctraits-->
  2034.  
  2035. </div><!--ccontent-->
  2036.  
  2037. <!--PAGE 2-->
  2038. <div class="ccontent" id="c7p2">
  2039. <div class="cbio">
  2040.  
  2041. <div class="headline">
  2042. <h2><span class="h2front">the</span>title</h2>
  2043. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2044. elit, sed do eiusmod tempor incididunt ut labore et dolore
  2045. magna aliqua.
  2046. </div><!--headline-->
  2047.  
  2048. <div class="biocontent">
  2049.  
  2050. <!--LEFT DATA-->
  2051. <ul class="cell1">
  2052. <li> Full name: <span> - </span> </li>
  2053. <li> Nickname: <span> - </span> </li>
  2054. <li> Age: <span> - </span> </li>
  2055. <li> D.o.B: <span> - </span> </li>
  2056. <li> Gender: <span> - </span> </li>
  2057. <li> Pronouns: <span> - </span> </li>
  2058. <li> Sexuality: <span> - </span> </li>
  2059. <li> Species: <span> - </span></li>
  2060. </ul>
  2061.  
  2062. <!--RIGHT DATA-->
  2063. <ul class="cell2">
  2064. <li> Occupation: <span> - </span> </li>
  2065. <li> Nationality: <span> - </span> </li>
  2066. <li> Residence: <span> - </span> </li>
  2067. <li> Education: <span> - </span> </li>
  2068. <li> Height: <span> - </span> </li>
  2069. <li> Alignment: <span> - </span> </li>
  2070. <li> Jung Type: <span> - </span> </li>
  2071. <li> Affiliation: <span> - </span></li>
  2072. </ul>
  2073.  
  2074. </div><!--biocontent-->
  2075.  
  2076. </div><!--cbio-->
  2077.  
  2078. <!--You can put another picture of your character or a flavour
  2079. picture or whatever you like. Dimensions are: 165x340-->
  2080. <div class="flavorimg" style="background-image:
  2081. url('https://placehold.it/180x340');">
  2082. </div>
  2083.  
  2084. </div> <!--ccontent-->
  2085.  
  2086. <!--PAGE 3-->
  2087. <div class="ccontent" id="c7p3">
  2088.  
  2089. <!--CONNECTION IMAGES/NAVIGATION-->
  2090. <div class="navcon">
  2091. <div class="con" href="#c7con1" style="background-image:
  2092. url('http://placehold.it/84x84');"></div>
  2093. <div class="con" href="#c7con2" style="background-image:
  2094. url('http://placehold.it/84x84');"></div>
  2095. <div class="con" href="#c7con3" style="background-image:
  2096. url('http://placehold.it/84x84');"></div>
  2097. <div class="con" href="#c7con4" style="background-image:
  2098. url('http://placehold.it/84x84');"></div>
  2099. <div class="con" href="#c7con5" style="background-image:
  2100. url('http://placehold.it/84x84');"></div>
  2101. <div class="con" href="#c7con6" style="background-image:
  2102. url('http://placehold.it/84x84');"></div>
  2103. <div class="con" href="#c7con7" style="background-image:
  2104. url('http://placehold.it/50x50');"></div>
  2105. <div class="con" href="#c7con8" style="background-image:
  2106. url('http://placehold.it/50x50');"></div>
  2107. </div>
  2108.  
  2109. <div class="cbio">
  2110. <div class="headline">
  2111. <h2><span class="h2front">social</span>connections</h2>
  2112. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2113. elit, sed do eiusmod tempor incididunt ut labore et dolore
  2114. magna aliqua.
  2115. </div><!--headline-->
  2116.  
  2117. <div class="biocontent">
  2118.  
  2119. <div class="connections active" id="c7con1">
  2120. <span>Connection name :: </span>
  2121. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  2122. </div><!--connections-->
  2123.  
  2124. <!--ADD CONNECTION INFO-->
  2125. <!--Add as many connection info text fields as you like. If
  2126. you need less than 12, remove them from the navigation
  2127. above as well. To add new info:
  2128. copy the follow div .connections
  2129. change the id to id="c#con# (replace hashtags with the right numbers.
  2130. c# = card number, con# = connection number.
  2131.  
  2132. Make sure only the first connection div has the class
  2133. 'active' see above.
  2134. You can also change these to names but then you need to
  2135. edit the 'href' in the navigation (.clinks .navcon) as well
  2136. .-->
  2137.  
  2138. <div class="connections" id="c7con2">
  2139. <span>Connection Name :: </span> CONNECTIONS TEXT
  2140. </div>
  2141.  
  2142. </div><!--biocontent-->
  2143. </div><!--cbio-->
  2144. </div> <!--ccontent-->
  2145.  
  2146. </div> <!--ccard-->
  2147.  
  2148.  
  2149.  
  2150. <!--CHARACTER EIGHT-->
  2151.  
  2152. <div class="cbox g4" href="#c8">
  2153. <div class="cname">
  2154. <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
  2155. change the opacity of the names in the CSS-->
  2156. <span style="font-size: 55px;">
  2157. FIRST <br />
  2158. LASTN
  2159. </span>
  2160. </div> <!--cname-->
  2161. <div class="triangle"></div>
  2162. <!--The image is 175x370px but because it zooms to 105% ideally
  2163. you can use an image that's ~ 183.75x388.5-->
  2164. <img src="https://placehold.it/175x370"></img>
  2165. </div> <!--cbox-->
  2166.  
  2167.  
  2168. <div class="ccard" id="c8">
  2169.  
  2170. <!--INNER TAB NAVIGATION-->
  2171. <div class="cfooter">
  2172. <a href="#c8p1" class="active">
  2173. <i class="fa fa-stop" aria-hidden="true"></i></a>
  2174. <a href="#c8p2">
  2175. <i class="fa fa-stop" aria-hidden="true"></i></a>
  2176. <a href="#c8p3">
  2177. <i class="fa fa-stop" aria-hidden="true"></i></a>
  2178. </div>
  2179.  
  2180. <div class="ccontent active" id="c8p1">
  2181. <div class="cbio">
  2182.  
  2183. <div class="headline">
  2184. <h2><span class="h2front">short</span>bio</h2>
  2185. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2186. elit, sed do eiusmod tempor incididunt ut labore et dolore
  2187. magna aliqua.
  2188. </div><!--headline-->
  2189.  
  2190. <div class="biocontent">
  2191. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  2192. </div><!--biocontent-->
  2193.  
  2194. </div><!--cbio-->
  2195.  
  2196. <div class="clinks">
  2197. <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
  2198. http://fontawesome.io/icons/-->
  2199. <a href="#">
  2200. <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2201. <a href="#">
  2202. <i class="fa fa-book" aria-hidden="true"></i></a>
  2203. <a href="#">
  2204. <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2205. <a href="#">
  2206. <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2207. <a href="#">
  2208. <i class="fa fa-music" aria-hidden="true"></i></a>
  2209. <a href="#">
  2210. <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2211. </div><!--clinks-->
  2212.  
  2213. <div class="ctraits">
  2214. <!--span is needed for the style-->
  2215. <span>+ positive trait</span><p />
  2216. <span>+ positive trait</span><p />
  2217. <span>+ positive trait</span><p />
  2218. <br />
  2219. <span>- negative trait</span><p />
  2220. <span>- negative trait</span><p />
  2221. <span>- negative trait</span><p />
  2222. </div><!--ctraits-->
  2223.  
  2224. </div><!--ccontent-->
  2225.  
  2226. <!--PAGE 2-->
  2227. <div class="ccontent" id="c8p2">
  2228. <div class="cbio">
  2229.  
  2230. <div class="headline">
  2231. <h2><span class="h2front">the</span>title</h2>
  2232. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2233. elit, sed do eiusmod tempor incididunt ut labore et dolore
  2234. magna aliqua.
  2235. </div><!--headline-->
  2236.  
  2237. <div class="biocontent">
  2238.  
  2239. <!--LEFT DATA-->
  2240. <ul class="cell1">
  2241. <li> Full name: <span> - </span> </li>
  2242. <li> Nickname: <span> - </span> </li>
  2243. <li> Age: <span> - </span> </li>
  2244. <li> D.o.B: <span> - </span> </li>
  2245. <li> Gender: <span> - </span> </li>
  2246. <li> Pronouns: <span> - </span> </li>
  2247. <li> Sexuality: <span> - </span> </li>
  2248. <li> Species: <span> - </span></li>
  2249. </ul>
  2250.  
  2251. <!--RIGHT DATA-->
  2252. <ul class="cell2">
  2253. <li> Occupation: <span> - </span> </li>
  2254. <li> Nationality: <span> - </span> </li>
  2255. <li> Residence: <span> - </span> </li>
  2256. <li> Education: <span> - </span> </li>
  2257. <li> Height: <span> - </span> </li>
  2258. <li> Alignment: <span> - </span> </li>
  2259. <li> Jung Type: <span> - </span> </li>
  2260. <li> Affiliation: <span> - </span></li>
  2261. </ul>
  2262.  
  2263. </div><!--biocontent-->
  2264.  
  2265. </div><!--cbio-->
  2266.  
  2267. <!--You can put another picture of your character or a flavour
  2268. picture or whatever you like. Dimensions are: 165x340-->
  2269. <div class="flavorimg" style="background-image:
  2270. url('https://placehold.it/180x340');">
  2271. </div>
  2272.  
  2273. </div> <!--ccontent-->
  2274.  
  2275. <!--PAGE 3-->
  2276. <div class="ccontent" id="c8p3">
  2277.  
  2278. <!--CONNECTION IMAGES/NAVIGATION-->
  2279. <div class="navcon">
  2280. <div class="con" href="#c8con1" style="background-image:
  2281. url('http://placehold.it/84x84');"></div>
  2282. <div class="con" href="#c8con2" style="background-image:
  2283. url('http://placehold.it/84x84');"></div>
  2284. <div class="con" href="#c8con3" style="background-image:
  2285. url('http://placehold.it/84x84');"></div>
  2286. <div class="con" href="#c8con4" style="background-image:
  2287. url('http://placehold.it/84x84');"></div>
  2288. <div class="con" href="#c8con5" style="background-image:
  2289. url('http://placehold.it/84x84');"></div>
  2290. <div class="con" href="#c8con6" style="background-image:
  2291. url('http://placehold.it/84x84');"></div>
  2292. <div class="con" href="#c8con7" style="background-image:
  2293. url('http://placehold.it/50x50');"></div>
  2294. <div class="con" href="#c8con8" style="background-image:
  2295. url('http://placehold.it/50x50');"></div>
  2296. </div>
  2297.  
  2298. <div class="cbio">
  2299. <div class="headline">
  2300. <h2><span class="h2front">social</span>connections</h2>
  2301. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2302. elit, sed do eiusmod tempor incididunt ut labore et dolore
  2303. magna aliqua.
  2304. </div><!--headline-->
  2305.  
  2306. <div class="biocontent">
  2307.  
  2308. <div class="connections active" id="c8con1">
  2309. <span>Connection name :: </span>
  2310. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  2311. </div><!--connections-->
  2312.  
  2313. <!--ADD CONNECTION INFO-->
  2314. <!--Add as many connection info text fields as you like. If
  2315. you need less than 12, remove them from the navigation
  2316. above as well. To add new info:
  2317. copy the follow div .connections
  2318. change the id to id="c#con# (replace hashtags with the right numbers.
  2319. c# = card number, con# = connection number.
  2320.  
  2321. Make sure only the first connection div has the class
  2322. 'active' see above.
  2323. You can also change these to names but then you need to
  2324. edit the 'href' in the navigation (.clinks .navcon) as well
  2325. .-->
  2326.  
  2327. <div class="connections" id="c8con2">
  2328. <span>Connection Name :: </span> CONNECTIONS TEXT
  2329. </div>
  2330.  
  2331. </div><!--biocontent-->
  2332. </div><!--cbio-->
  2333. </div> <!--ccontent-->
  2334.  
  2335. </div> <!--ccard-->
  2336.  
  2337.  
  2338.  
  2339. <!--CHARACTER NINE-->
  2340.  
  2341. <div class="cbox g5" href="#c9">
  2342. <div class="cname">
  2343. <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
  2344. change the opacity of the names in the CSS-->
  2345. <span style="font-size: 55px;">
  2346. FIRST <br />
  2347. LASTN
  2348. </span>
  2349. </div> <!--cname-->
  2350. <div class="triangle"></div>
  2351. <!--The image is 175x370px but because it zooms to 105% ideally
  2352. you can use an image that's ~ 183.75x388.5-->
  2353. <img src="https://placehold.it/175x370"></img>
  2354. </div> <!--cbox-->
  2355.  
  2356.  
  2357. <div class="ccard" id="c9">
  2358.  
  2359. <!--INNER TAB NAVIGATION-->
  2360. <div class="cfooter">
  2361. <a href="#c9p1" class="active">
  2362. <i class="fa fa-stop" aria-hidden="true"></i></a>
  2363. <a href="#c9p2">
  2364. <i class="fa fa-stop" aria-hidden="true"></i></a>
  2365. <a href="#c9p3">
  2366. <i class="fa fa-stop" aria-hidden="true"></i></a>
  2367. </div>
  2368.  
  2369. <div class="ccontent active" id="c9p1">
  2370. <div class="cbio">
  2371.  
  2372. <div class="headline">
  2373. <h2><span class="h2front">short</span>bio</h2>
  2374. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2375. elit, sed do eiusmod tempor incididunt ut labore et dolore
  2376. magna aliqua.
  2377. </div><!--headline-->
  2378.  
  2379. <div class="biocontent">
  2380. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  2381. </div><!--biocontent-->
  2382.  
  2383. </div><!--cbio-->
  2384.  
  2385. <div class="clinks">
  2386. <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
  2387. http://fontawesome.io/icons/-->
  2388. <a href="#">
  2389. <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2390. <a href="#">
  2391. <i class="fa fa-book" aria-hidden="true"></i></a>
  2392. <a href="#">
  2393. <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2394. <a href="#">
  2395. <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2396. <a href="#">
  2397. <i class="fa fa-music" aria-hidden="true"></i></a>
  2398. <a href="#">
  2399. <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2400. </div><!--clinks-->
  2401.  
  2402. <div class="ctraits">
  2403. <!--span is needed for the style-->
  2404. <span>+ positive trait</span><p />
  2405. <span>+ positive trait</span><p />
  2406. <span>+ positive trait</span><p />
  2407. <br />
  2408. <span>- negative trait</span><p />
  2409. <span>- negative trait</span><p />
  2410. <span>- negative trait</span><p />
  2411. </div><!--ctraits-->
  2412.  
  2413. </div><!--ccontent-->
  2414.  
  2415. <!--PAGE 2-->
  2416. <div class="ccontent" id="c9p2">
  2417. <div class="cbio">
  2418.  
  2419. <div class="headline">
  2420. <h2><span class="h2front">the</span>title</h2>
  2421. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2422. elit, sed do eiusmod tempor incididunt ut labore et dolore
  2423. magna aliqua.
  2424. </div><!--headline-->
  2425.  
  2426. <div class="biocontent">
  2427.  
  2428. <!--LEFT DATA-->
  2429. <ul class="cell1">
  2430. <li> Full name: <span> - </span> </li>
  2431. <li> Nickname: <span> - </span> </li>
  2432. <li> Age: <span> - </span> </li>
  2433. <li> D.o.B: <span> - </span> </li>
  2434. <li> Gender: <span> - </span> </li>
  2435. <li> Pronouns: <span> - </span> </li>
  2436. <li> Sexuality: <span> - </span> </li>
  2437. <li> Species: <span> - </span></li>
  2438. </ul>
  2439.  
  2440. <!--RIGHT DATA-->
  2441. <ul class="cell2">
  2442. <li> Occupation: <span> - </span> </li>
  2443. <li> Nationality: <span> - </span> </li>
  2444. <li> Residence: <span> - </span> </li>
  2445. <li> Education: <span> - </span> </li>
  2446. <li> Height: <span> - </span> </li>
  2447. <li> Alignment: <span> - </span> </li>
  2448. <li> Jung Type: <span> - </span> </li>
  2449. <li> Affiliation: <span> - </span></li>
  2450. </ul>
  2451.  
  2452. </div><!--biocontent-->
  2453.  
  2454. </div><!--cbio-->
  2455.  
  2456. <!--You can put another picture of your character or a flavour
  2457. picture or whatever you like. Dimensions are: 165x340-->
  2458. <div class="flavorimg" style="background-image:
  2459. url('https://placehold.it/180x340');">
  2460. </div>
  2461.  
  2462. </div> <!--ccontent-->
  2463.  
  2464. <!--PAGE 3-->
  2465. <div class="ccontent" id="c9p3">
  2466.  
  2467. <!--CONNECTION IMAGES/NAVIGATION-->
  2468. <div class="navcon">
  2469. <div class="con" href="#c9con1" style="background-image:
  2470. url('http://placehold.it/84x84');"></div>
  2471. <div class="con" href="#c9con2" style="background-image:
  2472. url('http://placehold.it/84x84');"></div>
  2473. <div class="con" href="#c9con3" style="background-image:
  2474. url('http://placehold.it/84x84');"></div>
  2475. <div class="con" href="#c9con4" style="background-image:
  2476. url('http://placehold.it/84x84');"></div>
  2477. <div class="con" href="#c9con5" style="background-image:
  2478. url('http://placehold.it/84x84');"></div>
  2479. <div class="con" href="#c9con6" style="background-image:
  2480. url('http://placehold.it/84x84');"></div>
  2481. <div class="con" href="#c9con7" style="background-image:
  2482. url('http://placehold.it/50x50');"></div>
  2483. <div class="con" href="#c9con8" style="background-image:
  2484. url('http://placehold.it/50x50');"></div>
  2485. </div>
  2486.  
  2487. <div class="cbio">
  2488. <div class="headline">
  2489. <h2><span class="h2front">social</span>connections</h2>
  2490. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2491. elit, sed do eiusmod tempor incididunt ut labore et dolore
  2492. magna aliqua.
  2493. </div><!--headline-->
  2494.  
  2495. <div class="biocontent">
  2496.  
  2497. <div class="connections active" id="c9con1">
  2498. <span>Connection name :: </span>
  2499. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  2500. </div><!--connections-->
  2501.  
  2502. <!--ADD CONNECTION INFO-->
  2503. <!--Add as many connection info text fields as you like. If
  2504. you need less than 12, remove them from the navigation
  2505. above as well. To add new info:
  2506. copy the follow div .connections
  2507. change the id to id="c#con# (replace hashtags with the right numbers.
  2508. c# = card number, con# = connection number.
  2509.  
  2510. Make sure only the first connection div has the class
  2511. 'active' see above.
  2512. You can also change these to names but then you need to
  2513. edit the 'href' in the navigation (.clinks .navcon) as well
  2514. .-->
  2515.  
  2516. <div class="connections" id="c9con2">
  2517. <span>Connection Name :: </span> CONNECTIONS TEXT
  2518. </div>
  2519.  
  2520. </div><!--biocontent-->
  2521. </div><!--cbio-->
  2522. </div> <!--ccontent-->
  2523.  
  2524. </div> <!--ccard-->
  2525.  
  2526.  
  2527.  
  2528. <!--CHARACTER TEN-->
  2529.  
  2530. <div class="cbox g2" href="#c10">
  2531. <div class="cname">
  2532. <!--You will have to adjust the font-size for every character name manually, depending on how long their name is. You can
  2533. change the opacity of the names in the CSS-->
  2534. <span style="font-size: 55px;">
  2535. FIRST <br />
  2536. LASTN
  2537. </span>
  2538. </div> <!--cname-->
  2539. <div class="triangle"></div>
  2540. <!--The image is 175x370px but because it zooms to 105% ideally
  2541. you can use an image that's ~ 183.75x388.5-->
  2542. <img src="https://placehold.it/175x370"></img>
  2543. </div> <!--cbox-->
  2544.  
  2545.  
  2546. <div class="ccard" id="c10">
  2547.  
  2548. <!--INNER TAB NAVIGATION-->
  2549. <div class="cfooter">
  2550. <a href="#c10p1" class="active">
  2551. <i class="fa fa-stop" aria-hidden="true"></i></a>
  2552. <a href="#c10p2">
  2553. <i class="fa fa-stop" aria-hidden="true"></i></a>
  2554. <a href="#c10p3">
  2555. <i class="fa fa-stop" aria-hidden="true"></i></a>
  2556. </div>
  2557.  
  2558. <div class="ccontent active" id="c10p1">
  2559. <div class="cbio">
  2560.  
  2561. <div class="headline">
  2562. <h2><span class="h2front">short</span>bio</h2>
  2563. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2564. elit, sed do eiusmod tempor incididunt ut labore et dolore
  2565. magna aliqua.
  2566. </div><!--headline-->
  2567.  
  2568. <div class="biocontent">
  2569. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  2570. </div><!--biocontent-->
  2571.  
  2572. </div><!--cbio-->
  2573.  
  2574. <div class="clinks">
  2575. <!--You can customise these links as much as you like. You can find more icons to suit your needs here:
  2576. http://fontawesome.io/icons/-->
  2577. <a href="#">
  2578. <i class="fa fa-hashtag" aria-hidden="true"></i></a>
  2579. <a href="#">
  2580. <i class="fa fa-book" aria-hidden="true"></i></a>
  2581. <a href="#">
  2582. <i class="fa fa-instagram" aria-hidden="true"></i></a>
  2583. <a href="#">
  2584. <i class="fa fa-pencil" aria-hidden="true"></i></a>
  2585. <a href="#">
  2586. <i class="fa fa-music" aria-hidden="true"></i></a>
  2587. <a href="#">
  2588. <i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
  2589. </div><!--clinks-->
  2590.  
  2591. <div class="ctraits">
  2592. <!--span is needed for the style-->
  2593. <span>+ positive trait</span><p />
  2594. <span>+ positive trait</span><p />
  2595. <span>+ positive trait</span><p />
  2596. <br />
  2597. <span>- negative trait</span><p />
  2598. <span>- negative trait</span><p />
  2599. <span>- negative trait</span><p />
  2600. </div><!--ctraits-->
  2601.  
  2602. </div><!--ccontent-->
  2603.  
  2604. <!--PAGE 2-->
  2605. <div class="ccontent" id="c10p2">
  2606. <div class="cbio">
  2607.  
  2608. <div class="headline">
  2609. <h2><span class="h2front">the</span>title</h2>
  2610. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2611. elit, sed do eiusmod tempor incididunt ut labore et dolore
  2612. magna aliqua.
  2613. </div><!--headline-->
  2614.  
  2615. <div class="biocontent">
  2616.  
  2617. <!--LEFT DATA-->
  2618. <ul class="cell1">
  2619. <li> Full name: <span> - </span> </li>
  2620. <li> Nickname: <span> - </span> </li>
  2621. <li> Age: <span> - </span> </li>
  2622. <li> D.o.B: <span> - </span> </li>
  2623. <li> Gender: <span> - </span> </li>
  2624. <li> Pronouns: <span> - </span> </li>
  2625. <li> Sexuality: <span> - </span> </li>
  2626. <li> Species: <span> - </span></li>
  2627. </ul>
  2628.  
  2629. <!--RIGHT DATA-->
  2630. <ul class="cell2">
  2631. <li> Occupation: <span> - </span> </li>
  2632. <li> Nationality: <span> - </span> </li>
  2633. <li> Residence: <span> - </span> </li>
  2634. <li> Education: <span> - </span> </li>
  2635. <li> Height: <span> - </span> </li>
  2636. <li> Alignment: <span> - </span> </li>
  2637. <li> Jung Type: <span> - </span> </li>
  2638. <li> Affiliation: <span> - </span></li>
  2639. </ul>
  2640.  
  2641. </div><!--biocontent-->
  2642.  
  2643. </div><!--cbio-->
  2644.  
  2645. <!--You can put another picture of your character or a flavour
  2646. picture or whatever you like. Dimensions are: 165x340-->
  2647. <div class="flavorimg" style="background-image:
  2648. url('https://placehold.it/180x340');">
  2649. </div>
  2650.  
  2651. </div> <!--ccontent-->
  2652.  
  2653. <!--PAGE 3-->
  2654. <div class="ccontent" id="c10p3">
  2655.  
  2656. <!--CONNECTION IMAGES/NAVIGATION-->
  2657. <div class="navcon">
  2658. <div class="con" href="#c10con1" style="background-image:
  2659. url('http://placehold.it/84x84');"></div>
  2660. <div class="con" href="#c10con2" style="background-image:
  2661. url('http://placehold.it/84x84');"></div>
  2662. <div class="con" href="#c10con3" style="background-image:
  2663. url('http://placehold.it/84x84');"></div>
  2664. <div class="con" href="#c10con4" style="background-image:
  2665. url('http://placehold.it/84x84');"></div>
  2666. <div class="con" href="#c10con5" style="background-image:
  2667. url('http://placehold.it/84x84');"></div>
  2668. <div class="con" href="#c10con6" style="background-image:
  2669. url('http://placehold.it/84x84');"></div>
  2670. <div class="con" href="#c10con7" style="background-image:
  2671. url('http://placehold.it/50x50');"></div>
  2672. <div class="con" href="#c10con8" style="background-image:
  2673. url('http://placehold.it/50x50');"></div>
  2674. </div>
  2675.  
  2676. <div class="cbio">
  2677. <div class="headline">
  2678. <h2><span class="h2front">social</span>connections</h2>
  2679. <p />Lorem ipsum dolor sit amet, consectetur adipiscing
  2680. elit, sed do eiusmod tempor incididunt ut labore et dolore
  2681. magna aliqua.
  2682. </div><!--headline-->
  2683.  
  2684. <div class="biocontent">
  2685.  
  2686. <div class="connections active" id="c10con1">
  2687. <span>Connection name :: </span>
  2688. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  2689. </div><!--connections-->
  2690.  
  2691. <!--ADD CONNECTION INFO-->
  2692. <!--Add as many connection info text fields as you like. If
  2693. you need less than 12, remove them from the navigation
  2694. above as well. To add new info:
  2695. copy the follow div .connections
  2696. change the id to id="c#con# (replace hashtags with the right numbers.
  2697. c# = card number, con# = connection number.
  2698.  
  2699. Make sure only the first connection div has the class
  2700. 'active' see above.
  2701. You can also change these to names but then you need to
  2702. edit the 'href' in the navigation (.clinks .navcon) as well
  2703. .-->
  2704.  
  2705. <div class="connections" id="c10con2">
  2706. <span>Connection Name :: </span> CONNECTIONS TEXT
  2707. </div>
  2708.  
  2709. </div><!--biocontent-->
  2710. </div><!--cbio-->
  2711. </div> <!--ccontent-->
  2712.  
  2713. </div> <!--ccard-->
  2714.  
  2715.  
  2716.  
  2717. </div> <!--gallery-track-->
  2718. </section>
  2719.  
  2720.  
  2721.  
  2722.  
  2723. </div><!--container-->
  2724.  
  2725. <script type="text/javascript">
  2726.  
  2727. $(document).ready(function() {
  2728.  
  2729. /*TRIANGLE COLOR*/
  2730. $('.cbox').each(function() {
  2731. var groupClass = $(this).attr('class').split(" ")[1];
  2732.  
  2733. $(this).find('.triangle').addClass(groupClass);
  2734.  
  2735. });
  2736.  
  2737.  
  2738. /*CBOX CARDS*/
  2739. $('.cbox').on('click', function(e) {
  2740.  
  2741. var currentAttrValue = $(this).attr('href');
  2742. var groupClass = $(this).attr('class').split(" ")[1];
  2743.  
  2744. if ($('.ccard' + currentAttrValue).hasClass('active')) {
  2745. $('.ccard' + currentAttrValue).removeClass('active');
  2746. }
  2747. else {
  2748. window.location.hash = $(this).attr('href');
  2749. $('.ccard' + currentAttrValue).addClass('active').siblings('.ccard').removeClass('active');
  2750. }
  2751.  
  2752. /*TRAIT COLOURS*/
  2753. $(currentAttrValue).find('.ctraits, .cell1, .cell2').addClass(groupClass);
  2754.  
  2755. /*SCROLL LEFT*/
  2756. $('#gallery').animate({
  2757. scrollLeft: $(this).position().left
  2758. }, 800);
  2759.  
  2760. e.preventDefault();
  2761. });
  2762.  
  2763.  
  2764. /*CARD TABS & ACTIVE LINKS*/
  2765. $('.cfooter a').on('click', function(e) {
  2766. var currentAttrValue = $(this).attr('href');
  2767.  
  2768. $('.ccontent' + currentAttrValue).fadeIn(600).siblings('.ccontent').hide();
  2769. $(this).addClass('active').siblings().removeClass('active');
  2770.  
  2771. e.preventDefault();
  2772. });
  2773.  
  2774.  
  2775. /*CONNECTION TABS*/
  2776. $('.con').on('click', function(e) {
  2777. var currentAttrValue = $(this).attr('href');
  2778.  
  2779. $('.connections' + currentAttrValue).fadeIn(600).siblings('.connections').hide();
  2780. $(this).addClass('active').siblings().removeClass('active');
  2781.  
  2782. e.preventDefault();
  2783. });
  2784.  
  2785.  
  2786. /*ISOTOPE*/
  2787. /*NO LAYOUT*/
  2788. Isotope.Item.prototype._create = function() {
  2789. // assign id, used for original-order sorting
  2790. this.id = this.layout.itemGUID++;
  2791. // transition objects
  2792. this._transn = {
  2793. ingProperties: {},
  2794. clean: {},
  2795. onEnd: {}
  2796. };
  2797. this.sortData = {};
  2798. };
  2799.  
  2800. Isotope.prototype.arrange = function(opts) {
  2801. // set any options pass
  2802. this.option(opts);
  2803. this._getIsInstant();
  2804. // just filter
  2805. this.filteredItems = this._filter(this.items);
  2806. // flag for initalized
  2807. this._isLayoutInited = true;
  2808. };
  2809.  
  2810.  
  2811. /*FILTER*/
  2812. var $grid = $('#gallery-track').isotope({
  2813. itemSelector: '.cbox',
  2814. stagger: 30,
  2815. layoutMode: 'none'
  2816. });
  2817.  
  2818. $('.square').on('click', function() {
  2819. $('.ccard').each(function() {
  2820. $(this).removeClass('active');
  2821. });
  2822.  
  2823. $('#gallery').animate({
  2824. scrollLeft: 0
  2825. }, 800);
  2826.  
  2827. var filterValue = $(this).attr('data-filter');
  2828. $grid.isotope({
  2829. filter: filterValue
  2830. });
  2831.  
  2832. e.preventDefault();
  2833. });
  2834.  
  2835.  
  2836. //ARROW SCROLL//
  2837. var $boxes = $(".cbox"),
  2838. $slides = $('#gallery'),
  2839. pos = 0;
  2840.  
  2841. $("#next").on('click', function() {
  2842. var $nextBox = $boxes.first();
  2843.  
  2844. if ($boxes.length > ++pos) {
  2845. $nextBox = $($boxes[pos]);
  2846. } else(pos = 0)
  2847.  
  2848. $slides.animate({
  2849. scrollLeft: $nextBox.position().left - 4
  2850. }, 500);
  2851. });
  2852.  
  2853. $("#prev").click(function() {
  2854. var $nextBox = $boxes.last();
  2855.  
  2856. if ($boxes.length > --pos && pos > -1) {
  2857. $nextBox = $($boxes[pos]);
  2858. } else(pos = $boxes.length - 1)
  2859.  
  2860. $slides.animate({
  2861. scrollLeft: $nextBox.position().left - 4
  2862. }, 500);
  2863. });
  2864.  
  2865.  
  2866. /*HASH SCRIPT*/
  2867. var hash = $.trim(window.location.hash);
  2868. if (hash) {
  2869. //time out to prevent jumping of div
  2870. setTimeout(function() {
  2871. $('.cbox[href$="' + hash + '"]').trigger('click');
  2872. }, 800);
  2873. }
  2874.  
  2875.  
  2876. }); //DOCUMENT READY
  2877. </script>
  2878. </body>
  2879. </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!