API tools faq
paste
Advertisement
cvndythemes

Ares - Light

cvndythemes
Sep 14th, 2021
133
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <title>Ares: Character Page</title>
  5.  
  6. <!--
  7.  
  8. >> ETHEREAL THEMES // ARES - CHARACTER PAGE
  9.  
  10. Designed by Ethereal Themes
  11. ethereal-themes.tumblr.com
  12. ⓒ 2016 - 2020
  13. Background Image ⓒ @anniespratt via Unsplash
  14.  
  15. >> TERMS OF USE
  16.  
  17. Do NOT remove the credit
  18. Do NOT claim as your own
  19.  
  20. *You can move the credit, but leave it visible
  21. *Edit as much as you'd like
  22. *Feel free to ask about basic customization
  23. *Page suggestions always welcomed
  24.  
  25. >> COLOR CHEAT SHEET:
  26.  
  27. Black - #000000
  28. White - #ffffff
  29. Accent Red - #a61212
  30. Dark Red - #370506
  31. Dark Text - #040505
  32. Light Text - #dbdbdb
  33. Gray Text - #b5b5b5
  34. Dark Background - #0d0d0d
  35. Light Background - #dbdbdb
  36.  
  37. To add your 1920X1080 background image, search:
  38. BACKGROUND IMAGE HERE
  39.  
  40. To add your container image (585X370 or pattern), search:
  41. CONTAINER IMAGE HERE
  42.  
  43. You may also go through the css and change specific sections
  44.  
  45.  
  46. -->
  47.  
  48.  
  49. <!-- SCRIPTS-->
  50. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  51.  
  52. <link rel="stylesheet" href="https://unpkg.com/jam-icons/css/jam.min.css">
  53.  
  54.  
  55. <!-- TIPPY JS -->
  56. <script src="https://unpkg.com/popper.js@1"></script>
  57. <script src="https://unpkg.com/tippy.js@5"></script>
  58. <script>
  59. $(document).ready(function(){
  60. tippy('[title]', {
  61. arrow: false,
  62. placement: 'bottom',
  63. delay: 5,
  64. distance: 10,
  65. maxWidth: 300,
  66.  
  67. followCursor: true,
  68. allowHTML: true,
  69. theme: 'custom',
  70. ignoreAttributes: true,
  71. content(reference) {
  72. const title = reference.getAttribute('title');
  73. reference.removeAttribute('title');
  74. return title;
  75. },
  76. });
  77. });
  78. </script>
  79.  
  80. <link rel="preconnect" href="https://fonts.googleapis.com">
  81. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  82. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Cabin:ital,wght@0,400;0,700;1,400;1,700&family=Cormorant:wght@600&display=swap" rel="stylesheet">
  83.  
  84. <!-- STYLESHEET-->
  85. <style type="text/css">
  86.  
  87. /* --- SCROLLBAR --- */
  88.  
  89. ::-webkit-scrollbar-thumb {border:0px;width:0px;}
  90.  
  91. ::-webkit-scrollbar {border:0px;width:0px;}
  92.  
  93. ::-webkit-scrollbar-track {border:0px;width:0px;}
  94.  
  95. ::-webkit-scrollbar:vertical {border:0px;width:0px;}
  96.  
  97. /* --- SELECTION ---*/
  98.  
  99. ::-moz-selection {color:#000000;background:#a61212;opacity:1;}
  100.  
  101. ::selection {color:#000000;background:#a61212;opacity:1;}
  102.  
  103. /* --- TOOLTIPS ---*/
  104.  
  105. .tippy-tooltip.custom-theme {
  106. $tooltipBg:#000000;
  107. background-color:#000000;
  108. color:#dbdbdb;
  109. border-radius:0px;
  110. font-size:8pt;
  111. text-transform:lowercase;
  112. letter-spacing:0.5px;
  113. margin:20px 0px 0px 80px;
  114. }
  115.  
  116. .tippy-content {padding:4px 6px 4px 6px!important;}
  117.  
  118.  
  119. /* --- TUMBLR TOOLS --- */
  120.  
  121. iframe.tmblr-iframe {
  122. position:fixed;
  123. z-index:13!important;
  124. top:25px!important;
  125. right:0px!important;
  126. opacity:1;
  127. padding-right:60px;
  128. transform:scale(0.5);
  129. transform-origin:100% 0;
  130. -webkit-transform:scale(0.5);
  131. -webkit-transform-origin:100% 0;
  132. -o-transform:scale(0.5);
  133. -o-transform-origin:100% 0;
  134. -moz-transform:scale(0.5);
  135. -moz-transform-origin:100% 0;
  136. -ms-transform:scale(0.5);
  137. -ms-transform-origin:100% 0;
  138. transition:.2s ease-in-out;
  139. -webkit-transition:.2s ease-in-out;
  140. -moz-transition:.2s ease-in-out;
  141.  
  142. /* --- CHANGE 0 TO 1 BELOW FOR LIGHT TUMBLR TOOLS --- */
  143.  
  144. filter:invert(0);
  145. -webkit-filter:invert(0);
  146. -o-filter:invert(0);
  147. -moz-filter:invert(0);
  148. -ms-filter:invert(1);
  149.  
  150. /* --- CHANGE 1 TO 0 ABOVE FOR LIGHT TUMBLR TOOLS --- */
  151. }
  152.  
  153. /* --- BODY --- */
  154.  
  155. body {
  156. margin: 0px;
  157. padding: 0px;
  158. font-family: 'Cabin', sans-serif;
  159. color:#dbdbdb;
  160. font-size:10pt;
  161. line-height:145%;
  162. font-weight:normal;
  163. word-wrap:normal;
  164. text-align:left;
  165. background:#f5f5f5;
  166. height:100%;
  167. transition: background 0.5s ease-out;
  168. }
  169.  
  170. a {color:#dbdbdb;text-decoration:none;cursor:help;border:0;}
  171.  
  172. a, .hover_title, .character_hover, .hover_info, .hover_links span {transition:0.3s ease-in-out;-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;}
  173.  
  174. b {font-weight:700;}
  175.  
  176. .et {
  177. position:fixed;
  178. height:20px;
  179. width:20px;
  180. line-height:22px;
  181. right:20px;
  182. bottom:10px;
  183. opacity:0.8;
  184. text-align:center;
  185. font-size:7pt;
  186. background:#000000;
  187. border-radius:50%;
  188. z-index:10;
  189. }
  190.  
  191. .et a {text-transform:uppercase;color:#ffffff;}
  192.  
  193. /* --- TOPBAR --- */
  194.  
  195. .topbar {
  196. position:fixed;
  197. top:0px;
  198. left:0px;
  199. width:100%;
  200. padding:25px 0px;
  201. text-align:center;
  202. background:#000000;
  203. z-index:15;
  204. }
  205.  
  206. .topbar h1 {
  207. font-family: 'Cabin', sans-serif;
  208. font-weight:400;
  209. text-transform:uppercase;
  210. font-size:20pt;
  211. line-height:20pt;
  212. display:inline-block;
  213. margin:0px 20px;
  214. color:#ffffff;
  215. vertical-align:middle;
  216. }
  217.  
  218. .topbar a {display:inline-block;text-transform:uppercase;margin:0px 12px;color:#ffffff;vertical-align:middle;border-top:2px solid transparent;padding:0px 5px;}
  219.  
  220. .topbar a:hover {border-top:2px solid #a61212;}
  221.  
  222. /* --- BACKGROUND --- */
  223.  
  224. .background {
  225. position:fixed;
  226. top:0px;
  227. left:0px;
  228. height:calc(100% - 0px);
  229. width:100%;
  230. background-image:url('https://placehold.it/1920X1080');/* ---BACKGROUND IMAGE HERE--- */
  231. background-position:top center;
  232. background-repeat:no-repeat;
  233. background-size:cover;
  234. image-rendering: pixelated;
  235. z-index:-1;
  236. }
  237.  
  238. /* --- CONTAINER --- */
  239.  
  240. .container {
  241. position:absolute;
  242. top:175px;
  243. width:100%;
  244. text-align:center;
  245. }
  246.  
  247. /* --- CHARACTER CONTAINER --- */
  248.  
  249. .character_cont {
  250. display:inline-block;
  251. height:370px;
  252. width:570px;
  253. margin:0px 20px 70px 20px;
  254. background:transparent;
  255. }
  256.  
  257. .container_detail {
  258. position:relative;
  259. top:-370px;
  260. margin-bottom:-340px;
  261. height:370px;
  262. width:575px;
  263. z-index:2;
  264. background-image:url('https://static.tumblr.com/zvesamf/Pipqwfppf/container.jpg');/* --- CONTAINER IMAGE HERE--- */
  265. background-position:top center;
  266. background-repeat:repeat;
  267. background-blend-mode:multiply;
  268. background-color:#a61212;
  269. }
  270.  
  271. /* --- CHARACTER PORTRAITS --- */
  272.  
  273. .portrait {
  274. position:relative;
  275. top:-20px;
  276. left:20px;
  277. height:370px;
  278. width:245px;
  279. z-index:5;
  280. }
  281.  
  282. .portrait img {height:370px;width:245px;z-index:5;}
  283.  
  284. /* --- CHARACTER PANELS --- */
  285.  
  286. .character_info {
  287. position:relative;
  288. top:-400px;
  289. left:265px;
  290. width:260px;
  291. height:270px;
  292. margin-bottom:-370px;
  293. padding:0px 25px;
  294. overflow:hidden;
  295. text-align:left;
  296. border-top:30px solid #dbdbdb;
  297. border-bottom:30px solid #dbdbdb;
  298. background:#dbdbdb;
  299. box-shadow:-10px 10px 0px rgba(0,0,0,0.3);
  300. z-index:3;
  301. }
  302.  
  303. .character_det {
  304. position:relative;
  305. top:50%;
  306. margin-top:0px;
  307. transform:translateY(-50%);
  308. max-height:250px;
  309. display:inline-block;
  310. overflow:hidden;
  311. }
  312.  
  313. .character_det h1 {
  314. font-family: 'Abril Fatface', cursive;
  315. font-weight:400;
  316. font-size:28pt;
  317. line-height:28pt;
  318. margin:0px 0px 0px 0px;
  319. text-transform:uppercase;
  320. color:#040505;
  321. }
  322.  
  323. .character_det h2 {
  324. font-family: 'Cormorant', serif;
  325. font-weight:600;
  326. font-size:15pt;
  327. line-height:25pt;
  328. max-height:160px;
  329. overflow:hidden;
  330. margin:0px 0px 10px 0px;
  331. text-transform:lowercase;
  332. background:-webkit-linear-gradient(#040505, #370506);
  333. -webkit-background-clip:text;
  334. -webkit-text-fill-color:transparent;
  335. }
  336.  
  337. /* --- CHARACTER HOVER: CONTAINER --- */
  338.  
  339. .character_cont:hover .character_hover {opacity:1;}
  340.  
  341. .character_hover {
  342. position:relative;
  343. top:-400px;
  344. left:265px;
  345. width:270px;
  346. height:290px;
  347. padding:20px;
  348. overflow:hidden;
  349. margin-bottom:-370px;
  350. color:#040505;
  351. z-index:6;
  352. background:#dbdbdb;
  353. opacity:0;
  354. }
  355.  
  356. /* --- CHARACTER HOVER: NAME --- */
  357.  
  358. .character_cont:hover .hover_title {opacity:1;transform: translateY(0px);}
  359.  
  360. .hover_title {
  361. position:relative;
  362. top:-380px;
  363. left:240px;
  364. height:40px;
  365. width:345px;
  366. margin:0px 0px -350px 0px;
  367. font-family: 'Abril Fatface', cursive;
  368. font-weight:400;
  369. font-size:34pt;
  370. line-height:30pt;
  371. margin:0px 0px 0px 0px;
  372. padding:0px;
  373. text-transform:uppercase;
  374. text-align:left;
  375. color:#a61212;
  376. opacity:0;
  377. transform:translateY(-10px);
  378. text-shadow:-1px 1px 2px rgba(0,0,0,0.4);
  379. z-index:7;
  380. }
  381.  
  382. /* --- CHARACTER HOVER: STATS --- */
  383.  
  384. .stats {margin:1px 0px 0px -10px;height:20px;width:290px;}
  385.  
  386. ul.stat {list-style-type:none;margin:0;padding:0;overflow:hidden;}
  387.  
  388. .stat li {display:inline-block;font-size:9.3pt;margin:1px;text-transform:uppercase;}
  389.  
  390. .stat li b {color:#a61212;margin-right:0px;font-weight:700;}
  391.  
  392. /* --- CHARACTER HOVER: BIOGRAPHY --- */
  393.  
  394. .hover_info {
  395. padding:0px;
  396. margin:10px 0px 0px -5px;
  397. height:225px;
  398. width:280px;
  399. line-height:calc(150% - 1pt);
  400. text-align:justify;
  401. overflow-y:scroll;
  402. }
  403.  
  404. .hover_info p {margin:10px 0px;}
  405.  
  406. /* --- CHARACTER HOVER: STYLES --- */
  407.  
  408. .hover_info h1 {
  409. text-transform:uppercase;
  410. font-size:16pt;
  411. line-height:16pt;
  412. text-align:left;
  413. display:block;
  414. margin:0px 0px 5px 0px;
  415. }
  416.  
  417. .hover_info h2 {
  418. text-transform:uppercase;
  419. font-size:13pt;
  420. line-height:8pt;
  421. text-align:left;
  422. display:inline-block;
  423. border-bottom:4px solid #a61212;
  424. margin:0px 0px 5px 0px;
  425. }
  426.  
  427. .hover_info h1, .hover_info h2 {font-family: 'Cabin', sans-serif;font-weight:400;}
  428.  
  429. .hover_info img {margin:7px 8px 0px 8px}
  430.  
  431. .hover_info a {opacity:0.7;}
  432.  
  433. .hover_info b {color:#040505;font-weight:700;}
  434.  
  435. .hover_info i {color:#a61212;font-weight:700}
  436.  
  437. .hover_info em {border-bottom:1px solid #dbdbdb;}
  438.  
  439. blockquote.block_one {
  440. margin:20px 0px 20px 5px;
  441. padding:0px 0px 0px 10px;
  442. border-left:1px solid #b5b5b5;
  443. }
  444.  
  445. blockquote.block_two {margin:20px 0px;padding:5px 10px;color:#dbdbdb;background:#a61212;}
  446.  
  447. ul.list_one {margin:20px 0px;padding:0px;}
  448.  
  449. ul.list_one li {margin:0px 0px 5px 0px;}
  450.  
  451. ul.list_one li:before {position:relative;content:'•';top:0px;margin-right:5px;font-size:13pt;}
  452.  
  453. ul.list_two {list-style-type:none;margin:20px 0px;padding:0px;}
  454.  
  455. ul.list_two li {padding:5px 10px;margin:0px;}
  456.  
  457. ul.list_two li:nth-child(odd) {background:rgba(0,0,0,0.2);}
  458. ul.list_two li:nth-child(even) {background:rgba(0,0,0,0.5);}
  459.  
  460. /* --- CHARACTER HOVER: LINKS --- */
  461.  
  462. .hover_links {margin-top:10px;height:27px;text-align:center;}
  463.  
  464. .hover_links span {
  465. display:inline-block;
  466. padding:7px;
  467. font-size:12pt;
  468. border-radius:50%;
  469. vertical-align:middle;
  470. text-align:center;
  471. margin:0px 6px;
  472. color:#dbdbdb;
  473. background:#0d0d0d;
  474. }
  475.  
  476. .hover_links span:hover {color:#dbdbdb;background:#a61212;}
  477.  
  478. </style>
  479.  
  480. </head>
  481. <body>
  482.  
  483.  
  484.  
  485.  
  486.  
  487. <!-- DO NOT EDIT -->
  488. </div><div class="et"><a href="https://ethereal-themes.tumblr.com">et</a></div>
  489.  
  490.  
  491.  
  492.  
  493. <!------- START TOPBAR ------->
  494. <div class="topbar">
  495. <a href="/">Home</a>
  496. <a href="/ask">Ask</a>
  497. <a href="#">Link</a>
  498. <a href="#">Link</a>
  499.  
  500. <h1>Page Title</h1>
  501.  
  502. <a href="#">Link</a>
  503. <a href="#">Link</a>
  504. <a href="#">Link</a>
  505. <a href="#">Link</a>
  506. </div>
  507. <!------- END TOPBAR ------->
  508.  
  509.  
  510.  
  511.  
  512.  
  513.  
  514.  
  515. <!-- START BACKGROUND ------------------------->
  516. <div class="background"></div>
  517. <!-- END BACKGROUND --------------------------->
  518.  
  519.  
  520.  
  521.  
  522. <!-- START BACKGROUND DECO ------------------------->
  523. <div class="deco"></div>
  524. <!-- END BACKGROUND DECO --------------------------->
  525.  
  526.  
  527.  
  528.  
  529.  
  530.  
  531.  
  532.  
  533. <!---------------------------------------------
  534.  
  535. -----------------------------------------------
  536.  
  537. START CONTAINER:
  538.  
  539. 1. To add more characters, copy from "Start Individual Character" to "End Individual Charater" and paste after the last block
  540.  
  541. -----------------------------------------------
  542.  
  543. ---------------------------------------------->
  544. <div class="container">
  545. <!------- START CHARACTERS BELOW -------->
  546.  
  547.  
  548.  
  549.  
  550.  
  551.  
  552.  
  553.  
  554. <!----- START EXAMPLE INDIVIDUAL CHARACTER ------------------------------------->
  555. <div class="character_cont">
  556.  
  557. <div class="portrait">
  558. <!--- 275X370 Portrait Image ----------------->
  559. <img src="https://static.tumblr.com/zvesamf/tM0qwfppd/character_federico.jpg" />
  560. </div>
  561.  
  562.  
  563. <div class="container_detail"></div>
  564. <div class="character_info"><div class="character_det">
  565. <h2><!--- Short character description, poem, etc below ----------------->
  566.  
  567. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim. Lorem ipsum dolor sit amet.
  568.  
  569. </h2><!--- Short character description, poem, etc above ----------------->
  570.  
  571.  
  572. <!--- Character Name ----------------->
  573. <h1> federico spinas </h1>
  574.  
  575. </div></div>
  576.  
  577.  
  578. <div class="hover_title">
  579. <!--- Character Name Below --------->
  580. Federico
  581. </div>
  582.  
  583. <div class="character_hover">
  584. <!----------- CHARACTER HOVER INFO BELOW ------------------------------->
  585.  
  586.  
  587. <div class="stats"><ul class="stat">
  588. <!----------- START CHARACTER STATS BELOW ------>
  589.  
  590. <li> <b>age</b> 22 </li>
  591. <li> <b>height</b> 187cm </li>
  592. <li> <b>residence</b> copenhagen </li>
  593.  
  594. <!----------- END CHARACTER STATS ABOVE ------>
  595. </ul></div>
  596.  
  597.  
  598. <div class="hover_info">
  599. <!----------- START CHARACTER BIOGRAPHY BELOW -------------------------->
  600.  
  601. <h1>H1 Heading</h1>
  602.  
  603. <img align="right" src="https://placehold.it/80X80" />
  604.  
  605. Vestibulum odio <em>ipsum</em>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <em>massa</em> finibus <i>pulvinar</i> non nec lacus. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i>.
  606.  
  607. <!--- Blockquote Style One --->
  608. <blockquote class="block_one">
  609. Vestibulum vitae nibh ac risus consectetur tristique. Aliquam non rutrum eros, vitae aliquet nisi. Curabitur eu tellus consequat, pulvinar justo vel, mollis quam.
  610. </blockquote>
  611. <!--- Blockquote Style One --->
  612.  
  613. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <i>pretium</i> magna et velit <em>dignissim</em>, a <b>placerat</b> nisi rutrum.
  614.  
  615. <!--- Blockquote Style Two --->
  616. <blockquote class="block_two">
  617. Vestibulum vitae nibh ac risus consectetur tristique. Aliquam non rutrum eros, vitae aliquet nisi. Curabitur eu tellus consequat, pulvinar justo vel, mollis quam.
  618. </blockquote>
  619. <!--- Blockquote Style Two --->
  620.  
  621. <h2>H2 Heading</h2><br>
  622.  
  623. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <i>pretium</i> magna et velit <em>dignissim</em>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio ipsum, rutrum a ex ac, fringilla fermentum ante.
  624.  
  625. <p><!--- Use for paragraph spacing --->
  626.  
  627. <img align="left" src="https://placehold.it/80X80" />
  628.  
  629. Vestibulum odio <em>ipsum</em>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <em>massa</em> finibus <i>pulvinar</i> non nec lacus. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i>
  630.  
  631. <!----------- END CHARACTER BIOGRAPHY ABOVE ---------------------------->
  632. </div>
  633.  
  634. <div class="hover_links">
  635. <!----------------------
  636. START LINKS
  637. TO CHANGE ICONS GO TO:
  638. https://jam-icons.com/
  639.  
  640. Find the icon you want, and hover over the icon to see the plain name, replace the jam-NAME with your icon, for example if I want to add a folder instead of a star I'd change this:
  641.  
  642. jam-star
  643.  
  644. to this:
  645.  
  646. jam-folder
  647.  
  648. ---------------------------------------------------------------------->
  649. <a href="#" title="view tag"><span class="jam jam-tag"></span></a>
  650. <a href="#" title="view pinterest"><span class="jam jam-pinterest"></span></a>
  651.  
  652. <a href="#" title="view NAME"><span class="jam jam-heart"></span></a>
  653. <a href="#" title="view NAME"><span class="jam jam-star"></span></a>
  654. <a href="#" title="view NAME"><span class="jam jam-bookmark"></span></a>
  655. <a href="#" title="view NAME"><span class="jam jam-user"></span></a>
  656.  
  657. <!-------------- End Links ------------------------------------------->
  658. </div>
  659.  
  660. <!----------- CHARACTER HOVER INFO ABOVE ----------------------------->
  661. </div>
  662. </div>
  663. <!----- END EXAMPLE INDIVIDUAL CHARACTER ------------------------------------->
  664.  
  665.  
  666.  
  667.  
  668.  
  669.  
  670.  
  671.  
  672.  
  673. <!----- START INDIVIDUAL CHARACTER ------------------------------------->
  674. <div class="character_cont">
  675.  
  676. <div class="portrait">
  677. <!--- 275X370 Portrait Image ----------------->
  678. <img src="https://placehold.it/270X420" />
  679. </div>
  680.  
  681.  
  682. <div class="container_detail"></div>
  683. <div class="character_info"><div class="character_det">
  684. <h2><!--- Short character description, poem, etc below ----------------->
  685.  
  686. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim. Lorem ipsum dolor sit amet.
  687.  
  688. </h2><!--- Short character description, poem, etc above ----------------->
  689.  
  690.  
  691. <!--- Character Name ----------------->
  692. <h1> Character Name </h1>
  693.  
  694. </div></div>
  695.  
  696.  
  697. <div class="hover_title">
  698. <!--- Character Name Below --------->
  699. Name
  700. </div>
  701.  
  702. <div class="character_hover">
  703. <!----------- CHARACTER HOVER INFO BELOW ------------------------------->
  704.  
  705.  
  706. <div class="stats"><ul class="stat">
  707. <!----------- START CHARACTER STATS BELOW ------>
  708.  
  709. <li> <b>age</b> 00 </li>
  710. <li> <b>height</b> 000cm </li>
  711. <li> <b>residence</b> </li>
  712.  
  713. <!----------- END CHARACTER STATS ABOVE ------>
  714. </ul></div>
  715.  
  716.  
  717. <div class="hover_info">
  718. <!----------- START CHARACTER BIOGRAPHY BELOW -------------------------->
  719.  
  720. <h1>H1 Heading</h1>
  721.  
  722. <img align="right" src="https://placehold.it/80X80" />
  723.  
  724. Vestibulum odio <em>ipsum</em>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <em>massa</em> finibus <i>pulvinar</i> non nec lacus. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i>.
  725.  
  726. <!--- List Style One --->
  727. <ul class="list_one">
  728. <li>List Item One</li>
  729. <li>List Item One</li>
  730. <li>List Item One</li>
  731. <li>List Item One</li>
  732. <li>List Item One</li>
  733. </ul>
  734. <!--- List Style One --->
  735.  
  736. <!--- List Style Two --->
  737. <ul class="list_two">
  738. <li>List Item Two</li>
  739. <li>List Item Two</li>
  740. <li>List Item Two</li>
  741. <li>List Item Two</li>
  742. <li>List Item Two</li>
  743. </ul>
  744. <!--- List Style One --->
  745.  
  746. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <i>pretium</i> magna et velit <em>dignissim</em>, a <b>placerat</b> nisi rutrum.
  747.  
  748. <!--- List Style One --->
  749. <ul class="list_one">
  750. <li>List Item One</li>
  751. <li>List Item One</li>
  752. <li>List Item One</li>
  753. <li>List Item One</li>
  754. <li>List Item One</li>
  755. </ul>
  756. <!--- List Style One --->
  757.  
  758. <!--- List Style One --->
  759. <ul class="list_two">
  760. <li>List Item Two</li>
  761. <li>List Item Two</li>
  762. <li>List Item Two</li>
  763. <li>List Item Two</li>
  764. <li>List Item Two</li>
  765. </ul>
  766. <!--- List Style One --->
  767.  
  768.  
  769. <h2>H2 Heading</h2><br>
  770.  
  771. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <i>pretium</i> magna et velit <em>dignissim</em>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio ipsum, rutrum a ex ac, fringilla fermentum ante.
  772.  
  773. <p><!--- Use for paragraph spacing --->
  774.  
  775. <img align="left" src="https://placehold.it/80X80" />
  776.  
  777. Vestibulum odio <em>ipsum</em>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <em>massa</em> finibus <i>pulvinar</i> non nec lacus. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i>
  778.  
  779. <!----------- END CHARACTER BIOGRAPHY ABOVE ---------------------------->
  780. </div>
  781.  
  782. <div class="hover_links">
  783. <!----------------------
  784. START LINKS
  785. TO CHANGE ICONS GO TO:
  786. https://jam-icons.com/
  787.  
  788. Find the icon you want, and hover over the icon to see the plain name, replace the jam-NAME with your icon, for example if I want to add a folder instead of a star I'd change this:
  789.  
  790. jam-star
  791.  
  792. to this:
  793.  
  794. jam-folder
  795.  
  796. ---------------------------------------------------------------------->
  797. <a href="#" title="view tag"><span class="jam jam-tag"></span></a>
  798. <a href="#" title="view pinterest"><span class="jam jam-pinterest"></span></a>
  799.  
  800. <a href="#" title="view NAME"><span class="jam jam-heart"></span></a>
  801. <a href="#" title="view NAME"><span class="jam jam-star"></span></a>
  802. <a href="#" title="view NAME"><span class="jam jam-bookmark"></span></a>
  803. <a href="#" title="view NAME"><span class="jam jam-user"></span></a>
  804.  
  805. <!-------------- End Links ------------------------------------------->
  806. </div>
  807.  
  808. <!----------- CHARACTER HOVER INFO ABOVE ----------------------------->
  809. </div>
  810. </div>
  811. <!----- END INDIVIDUAL CHARACTER ------------------------------------->
  812.  
  813.  
  814.  
  815.  
  816.  
  817.  
  818.  
  819.  
  820.  
  821.  
  822.  
  823.  
  824.  
  825.  
  826.  
  827.  
  828. <!------- END CHARACTERS BELOW -------->
  829. </div>
  830. <!----------- END CONTAINER ----------->
  831.  
  832.  
  833. </body>
  834. </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!