API tools faq
paste
codesbyraven

cheap sunglasses

codesbyraven
Jan 21st, 2015
12,746
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.78 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. ┏ ┓
  3. ABOUT PAGE BY RAVEN@HAILHELPFUL
  4. EDIT THE SHIT OUT OF THIS GO WILD
  5. (just don't remove any credit)
  6. ┗ ┛
  7. -->
  8.  
  9. <!DOCTYPE html>
  10. <head>
  11.  
  12.  
  13. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  14. <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  15. <link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
  16.  
  17.  
  18. <title>{Title}</title>
  19.  
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  23.  
  24.  
  25. <!-- TOOLTIPS JQUERY -->
  26.  
  27.  
  28. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  29.  
  30. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  31.  
  32.  
  33. <script>
  34.  
  35. (function($){
  36.  
  37. $(document).ready(function(){
  38.  
  39. $("a[title]").style_my_tooltips({
  40.  
  41. tip_follows_cursor:true,
  42.  
  43. tip_delay_time:30,
  44.  
  45. tip_fade_speed:300,
  46.  
  47. attribute:"title"
  48.  
  49. });
  50.  
  51. });
  52.  
  53. })(jQuery);
  54.  
  55. </script>
  56.  
  57.  
  58.  
  59. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  60.  
  61.  
  62. <style type="text/css">
  63.  
  64.  
  65.  
  66. /* --------------------- TOOLTIPS CUSTOMIZATION --------------------- */
  67. #s-m-t-tooltip {
  68. font-family:'Oswald',sans-serif; /*tooltip font*/
  69. font-size:25px; /*tooltip font size*/
  70. line-height:40px;
  71. position:absolute;
  72. z-index:9999;
  73. min-width:75px;
  74. height:auto;
  75. margin:10px;
  76. margin-bottom:5px;
  77. padding:5px;
  78. text-align:center;
  79. color:#fff; /*tooltip text color*/
  80. background-color:#000; /*tooltip background color*/
  81. }
  82.  
  83. /* ---------------------- SCROLLBAR CUSTOMIZATION ---------------------- */
  84. ::-webkit-scrollbar-thumb {
  85. background:#5c7571;
  86. }
  87.  
  88. ::-webkit-scrollbar {
  89. width:5px;
  90. background:#fff;
  91. }
  92.  
  93. ::-webkit-scrollbar-track {
  94. background-color:#f5f5f5;
  95. -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  96. -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  97. box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  98. }
  99.  
  100. /* ---------------------- GENERAL CUSTOMIZATION ---------------------- */
  101. body {
  102. font-family:Calibri,Candara,Segoe,'Segoe UI',Optima,Arial,sans-serif;
  103. font-size:10px;
  104. line-height:110%;
  105. overflow:hidden;
  106. text-align:justify;
  107. }
  108.  
  109. html {
  110. background:url(http://s3.postimg.org/bi8ya2cgi/tumblr_static_e8evtw18j5wgowgkgsog4ksog.jpg) no-repeat center center fixed;
  111. /** replace with your own background url*/
  112. -webkit-background-size:cover;
  113. -moz-background-size:cover;
  114. -o-background-size:cover;
  115. background-size:cover;
  116. }
  117.  
  118. a {
  119. text-decoration:none;
  120. color:#00a37a; /*link color*/
  121. }
  122.  
  123. b,bold,strong {
  124. color:#00476b; /*bold color*/
  125. }
  126.  
  127. i,em {
  128. color:#ff8330; /*italic color*/
  129. }
  130.  
  131. pre {
  132. font-family:'Oswald' sans-serif;
  133. text-decoration:underline;
  134. letter-spacing:2px;
  135. }
  136.  
  137. .container {
  138. overflow:scroll;
  139. overflow-x:hidden;
  140. width:550px;
  141. height:500px;
  142. margin:40px auto;
  143. margin-bottom:0;
  144. border:25px solid rgba(255,255,255,.4); /*border color & opacity*/
  145. -webkit-background-clip:padding-box;
  146. background-clip:padding-box;
  147. }
  148.  
  149. .title {
  150. font-family:'Oswald',sans-serif; /*title font*/
  151. font-size:30px;
  152. padding-top:90px;
  153. text-shadow:0 0 10px rgba(0,0,0,.3);
  154. }
  155.  
  156. .subheader {
  157. margin-top:10px;
  158. }
  159.  
  160. .header {
  161. width:550px;
  162. height:200px;
  163. -webkit-transition:ease-in-out .3s;
  164. -moz-transition:ease-in-out .3s;
  165. -o-transition:ease-in-out .3s;
  166. transition:ease-in-out .3s;
  167. text-align:center;
  168. letter-spacing:1px;
  169. color:#fff;
  170. border-bottom:solid #fff 20px;
  171. background-color:#acacac;
  172. background-image:url();
  173. background-position:center;
  174. background-size:100% auto;
  175. }
  176.  
  177. .header:hover {
  178. letter-spacing:3px;
  179. text-shadow:0 0 30px rgba(255,255,255,.6);
  180. }
  181.  
  182. /* ---------------------SECTION TITLE CUSTOMIZATION--------------------- */
  183. .header2 {
  184. font-family:'Oswald',sans-serif;
  185. font-size:14px;
  186. position:relative;
  187. z-index:1;
  188. width:500px;
  189. padding:20px 25px;
  190. padding-top:40px;
  191. text-align:center;
  192. letter-spacing:1px;
  193. background:#fff;
  194. }
  195.  
  196. .header2:before {
  197. position:absolute;
  198. z-index:-1;
  199. top:45px;
  200. right:0;
  201. bottom:0;
  202. left:0;
  203. width:95%;
  204. margin:0 auto;
  205. content:'';
  206. border-top:1px solid #dfdfdf;
  207. }
  208.  
  209. .header2 span {
  210. padding:0 15px;
  211. background:#fff;
  212. }
  213.  
  214. .content {
  215. position:relative;
  216. overflow:hidden;
  217. width:500px;
  218. min-height:75px;
  219. padding:15px 25px;
  220. background:#fff;
  221. }
  222.  
  223. /* -----------------------TEXT SELECTION CUSTOMIZATION----------------------- */
  224. ::selection {
  225. color:#fff;
  226. background:#b2b2b2;
  227. }
  228.  
  229. ::-moz-selection {
  230. color:#fff;
  231. background:#b2b2b2;
  232. }
  233.  
  234. ::-webkit-selection {
  235. color:#fff;
  236. background:#b2b2b2;
  237. }
  238.  
  239. /*---------------------------DROP CAP CUSTOMIZATION---------------------------*/
  240. #dropcap {
  241. font-family:'Oswald' sans-serif;
  242. font-size:230%;
  243. float:left;
  244. margin-right:5px;
  245. padding:10px 3px;
  246. color:#fff;
  247. background-color:#000;
  248. }
  249.  
  250. /* ----------------------- COLOR PALETTE CSS ------------------------*/
  251. .swatch {
  252. line-height:190px;
  253. position:relative;
  254. float:left;
  255. width:80px;
  256. height:80px;
  257. margin:10px;
  258. margin-top:-5px;
  259. text-align:center;
  260. background-position:center;
  261. background-size:auto 100%;
  262. }
  263.  
  264. /* ----------------------------QUOTE/LYRICS BOX ----------------------*/
  265. .quotebox {
  266. position:relative;
  267. display:inline-block;
  268. overflow:hidden;
  269. width:175px;
  270. height:175px;
  271. margin-left:20px;
  272. padding:20px;
  273. -webkit-transition:ease-in-out .3s;
  274. -moz-transition:ease-in-out .3s;
  275. -o-transition:ease-in-out .3s;
  276. transition:ease-in-out .3s;
  277. background-color:#acacac;
  278. background-image:url();
  279. background-position:center;
  280. background-size:auto 100%;
  281. }
  282.  
  283. .quote {
  284. font-family:'Nothing You Could Do',cursive;
  285. /* QUOTE FONT */
  286. font-size:13px;
  287. line-height:130%;
  288. position:absolute;
  289. display:inline-block;
  290. width:175px;
  291. height:175px;
  292. margin-top:-10px;
  293. margin-left:-20px;
  294. padding:20px;
  295. -webkit-transition:ease-in-out 1s;
  296. -moz-transition:ease-in-out 1s;
  297. -o-transition:ease-in-out 1s;
  298. transition:ease-in-out 1s;
  299. text-align:center;
  300. letter-spacing:.5px;
  301. color:#fff;
  302. }
  303.  
  304. /* -------------------THE BOX THATS HOLDS THE MUSIC PLAYER ---------------*/
  305. .musicbox {
  306. position:relative;
  307. display:inline-block;
  308. width:175px;
  309. height:175px;
  310. margin-left:20px;
  311. padding:20px;
  312. -webkit-transition:ease-in-out 1s;
  313. -moz-transition:ease-in-out 1s;
  314. -o-transition:ease-in-out 1s;
  315. transition:ease-in-out 1s;
  316. background-color:#acacac;
  317. background-image:url();
  318. background-position:center;
  319. background-size:auto 100%;
  320. }
  321.  
  322. /* ------------------------- BILLY MUSIC PLAYER CSS ------------------ */
  323. .player {
  324. position:absolute;
  325. bottom:20px;
  326. overflow:hidden;
  327. width:175px;
  328. height:20px;
  329. text-align:center;
  330. vertical-align:middle;
  331. background-color:#fff; /*billy player color*/
  332. }
  333.  
  334. /* ------------------------INSPIRATION CSS.-------------------------
  335.  
  336. ONLY MESS WITH THIS IF YOU KNOW WHAT YOURE DOING.
  337. THE COLUMN THING IS EASY TO CHANGE BUT THE REST CAN GET TRICKY
  338. YOU CAN CHANGE THE HEIGHT OF ".MASONRYBOX" TO ADD MORE IMAGES */
  339. .masonry {
  340. overflow:hidden;
  341. -moz-column-count:3;
  342. -moz-column-gap:0;
  343. -webkit-column-count:3;
  344. -webkit-column-gap:0;
  345. column-count:3;
  346. column-gap:0;
  347. -ms-column-count:3;
  348. -ms-column-gap:0;
  349. -moz-padding-start:0;
  350. -webkit-padding-start:0;
  351. }
  352.  
  353. .masonry img {
  354. display:inline-block;
  355. width:100%;
  356. margin-bottom:-4px;
  357. -webkit-transition:ease-in-out .3s;
  358. -moz-transition:ease-in-out .3s;
  359. -o-transition:ease-in-out .3s;
  360. transition:ease-in-out .3s;
  361. -webkit-filter:grayscale(100%);
  362. -webkit-backface-visibility:hidden;
  363. }
  364.  
  365. .masonry img:hover {
  366. -webkit-transform:scale(1.25);
  367. -moz-transform:scale(1.25);
  368. -ms-transform:scale(1.25);
  369. -o-transform:scale(1.25);
  370. transform:scale(1.25);
  371. -webkit-filter:grayscale(0%);
  372. }
  373.  
  374. .masonrybox {
  375. overflow:hidden;
  376. height:450px; /*change the height here if you add more pictures*/
  377. }
  378.  
  379. /* ------------------------------ MBTI CSS --------------------------- */
  380. .mbtipic1 {
  381. z-index:1;
  382. display:inline-block;
  383. overflow:hidden;
  384. width:200px;
  385. height:200px;
  386. text-align:center;
  387. background-color:#acacac;
  388. background-image:url(); /* replace image url with your own */
  389. background-position:center;
  390. background-size:auto 100%;
  391. }
  392.  
  393. .mbtitext {
  394. font-family:'Oswald',sans-serif;
  395. /*mbti title font*/
  396. font-size:40px;
  397. margin-top:90px;
  398. margin-bottom:25px;
  399. -webkit-transition:ease-in-out .5s;
  400. -moz-transition:ease-in-out .5s;
  401. -o-transition:ease-in-out .5s;
  402. transition:ease-in-out .5s;
  403. text-align:center;
  404. letter-spacing:5px;
  405. color:#fff;
  406. -webkit-filter:blur(2px);
  407. }
  408.  
  409. .mbtihover {
  410. /*css literally for the word "hover" just so people know to hover*/
  411. font-size:8px;
  412. margin-top:-10px;
  413. -webkit-transition:ease-in-out .5s;
  414. -moz-transition:ease-in-out .5s;
  415. -o-transition:ease-in-out .5s;
  416. transition:ease-in-out .5s;
  417. letter-spacing:.5px;
  418. opacity:.5;
  419. color:#fff;
  420. }
  421.  
  422. .mbtipic1:hover .mbtitext {
  423. font-size:13px;
  424. margin-top:40px;
  425. margin-left:20px;
  426. letter-spacing:25px;
  427. -webkit-filter:blur(0px);
  428. }
  429.  
  430. .mbtipic1:hover .mbtihover {
  431. opacity:0;
  432. }
  433.  
  434. /*-----------bar graph. theres no reason to really mess with this-----------*/
  435. .mbtitraits {
  436. font-size:8px;
  437. line-height:13px;
  438. top:-30px;
  439. height:100px;
  440. margin-top:-11px;
  441. -webkit-transition:ease-in-out .5s;
  442. -moz-transition:ease-in-out .5s;
  443. -o-transition:ease-in-out .5s;
  444. transition:ease-in-out .5s;
  445. text-align:right;
  446. letter-spacing:1px;
  447. text-transform:uppercase;
  448. opacity:0;
  449. color:#f5f5f5;
  450. }
  451.  
  452. .mbtitraits b {
  453. padding-left:3px;
  454. text-decoration:none;
  455. color:#fff;
  456. background-color:rgba(0,0,0,.2);
  457. }
  458.  
  459. .mbtipic1:hover .mbtitraits {
  460. opacity:1;
  461. }
  462.  
  463. .bar {
  464. height:10px;
  465. padding-left:2px;
  466. text-align:left;
  467. }
  468.  
  469. .barsblock {
  470. display:inline-block;
  471. float:right;
  472. width:100px;
  473. margin-right:15px;
  474. }
  475.  
  476. .bars {
  477. font-size:8px;
  478. width:90px;
  479. height:10px;
  480. margin:3px;
  481. -webkit-transition:ease-in-out .5s;
  482. -moz-transition:ease-in-out .5s;
  483. transition:ease-in-out .5s;
  484. letter-spacing:1px;
  485. text-transform:uppercase;
  486. opacity:0;
  487. color:#f5f5f5;
  488. background-color:rgba(255,255,255,.3);
  489. }
  490.  
  491. .mbtipic1:hover .bars {
  492. z-index:99999;
  493. opacity:1;
  494. }
  495.  
  496. /*----------------------strengths and weaknesses----------------------*/
  497. .strengthsweaknesses {
  498. float:right;
  499. width:270px;
  500. margin-top:10px;
  501. padding-left:25px;
  502. }
  503.  
  504. .swlist {
  505. font-size:8px;
  506. line-height:10px;
  507. display:inline-block;
  508. overflow:auto;
  509. overflow-x:hidden;
  510. width:120px;
  511. height:100px;
  512. padding-top:10px;
  513. text-align:center;
  514. text-transform:uppercase;
  515. background-color:transparent;
  516. }
  517.  
  518. .swlist b,bold,strong {
  519. font-family:'Oswald' sans-serif; /*header font*/
  520. text-decoration:underline;
  521. letter-spacing:2px;
  522. }
  523.  
  524. .swhorizontalbar { /*white strip behind strengths and weaknesses*/
  525. float:right;
  526. width:300px;
  527. height:100px;
  528. margin-bottom:-110px;
  529. background-color:#fff; /*strip color*/
  530. }
  531.  
  532. .mbtipic2 {
  533. z-index:-999;
  534. float:right;
  535. overflow:hidden;
  536. width:280px;
  537. height:200px;
  538. margin-top:-10px;
  539. margin-bottom:-150px;
  540. background-color:#acacac;
  541. background-image:url(); /*picture behind strengths and weakness*/
  542. background-position:center;
  543. background-size:100% auto;
  544. -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  545. -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  546. box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  547. }
  548.  
  549. /*--------------------- MORAL ALIGNMENT CSS ---------------------*/
  550. .alignmentdesc {
  551. line-height:9px;
  552. float:left;
  553. width:180px;
  554. height:264px;
  555. margin-top:3px;
  556. padding:10px 10px 0;
  557. text-align:right;
  558. color:#f5f5f5;
  559. background-color:#acacac;
  560. background-image:url(); /*image behind list of alignment descriptions*/
  561. background-position:center;
  562. background-size:auto 100%;
  563. }
  564.  
  565. #selected {
  566. background-color:#002952; /*color of the selected alignment*/
  567. }
  568.  
  569. .alignment {
  570. display:inline-block;
  571. width:279px;
  572. margin-left:17px;
  573. background-color:#acacac;
  574. background-image:url(); /*image behind alignment squares*/
  575. background-position:center;
  576. background-size:100% auto;
  577. }
  578.  
  579. .alignmentblock {
  580. font-size:8px;
  581. line-height:100%;
  582. position:relative;
  583. display:block;
  584. float:left;
  585. width:67px;
  586. height:47px;
  587. padding:10px;
  588. padding-top: 30px;
  589. text-align:center;
  590. text-transform:uppercase;
  591. color:#acacac;
  592. border:3px solid #fff;
  593. }
  594.  
  595. .alignmentblock p {
  596. padding:0;
  597. }
  598.  
  599. /*---------------------------- NAVIGATION BOX---------------------------------*/
  600. .navscrollbox {
  601. width:521px;
  602. padding:15px;
  603. padding-bottom:5px;
  604. border-top:15px solid #fff;
  605. background-color:#acacac;
  606. background-image:url(); /*image for navigation*/
  607. background-position:center;
  608. background-size:100% auto;
  609. -webkit-column-count:3;
  610. -moz-column-count:3;
  611. -ms-column-count:3;
  612. column-count:3;
  613. -webkit-column-gap:0;
  614. -moz-column-gap:0;
  615. -ms-column-gap:0;
  616. column-gap:0;
  617. }
  618.  
  619. /*----------------------nav sections customization----------------------*/
  620. .navblock {
  621. display:inline-block;
  622. width:150px;
  623. margin:5px;
  624. padding-bottom:5px;
  625. background-color:rgba(0,0,0,.2);
  626. }
  627.  
  628. /*-----------------------nav titles customization-----------------------*/
  629. .navcategory {
  630. font-family:'Oswald' sans-serif;
  631. /*nav titles font*/
  632. font-size:8px;
  633. position:relative;
  634. z-index:1;
  635. overflow:hidden;
  636. width:140px;
  637. padding:6px 5px;
  638. text-align:center;
  639. letter-spacing:2px;
  640. text-transform:uppercase;
  641. color:#fff; /*category text color*/
  642. }
  643.  
  644. .navcategory:before,.navcategory:after {
  645. position:absolute;
  646. top:51%;
  647. overflow:hidden;
  648. width:50%;
  649. height:1px;
  650. content:'\a0';
  651. background-color:rgba(255,255,255,.5);
  652. }
  653.  
  654. .navcategory:before {
  655. margin-left:-50%;
  656. text-align:right;
  657. }
  658.  
  659. /*--------------------------nav link customization--------------------------*/
  660. .navlink {
  661. width:142px;
  662. margin-top:4px;
  663. padding:3px;
  664. padding-left:5px;
  665. -webkit-transition:ease-in-out .5s;
  666. -moz-transition:ease-in-out .5s;
  667. -o-transition:ease-in-out .5s;
  668. transition:ease-in-out .5s;
  669. text-align:center;
  670. color:#fff; /**link text color**/
  671. background-color:transparent; /**link background color**/
  672. }
  673.  
  674. .navlink:hover {
  675. color:#fff; /**link hover text color**/
  676. background-color:rgba(0,0,0,.7); /**link hover background color**/
  677. }
  678.  
  679. /*-----------------------------------CREDIT----------------------------------- LOL don't remove this its just a little x in the corner i think you can deal*/
  680. .credit {
  681. font-family:consolas;
  682. font-size:9px;
  683. line-height:9px;
  684. position:fixed;
  685. right:10px;
  686. bottom:10px;
  687. padding:2px 4px;
  688. -webkit-transition:ease-in-out .5s;
  689. -moz-transition:ease-in-out .5s;
  690. -o-transition:ease-in-out .5s;
  691. transition:ease-in-out .5s;
  692. color:#fff;
  693. border:1px solid #fff;
  694. }
  695.  
  696. .credit:hover {
  697. font-weight:700;
  698. color:#000;
  699. border:1px solid #fff;
  700. background-color:#fff;
  701. }
  702.  
  703. /** remove this if you don't like tiny cursors**/
  704. *,body,a,a:hover {
  705. cursor:url(http://i1124.photobucket.com/albums/l579/fieKrieY/Cursor-1.png),auto
  706. }
  707.  
  708. /*-----------------------BOTTOM NAV CSS-----------------------*/
  709. .return {
  710. font-size:8px;
  711. position:relative;
  712. top:-20px;
  713. width:580px;
  714. height:50px;
  715. margin:0 auto;
  716. -webkit-transition:ease-in-out .3s;
  717. -moz-transition:ease-in-out .3s;
  718. -o-transition:ease-in-out .3s;
  719. transition:ease-in-out .3s;
  720. letter-spacing:1.5px;
  721. color:#fff;
  722. }
  723.  
  724. .return a {
  725. -webkit-transition:ease-in-out .3s;
  726. -moz-transition:ease-in-out .3s;
  727. -o-transition:ease-in-out .3s;
  728. transition:ease-in-out .3s;
  729. color:#fff;
  730. }
  731.  
  732. .return a:hover {
  733. color:#ff8330;
  734. }
  735.  
  736. /*-----------------------BLOGROLL CSS-----------------------*/
  737. .blogrollbox {
  738. overflow:auto;
  739. overflow-x:hidden;
  740. width:430px;
  741. height:340px;
  742. margin:20px;
  743. margin-top:5px;
  744. padding:20px;
  745. text-align:justify;
  746. background-image:url(); /*image for blogroll*/
  747. background-position:center;
  748. background-size:100% auto;
  749. }
  750.  
  751. .blogrollbox:after {
  752. display:inline-block;
  753. width:100%;
  754. content:'';
  755. }
  756.  
  757. .blogrollbox img {
  758. display:inline-block;
  759. margin:5px;
  760. -webkit-transition:ease-in-out .3s;
  761. -moz-transition:ease-in-out .3s;
  762. -o-transition:ease-in-out .3s;
  763. transition:ease-in-out .3s;
  764. -webkit-filter:grayscale(100%);
  765. }
  766.  
  767. .blogrollbox img:hover {
  768. -webkit-filter:grayscale(0%);
  769. }
  770.  
  771.  
  772.  
  773. </style>
  774.  
  775. </head>
  776.  
  777. <body>
  778.  
  779.  
  780.  
  781. <div class="container">
  782.  
  783.  
  784. <!---------------------- TITLE BEGINS HERE ---------------------->
  785.  
  786.  
  787. <div class="header">
  788. <div class="title">CHARACTER NAME</div>
  789. <div class="subheader">subtitle</div>
  790. </div>
  791.  
  792. <!----------------------- TITLE ENDS HERE ----------------------->
  793.  
  794. <!-------------------COLOR PALETTE BEGINS HERE ------------------->
  795.  
  796.  
  797. <div class="header2"><span>COLORS</span></div>
  798.  
  799. <div class="content">
  800. <div class="swatch" style="background-color:#002952">#002952</div>
  801. <div class="swatch" style="background-color:#00476B">#00476B</div>
  802. <div class="swatch" style="background-color:#00A37A">#00A37A</div>
  803. <div class="swatch" style="background-color:#FF8330">#FF8330</div>
  804. <div class="swatch" style="background-color:#FFD633">#FFD633</div>
  805. </div>
  806.  
  807. <!------------------------COLOR PALETTE ENDS HERE ------------------------>
  808.  
  809. <!-------------------QUOTE/PLAYLIST SECTION BEGINS HERE------------------->
  810.  
  811.  
  812. <div class="header2"><span>WORDS</span></div>
  813. <div class="content">
  814.  
  815. <div class="quotebox">
  816. <div class="quote"><br>
  817. <p>
  818. “Quotes are for people who can't think of something intelligent to say on their own”<p> -- Bo Burnham
  819. </div>
  820. </div>
  821.  
  822. <div class="musicbox">
  823. <div class="player"> MUSIC PLAYER CODE HERE</div>
  824. </div>
  825.  
  826. </div>
  827.  
  828. <!-------------------QUOTE/PLAYLIST SECTION ENDS HERE------------------->
  829.  
  830. <!-----------------------INSPO SECTION I GUESS???----------------------->
  831.  
  832.  
  833. <div class="header2"><span>INSPIRATION</span></div>
  834. <div class="content">
  835. <div class="masonrybox">
  836. <ul class="masonry">
  837.  
  838. <!----images stack in columns. you can see how they are ordered from the way they're numbered. as you can see, the images on the bottom get cut off unless you extend the height of the container. you can change the height by hitting ctrl+f and entering .masonrybox
  839.  
  840. you can make the images links by replacing "/" with "linkurl" --->
  841.  
  842. <li><a title="one" href="/">
  843. <img src="http://s6.postimg.org/luob5v1ox/one.jpg"></a></li>
  844. <li><a title="two" href="/">
  845. <img src="http://s6.postimg.org/db4x83tch/two.jpg"></a></li>
  846. <li><a title="three" href="/">
  847. <img src="http://s6.postimg.org/3pbcrt26p/three.jpg"></a></li>
  848. <li><a title="four" href="/">
  849. <img src="http://s6.postimg.org/hrxa6s7kh/four.jpg"></a></li>
  850. <li><a title="five" href="/">
  851. <img src="http://s6.postimg.org/6i4kbu2j5/five.jpg"></a></li>
  852. <li><a title="six" href="/">
  853. <img src="http://s6.postimg.org/qj4b11qvl/six.jpg"></a></li>
  854. <li><a title="seven" href="/">
  855. <img src="http://s6.postimg.org/9hbgyyc0g/seven.jpg"></a></li>
  856. <li><a title="eight" href="/">
  857. <img src="http://s6.postimg.org/p6mlz5tg1/eight.jpg"></a></li>
  858. <li><a title="nine" href="/">
  859. <img src="http://s6.postimg.org/r0zggwggh/nine.jpg"></a></li>
  860.  
  861.  
  862.  
  863.  
  864.  
  865. </ul>
  866. </div>
  867. </div>
  868.  
  869.  
  870.  
  871. <!---------------------------INSPO SECTION ENDS--------------------------->
  872.  
  873. <!--------------------------- ABOUT BEGINS HERE --------------------------->
  874.  
  875.  
  876. <div id="about" class="header2"><span>ABOUT</span></div>
  877. <div class="content">
  878.  
  879. <div align="center"><div style="width:450px; text-align: justify">
  880. <span id="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu blandit ipsum. Nulla non aliquet purus, et imperdiet leo. Cras eu metus vulputate tortor tincidunt sagittis. Praesent pulvinar est elit, non pharetra nisi commodo a. Nullam ante leo, porttitor non dolor ac, dignissim mollis orci. Suspendisse et enim vitae lectus ornare porta. Nam consectetur erat vitae ex eleifend pharetra. Vivamus commodo, urna at auctor gravida, sapien est placerat est, non eleifend nisl tortor eget mi. Duis ut justo faucibus, cursus purus in, auctor augue. Proin tortor ipsum, mollis at semper vitae, tristique quis nulla. Nulla scelerisque, nibh vel pellentesque consectetur, mauris eros aliquam purus, vitae suscipit odio orci ac enim. Donec a tortor justo. Morbi iaculis tincidunt dolor, ut gravida mi ultricies quis. Nunc auctor risus quis elit ullamcorper consectetur.<p>
  881.  
  882. Sed venenatis venenatis lectus, ac finibus velit vehicula nec. Praesent malesuada aliquam tellus, fermentum sodales ante. In dignissim sapien quis nulla interdum, sit amet pulvinar magna commodo. Sed vel placerat est, non cursus mauris. Sed sollicitudin sem nulla, vitae pulvinar orci ullamcorper nec. Duis semper volutpat pulvinar. <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Proin consectetur pellentesque lacus eu varius.</a> Proin nibh odio, porta eu viverra a, consequat at sem. Maecenas vestibulum ipsum ut euismod luctus. Ut ut hendrerit lectus, vel lobortis justo. Phasellus a massa et quam aliquet vulputate eu at mauris. Nullam pharetra purus sed neque imperdiet, sed viverra odio viverra.<p>
  883.  
  884. Maecenas in ligula condimentum, eleifend eros non, fringilla nibh. Donec nisl turpis, elementum eu erat et, venenatis fermentum leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam feugiat rhoncus varius. Nulla eu posuere sapien, eget viverra tellus. Cras iaculis dui eleifend pulvinar luctus. In accumsan tincidunt malesuada. <b>Donec venenatis vel nisl at ullamcorper.</b> Vestibulum interdum, neque vitae congue commodo, ex mauris volutpat dui, egestas feugiat elit ex in sem. Nunc a facilisis tellus, at consectetur ex. Ut turpis est, vehicula at urna eget, varius molestie libero.<p>
  885.  
  886. Integer et enim molestie, pretium ex ac, blandit sem. Curabitur interdum tristique rutrum. Cras viverra nulla eu orci luctus sagittis. Suspendisse egestas posuere sem, tristique rutrum massa pretium sed. Donec iaculis urna eu dignissim congue. Donec venenatis libero metus. Nullam consectetur elementum orci, quis viverra tellus molestie id. <i>Fusce ultrices neque vitae aliquam facilisis.</i> Quisque tincidunt lacinia lorem, vitae rhoncus justo sollicitudin non. Aenean tellus augue, aliquam ut tincidunt eget, mollis ac eros. Nulla eleifend molestie sem, vitae sagittis nisi rutrum quis. Integer maximus leo quis ante iaculis, eget feugiat elit fringilla.<p>
  887.  
  888. Nunc eget ipsum quis arcu dictum convallis. Aliquam libero urna, lacinia faucibus arcu vel, rutrum tempus tellus. Integer a metus sed felis condimentum luctus. Nulla vel turpis eget nunc consectetur placerat eget a tellus. Etiam feugiat enim eget molestie efficitur. Aliquam auctor suscipit arcu a pellentesque. Proin libero turpis, accumsan vel tempus placerat, facilisis vel elit. Nulla facilisi. Sed quis suscipit libero, et placerat risus. Donec placerat pharetra dui, id sodales sapien sagittis at. Proin sollicitudin tincidunt nulla sed bibendum. Sed vel efficitur tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit bibendum leo, laoreet faucibus lectus feugiat eget.
  889. </div></div>
  890.  
  891. </div>
  892.  
  893. <!---------------------------- ABOUT ENDS HERE ---------------------------->
  894.  
  895. <!----------------------------MBTI BEGINS HERE---------------------------->
  896.  
  897. <div class="header2"><span>MYERS-BRIGGS TYPE INDICATOR</span></div>
  898.  
  899. <div class="content">
  900.  
  901. <div class="mbtipic1">
  902. <div class="mbtitext"> XXXX </div>
  903. <div class="mbtihover"> [ HOVER ] </div>
  904.  
  905. <!---make sure the percentages on each line match -->
  906.  
  907. <div class="barsblock">
  908. <div class="bars">
  909. <div class="bar" style="background-color: #002952; width: 20%;">20%</div></div>
  910. <div class="bars">
  911. <div class="bar" style="background-color: #00476B; width: 30%;">30%</div></div>
  912. <div class="bars">
  913. <div class="bar" style="background-color: #00A37A; width: 40%;">40%</div></div>
  914. <div class="bars">
  915. <div class="bar" style="background-color: #FF8330; width: 50%;">50%</div></div>
  916. <div class="bars">
  917. <div class="bar" style="background-color: #FFD633; width: 60%;">60%</div></div>
  918. </div>
  919.  
  920. <!---make sure not to remove the <b></b> from around each word when editing-->
  921.  
  922. <div class="mbtitraits">
  923. <br><b>trait one</b>
  924. <br><b>trait two</b>
  925. <br><b>trait three</b>
  926. <br><b>trait four</b>
  927. <br><b>trait five</b>
  928. </div>
  929.  
  930. </div><!--end mbti pic-->
  931.  
  932.  
  933. <div class="strengthsweaknesses">
  934.  
  935. <div class="mbtipic2"></div>
  936. <div class="swhorizontalbar"></div>
  937.  
  938. <div class="swlist">
  939. <b> XXXX STRENGTHS</b> <br>
  940. strength<br>
  941. strength<br>
  942. strength<br>
  943. strength<br>
  944. strength<br>
  945. strength
  946. </div>
  947.  
  948. <div class="swlist">
  949. <b> XXXX WEAKNESSES</b><br>
  950. weakness<br>
  951. weakness<br>
  952. weakness<br>
  953. weakness<br>
  954. weakness<br>
  955. weakness<br>
  956.  
  957. </div><!---endswlist--->
  958. </div><!---end strengthsweaknesses-->
  959. </div><!---end content--->
  960.  
  961. <!------------------------------MBTI ENDS HERE------------------------------>
  962.  
  963. <!-----------------------MORAL ALIGNMENT STARTS HERE----------------------->
  964.  
  965. <div class="header2"><span>MORAL ALIGNMENT</span></div>
  966.  
  967. <div class="content">
  968.  
  969. <div class="alignmentdesc">
  970.  
  971. <!---
  972.  
  973. to highlight your characters moral alignment, place <div id="selected> and </div> around the correct alignment as shown below.
  974.  
  975. EXAMPLE. if your moral alignment was neutral evil, it would look like this:
  976.  
  977. <div id="selected">
  978. represents pure evil without honor and without variation;<p></div>
  979.  
  980.  
  981. <!--lawful good-->combines honor and compassion;<p>
  982. <!--neutral good-->doing what is good without bias for or against order;<p>
  983. <!--chotic good--> combines a good heart with a free spirit;<p>
  984. <!--lawful neutral-->reliable and honorable without being a zealot;<p>
  985. <!--true neutral--><div id="selected">act naturally, without prejudice or compulsion;<p></div>
  986. <!--chaotic nautral-->represents true freedom from society’s restricitons and a do-gooders zeal;<p>
  987. <!--lawful evil-->represents methodical, intentional, and frequently sucessful evil;<p>
  988. <!--neutral evil-->represents pure evil without honor and without variation;<p>
  989. <!--chaotic evil-->destruction not only of beauty and life but also of the order on which beauty and life depend.</div> <!--end alignmentdesc--->
  990.  
  991.  
  992.  
  993.  
  994. <!---- for this one, you can just place id="selected next to the alignmentblock.
  995.  
  996. EXAMPLE. If your alignment is lawful neutral instead of this:
  997.  
  998. <div class="alignmentblock">LAWFUL NEUTRAL <p>"the judge"</div>
  999.  
  1000. it would look like this:
  1001.  
  1002. <div class="alignmentblock" id="selected" >LAWFUL NEUTRAL <p>"the judge"</div>
  1003.  
  1004. --->
  1005.  
  1006. <div class="alignment">
  1007. <div class="alignmentblock">LAWFUL GOOD<p>"the crusader"</div>
  1008. <div class="alignmentblock">NEUTRAL GOOD <p>"the benefactor"</div>
  1009. <div class="alignmentblock">CHAOTIC GOOD <p>"the rebel"</div>
  1010. <div class="alignmentblock">LAWFUL NEUTRAL <p>"the judge"</div>
  1011. <div class="alignmentblock" id="selected">TRUE NEUTRAL <p>"the undecided" </div>
  1012. <div class="alignmentblock" >CHAOTIC NEUTRAL <p>"the free spirit"</div>
  1013. <div class="alignmentblock">LAWFUL EVIL <p>"the dominator"</div>
  1014. <div class="alignmentblock">NEUTRAL EVIL <p>"the malefactor</div>
  1015. <div class="alignmentblock">CHAOTIC EVIL <p>"the destroyer"</div>
  1016. </div>
  1017.  
  1018.  
  1019.  
  1020. </div><!---end content--->
  1021.  
  1022.  
  1023. <!--------------------MORAL ALIGNMENT ENDS HERE-------------------->
  1024.  
  1025.  
  1026. <div id="nav" class="header2"><span>EXPLORE</span></div>
  1027.  
  1028. <!--------------------------NAVIGATION BEGINS HERE-------------------------
  1029.  
  1030. ADDING LINKS/TAGS:
  1031.  
  1032. I have it set up for tags but it can easily be modified.
  1033.  
  1034. To add a tag link, change <a href="/tagged/"> to <a href="/tagged/yourtagname">
  1035.  
  1036. to link to a page, change <a href="/tagged/"> to <a href="/yourpagename">
  1037.  
  1038. for external links, change <a href="/tagged/"> to <a href="www.externalink.com">
  1039.  
  1040.  
  1041. ADDING ADDITIONAL NAV BOXES:
  1042.  
  1043. copy and paste this after each <!--end nav block-- >
  1044.  
  1045. <div class="navblock">
  1046. <div class="navcategory">TITLE</div>
  1047. <a href="/tagged/"><div class="navlink">
  1048. link
  1049. </div></a>
  1050. <a href="/tagged/"><div class="navlink">
  1051. link
  1052. </div></a>
  1053. <a href="/tagged/"><div class="navlink">
  1054. link
  1055. </div></a>
  1056. <a href="/tagged/"><div class="navlink">
  1057. link
  1058. </div></a>
  1059. <a href="/tagged/"><div class="navlink">
  1060. link
  1061. </div></a>
  1062. </div><!--end nav block-->
  1063.  
  1064.  
  1065. <div class="navscrollbox">
  1066.  
  1067.  
  1068. <div class="navblock">
  1069. <div class="navcategory">category 1</div>
  1070. <a href="/tagged/"><div class="navlink">
  1071. link one
  1072. </div></a>
  1073. <a href="/tagged/"><div class="navlink">
  1074. link two
  1075. </div></a>
  1076. <a href="/tagged/"><div class="navlink">
  1077. link three
  1078. </div></a>
  1079. </div><!--end nav block-->
  1080.  
  1081. <div class="navblock">
  1082. <div class="navcategory">category 2</div>
  1083. <a href="/tagged/"><div class="navlink">
  1084. link one
  1085. </div></a>
  1086. <a href="/tagged/"><div class="navlink">
  1087. link two
  1088. </div></a>
  1089. <a href="/tagged/"><div class="navlink">
  1090. link three
  1091. </div></a>
  1092. <a href="/tagged/"><div class="navlink">
  1093. link four
  1094. </div></a>
  1095. <a href="/tagged/"><div class="navlink">
  1096. link five
  1097. </div></a>
  1098. <a href="/tagged/"><div class="navlink">
  1099. link six
  1100. </div></a>
  1101. </div><!--end nav block-->
  1102.  
  1103. <div class="navblock">
  1104. <div class="navcategory">category 3</div>
  1105. <a href="/tagged/"><div class="navlink">
  1106. link one
  1107. </div></a>
  1108. <a href="/tagged/"><div class="navlink">
  1109. link two
  1110. </div></a>
  1111. <a href="/tagged/"><div class="navlink">
  1112. link three
  1113. </div></a>
  1114. <a href="/tagged/"><div class="navlink">
  1115. link four
  1116. </div></a>
  1117. <a href="/tagged/"><div class="navlink">
  1118. link five
  1119. </div></a>
  1120. </div><!--end nav block-->
  1121.  
  1122. <div class="navblock">
  1123. <div class="navcategory">category 4</div>
  1124. <a href="/tagged/"><div class="navlink">
  1125. link one
  1126. </div></a>
  1127. <a href="/tagged/"><div class="navlink">
  1128. link two
  1129. </div></a>
  1130. <a href="/tagged/"><div class="navlink">
  1131. link three
  1132. </div></a>
  1133. <a href="/tagged/"><div class="navlink">
  1134. link four
  1135. </div></a>
  1136. </div><!--end nav block-->
  1137.  
  1138. <div class="navblock">
  1139. <div class="navcategory">category 5</div>
  1140. <a href="/tagged/"><div class="navlink">
  1141. link one
  1142. </div></a>
  1143. <a href="/tagged/"><div class="navlink">
  1144. link two
  1145. </div></a>
  1146. <a href="/tagged/"><div class="navlink">
  1147. link three
  1148. </div></a>
  1149. <a href="/tagged/"><div class="navlink">
  1150. link four
  1151. </div></a>
  1152. </div><!--end nav block-->
  1153.  
  1154. <div class="navblock">
  1155. <div class="navcategory">category 6</div>
  1156. <a href="/tagged/"><div class="navlink">
  1157. link one
  1158. </div></a>
  1159. <a href="/tagged/"><div class="navlink">
  1160. link two
  1161. </div></a>
  1162. <a href="/tagged/"><div class="navlink">
  1163. link three
  1164. </div></a>
  1165. <a href="/tagged/"><div class="navlink">
  1166. link four
  1167. </div></a>
  1168. <a href="/tagged/"><div class="navlink">
  1169. link five
  1170. </div></a>
  1171. </div><!--end nav block-->
  1172.  
  1173. </div><!--end navscrollbox-->
  1174.  
  1175. <!--------------------------NAVIGATION ENDS HERE------------------------->
  1176.  
  1177. <!---------------------------ASKBOX BEGINS HERE--------------------------->
  1178. <div id="ask" class="header2"><span>ASK</span></div>
  1179. <div class="content">
  1180. <p><iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/YOURURL.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  1181. </div>
  1182. <!---------------------------ASKBOX BEGINS HERE--------------------------->
  1183.  
  1184. <!-------------------------BLOGROLL BEGINS HERE------------------------->
  1185.  
  1186. <div id="blogroll" class="header2"><span>BLOGROLL</span></div>
  1187. <div class="content">
  1188. <div class="blogrollbox">
  1189. {block:Following}
  1190. {block:Followed}
  1191. <a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-64}">{/block:Followed}{/block:Following}
  1192. </div><!---end blogroll box--->
  1193.  
  1194. </div><!---end content--->
  1195.  
  1196. <!-------------------------BLOGROLL ENDS HERE------------------------->
  1197.  
  1198.  
  1199. </div><!--end container-->
  1200.  
  1201.  
  1202. <div class="return"><i class="fa fa-angle-left fa-lg"></i>
  1203. <a href="/">BACK</a> |
  1204. <a href="#nav">LINKS</a> |
  1205. <a href="#blogroll">BLOGROLL</a> |
  1206. <a href="#ask">ASK</a> |
  1207. <a href="#about">ABOUT</a> |
  1208. </div>
  1209.  
  1210.  
  1211.  
  1212. <a title="page by raven" href="http://hailthehelpful.tumblr.com/"><div class="credit">X</div></a> <!---c r e d i t--->
  1213.  
  1214.  
  1215.  
  1216. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!