API tools faq
paste
the49thname

Network 01

the49thname
Jul 12th, 2016
3,565
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.23 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <head>
  4.  
  5. <!-- network page 01
  6.  
  7. themes by ro (the49thname) / the49ththeme.tumblr.com
  8. don't remove the credit, use as a base code, or claim as your own work.
  9. edit as much as you want, and feel free to send me any queries/problems.
  10.  
  11. -->
  12.  
  13. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  14.  
  15. <title>Network 01</title>
  16.  
  17. <link rel="shortcut icon" href="{Favicon}">
  18.  
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20.  
  21. <meta name="description" content="{MetaDescription}" />
  22.  
  23. <!-- fonts -->
  24.  
  25. <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">
  26.  
  27. <!-- jquery scripts -->
  28.  
  29. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  30.  
  31. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  32.  
  33. <!-- font awesome script -->
  34.  
  35. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  36.  
  37. <!-- tooltip scripts -->
  38.  
  39. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  40.  
  41. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  42.  
  43. <script>
  44. (function($){
  45. $(document).ready(function(){
  46. $("a[title]").style_my_tooltips({
  47. tip_follows_cursor:true,
  48. tip_delay_time:90,
  49. tip_fade_speed:600,
  50. attribute:"title"
  51. });
  52. });
  53. })(jQuery);
  54. </script>
  55.  
  56. <style type="text/css">
  57.  
  58. #tumblr_controls, .tmblr-iframe {display:none;!important;}
  59.  
  60. ::-webkit-scrollbar-thumb {
  61. z-index:9999999;
  62. position:relative;
  63. height:auto;
  64. background-color:#ccc; /* change scrollbar thumb colour */
  65. }
  66.  
  67. ::-webkit-scrollbar {
  68. height:5px;
  69. width:5px;
  70. background-color:#f6f6f6; /* change scrollbar background colour */
  71. }
  72.  
  73. /* basics */
  74.  
  75. body {
  76. color:#888; /* change text colour */
  77. background-color:#f6f6f6; /* change background colour */
  78. font-family:'Roboto', sans-serif;
  79. font-size:10px; /* change font size */
  80. margin:0;
  81. line-height:14px;
  82. letter-spacing:1px;
  83. text-align:justify;
  84. word-wrap:break-word;
  85. background-image:url('URL GOES HERE'); /* add background image */
  86. background-position:left top;
  87. background-attachment:fixed;
  88. background-repeat:repeat;
  89. }
  90.  
  91. b, strong {color:#000;} /* change bold text colour */
  92.  
  93. i, em {color:#ccc;} /* change italic text colour */
  94.  
  95. u {color:#888;text-transform:none;} /* change underline text colour */
  96.  
  97. a {
  98. color:#ffb3b3; /* change link colour */
  99. text-transform:uppercase;
  100. text-decoration:none;
  101. -moz-transition-duration:1s;
  102. -webkit-transition-duration:1s;
  103. -o-transition-duration:1s;
  104. }
  105.  
  106. a:hover {
  107. color:#888; /* change link hover colour */
  108. -moz-transition-duration:1s;
  109. -webkit-transition-duration:1s;
  110. -o-transition-duration:1s;
  111. }
  112.  
  113. p {margin:10px;}
  114.  
  115. /* header */
  116.  
  117. #themecontainer {
  118. top:0;
  119. width:900px;
  120. height:100%;
  121. margin-left:auto;
  122. margin-right:auto;
  123. }
  124.  
  125. #hdr {
  126. width:900px;
  127. height:200px;
  128. position:absolute;
  129. top:0;
  130. background:url('https://68.media.tumblr.com/9590346198035ecf05ec537a2b6caddc/tumblr_o6q1oxxgiE1uptww3o1_1280.png') top center; /* add/change header image */
  131. -webkit-background-size:cover;
  132. -moz-background-size:cover;
  133. -o-background-size:cover;
  134. background-size:cover;
  135. }
  136.  
  137. .nav {
  138. position:absolute;
  139. top:200px;
  140. width:900px;
  141. height:35px;
  142. background-color:#ffb3b3; /* change navigation background colour */
  143. text-align:center;
  144. z-index:9999;
  145. }
  146.  
  147. .nav-fixed {position:fixed;top:0;}
  148.  
  149. .nav a {
  150. font-family:'Roboto Condensed', sans-serif;
  151. font-size:14px;
  152. text-transform:uppercase;
  153. color:#fff; /* change navigation link colour */
  154. display:inline-block;
  155. padding:12px 8px;
  156. -moz-transition-duration:1s;
  157. -webkit-transition-duration:1s;
  158. -o-transition-duration:1s;
  159. }
  160.  
  161. .nav a:hover {
  162. color:#888; /* change navigation link hover colour */
  163. -moz-transition-duration:1s;
  164. -webkit-transition-duration:1s;
  165. -o-transition-duration:1s;
  166. }
  167.  
  168. /* posts */
  169.  
  170. #postcontainer {
  171. position:relative;
  172. top:235px;
  173. width:100%;
  174. overflow:hidden;
  175. text-align:justify;
  176. background-color:#fff; /* change container background colour */
  177. }
  178.  
  179. #container {
  180. width:750px;
  181. height:100%;
  182. margin:50px auto;
  183. text-align:center;
  184. }
  185.  
  186. .membercont {
  187. width:150px;
  188. margin:20px 15px;
  189. display:inline-block;
  190. }
  191.  
  192. .membericon {
  193. width:150px;
  194. height:150px;
  195. opacity:1;
  196. transition:all 0.5s ease-in-out;
  197. -moz-transition:all 0.5s ease-in-out;
  198. -webkit-transition:all 0.5s ease-in-out;
  199. -o-transition:all 0.5s ease-in-out;
  200. }
  201.  
  202. .membericon img {width:150px;height:150px;}
  203.  
  204. .memberdesc {
  205. position:absolute;
  206. width:150px;
  207. height:150px;
  208. overflow:auto;
  209. padding:10px;
  210. box-sizing:border-box;
  211. color:#888; /* change member description text colour */
  212. text-align:center;
  213. text-transform:uppercase;
  214. z-index:9;
  215. opacity:0;
  216. transition-duration:0.5s;
  217. -moz-transition-duration:0.5s;
  218. -webkit-transition-duration:0.5s;
  219. -o-transition-duration:0.5s;
  220. }
  221.  
  222. .membercont:hover .memberdesc {
  223. opacity:1;
  224. transition:all 0.5s ease-in-out;
  225. -moz-transition:all 0.5s ease-in-out;
  226. -webkit-transition:all 0.5s ease-in-out;
  227. -o-transition:all 0.5s ease-in-out;
  228. }
  229.  
  230. .membercont:hover .membericon {
  231. opacity:0.2;
  232. transition:all 0.5s ease-in-out;
  233. -moz-transition:all 0.5s ease-in-out;
  234. -webkit-transition:all 0.5s ease-in-out;
  235. -o-transition:all 0.5s ease-in-out;
  236. }
  237.  
  238. .membertitle {
  239. width:150px;
  240. background-color:#bad8eb; /* change member title background colour */
  241. text-transform:uppercase;
  242. padding:10px;
  243. text-align:center;
  244. box-sizing:border-box;
  245. }
  246.  
  247. .membertitle a {
  248. color:#fff; /* change member title link colour */
  249. -moz-transition-duration:1s;
  250. -webkit-transition-duration:1s;
  251. -o-transition-duration:1s;
  252. }
  253.  
  254. .membertitle a:hover {
  255. color:#75b1d6; /* change member title link hover colour */
  256. -moz-transition-duration:1s;
  257. -webkit-transition-duration:1s;
  258. -o-transition-duration:1s;
  259. }
  260.  
  261. /* extras */
  262.  
  263. #s-m-t-tooltip {
  264. z-index:9999999999;
  265. color:#fff; /* change tooltip text colour */
  266. background:#bad8eb; /* change tooltip background colour */
  267. font-size:9px;
  268. line-height:11px;
  269. font-family:'Roboto Condensed', sans-serif;
  270. text-align:left;
  271. text-transform:uppercase;
  272. max-width:150px;
  273. word-wrap:break-word;
  274. padding:2px 5px 2px 5px;
  275. display:block;
  276. margin:24px 14px 7px 12px;
  277. }
  278.  
  279. ::selection {
  280. color:#fff; /* change selection text colour */
  281. background:#ffb3b3; /* change selection background colour */
  282. }
  283.  
  284. /* credit - do not remove, alter, or move to another page */
  285.  
  286. #credit {
  287. position:fixed;
  288. bottom:14px;
  289. right:10px;
  290. text-align:center;
  291. z-index:9999999;
  292. }
  293.  
  294. #credit a {
  295. font-size:10px;
  296. color:#f6f6f6;
  297. background-color:#ccc;
  298. padding:4px;
  299. -moz-transition-duration:1s;
  300. -webkit-transition-duration:1s;
  301. -o-transition-duration:1s;
  302. }
  303.  
  304. #credit a:hover {
  305. color:#ccc;
  306. background-color:#f6f6f6;
  307. -moz-transition-duration:1s;
  308. -webkit-transition-duration:1s;
  309. -o-transition-duration:1s;
  310. }
  311.  
  312. </style>
  313. </head>
  314. <body>
  315.  
  316. <div id="themecontainer">
  317.  
  318. <div id="hdr"></div>
  319.  
  320. <div class="nav">
  321. <a href="/">Home</a>
  322. <a href="/ask">Ask</a>
  323. <a href="/archive">Archive</a>
  324. <!-- you can edit your custom links here. just change LINK NO. URL to whatever your link url is, and change Link no. to whatever you want your link to be called. -->
  325. <a href="/LINK 1 URL">Link 1</a>
  326. <a href="/LINK 2 URL">Link 2</a>
  327. <a href="/LINK 3 URL">Link 3</a>
  328. </div>
  329.  
  330. <div id="postcontainer">
  331. <div id="container">
  332.  
  333. <!-- here is where you can edit your member images, descriptions, and links. member icons need to be 150x150px in size. -->
  334.  
  335. <div class="membercont">
  336. <div class="memberdesc">
  337. <!-- member description goes here. use all the usual html text editing formats (e.g. <b></b> | <i></i> | etc.) and don't worry about length, a scrollbar will appear if it becomes too long. -->
  338. Member description.
  339. </div>
  340. <div class="membericon"><img src="https://68.media.tumblr.com/d111b9eee8392b47c62a73dd74ba5a64/tumblr_inline_o6q5n31zQG1rrt3vb_540.png"></div>
  341. <div class="membertitle"><a href="MEMBER LINK GOES HERE">Member 1</a></div>
  342. </div>
  343.  
  344. <div class="membercont">
  345. <div class="memberdesc">
  346. <!-- member description goes here. use all the usual html text editing formats (e.g. <b></b> | <i></i> | etc.) and don't worry about length, a scrollbar will appear if it becomes too long. -->
  347. Member description.
  348. </div>
  349. <div class="membericon"><img src="https://68.media.tumblr.com/d111b9eee8392b47c62a73dd74ba5a64/tumblr_inline_o6q5n31zQG1rrt3vb_540.png"></div>
  350. <div class="membertitle"><a href="MEMBER LINK GOES HERE">Member 2</a></div>
  351. </div>
  352.  
  353. <div class="membercont">
  354. <div class="memberdesc">
  355. <!-- member description goes here. use all the usual html text editing formats (e.g. <b></b> | <i></i> | etc.) and don't worry about length, a scrollbar will appear if it becomes too long. -->
  356. Member description.
  357. </div>
  358. <div class="membericon"><img src="https://68.media.tumblr.com/d111b9eee8392b47c62a73dd74ba5a64/tumblr_inline_o6q5n31zQG1rrt3vb_540.png"></div>
  359. <div class="membertitle"><a href="MEMBER LINK GOES HERE">Member 3</a></div>
  360. </div>
  361.  
  362. <div class="membercont">
  363. <div class="memberdesc">
  364. <!-- member description goes here. use all the usual html text editing formats (e.g. <b></b> | <i></i> | etc.) and don't worry about length, a scrollbar will appear if it becomes too long. -->
  365. Member description.
  366. </div>
  367. <div class="membericon"><img src="https://68.media.tumblr.com/d111b9eee8392b47c62a73dd74ba5a64/tumblr_inline_o6q5n31zQG1rrt3vb_540.png"></div>
  368. <div class="membertitle"><a href="MEMBER LINK GOES HERE">Member 4</a></div>
  369. </div>
  370.  
  371. <div class="membercont">
  372. <div class="memberdesc">
  373. <!-- member description goes here. use all the usual html text editing formats (e.g. <b></b> | <i></i> | etc.) and don't worry about length, a scrollbar will appear if it becomes too long. -->
  374. Member description.
  375. </div>
  376. <div class="membericon"><img src="https://68.media.tumblr.com/d111b9eee8392b47c62a73dd74ba5a64/tumblr_inline_o6q5n31zQG1rrt3vb_540.png"></div>
  377. <div class="membertitle"><a href="MEMBER LINK GOES HERE">Member 5</a></div>
  378. </div>
  379.  
  380. <div class="membercont">
  381. <div class="memberdesc">
  382. <!-- member description goes here. use all the usual html text editing formats (e.g. <b></b> | <i></i> | etc.) and don't worry about length, a scrollbar will appear if it becomes too long. -->
  383. Member description.
  384. </div>
  385. <div class="membericon"><img src="https://68.media.tumblr.com/d111b9eee8392b47c62a73dd74ba5a64/tumblr_inline_o6q5n31zQG1rrt3vb_540.png"></div>
  386. <div class="membertitle"><a href="MEMBER LINK GOES HERE">Member 6</a></div>
  387. </div>
  388.  
  389. <div class="membercont">
  390. <div class="memberdesc">
  391. <!-- member description goes here. use all the usual html text editing formats (e.g. <b></b> | <i></i> | etc.) and don't worry about length, a scrollbar will appear if it becomes too long. -->
  392. Member description.
  393. </div>
  394. <div class="membericon"><img src="https://68.media.tumblr.com/d111b9eee8392b47c62a73dd74ba5a64/tumblr_inline_o6q5n31zQG1rrt3vb_540.png"></div>
  395. <div class="membertitle"><a href="MEMBER LINK GOES HERE">Member 7</a></div>
  396. </div>
  397.  
  398. <div class="membercont">
  399. <div class="memberdesc">
  400. <!-- member description goes here. use all the usual html text editing formats (e.g. <b></b> | <i></i> | etc.) and don't worry about length, a scrollbar will appear if it becomes too long. -->
  401. Member description.
  402. </div>
  403. <div class="membericon"><img src="https://68.media.tumblr.com/d111b9eee8392b47c62a73dd74ba5a64/tumblr_inline_o6q5n31zQG1rrt3vb_540.png"></div>
  404. <div class="membertitle"><a href="MEMBER LINK GOES HERE">Member 8</a></div>
  405. </div>
  406.  
  407. <!-- to add more members simply copy and paste the following section of code:
  408.  
  409. <div class="membercont">
  410. <div class="memberdesc">
  411. Member description.
  412. </div>
  413. <div class="membericon"><img src="IMG URL GOES HERE"></div>
  414. <div class="membertitle"><a href="MEMBER LINK GOES HERE">Member</a></div>
  415. </div>
  416.  
  417. and paste it just before the </div></div> just after these instructions -->
  418.  
  419. </div>
  420. </div>
  421.  
  422. </div>
  423.  
  424. <!-- sticky navbar jquery -->
  425.  
  426. <script>
  427. $(document).ready(function(){
  428. $(window).bind('scroll', function(){
  429. if($(window).scrollTop() > 200){
  430. $('.nav').addClass('nav-fixed');
  431. }
  432.  
  433. else{
  434. $('.nav').removeClass('nav-fixed');
  435. }
  436. });
  437. });
  438. </script>
  439.  
  440. <div id="credit"><a href="http://the49thname.tumblr.com/" title="made by the49thname">49</a>
  441. </div>
  442.  
  443. </body>
  444. </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!