API tools faq
paste
especiallygold

journaling

especiallygold
Oct 15th, 2019
3,557
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.58 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. © erika-writes
  3. -->
  4.  
  5. <head>
  6.  
  7. <title>{Title}</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9.  
  10. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  11.  
  12. <link href="https://fonts.googleapis.com/css?family=Palanquin+Dark:500&display=swap" rel="stylesheet">
  13.  
  14. <script type="text/javascript"
  15. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  16.  
  17. <script>
  18. $(document).ready(function() {
  19. //
  20. $('a.poplight[href^=#]').click(function() {
  21. var popID = $(this).attr('rel'); //Gets Popup Name
  22. var popURL = $(this).attr('href'); //Gets Popup href to define size
  23. var query= popURL.split('?');
  24. var dim= query[1].split('&');
  25. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  26. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  27. var popMargTop = ($('#' + popID).height() + 80) / 2;
  28. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  29. //Apply Margin to Popup
  30. $('#' + popID).css({
  31. 'margin-top' : -popMargTop,
  32. 'margin-left' : -popMargLeft
  33. });
  34. $('body').append('<div id="fade"></div>');
  35. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  36. return false;
  37. });
  38. $('a.close, #fade').live('click', function() {
  39. $('#fade , .popup_block').fadeOut(function() {
  40. $('#fade, a.close').remove(); //fade them both out
  41. });
  42. return false;
  43. });
  44. });
  45. </script>
  46.  
  47. <style type="text/css">
  48.  
  49. @font-face { font-family: "cepttoni"; src: url('https://dl.dropboxusercontent.com/s/ascg2g9haue0wgj/Cepttoni.ttf');}
  50.  
  51. body {
  52. font-family:arial;
  53. font-size:9px;
  54. letter-spacing:.5px;
  55. line-height:15px;
  56. -webkit-font-smoothing: antialiased;
  57. -moz-osx-font-smoothing: grayscale;
  58. }
  59.  
  60. a {
  61. color:#000;
  62. text-decoration:none;
  63. }
  64.  
  65. #container {
  66. background-color:#eee;
  67. border-radius:5px;
  68. margin:0 auto;
  69. margin-top:100px;
  70. width:855px;
  71. height:500px;
  72. }
  73.  
  74. #left {
  75. width:300px;
  76. height:500px;
  77. float:left;
  78. }
  79.  
  80. #title {
  81. font-family:'Palanquin Dark', sans-serif;
  82. color:#404040;
  83. font-size:55px;
  84. letter-spacing:-2px;
  85. text-align:center;
  86. margin-top:60%;
  87. }
  88.  
  89. #title2 {
  90. font-family:'cepttoni';
  91. font-size:55px;
  92. letter-spacing:0px;
  93. text-align:center;
  94. margin-top:12px;
  95. transform: rotate(-5deg);
  96. }
  97.  
  98. #heading {
  99. font-family:arial;
  100. font-size:8px;
  101. font-weight:bold;
  102. letter-spacing:3px;
  103. text-align:center;
  104. text-transform:uppercase;
  105. margin-top:5%;
  106. }
  107.  
  108. #sidenav {
  109. font-family:'Palanquin Dark', sans-serif;
  110. font-size:9px;
  111. font-weight:100;
  112. text-transform:lowercase;
  113. letter-spacing:2px;
  114. padding:10px;
  115. margin-top:200px;
  116. text-align:center;
  117. --mainColor: #fff;
  118. }
  119.  
  120. #sidenav a {
  121. text-decoration:none;
  122. margin-left:5px;
  123. margin-right:5px;
  124. padding:3px 8px 3px 8px;
  125. background:
  126. linear-gradient(
  127. to bottom, var(--mainColor) 0%,
  128. var(--mainColor) 100%
  129. );
  130. background-position: 0 100%;
  131. background-repeat: repeat-x;
  132. background-size: 4px 2px;
  133. color: #000;
  134. text-decoration: none;
  135. transition: background-size .2s;
  136. -webkit-transition:0.6s ease-out;
  137. }
  138.  
  139. #sidenav a:hover {
  140. word-spacing:15px;
  141. background-size: 4px 50px;
  142. -webkit-transition:0.6s ease-out;
  143. }
  144.  
  145. #right {
  146. width:550px;
  147. height:500px;
  148. float:right;
  149. }
  150.  
  151. #navigation {
  152. font-family:'Palanquin Dark', sans-serif;
  153. font-size:9px;
  154. font-weight:100;
  155. width:520px;
  156. height:20px;
  157. padding:15px;
  158. margin-left:5px;
  159. margin-right:5px;
  160. text-align:center;
  161. letter-spacing:1.5px;
  162. --mainColor: #fff;
  163. position:relative;
  164. }
  165.  
  166. #navigation a {
  167. margin-left:5px;
  168. margin-right:5px;
  169. padding:3px 8px 3px 8px;
  170. background:
  171. linear-gradient(
  172. to bottom, var(--mainColor) 0%,
  173. var(--mainColor) 100%
  174. );
  175. background-position: 0 100%;
  176. background-repeat: repeat-x;
  177. background-size: 4px 2px;
  178. color: #000;
  179. text-decoration: none;
  180. transition: background-size .2s;
  181. -webkit-transition:0.6s ease-out;
  182. }
  183.  
  184. #navigation a:hover {
  185. word-spacing:15px;
  186. background-size: 4px 50px;
  187. -webkit-transition:0.6s ease-out;
  188. }
  189.  
  190. #closeout {
  191. font-family:'Palanquin Dark', sans-serif;
  192. font-size:11px;
  193. top:5px;
  194. right:15px;
  195. position:absolute;
  196. z-index:999;
  197. }
  198.  
  199. #closeout:hover {
  200. color:#fff;
  201. -webkit-transition:0.1s ease-in-out;
  202. }
  203.  
  204. /*HOME PAGE*/
  205.  
  206. #home {
  207. width:550px;
  208. margin-top:22px;
  209. margin-left:-15px;
  210. }
  211.  
  212. #home img {
  213. width:450px;
  214. height:215px;
  215. margin:0 auto;
  216. display:block;
  217. position:relative;
  218. border-radius:3px;
  219. transition: filter .8s ease-in-out;
  220. -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  221. filter: grayscale(100%); /* FF 35+ */
  222. }
  223.  
  224. #home img:hover {
  225. transition: filter .8s ease-in-out;
  226. -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  227. filter: grayscale(0%); /* FF 35+ */
  228. }
  229.  
  230. table {
  231. font-family:open sans;
  232. font-size:9px;
  233. border-collapse:collapse;
  234. margin:0 auto;
  235. margin-top:17px;
  236. margin-left:65px;
  237. }
  238.  
  239. table, th, td {
  240. font-size:9px;
  241. font-weight:normal;
  242. text-align:left;
  243. vertical-align: super;
  244. overflow:visible;
  245. border: 0px solid white;
  246. }
  247.  
  248. #numbers {
  249. color:#404040;
  250. font-family:'Palanquin Dark', sans-serif;
  251. font-size:40px;
  252. line-height:15px;
  253. letter-spacing:-2px;
  254. }
  255.  
  256. #hometitles {
  257. font-family:arial;
  258. font-size:8px;
  259. font-weight:bold;
  260. letter-spacing:3px;
  261. text-align:left;
  262. float:left;
  263. text-transform:uppercase;
  264. margin-left:50px;
  265. margin-top:-5px;
  266. padding-left:4px;
  267. }
  268.  
  269. #bottomrow {
  270. width:100px;
  271. margin-left:30px;
  272. margin-right:80px;
  273. }
  274.  
  275. #hometext {
  276. font-size:8.5px;
  277. line-height:11px;
  278. width:135px;
  279. margin-left:55px;
  280. margin-bottom:20px;
  281. border-left:1px solid black;
  282. padding-left:10px;
  283. margin-top:14px;
  284. }
  285.  
  286. /*AESTHETIC*/
  287.  
  288. #container2 {
  289. width:450px;
  290. margin-top:60px;
  291. margin-left:80px;
  292. }
  293.  
  294. #container2 img {
  295. width:130px;
  296. height:130px;
  297. border-radius:5px;
  298. }
  299.  
  300. #abox {
  301. width:130px;
  302. height:130px;
  303. margin:5px;
  304. margin-bottom:30px;
  305. float:left;
  306. }
  307.  
  308. #likes {
  309. font-family:'Palanquin Dark', sans-serif;
  310. font-size:12px;
  311. width:120px;
  312. padding:5px;
  313. padding-top:8px;
  314. text-align:left;
  315. letter-spacing:2px;
  316. }
  317.  
  318. /*MOODBOARD*/
  319.  
  320. #gif {
  321. z-index:-2;
  322. position:absolute;
  323. margin-top:25px;
  324. margin-left:200px;
  325. }
  326.  
  327. #gif img {
  328. width:320px;
  329. height:auto;
  330. border-radius:2px;
  331. }
  332.  
  333. #fashion {
  334. margin-top:210px;
  335. margin-left:250px;
  336. transform: rotate(-1deg);
  337. position:absolute;
  338. z-index:-1;
  339. filter: drop-shadow(1px 1px 4px #737373);
  340. }
  341.  
  342. #fashion img {
  343. width:260px;
  344. height:190px;
  345. border-radius:2px;
  346. }
  347.  
  348. .tape {
  349. width:90px;
  350. height:auto;
  351. margin-top:195px;
  352. margin-left:315px;
  353. z-index:1;
  354. position:absolute;
  355. }
  356.  
  357. #general {
  358. margin-top:78px;
  359. margin-left:100px;
  360. z-index:-1;
  361. position:absolute;
  362. }
  363.  
  364. #general img {
  365. width:125px;
  366. height:125px;
  367. border-radius:2px;
  368. }
  369.  
  370. #polaroid {
  371. z-index:5px;
  372. position:absolute;
  373. width:175px;
  374. height:130px;
  375. border:10px solid white;
  376. margin-top:200px;
  377. margin-left:60px;
  378. border-radius:2px;
  379. transform:rotate(1deg);
  380. filter: drop-shadow(0px 0px 1px #737373);
  381. }
  382.  
  383. #polaroid img {
  384. width:175px;
  385. height:130px;
  386. }
  387.  
  388. #pin {
  389. z-index:6;
  390. position:absolute;
  391. margin-top:160px;
  392. margin-left:80px;
  393. transform:rotate(3deg);
  394. filter: drop-shadow(3px 3px 3px #737373);
  395. }
  396.  
  397. #pin img {
  398. width:70px;
  399. height:auto;
  400. }
  401.  
  402. #quote {
  403. width:200px;
  404. font-family:'cepttoni';
  405. font-size:40px;
  406. font-weight:bold;
  407. letter-spacing:2px;
  408. line-height:20px;
  409. text-align:left;
  410. margin-top:30px;
  411. margin-left:70px;
  412. transform: rotate(4deg);
  413. z-index:7;
  414. position:absolute;
  415. }
  416.  
  417. #colorpalette {
  418. width:400px;
  419. height:60px;
  420. margin-top:370px;
  421. margin-left:100px;
  422. position:absolute;
  423. z-index:8;
  424. }
  425.  
  426. #colors {
  427. width:45px;
  428. height:45px;
  429. float:left;
  430. margin-top:50px;
  431. margin:10px;
  432. box-shadow: -1px 1px 1px #e0e0e0;
  433. border:4px solid white;
  434. border-bottom:12px solid white;
  435. }
  436.  
  437. .color1 {
  438. background-color:#colorhere;
  439. }
  440.  
  441. .color2 {
  442. background-color:#colorhere;
  443. }
  444.  
  445. .color3 {
  446. background-color:#colorhere;
  447. }
  448.  
  449. .color4 {
  450. background-color:#colorhere;
  451. }
  452.  
  453. .color5 {
  454. background-color:#colorhere;
  455. }
  456.  
  457. /*BIOGRAPHY*/
  458.  
  459. #biotitle {
  460. font-family:'cepttoni';
  461. font-size:120px;
  462. letter-spacing:0px;
  463. margin-top:360px;
  464. margin-left:120px;
  465. transform: rotate(1.5deg);
  466. opacity:.1;
  467. }
  468.  
  469. #bio {
  470. font-family:open sans;
  471. font-size:9px;
  472. width:420px;
  473. height:300px;
  474. margin:0 auto;
  475. margin-top:-340px;
  476. padding:10px;
  477. overflow-x:hidden;
  478. overflow-y:scroll;
  479. border:1px solid black;
  480. border-radius:2px;
  481. }
  482.  
  483. #bio::-webkit-scrollbar { width: 3px; background-color: #eee; }
  484.  
  485. #bio::-webkit-scrollbar-track {border:1px solid #eee; background-color: #404040; }
  486.  
  487. #bio::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #404040; }
  488.  
  489. /*CONNECTIONS*/
  490.  
  491. #container4 {
  492. width:450px;
  493. margin-top:15px;
  494. margin-left:70px;
  495. }
  496.  
  497. #container4 img {
  498. width:100px;
  499. height:100px;
  500. margin-left:10px;
  501. -webkit-clip-path: polygon(40% 0, 0% 100%, 100% 84%);
  502. clip-path: polygon(40% 0, 0% 100%, 100% 84%);
  503. }
  504.  
  505. #cbox {
  506. width:130px;
  507. height:200px;
  508. margin:5px;
  509. margin-bottom:5px;
  510. float:left;
  511. }
  512.  
  513. #ctitle {
  514. font-family:arial;
  515. font-size:8px;
  516. font-weight:bold;
  517. letter-spacing:3px;
  518. text-transform:uppercase;
  519. padding:6px 5px 0px 5px;
  520. }
  521.  
  522. #cname {
  523. font-family:'Palanquin Dark', sans-serif;
  524. font-size:9px;
  525. font-weight:bold;
  526. padding:0px 5px 0px 5px;
  527. }
  528.  
  529. #cdesc {
  530. font-family:open sans;
  531. font-size:8px;
  532. width:115px;
  533. height:60px;
  534. padding:0px 5px 0px 5px;
  535. text-align:left;
  536. overflow-x:hidden;
  537. overflow-y:scroll;
  538. }
  539.  
  540. #cdesc::-webkit-scrollbar { width: 3px; background-color: #eee; }
  541.  
  542. #cdesc::-webkit-scrollbar-track {border:1px solid #eee; background-color: #404040; }
  543.  
  544. #cdesc::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #404040; }
  545.  
  546.  
  547. /*CODES BY PAINTHEMES.TUMBLR.COM*/
  548. .popup_block{
  549. width:500px;
  550. height:450px;
  551. display:none;
  552. background:#eee;
  553. top:59%;
  554. left:63%;
  555. position:absolute;
  556. z-index: 99999;
  557. border:0px solid black;
  558. }
  559.  
  560. #fade {
  561. display:none;
  562. position:fixed;
  563. left:0px;
  564. top:0px;
  565. width:100%;
  566. height:100%;
  567. z-index:9999;
  568. opacity:.5;
  569. }
  570.  
  571. *html #fade {position: absolute;}
  572. *html .popup_block {position: absolute;}
  573. /*CODES BY PAINTHEMES.TUMBLR.COM*/
  574.  
  575. </style>
  576. </head>
  577.  
  578. <body>
  579.  
  580. <div id="container">
  581.  
  582. <div id="left">
  583. <div id="heading">full name</div>
  584. <div id="title">name.</div>
  585. <div id="title2">name</div>
  586.  
  587. <div id="sidenav">
  588. <a href="/">blog</a>
  589. <a href="https://tumblr.com/dashboard">dashboard</a>
  590. <a href="https://erika-writes.tumblr.com">credit</a>
  591. </div>
  592. </div>
  593.  
  594. <div id="right">
  595.  
  596. <!-- START OF TOP NAVIGATION -->
  597.  
  598. <div id="navigation">
  599.  
  600. <div id="closeout">x</div>
  601.  
  602. <a href="/">home</a>
  603.  
  604. <a href="#?w=550" rel="aesthetic" class="poplight">aesthetic</a>
  605.  
  606. <a href="#?w=550" rel="moodboard" class="poplight">moodboard</a>
  607.  
  608. <a href="#?w=550" rel="biography" class="poplight">biography</a>
  609.  
  610. <a href="#?w=550" rel="connections" class="poplight">connections</a>
  611.  
  612. <!-- END OF TOP NAVIGATION -->
  613.  
  614. <!-- MAIN PAGE -->
  615.  
  616. <div id="home">
  617.  
  618. <img src="IMAGE URL HERE">
  619.  
  620. <table>
  621.  
  622. <tr><th>
  623. <div id="numbers">01</div>
  624. <div id="hometitles">basics</div>
  625. <div id="hometext">
  626. <b>name</b> goes by <b>nickname</b>. she turned <b>age</b> on <b>birthday</b>.
  627. </div>
  628. </th>
  629.  
  630. <th>
  631. <div id="numbers">02</div>
  632. <div id="hometitles">gender</div>
  633. <div id="hometext">
  634. she is <b>gender</b> who goes by <b>she/her</b> pronouns. she is <b>sexual orentation</b>.
  635. </div>
  636. </th>
  637.  
  638. <tr><th><div id="bottomrow">
  639. <div id="numbers">03</div>
  640. <div id="hometitles">traits</div>
  641. <div id="hometext">
  642. she has <b>hazel</b> eyes and <b>brown</b> hair. she is <b>height</b>.
  643. </div>
  644. </th>
  645.  
  646. <th><div id="bottomrow">
  647. <div id="numbers">04</div>
  648. <div id="hometitles">personality</div>
  649. <div id="hometext">
  650. she is a <b>zodiac</b>, her moral alignment is <b>blank</b>, her hogwart's house is <b>blank</b> and her mbti is <b>blank</b>.
  651. </div>
  652. </th>
  653.  
  654. </tr>
  655. </table>
  656.  
  657. </div>
  658. </div>
  659.  
  660. <!-- AESTHETIC -->
  661.  
  662. <div id="aesthetic" class="popup_block">
  663. <div id="container2">
  664.  
  665. <div id="abox">
  666. <img src="IMAGE URL HERE">
  667. <div id="likes"><i class="fas fa-heart" font style="color:crimson"></i> <i class="far fa-comment"></i> <i class="far fa-paper-plane"></i>
  668. </div>
  669. </div>
  670.  
  671. <div id="abox">
  672. <img src="IMAGE URL HERE">
  673. <div id="likes"><i class="fas fa-heart" font style="color:crimson"></i> <i class="far fa-comment"></i> <i class="far fa-paper-plane"></i>
  674. </div>
  675. </div>
  676.  
  677. <div id="abox">
  678. <img src="IMAGE URL HERE">
  679. <div id="likes"><i class="fas fa-heart" font style="color:crimson"></i> <i class="far fa-comment"></i> <i class="far fa-paper-plane"></i>
  680. </div>
  681. </div>
  682.  
  683. <div id="abox">
  684. <img src="IMAGE URL HERE">
  685. <div id="likes"><i class="fas fa-heart" font style="color:crimson"></i> <i class="far fa-comment"></i> <i class="far fa-paper-plane"></i>
  686. </div>
  687. </div>
  688.  
  689. <div id="abox">
  690. <img src="IMAGE URL HERE">
  691. <div id="likes"><i class="fas fa-heart" font style="color:crimson"></i> <i class="far fa-comment"></i> <i class="far fa-paper-plane"></i>
  692. </div>
  693. </div>
  694.  
  695. <div id="abox">
  696. <img src="IMAGE URL HERE">
  697. <div id="likes"><i class="fas fa-heart" font style="color:crimson"></i> <i class="far fa-comment"></i> <i class="far fa-paper-plane"></i>
  698. </div>
  699. </div>
  700.  
  701. </div></div>
  702.  
  703. <!-- MOODBOARD -->
  704.  
  705. <div id="moodboard" class="popup_block">
  706.  
  707. <div id="quote">quote here</div>
  708.  
  709. <div id="pin"><img src="PIN IMAGE HERE"></div>
  710.  
  711. <div id="general"><img src="IMAGE URL HERE"></div>
  712.  
  713. <div id="polaroid"><img src="IMAGE URL HERE"></div>
  714.  
  715. <img src="https://www.freeiconspng.com/uploads/masking-tape-png-12.png" class="tape">
  716.  
  717. <div id="fashion"><img src="IMAGE URL HERE"></div>
  718.  
  719. <div id="gif"><img src="GIF URL HERE"></div>
  720.  
  721. <div id="colorpalette">
  722. <div id="colors" class="color1"></div>
  723. <div id="colors" class="color2"></div>
  724. <div id="colors" class="color3"></div>
  725. <div id="colors" class="color4"></div>
  726. <div id="colors" class="color5"></div>
  727. </div>
  728.  
  729. </div>
  730.  
  731. <!-- BIOGRAPHY-->
  732.  
  733. <div id="biography" class="popup_block">
  734.  
  735. <div id="container2">
  736.  
  737. <div id="biotitle">the full story</div>
  738.  
  739. <div id="bio">text goes here! this scrolls so it can be as long as you want. you should probably fill up the entire box so it looks best but do w/e i'm not in charge of your life.</div>
  740.  
  741. </div>
  742. </div>
  743.  
  744. <!-- CONNECTIONS-->
  745.  
  746. <div id="connections" class="popup_block">
  747. <div id="container4">
  748.  
  749. <div id="cbox">
  750. <img src="IMAGE URL HERE">
  751. <div id="ctitle">title</div>
  752. <div id="cname">name</div>
  753. <div id="cdesc">text here (this scrolls! write as much as you want.)
  754. </div>
  755. </div>
  756.  
  757. <div id="cbox">
  758. <img src="IMAGE URL HERE">
  759. <div id="ctitle">title</div>
  760. <div id="cname">name</div>
  761. <div id="cdesc">text here (this scrolls! write as much as you want.)
  762. </div>
  763. </div>
  764.  
  765. <div id="cbox">
  766. <img src="IMAGE URL HERE">
  767. <div id="ctitle">title</div>
  768. <div id="cname">name</div>
  769. <div id="cdesc">text here (this scrolls! write as much as you want.)
  770. </div>
  771. </div>
  772.  
  773. <div id="cbox">
  774. <img src="IMAGE URL HERE">
  775. <div id="ctitle">title</div>
  776. <div id="cname">name</div>
  777. <div id="cdesc">text here (this scrolls! write as much as you want.)
  778. </div>
  779. </div>
  780.  
  781. <div id="cbox">
  782. <img src="IMAGE URL HERE">
  783. <div id="ctitle">title</div>
  784. <div id="cname">name</div>
  785. <div id="cdesc">text here (this scrolls! write as much as you want.)
  786. </div>
  787. </div>
  788.  
  789. <div id="cbox">
  790. <img src="IMAGE URL HERE">
  791. <div id="ctitle">title</div>
  792. <div id="cname">name</div>
  793. <div id="cdesc">text here (this scrolls! write as much as you want.)
  794. </div>
  795. </div>
  796.  
  797. </div></div>
  798.  
  799. <!-- END OF CODE -->
  800.  
  801. </div> </div> </div> </div> </body>
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!