API tools faq
paste
Advertisement
chaaostheory

PAGE 03: DIGITAL RIGHTS MANAGEMENT

chaaostheory
Jul 10th, 2018
3,373
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <!-- page 003: digital rights management by @chaaostheory
  6.  
  7. edit to your hearts content, i'd just prefer you'd leave the credit in
  8. -->
  9.  
  10. <title>{Title}</title>
  11.  
  12. <link rel="shortcut icon" href="{favicon}">
  13.  
  14. <!--fonts-->
  15. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
  16.  
  17. <!-- fontawesome-->
  18. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  19. <!--tool tips-->
  20. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  21. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js" type="text/javascript"></script>
  22. <script>
  23. (function($){
  24. $(document).ready(function(){
  25. $("[title]").style_my_tooltips({tip_delay_time:20});
  26. });
  27. })(jQuery);
  28. </script>
  29.  
  30. <!-- hint.css-->
  31. <link href="https://static.tumblr.com/ewjs2wm/ek2pau39z/hint.css" rel="stylesheet" type="text/css">
  32.  
  33. <!--animate-->
  34. <link href="https://static.tumblr.com/ewjs2wm/nItpb9lj4/animate.css" rel="stylesheet" type="text/css"/>
  35.  
  36.  
  37. <script>
  38. function animationHover(element, animation){
  39. element = $(element);
  40. element.hover(
  41. function() {
  42. element.addClass('animated ' + animation);
  43. },
  44. function(){
  45. //wait for animation to finish before removing classes
  46. window.setTimeout( function(){
  47. element.removeClass('animated ' + animation);
  48. }, 2000);
  49. });
  50. }
  51. </script>
  52.  
  53. <script>
  54. $(document).ready(function(){
  55. $('#instagram img').each(function() {
  56. animationHover(this, 'pulse');
  57. });
  58. });
  59. </script>
  60.  
  61.  
  62. <style type="text/css">
  63.  
  64. ::-webkit-scrollbar {
  65. width:2px;
  66. border-radius: 5px;
  67. height: auto;
  68. padding:2px
  69.  
  70. }
  71. ::-webkit-scrollbar-thumb {
  72. background-color:#ddd;
  73. border-radius: 5px;
  74. padding:2px;
  75. }
  76.  
  77. [class*="hint--"]:after{
  78. font-size:10px;
  79. text-transform:uppercase;
  80. font-family:'open sans', sans-serif;
  81. }
  82.  
  83.  
  84. html, body {
  85. background:#333;
  86. width:100%;
  87. height:100%;
  88. font-family:'Open Sans';
  89. font-weight: 300;
  90. font-size:12px;
  91. overflow-y:hidden;
  92. }
  93.  
  94. b {
  95. font-weight:600;
  96. }
  97.  
  98. .container {
  99. width:600px;
  100. height:90%;
  101. background:#fff;
  102. margin:auto;
  103. margin-top:3%;
  104. padding-bottom:10px;
  105. box-shadow: 5px 5px 10px;
  106. overflow-x:hidden;
  107. overflow-y:auto;
  108. }
  109.  
  110. .charactergifs {
  111. margin:auto;
  112. width:384px;
  113. padding:5px;
  114. margin-top:30px;
  115. }
  116.  
  117. .charactergifs img {
  118. width:75px;
  119. margin:0px 25px;
  120. border-radius:100%;
  121. }
  122.  
  123. #name {
  124. transform: rotate(5deg);
  125. width:606px;
  126. margin-left:-3px;
  127. background-color:#000;
  128. color:#fff;
  129. text-align:center;
  130. font-size:25px;
  131. text-transform:uppercase;
  132. }
  133.  
  134. #headertitle {
  135. border-radius: 5px 5px 0px 0px;
  136. color:#fff;
  137. background:#000;
  138. width:300px;
  139. margin-left:10px;
  140. margin-top:30px;
  141. text-align:center;
  142. font-variant: small-caps;
  143. height:25px;
  144. font-size:16px;
  145. }
  146.  
  147. #headertitle i {
  148. font-size:10px;
  149. }
  150.  
  151. #box {
  152. width:298px;
  153. height:200px;
  154. overflow-y:auto;
  155. overflow-x:hidden;
  156. margin-left:10px;
  157. font-weight:400;
  158. text-align:center;
  159. border:1px solid #000;
  160. }
  161.  
  162. #box ul {
  163. padding-bottom:12px;
  164. border-bottom:1px dotted #555;
  165. }
  166.  
  167. #box li {
  168. list-style:none;
  169. border-bottom:1px solid #333;
  170. width:290px;
  171. margin-left:-36px;
  172. margin-bottom:5px;
  173. line-height:18px;
  174. overflow: hidden;
  175.  
  176. }
  177.  
  178. #box b {
  179. text-transform:uppercase;
  180. float:left;
  181. margin-left:5px;
  182. width:100px;
  183. text-align:left;
  184. font-weight:700;
  185. }
  186.  
  187. #box i {
  188. font-style: normal;
  189. float:left;
  190. }
  191.  
  192. .sideimg {
  193. float:right;
  194. margin-top:-227px;
  195. margin-right:10px;
  196. }
  197.  
  198. .sideimg img {
  199. border:1px solid #000;
  200. height:225px;
  201. }
  202.  
  203. #title {
  204. border-radius: 5px 5px 0px 0px;
  205. color:#fff;
  206. background:#000;
  207. width:580px;
  208. margin-left:10px;
  209. margin-top:20px;
  210. text-align:center;
  211. font-variant: small-caps;
  212. height:25px;
  213. font-size:16px;
  214. }
  215.  
  216. #title i {
  217. font-size:10px;
  218. }
  219.  
  220. #twitter {
  221. width:568px; border:1px solid #000;
  222. margin-left:10px;
  223. padding:5px
  224. }
  225.  
  226. #twitterbar img {
  227. width:566px;
  228. }
  229.  
  230. #twittericon {
  231. margin-top:-70px;
  232. margin-left:10px;
  233. }
  234.  
  235. #twittericon img {
  236. border-radius:100%; border:5px solid #fff;
  237. width:100px;
  238. }
  239.  
  240. .sideinfo {
  241. width:150px;
  242. margin-left:5px;
  243. }
  244.  
  245. .userinfo {
  246. border-bottom:1px solid #000;
  247. padding-bottom:5px;
  248. }
  249.  
  250. .tweets {
  251. width:400px;
  252. margin-top:-115px;
  253. margin-left:145px;
  254. }
  255.  
  256. .tweets ul {
  257. list-style:none;
  258. }
  259.  
  260. .tweets li {
  261. border:1px solid #999;
  262. padding:5px;
  263. margin-bottom:5px;
  264. }
  265.  
  266. .tweets i {
  267. background:#ddd;
  268. border-radius:1px;
  269. color:#1DA1F2;
  270. font-style:normal;
  271. }
  272.  
  273. .tweets span {
  274. color: #1DA1F2;
  275. }
  276.  
  277.  
  278. #instagram {
  279. width:578px;
  280. margin-left:10px;
  281. border:1px solid #000;
  282. padding-bottom:5px;
  283. }
  284.  
  285. #instagram img {
  286. padding:10px;
  287. padding-bottom:1px;
  288. width:170px;
  289. }
  290.  
  291. #spotify {
  292. margin-left:10px;
  293. padding:5px;
  294. border:1px solid #000;
  295. width:568px
  296. }
  297.  
  298. #members {
  299. width:578px;
  300. margin-left:10px;
  301. border:1px solid #000;
  302. padding-bottom:5px;
  303. }
  304.  
  305. #linkbox {
  306. width:298px;
  307. height:200px;
  308. overflow-y:auto;
  309. overflow-x:hidden;
  310. font-weight:400;
  311. text-align:center;
  312. border:1px solid #000;
  313. margin-left:290px;
  314.  
  315. }
  316.  
  317. #linkbox a {
  318. font-size: 12px;
  319. text-align: center;
  320. background: #555;
  321. text-transform: uppercase;
  322. color: #fff;
  323. text-decoration: none;
  324. padding: 1px;
  325. display: block;
  326. margin-top: 2px;
  327. font-weight: 300;
  328. -webkit-transition: 0.7s;
  329. transition: 0.7s;
  330. }
  331.  
  332. #linkbox a:hover {
  333. color:#555;
  334. background:#fff;
  335. -webkit-transition: 0.7s;
  336. transition: 0.7s;
  337. }
  338.  
  339.  
  340. /* credit */
  341.  
  342. .credit{
  343. position:fixed;
  344. margin-left:1%;
  345. top:95%
  346. }
  347.  
  348. .credit a{
  349. color:#000;
  350. background:rgba(255,255,255, 0.5);
  351. border-radius:100%;
  352. padding:2px 3px;
  353. font-size:20px;
  354. -webkit-transition: 1s; /* Safari */
  355. transition: 1s;
  356. box-shadow: 2px 1px 0px;
  357. }
  358.  
  359. .credit a:hover{
  360. color:#fff;
  361. background:rgba(0,0,0, 0.5);
  362. -webkit-transition: 1s; /* Safari */
  363. transition: 1s;
  364. }
  365.  
  366. </style>
  367. </head>
  368.  
  369. <body>
  370.  
  371. <!-- start container-->
  372. <div class="container">
  373.  
  374. <!-- start character header-->
  375. <div class="charactergifs">
  376. <img src="https://placehold.it/75">
  377. <img src="https://placehold.it/75">
  378. <img src="https://placehold.it/75">
  379. </div>
  380.  
  381. <div id="name">
  382. <span class="hint--bottom" aria-label="played by: faceclaim">first<b>last</b></span>
  383. </div>
  384.  
  385. <!-- end character header-->
  386.  
  387. <!-- statbox-->
  388.  
  389. <div id="headertitle">
  390. <i class="fas fa-sliders-h"></i> dossier
  391. </div>
  392. <div id="box">
  393. <ul>
  394. <li><b>full name:</b> <i>stat</i>
  395. <li><b>age:</b> <i>stat</i>
  396. <li><b>birthday:</b> <i>stat</i>
  397. <li><b>gender:</b> <i>stat</i>
  398. <li><b>pronouns:</b> <i>stat</i>
  399. <li><b>orientation:</b> <i>stat</i>
  400. <li><b>occupation:</b> <i>stat</i>
  401. </ul>
  402. <ul>
  403. <li><b>nationality:</b> <i>stat</i>
  404. <li><b>ethnicity:</b> <i>stat</i>
  405. <li><b>hometown:</b> <i>stat</i>
  406. <li><b>current residence:</b> <i>stat</i>
  407. <li><b>parent(s):</b> <i>stat</i>
  408. </ul>
  409. <ul>
  410. <li><b>zodiac:</b> <i>stat</i>
  411. <li><b>mbti:</b> <i>stat</i>
  412. <li><b>enneagram:</b> <i>stat</i>
  413. <li><b>moral alingment:</b> <i>stat</i>
  414. <li><b>temperment:</b> <i>stat</i>
  415. </ul>
  416. </div>
  417.  
  418. <!-- stat box-->
  419.  
  420. <div class="sideimg">
  421. <img src="https://placehold.it/261x225;">
  422. </div>
  423.  
  424. <!-- start twitter widgit-->
  425. <div id="title"><i class="fab fa-twitter"></i> twitter</div>
  426.  
  427. <div id="twitter">
  428.  
  429. <div id="twitterbar">
  430. <img src="https://placehold.it/568x100"> <!-- twitter header-->
  431. <div id="twittericon">
  432. <img src="https://placehold.it/100">
  433. </div>
  434. <!-- twitter bio-->
  435. <div class="sideinfo">
  436. <div class="userinfo"><b>usertitle</b><br>
  437. @username</div>
  438. <p>idk put ur bio here or smthn. </p>
  439. </div>
  440. <!-- end twitter bio-->
  441. </div>
  442.  
  443. <!-- start tweets-->
  444. <div class="tweets">
  445. <ul>
  446. <!-- start tweet-->
  447. <li><b>usertitle</b> <i>@username</i><br>
  448. <p>a tweet. but your hashtags in a span like this: <span>#htmlgod</span>.
  449. <!--end tweet-->
  450.  
  451. <!-- start tweet-->
  452. <li><b>usertitle</b> <i>@username</i><br>
  453. <p>you can also put people's usernames in the span and stuff too
  454. <!--end tweet-->
  455.  
  456. </ul>
  457. </div>
  458. <!--end tweets-->
  459.  
  460. </div>
  461. <!-- end twitter widgit-->
  462.  
  463. <!-- start instragram widgit -->
  464.  
  465. <div id="title"><i class="fab fa-instagram"></i> instagram</div>
  466.  
  467. <div id="instagram">
  468. <img src="https://placehold.it/170">
  469. <img src="https://placehold.it/170">
  470. <img src="https://placehold.it/170">
  471.  
  472. <img src="https://placehold.it/170">
  473. <img src="https://placehold.it/170">
  474. <img src="https://placehold.it/170">
  475.  
  476. <img src="https://placehold.it/170">
  477. <img src="https://placehold.it/170">
  478. <img src="https://placehold.it/170">
  479.  
  480. </div>
  481.  
  482. <!-- end instagram widgit -->
  483.  
  484. <!-- start spotify widgit
  485.  
  486. INSTRUCTIONS FOR GETTING SPOTIFY EMBED CODE:
  487.  
  488. ok so when you go to ur playlist ur gonna wanna click the circlualr button with the dots next to play. it should have a hover that says more.
  489.  
  490. go to the bottom of the menu and click on share
  491.  
  492. right under the social media sections there should be an option for 'copy embed code'
  493.  
  494. it'll look like this: "<iframe src="https://open.spotify.com/embed/user/1238632077/playlist/1NVItQRqiiGA3k0E6JL9BE" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>"
  495.  
  496. then take the source link and plop it in my iframe and your done.
  497.  
  498. -->
  499.  
  500. <div id="title"><i class="fab fa-spotify"></i> spotify</div>
  501. <div id="spotify">
  502. <iframe src="https://open.spotify.com/embed/user/1238632077/playlist/06dK40MoZlwTtVP1igihWE" width="568" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
  503.  
  504. </div>
  505.  
  506. <!-- end spotify widgit -->
  507.  
  508. <!-- start links -->
  509.  
  510. <div id="headertitle" style="margin-left:290px;">
  511. <i class="fas fa-sliders-h"></i> links
  512. </div>
  513.  
  514. <div id="linkbox">
  515.  
  516. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  517.  
  518. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  519.  
  520. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>visage<b>tag</b></a>
  521.  
  522. <a href="#"><b>playlist</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  523.  
  524. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>opposite<b>tag</b></a>
  525.  
  526. <a href="#"><b>answered</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  527.  
  528. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>headcannons<b>tag</b></a>
  529.  
  530. <a href="#"><b>writing</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  531.  
  532. <a href="#">blog</a>
  533.  
  534. <a href="#">rp main</a>
  535.  
  536.  
  537. </div>
  538.  
  539. <!-- end links -->
  540.  
  541. <div class="sideimg" style="float:left; margin-left:10px;">
  542. <img src="https://placehold.it/261x225;">
  543. </div>
  544.  
  545.  
  546. <!--end container-->
  547. </div>
  548.  
  549. <!-- credit // would be nice if u left intact -->
  550. <div class="credit">
  551. <a href="http://chaaostheory.tumblr.com" class="hint--right" aria-label="@chaaostheory"><i class="fas fa-feather-alt fa-fw" aria-hidden="true"></i></a>
  552. </div>
  553.  
  554.  
  555. </body>
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!