API tools faq
paste
Advertisement
artiecore

windows xp love letter

artiecore
May 31st, 2022 (edited)
2,509
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.32 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5. ♡ windows xp love letter theme by joyfriend ♡
  6.  
  7. im sorry for hyperfixating on windows os do u still think im hot
  8.  
  9. base code by animecharacter, audio parts by tobirama, xp parts from https://github.com/botoxparty/XP.css
  10. ----->
  11.  
  12.  
  13. <meta charset="utf-8">
  14. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  15. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="https://static.tumblr.com/rtrqcib/VGGnlh8rf/jquery.style-my-tooltips.min.js"></script><script>(function($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:0,attribute:"title"});});})(jQuery);</script>
  16. {block:Description}
  17. <meta name="description" content="{MetaDescription}" />
  18. {/block:Description}
  19.  
  20.  
  21. <link rel="shortcut icon" href="{image:favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{rss}">
  23. <link rel="stylesheet" href="https://unpkg.com/xp.css" />
  24.  
  25.  
  26. <title>{Title}</title>
  27.  
  28. <link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  29. <link href="https://fonts.googleapis.com/css?family=Short+Stack&display=swap" rel="stylesheet">
  30.  
  31. <script>F
  32. document.addEventListener('contextmenu', event => event.preventDefault());
  33. </script>
  34.  
  35.  
  36.  
  37.  
  38.  
  39. <meta name="color:background" content="#ffffff"/>
  40. <meta name="color:posts" content="#fff"/>
  41. <meta name="color:container" content="#fff"/>
  42. <meta name="color:sidebar" content="#fff"/>
  43. <meta name="color:sidebar gradient1" content="#056cfc"/>
  44. <meta name="color:sidebar gradient2" content="#0841ca"/>
  45. <meta name="color:sidebar accent" content="#eaeada"/>
  46. <meta name="color:sidebar border" content="#000">
  47. <meta name="color:desc border" content="#000">
  48. <meta name="color:post border" content="#000">
  49. <meta name="color:sidebar glow" content="#000">
  50. <meta name="color:post glow" content="#000">
  51. <meta name="color:text" content="#000"/>
  52. <meta name="color:link" content="#0008ff"/>
  53. <meta name="color:link hover" content="#7118a8"/>
  54. <meta name="color:text glow" content="#000000"/>
  55. <meta name="color:link glow" content="#000000"/>
  56. <meta name="color:selection bg" content="#fff"/>
  57. <meta name="color:selection text" content="#000"/>
  58. <meta name="color:footer border" content="#000">
  59. <meta name="color:footer" content=""/>
  60. <meta name="color:tooltip text" content="#fff"/>
  61. <meta name="color:tooltip border" content="#fff"/>
  62.  
  63. <meta name="image:favicon" content="">
  64. <meta name="image:sidebar" content=""/>
  65. <meta name="image:background" content="" />
  66.  
  67. <meta name="if:classic winxp" content="" />
  68. <meta name="if:redirect" content="" />
  69. <meta name="if:cover bg" content="" />
  70. <meta name="if:desc border" content="" />
  71. <meta name="if:footer border" content="" />
  72. <meta name="if:post border" content="" />
  73. <meta name="if:post glow" content="" />
  74. <meta name="if:rounded sidebar" content="1" />
  75. <meta name="if:sidebar border" content="" />
  76. <meta name="if:sidebar glow" content="" />
  77. <meta name="if:container bg" content="" />
  78. <meta name="if:container glow" content="" />
  79. <meta name="if:glow links" content="" />
  80. <meta name="if:glow text" content="" />
  81. <meta name="if:link underline" content="" />
  82.  
  83. <meta name="text:font size" content="12px">
  84. <meta name="text:description" content="sniff hiii omg hiii sniff sniff sniff gets closer sniff sniff"/>
  85. <meta name="text:redirect" content=""/>
  86. <meta name="text:link divider" content="/"/>
  87. <meta name="text:border size" content="3px" />
  88.  
  89. <meta name="text:link1" content="one">
  90. <meta name="text:url1" content="">
  91. <meta name="text:link2" content="two">
  92. <meta name="text:url2" content="">
  93. <meta name="text:ask text" content="three">
  94. <meta name="text:link4" content="four">
  95. <meta name="text:url4" content="">
  96.  
  97. <meta name="select:font" content="arial">
  98. <meta name="select:font" content="verdana">
  99. <meta name="select:font" content="courier">
  100. <meta name="select:font" content="georgia">
  101. <meta name="select:font" content="times new roman">
  102. <meta name="select:font" content="ms gothic"/>
  103. <meta name="select:font" content="short stack"/>
  104. <meta name="select:font" content="comic sans ms">
  105. <meta name="select:font" content="ms sans serif">
  106.  
  107.  
  108. <meta name="select:border type" content="solid" />
  109. <meta name="select:border type" content="double" />
  110. <meta name="select:border type" content="dashed" />
  111. <meta name="select:border type" content="dotted" />
  112. <meta name="select:border type" content="outset">
  113. <meta name="select:border type" content="inset">
  114.  
  115. <meta name="select:post border type" content="solid" />
  116. <meta name="select:post border type" content="double" />
  117. <meta name="select:post border type" content="dashed" />
  118. <meta name="select:post border type" content="dotted" />
  119. <meta name="select:post border type" content="outset">
  120. <meta name="select:post border type" content="inset">
  121.  
  122.  
  123. {block:ifredirect}
  124. {block:IndexPage}<script type="text/javascript">
  125. var url = location.href;
  126. if (url == "{BlogURL}") {
  127. window.location = "{BlogURL}tagged/{text:redirect}";
  128. }
  129. </script>{/block:IndexPage}
  130. {/block:ifredirect}
  131.  
  132. <style type="text/css">
  133.  
  134.  
  135. ::selection {
  136. background: {color:selection bg};
  137. color:{color:selection text};
  138. }
  139.  
  140.  
  141. .tooltip{
  142. display:inline;
  143. position:relative;
  144. }
  145.  
  146. #s-m-t-tooltip{
  147. max-width:300px;
  148. padding:5px;
  149. margin:20px 7px -2px 20px;
  150. background-color: rgba(0, 0, 0, 0.4);
  151. backdrop-filter: blur(3px);
  152. border:1px solid white;
  153. color:#fff;
  154. letter-spacing:1px;
  155. text-align:center;
  156. color:{color:tooltip text};
  157. text-shadow: -1px 0 {color:tooltip border}, 0 1px {color:tooltip border}, 1px 0 {color:tooltip border}, 0 -1px {color:tooltip border};
  158. z-index:99999999999999999999;
  159. -o-transition: all 0.3s ease-out;
  160. -webkit-transition: all 0.3s ease-out;
  161. -moz-transition: all 0.3s ease-out;
  162. }
  163.  
  164.  
  165.  
  166. /*
  167. general text styles, fonts and colours
  168. */
  169.  
  170. body {
  171. margin:0px;
  172. color:{color:text};
  173. {block:ifglowtext}
  174. text-shadow: 0 0 3px {color:text glow}, 0 0 15px {color:text glow}, 0 0 3px {color:text glow};
  175. {/block:ifglowtext}
  176. background:{color:background};
  177. background-image: url('{image:background}');
  178. {block:ifnotcoverbg}
  179. background-repeat: repeat;
  180. background-attachment: fixed;
  181. {/block:ifnotcoverbg}
  182. {block:ifcoverbg}
  183. background-size: cover;
  184. background-attachment: fixed;
  185. {/block:ifcoverbg}
  186. color:{color:text};
  187. font-family: {select:font};
  188. font-size: {text:font size};
  189.  
  190. }
  191.  
  192. @font-face {
  193. font-family: ms sans serif;
  194. src: url(https://dl.dropbox.com/s/nsars34hvq71zyx/MS%20Sans%20Serif%208pt.ttf);
  195. }
  196.  
  197.  
  198.  
  199.  
  200. p{
  201. margin:0 0 10px 0;
  202. padding:0;
  203. }
  204.  
  205. pre {
  206. white-space: pre-wrap;
  207. white-space: -moz-pre-wrap;
  208. white-space: -pre-wrap;
  209. white-space: -o-pre-wrap;
  210. word-wrap: break-word;
  211. }
  212.  
  213. a {
  214. color:{color:link};
  215. {block:ifglowlinks}
  216. text-shadow: 0 0 3px {color:link glow}, 0 0 15px {color:link glow}, 0 0 3px {color:link glow};
  217. {/block:ifglowlinks}
  218. -moz-transition-duration:0.4s;
  219. -webkit-transition-duration:0.4s;
  220. -o-transition-duration:0.4s;
  221. {block:iflinkunderline}
  222. text-decoration:underline;
  223. text-decoration-color: {color:link underline};
  224. {/block:iflinkunderline}
  225. {block:ifnotlinkunderline}
  226. text-decoration:none;
  227. {/block:ifnotlinkunderline}
  228. }
  229.  
  230. a:hover {
  231. color:{color:link hover};
  232. -moz-transition-duration:0.4s;
  233. -webkit-transition-duration:0.4s;
  234. -o-transition-duration:0.4s;
  235. }
  236.  
  237. /*
  238. containers etc
  239. */
  240.  
  241.  
  242. #posts {
  243. width:350px;
  244. padding:10px 10px 1px 10px;
  245. break-inside: avoid;
  246. display:inline-block;
  247. text-align:left;
  248. background-color:{color:posts};
  249. {block:ifpostborder}
  250. border:{text:border size} {select:post border type} {color:post border};
  251. {/block:ifpostborder}
  252. margin-bottom:10px;
  253. {block:ifpostglow}
  254. -moz-box-shadow: 0px 0px 4px 2px {color:post glow};
  255. -webkit-box-shadow: 0px 0px 4px 2px {color:post glow};
  256. box-shadow: 0px 0px 4px 2px {color:post glow};{/block:ifpostglow}
  257. }
  258.  
  259. #haha {
  260. text-align:center;
  261. padding:10px;
  262. margin-bottom:10px;
  263. overflow:auto;
  264. width:350px;
  265. background-color:{color:posts};
  266. {block:ifpostborder}
  267. border:{text:border size} {select:post border type} {color:post border};
  268. {/block:ifpostborder}
  269. margin-bottom:10px;
  270. {block:ifpostglow}
  271. -moz-box-shadow: 0px 0px 4px 2px {color:post glow};
  272. -webkit-box-shadow: 0px 0px 4px 2px {color:post glow};
  273. box-shadow: 0px 0px 4px 2px {color:post glow};{/block:ifpostglow}}
  274.  
  275.  
  276.  
  277. #posts img {
  278. max-width:100%;
  279. height:auto;
  280.  
  281. }
  282.  
  283.  
  284. /*
  285. content in the body of the posts - quotes, asks, etc
  286. "media" contains photos, photosets, videos, audio posts
  287. */
  288. .media{
  289. margin:0 0 10px 0;
  290. width:350px;
  291. }
  292.  
  293. .media img{
  294. width:350px;
  295. }
  296.  
  297. .title{
  298. font-weight:normal;
  299. font-size:18px;
  300. margin:0 0 10px 0;
  301. }
  302.  
  303. .quote{
  304. font-weight:normal;
  305. font-size:16px;
  306. font-style:italic;
  307. margin:0 0 10px 0;
  308. }
  309.  
  310. .question{
  311. margin-bottom:10px;
  312. }
  313.  
  314. blockquote{
  315. margin:0 0 10px 10px;
  316. padding:0 0 0 10px;
  317. border-left:solid 1px #000;
  318. }
  319.  
  320. /*
  321. post footers - date, tags, via and source
  322. */
  323. .post .footer{
  324. margin:0;
  325. text-align:left;
  326. }
  327.  
  328.  
  329. .footer {
  330. background-color:{color:footer};
  331. {block:iffooterborder}
  332. border:{text:border size} {select:border type} {color:footer border};
  333. {/block:iffooterborder}
  334. margin-bottom: 10px;
  335. padding: 5px;
  336. }
  337.  
  338. .spotify_audio_player {
  339. height:80px!important;
  340. width:100%!important;}
  341.  
  342. .soundcloud_audio_player {
  343. height:150px!important;
  344. width:100%!important;}
  345.  
  346. /* playbutton background */
  347.  
  348. .trackback {
  349. position: absolute;
  350. left: 20px;
  351. top: 20px;
  352. width: 19px;
  353. height: 19px;
  354. background-color: #fff;
  355. padding: 10px;
  356. opacity: .4;}
  357.  
  358. /* playbutton */
  359.  
  360. .pressplay{
  361. position: relative;
  362. width: 25px;
  363. height: 25px;
  364. overflow: hidden;
  365. left: -6px;
  366. top: -3px;}
  367.  
  368. /* album img container */
  369.  
  370. .albumpic {
  371. position: absolute;
  372. left: 0px;
  373. top: 0px;
  374. width: 79px;
  375. height: 79px;}
  376.  
  377. /* album img */
  378.  
  379. .albumpic img {
  380. width: 100%;
  381. height: auto;
  382. border: 1px solid {color:font color};}
  383.  
  384. /* track info ye */
  385.  
  386. .trackinfo {
  387. width: auto;
  388. display:inline-block;
  389. margin-left:90px;
  390. min-height: 85px;}
  391.  
  392. /* makes both audio player & track info inline */
  393.  
  394. .audiowrapper {
  395. position: relative; display:inline-block;}
  396.  
  397.  
  398.  
  399. /*
  400. post notes
  401. */
  402. ol.notes{
  403. list-style-type:none;
  404. padding:0;
  405. margin:0;
  406. }
  407.  
  408. ol.notes li.note img{
  409. width:16px;
  410. height:16px;
  411. }
  412.  
  413. ol.notes li.note{
  414. margin:0px;
  415. }
  416.  
  417. #con {
  418. margin-left:80px;
  419. margin-top:100px;
  420. position:fixed;
  421.  
  422.  
  423. }
  424.  
  425. #entries {
  426. width:850px;
  427. padding:10px;
  428. margin-left:500px;
  429. column-count: 2;
  430. column-gap: 5px;
  431. margin-top:25px;
  432. margin-bottom:25px;
  433. padding:10px;
  434. z-index:-1;
  435. {block:ifcontainerbg}
  436. background-color:{color:container};
  437. {/block:ifcontainerbg}
  438. {block:ifcontainerglow}
  439. -moz-box-shadow: 0px 0px 4px 2px {color:post glow};
  440. -webkit-box-shadow: 0px 0px 4px 2px {color:post glow};
  441. box-shadow: 0px 0px 4px 2px {color:post glow};{/block:ifcontainerglow}
  442. }
  443.  
  444.  
  445.  
  446.  
  447.  
  448.  
  449. #p{
  450. float:left;
  451. }
  452.  
  453. #n{
  454. float:right;
  455. }
  456.  
  457.  
  458.  
  459. #kill{
  460. width:330px;
  461. padding:5px;
  462. background-color:{color:sidebar};
  463. text-align:left;
  464. {block:ifsidebarborder}
  465. border:{text:border size} {select:post border type} {color:sidebar border};
  466. border-top:none;
  467. width:calc(330px - 2 * {text:border size});
  468. {/block:ifsidebarborder}
  469. }
  470.  
  471. #mydiv {
  472.  
  473. position: absolute;
  474. z-index: 9;
  475. background-color:{color:sidebar};
  476. text-align: center;
  477. {block:ifroundedsidebar}
  478. border-radius:5px;
  479. {/block:ifroundedsidebar}
  480.  
  481. width:360px;
  482. {block:ifsidebarglow}
  483. -moz-box-shadow: 0px 0px 4px 2px {color:sidebar glow};
  484. -webkit-box-shadow: 0px 0px 4px 2px {color:sidebar glow};
  485. box-shadow: 0px 0px 4px 2px {color:sidebar glow};{/block:ifsidebarglow}
  486. }
  487.  
  488. #mydiv img{
  489. width:100%;
  490. height:auto;
  491. }
  492.  
  493. #mydivheader {
  494. padding: 7px;
  495. cursor: move;
  496. text-align:left;
  497. z-index: 10;
  498. color: #fff;
  499. {block:ifclassicwinxp}
  500. background-image: url('https://i.imgur.com/qJZjYWq.png');
  501. {/block:ifclassicwinxp}
  502. {block:ifnotclassicwinxp}
  503. background:{color:sidebar gradient1};
  504. {/block:ifnotclassicwinxp}
  505.  
  506. background-repeat: repeat;
  507. background-size: 200px;
  508. {block:ifroundedsidebar}
  509. border-radius:5px 5px 0px 0px; {/block:ifroundedsidebar}
  510.  
  511.  
  512. }
  513.  
  514.  
  515. #peep{
  516. {block:ifclassicwinxp}
  517. background:#2662df;
  518. {/block:ifclassicwinxp}
  519.  
  520. {block:ifnotclassicwinxp}
  521. background: linear-gradient(180deg, {color:sidebar gradient1} 0%, {color:sidebar gradient2} 100%);
  522. {/block:ifnotclassicwinxp}
  523.  
  524.  
  525. background-repeat: no-repeat;
  526. background-size: cover;
  527. padding-left:10px;
  528. padding-bottom:10px;
  529. {block:ifroundedsidebar}
  530. border-radius:0px 0px 5px 5px;
  531. {/block:ifroundedsidebar}
  532.  
  533. }
  534.  
  535.  
  536.  
  537. .capy{
  538. float:right;
  539. }
  540.  
  541. #description {
  542. margin-top:10px;
  543. margin-left:-10px;
  544. margin-bottom:10px;
  545. max-height: 100px;
  546. width:155px;
  547. overflow:auto;
  548. padding:4px;
  549. text-align:center;
  550. {block:ifdescborder}
  551. border:{text:border size} solid {color:desc border};
  552. {/block:ifdescborder}
  553. background-color:{color:sidebar};
  554. }
  555.  
  556. /* The Modal (background) */
  557. .modal {
  558. display: none; /* Hidden by default */
  559. position: fixed; /* Stay in place */
  560. z-index: 1; /* Sit on top */
  561. padding-top: 280px; /* Location of the box */
  562. padding-left: 240px; /* Location of the box */
  563. left: 0;
  564. top: 0;
  565. width: 100%; /* Full width */
  566. height: 100%; /* Full height */
  567. overflow: auto; /* Enable scroll if needed */
  568. }
  569.  
  570. /* Modal Content */
  571. .modal-content {
  572. background-color: #fefefe;
  573. margin: auto;
  574. padding: 20px;
  575. border: 1px solid #888;
  576. width: 80%;
  577. }
  578.  
  579. /* The Close Button */
  580. .close {
  581. color: #aaaaaa;
  582. float: right;
  583. font-size: 20px;
  584. font-weight: bold;
  585. }
  586.  
  587. .close:hover,
  588. .close:focus {
  589. color: #000;
  590. text-decoration: none;
  591. cursor: pointer;
  592. }
  593.  
  594.  
  595. #meowdiv {
  596. position: absolute;
  597. z-index: 9;
  598. text-align: center;
  599. {block:ifroundedsidebar}
  600. border-radius:5px;
  601. {/block:ifroundedsidebar}
  602. height:auto;
  603. overflow:auto;
  604. width:360px;
  605. {block:ifsidebarglow}
  606. -moz-box-shadow: 0px 0px 4px 2px {color:sidebar glow};
  607. -webkit-box-shadow: 0px 0px 4px 2px {color:sidebar glow};
  608. box-shadow: 0px 0px 4px 2px {color:sidebar glow};{/block:ifsidebarglow}
  609. }
  610.  
  611.  
  612.  
  613. #meowdivheader {
  614. padding: 5px;
  615. height:20px;
  616. cursor: move;
  617. text-align:left;
  618. z-index: 10;
  619. color: #fff;
  620. {block:ifclassicwinxp}
  621. background-image: url('https://i.imgur.com/qJZjYWq.png');
  622. {block:ifclassicwinxp}
  623. {block:ifnotclassicwinxp}
  624. background-color:{color:sidebar gradient1};
  625. {/block:ifnotclassicwinxp}
  626. background-repeat: repeat;
  627. background-size: 230px;
  628. padding:10px;
  629. {block:ifroundedsidebar}
  630. border-radius:5px 5px 0px 0px;{/block:ifroundedsidebar}
  631.  
  632. }
  633.  
  634. #mybtn {
  635. cursor: pointer;
  636. }
  637.  
  638. #monkey{
  639. position:fixed;
  640. font-size:15px;
  641. width:48px;
  642. text-align:center;
  643. left:10px;
  644. bottom:10px;
  645. }
  646.  
  647. #monkey a{
  648. color:white;
  649. text-decoration:none;
  650. text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  651.  
  652. }
  653.  
  654.  
  655. #meowe{
  656. width:330px;
  657. padding:5px;
  658. background:{color:sidebar accent};
  659. text-align:left;
  660. {block:ifsidebarborder}
  661. border:{text:border size} {select:post border type} {color:sidebar border};
  662. border-bottom:none;
  663. width:calc(330px - 2 * {text:border size});
  664. {/block:ifsidebarborder}
  665.  
  666. }
  667.  
  668. #arf{
  669. {block:ifclassicwinxp}
  670. background:#2662df;
  671. {/block:ifclassicwinxp}
  672.  
  673. {block:ifnotclassicwinxp}
  674. background: linear-gradient(180deg, {color:sidebar gradient1} 0%, {color:sidebar gradient2} 100%);
  675. {/block:ifnotclassicwinxp}
  676. background-repeat: no-repeat;
  677. background-size: cover;
  678.  
  679. padding-left:10px;
  680. padding-bottom:10px;
  681. {block:ifroundedsidebar}
  682. border-radius:0px 0px 5px 5px;{/block:ifroundedsidebar}
  683. }
  684.  
  685.  
  686. {CustomCSS}
  687. </style>
  688.  
  689. </head>
  690.  
  691.  
  692. <body>
  693.  
  694. <!-- Trigger/Open The Modal -->
  695.  
  696. <!-- The Modal -->
  697. <div id="myModal" class="modal">
  698.  
  699. <!-- Modal content -->
  700. <div id="meowdiv">
  701. <div id="meowdivheader">
  702. <img src="https://i.imgur.com/x8ykBYn.png" style="width:17px; height:17px;"> New - instant message
  703.  
  704. <span class="close"> <div class="title-bar-controls">
  705. <button aria-label="Minimize"></button>
  706. <button aria-label="Maximize"></button><button aria-label="Close"></button> </span> </div></div>
  707.  
  708. <div id="arf">
  709. <div id="meowe">File Edit Format View Help </div>
  710. <p style="margin-bottom:-4px; margin-left:-10px"><iframe frameborder="0" scrolling="no" width="340px" height="232px" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:{color:posts}; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  711. </div> </div>
  712.  
  713. <script>
  714. //Make the DIV element draggagle:
  715. dragElement(document.getElementById("meowdiv"));
  716.  
  717. function dragElement(elmnt) {
  718. var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  719. if (document.getElementById(elmnt.id + "header")) {
  720. /* if present, the header is where you move the DIV from:*/
  721. document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  722. } else {
  723. /* otherwise, move the DIV from anywhere inside the DIV:*/
  724. elmnt.onmousedown = dragMouseDown;
  725. }
  726.  
  727. function dragMouseDown(e) {
  728. e = e || window.event;
  729. e.preventDefault();
  730. // get the mouse cursor position at startup:
  731. pos3 = e.clientX;
  732. pos4 = e.clientY;
  733. document.onmouseup = closeDragElement;
  734. // call a function whenever the cursor moves:
  735. document.onmousemove = elementDrag;
  736. }
  737.  
  738. function elementDrag(e) {
  739. e = e || window.event;
  740. e.preventDefault();
  741. // calculate the new cursor position:
  742. pos1 = pos3 - e.clientX;
  743. pos2 = pos4 - e.clientY;
  744. pos3 = e.clientX;
  745. pos4 = e.clientY;
  746. // set the element's new position:
  747. elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  748. elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  749. }
  750.  
  751. function closeDragElement() {
  752. /* stop moving when mouse button is released:*/
  753. document.onmouseup = null;
  754. document.onmousemove = null;
  755. }
  756. }
  757. </script>
  758.  
  759. </div>
  760.  
  761.  
  762.  
  763. <div id="con">
  764.  
  765. <div id="mydiv">
  766. <div id="mydivheader"> <img src="https://i.imgur.com/HQ5C7dV.png" style="width:17px; height:17px;"> about - Notepad
  767. <div class="capy">
  768. <div class="title-bar-controls">
  769. <button aria-label="Minimize"></button>
  770. <button aria-label="Maximize"></button>
  771. <button aria-label="Close"></button>
  772. </div>
  773.  
  774.  
  775. </div>
  776. </div>
  777.  
  778. <div id="peep">
  779.  
  780. <div id="meowe">File Edit Format View Help</div>
  781. <div id="kill">
  782. <table style="width:100%">
  783.  
  784. <tr>
  785. <td style="width: 50%;">
  786.  
  787. <a href="/"><img style="height:auto; max-width:150px"src="{image:sidebar}"></a>
  788.  
  789. </td>
  790.  
  791.  
  792.  
  793. <td style="width: 50%;">
  794. <center>
  795. <p style="margin-left:-10px">
  796. <a href="{text:url1}">{text:link1}</a> {text:link divider}
  797. <a href="{text:url2}">{text:link2}</a> {text:link divider}
  798. <a id="mybtn">{text:ask text}</a> {text:link divider}
  799. <a href="{text:url4}">{text:link4}</a> </p>
  800. {block:ifdescription}<div id ="description">{text:description}</div>{/block:ifdescription}
  801.  
  802. </center>
  803.  
  804.  
  805. </td>
  806. </tr>
  807.  
  808. </table>
  809. </div></div></div>
  810.  
  811. <script>
  812. // Get the modal
  813. var modal = document.getElementById("myModal");
  814.  
  815. // Get the button that opens the modal
  816. var btn = document.getElementById("mybtn");
  817.  
  818. // Get the <span> element that closes the modal
  819. var span = document.getElementsByClassName("close")[0];
  820.  
  821. // When the user clicks the button, open the modal
  822. btn.onclick = function() {
  823. modal.style.display = "block";
  824. }
  825.  
  826. // When the user clicks on <span> (x), close the modal
  827. span.onclick = function() {
  828. modal.style.display = "none";
  829. }
  830.  
  831. </script>
  832.  
  833. <script>
  834. //Make the DIV element draggagle:
  835. dragElement(document.getElementById("mydiv"));
  836.  
  837. function dragElement(elmnt) {
  838. var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  839. if (document.getElementById(elmnt.id + "header")) {
  840. /* if present, the header is where you move the DIV from:*/
  841. document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  842. } else {
  843. /* otherwise, move the DIV from anywhere inside the DIV:*/
  844. elmnt.onmousedown = dragMouseDown;
  845. }
  846.  
  847. function dragMouseDown(e) {
  848. e = e || window.event;
  849. e.preventDefault();
  850. // get the mouse cursor position at startup:
  851. pos3 = e.clientX;
  852. pos4 = e.clientY;
  853. document.onmouseup = closeDragElement;
  854. // call a function whenever the cursor moves:
  855. document.onmousemove = elementDrag;
  856. }
  857.  
  858. function elementDrag(e) {
  859. e = e || window.event;
  860. e.preventDefault();
  861. // calculate the new cursor position:
  862. pos1 = pos3 - e.clientX;
  863. pos2 = pos4 - e.clientY;
  864. pos3 = e.clientX;
  865. pos4 = e.clientY;
  866. // set the element's new position:
  867. elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  868. elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  869. }
  870.  
  871. function closeDragElement() {
  872. /* stop moving when mouse button is released:*/
  873. document.onmouseup = null;
  874. document.onmousemove = null;
  875. }
  876. }
  877. </script>
  878. </div>
  879.  
  880. <div id="entries">
  881.  
  882. {block:Posts}
  883.  
  884. <div id="posts">
  885.  
  886. {block:Quote}
  887. <div id="titlequote"><i class="fa fa-quote-left"></i>&nbsp; {Quote} &nbsp;<i class="fa fa-quote-right"></i></div>
  888. {block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
  889. {/block:Quote}
  890.  
  891. {block:Text}
  892. {block:Title}
  893. <div id="title">{Title}</div>{/block:Title}
  894. {Body}
  895. {/block:Text}
  896.  
  897. {block:link}
  898. <div id="title"><a href="{URL}"><i class="fa fa-link"></i>&nbsp; {Name}</a></div>
  899. {block:Description}{Description}{/block:Description}
  900. {/block:link}
  901.  
  902. {block:Chat}
  903. {block:Title}
  904. <div id="title">{Title}</div>{/block:Title}
  905. {/block:Text}
  906. {block:lines}
  907. {block:label}
  908. <br><b>{label}</b>
  909. {/block:label}
  910. {line}
  911. {/block:lines}
  912. {/block:Chat}
  913.  
  914. {block:Photo}
  915. {linkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{linkCloseTag}
  916. {/block:Photo}
  917.  
  918. {block:Photoset}
  919. <div class="media">{Photoset}</div>
  920. {/block:Photoset}
  921.  
  922. <div class="video">{Video-400}</div>
  923.  
  924. {block:AudioPlayer}
  925. <div class="audiowrapper">
  926. {block:AlbumArt}
  927. <div class="albumpic"><img src="{AlbumArtURL}"></div>
  928. {/block:AlbumArt}
  929. <div class="trackback">
  930. <div class="pressplay">
  931. {AudioPlayer}
  932. </div></div>
  933. <div class="trackinfo">
  934. {block:TrackName}{TrackName}{/block:TrackName}<br>
  935. {block:Artist}<b>{Artist}</b>{/block:Artist}<br>
  936. {block:Album}<i>{Album}</i>{/block:Album}<br>
  937. </div></div>
  938. {/block:AudioPlayer}
  939.  
  940. {block:Answer}
  941. <div class="q">
  942. <div class="as"> <b><big>{Asker} said:</big></b>
  943. {Question}</div></div>
  944. <div class="a">{Answer}</div>
  945. {/block:Answer}
  946.  
  947. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  948.  
  949. <!-- {block:ContentSource} {SourceURL} {/block:ContentSource} {block:RebloggedFrom} {ReblogRootURL} {ReblogParentURL} {/block:RebloggedFrom} -->
  950.  
  951. {block:Date}
  952. <div class="footer">
  953. notes: <a href="{Permalink}"><a href="{Permalink}" title="{timeago}">{notecount}</a>
  954.  
  955. <!-- {block:NoRebloggedFrom}
  956. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  957. {/block:NoRebloggedFrom} -->
  958. {block:ContentSource}<!-- {SourceURL}
  959. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  960. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  961. {/block:ContentSource}
  962. <br>
  963. <div class="tags"> {block:HasTags}filed: {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}</div>
  964.  
  965. </div>
  966. </div>
  967. {block:PermalinkPage}
  968. {block:NoteCount}
  969. {block:PostNotes}{PostNotes}{/block:PostNotes}
  970. {/block:NoteCount}
  971. {/block:PermalinkPage}
  972. {/block:Date}
  973.  
  974.  
  975. {/block:Posts}
  976.  
  977. {block:Pagination}
  978. <div id="haha">
  979. {block:PreviousPage}
  980. <a id="p" href="{PreviousPage}">back</a>
  981. {/block:PreviousPage}
  982.  
  983.  
  984. {block:NextPage}
  985. <a id="n" href="{NextPage}">next</a>
  986. {/block:NextPage}
  987. {/block:Pagination}
  988. </div>
  989.  
  990.  
  991. </div>
  992.  
  993. <!-- hi :) -->
  994.  
  995. <div id="monkey">
  996. <a href="https://joyfriend.tumblr.com/"><img src="https://vignette.wikia.nocookie.net/yaberolan/images/a/a2/Recycle_Bin1.png/revision/latest?cb=20110330082733&path-prefix=sv" width="48px"><br>
  997. <a href="https://joyfriend.tumblr.com/">theme</a></div>
  998.  
  999. </body></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!