API tools faq
paste
Advertisement
especiallygold

connected

especiallygold
Jan 8th, 2020
3,310
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.70 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:times;
  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. #main {
  66. width:700px;
  67. height:auto;
  68. margin:0 auto;
  69. }
  70.  
  71. #container {
  72. background-color:#fff;
  73. border-radius:10px;
  74. border:10px solid #eee;
  75. margin:0 auto;
  76. margin-top:150px;
  77. margin-left:-20px;
  78. width:500px;
  79. height:450px;
  80. z-index:9999;
  81. position:absolute;
  82. overflow:scroll;
  83. }
  84.  
  85. #container::-webkit-scrollbar { width: 3px; height:0px; background-color: #fff;}
  86.  
  87. #container::-webkit-scrollbar-track {padding:20px; border:1px solid #fff; background-color:#797979;}
  88.  
  89. #container::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #797979;}
  90.  
  91. #left {
  92. background-color:#eee;
  93. width:auto;
  94. float:left;
  95. z-index:999999;
  96. margin-left:5px;
  97. margin-top:65px;
  98. position:absolute;
  99. transform: rotate(-3deg);
  100. border-radius:5px;
  101. padding-left:10px;
  102. padding-right:10px;
  103. }
  104.  
  105. #title {
  106. font-family:times;
  107. color:#404040;
  108. font-size:40px;
  109. letter-spacing:-1px;
  110. margin-top:20px;
  111. font-weight:500;
  112. }
  113.  
  114. #title2 {
  115. font-family:'cepttoni';
  116. font-size:55px;
  117. letter-spacing:0px;
  118. margin-top:12px;
  119. margin-left:5px;
  120. transform: rotate(-5deg);
  121. }
  122.  
  123. #sidenav {
  124. font-family:'Palanquin Dark', sans-serif;
  125. font-size:8px;
  126. font-weight:100;
  127. text-transform:lowercase;
  128. letter-spacing:2px;
  129. padding:10px 0px 10px 0px;
  130. margin-top:10px;
  131. }
  132.  
  133. #sidenav a {
  134. text-decoration:none;
  135. margin-left:8px;
  136. margin-right:8px;
  137. transition: .5s ease-out;
  138. }
  139.  
  140. #sidenav a:hover {
  141. color:#797979;
  142. }
  143.  
  144. #right {
  145. width:550px;
  146. height:500px;
  147. float:right;
  148. }
  149.  
  150. /*CONNECTIONS*/
  151.  
  152. #container4 {
  153. width:470px;
  154. height:auto;
  155. margin:0 auto;
  156. margin:25px;
  157. }
  158.  
  159. #container4 img {
  160. width:110px;
  161. height:110px;
  162. margin-left:5px;
  163. margin-bottom:5px;
  164. border-radius:3px;
  165. transition: filter .5s ease-in-out;
  166. -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  167. filter: grayscale(0%); /* FF 35+ */
  168. }
  169.  
  170. #container4 img:hover {
  171. -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  172. filter: grayscale(100%); /* FF 35+ */
  173. }
  174.  
  175. #cbox {
  176. width:145px;
  177. height:200px;
  178. margin:5px 5px 25px 5px;
  179. float:left;
  180. }
  181.  
  182. #info {
  183. font-family:'Palanquin Dark', sans-serif;
  184. font-size:10px;
  185. font-weight:bold;
  186. padding:0px 5px 0px 5px;
  187. }
  188.  
  189. #moreinfo {
  190. font-family:'Palanquin Dark', sans-serif;
  191. font-size:9px;
  192. font-weight:200;
  193. padding:0px 5px 0px 5px;
  194. }
  195.  
  196. #desc {
  197. font-family:open sans;
  198. font-size:8px;
  199. width:115px;
  200. height:60px;
  201. padding:0px 5px 0px 5px;
  202. text-align:left;
  203. overflow-x:hidden;
  204. overflow-y:scroll;
  205. }
  206.  
  207. #container4::-webkit-scrollbar { width: 3px; background-color: #eee; }
  208.  
  209. #container4::-webkit-scrollbar-track {border:1px solid #eee; background-color: #404040; }
  210.  
  211. #containe4::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #404040; }
  212.  
  213. </style>
  214. </head>
  215.  
  216. <body>
  217.  
  218. <div id="main">
  219.  
  220. <div id="left">
  221. <div id="title">Muse name's</div>
  222. <div id="title2">connections.</div>
  223.  
  224. <div id="sidenav">
  225. <a href="/">home</a>
  226. <a href="https://tumblr.com/dashboard">dashboard</a>
  227. <a href="https://erika-writes.tumblr.com">credit</a>
  228. </div>
  229. </div>
  230.  
  231. <div id="right">
  232.  
  233. <!-- MAIN PAGE -->
  234.  
  235. <div id="home">
  236.  
  237. </div>
  238.  
  239. <!-- CONNECTIONS-->
  240.  
  241. <div id="container">
  242. <div id="container4">
  243.  
  244. <div id="cbox">
  245. <img src="https://66.media.tumblr.com/cdeab52a5ba7e5ac76a89cbab066aa89/tumblr_psbbwtV8UT1s0v7b0o5_400.png">
  246. <div id="info">connection name</div>
  247. <div id="moreinfo">name, age, faceclaim</div>
  248. <div id="desc">text here (this scrolls! write as much as you want.)
  249. </div>
  250. </div>
  251.  
  252. <div id="cbox">
  253. <img src="https://66.media.tumblr.com/cdeab52a5ba7e5ac76a89cbab066aa89/tumblr_psbbwtV8UT1s0v7b0o5_400.png">
  254. <div id="info">connection name</div>
  255. <div id="moreinfo">name, age, faceclaim</div>
  256. <div id="desc">text here (this scrolls! write as much as you want.)
  257. </div>
  258. </div>
  259.  
  260. <div id="cbox">
  261. <img src="https://66.media.tumblr.com/cdeab52a5ba7e5ac76a89cbab066aa89/tumblr_psbbwtV8UT1s0v7b0o5_400.png">
  262. <div id="info">connection name</div>
  263. <div id="moreinfo">name, age, faceclaim</div>
  264. <div id="desc">text here (this scrolls! write as much as you want.)
  265. </div>
  266. </div>
  267.  
  268. <div id="cbox">
  269. <img src="https://66.media.tumblr.com/cdeab52a5ba7e5ac76a89cbab066aa89/tumblr_psbbwtV8UT1s0v7b0o5_400.png">
  270. <div id="info">connection name</div>
  271. <div id="moreinfo">name, age, faceclaim</div>
  272. <div id="desc">text here (this scrolls! write as much as you want.)
  273. </div>
  274. </div>
  275.  
  276. <div id="cbox">
  277. <img src="https://66.media.tumblr.com/cdeab52a5ba7e5ac76a89cbab066aa89/tumblr_psbbwtV8UT1s0v7b0o5_400.png">
  278. <div id="info">connection name</div>
  279. <div id="moreinfo">name, age, faceclaim</div>
  280. <div id="desc">text here (this scrolls! write as much as you want.)
  281. </div>
  282. </div>
  283.  
  284. <div id="cbox">
  285. <img src="https://66.media.tumblr.com/cdeab52a5ba7e5ac76a89cbab066aa89/tumblr_psbbwtV8UT1s0v7b0o5_400.png">
  286. <div id="info">connection name</div>
  287. <div id="moreinfo">name, age, faceclaim</div>
  288. <div id="desc">text here (this scrolls! write as much as you want.)
  289. </div>
  290. </div>
  291.  
  292. <div id="cbox">
  293. <img src="https://66.media.tumblr.com/cdeab52a5ba7e5ac76a89cbab066aa89/tumblr_psbbwtV8UT1s0v7b0o5_400.png">
  294. <div id="info">connection name</div>
  295. <div id="moreinfo">name, age, faceclaim</div>
  296. <div id="desc">text here (this scrolls! write as much as you want.)
  297. </div>
  298. </div>
  299.  
  300. <div id="cbox">
  301. <img src="https://66.media.tumblr.com/cdeab52a5ba7e5ac76a89cbab066aa89/tumblr_psbbwtV8UT1s0v7b0o5_400.png">
  302. <div id="info">connection name</div>
  303. <div id="moreinfo">name, age, faceclaim</div>
  304. <div id="desc">text here (this scrolls! write as much as you want.)
  305. </div>
  306. </div>
  307.  
  308. <div id="cbox">
  309. <img src="https://66.media.tumblr.com/cdeab52a5ba7e5ac76a89cbab066aa89/tumblr_psbbwtV8UT1s0v7b0o5_400.png">
  310. <div id="info">connection name</div>
  311. <div id="moreinfo">name, age, faceclaim</div>
  312. <div id="desc">text here (this scrolls! write as much as you want.)
  313. </div>
  314. </div>
  315.  
  316. <!-- END OF CODE -->
  317.  
  318. </div> </div> </div> </div> </div> </div> </div> </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!