API tools faq
paste
Advertisement
parrishing

NETWORK PAGE #1 - UNTAMED

parrishing
Oct 23rd, 2015
5,843
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  
  3. <!--
  4.  
  5. NETWORK PAGE #1 'untamed' - BY PROTECTMCCALL (http://protectmccall.tumblr.com)
  6. -DONT USE AS BASE OR STEAL THE BITS P PLEASE
  7. -ASK ME FOR HELP IF U STRUGGLE
  8. -IT'S MY FIRST NET THEME EVER SO SORRY IF THE CODING'S A MESS I'LL DO BETTER NEXT TIME I PROMISE
  9. -HOPE U HAVE A GREAT DAY TODAY BUTTERCUP ♥
  10.  
  11. -->
  12.  
  13.  
  14. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  15.  
  16.  
  17. <head>
  18. <link href='https://fonts.googleapis.com/css?family=Martel:200' rel='stylesheet' type='text/css'>
  19. <title>[network name]</title>
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22. <!----jquery----->
  23. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  24. <!----google fonts---->
  25. <link href='http://fonts.googleapis.com/css?family=Cousine:400,700' rel='stylesheet' type='text/css'>
  26. <!---tooltip--->
  27. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  28. <script>
  29. (function($){
  30. $(document).ready(function(){
  31. $("a[title]").style_my_tooltips({
  32. tip_follows_cursor:true,
  33. tip_delay_time:300,
  34. tip_fade_speed:300,
  35. attribute:"title"
  36. });
  37. });
  38. })(jQuery);
  39. </script>
  40.  
  41.  
  42. <style type="text/css">
  43.  
  44. /* the prevailing color in the preview is peach #f5e9d0 if you want to change it press ctrl+f put '#f5e9d0' in the "Search for" space, put the colour you want to change to in "Replace with" space and click "All" voiLA~ */
  45.  
  46. a {
  47. text-decoration:none;
  48. outline:none;
  49. -moz-outline-style:none;
  50. color:#e6d9c1; /* COLOUR OF THE LINKS */
  51. -webkit-transition: all 0.5s ease-in-out;
  52. -moz-transition: all 0.5s ease-in-out;
  53. transition: all 0.5s ease-in-out;
  54. }
  55.  
  56. body {
  57. background:#fff; /* COLOUR OF BACKGROUND, #fff for white, or you can just type 'white', 'black' etcetc w/o '#' */
  58. font-family:Helvetica;
  59. line-height:110%;
  60. font-weight:300;
  61. letter-spacing:0px;
  62. text-align:justify;
  63. }
  64.  
  65. ::-webkit-scrollbar-thumb:vertical {
  66. background:#fff;
  67. height: 80px;
  68. }
  69.  
  70. ::-webkit-scrollbar {
  71. height: 10px;
  72. width: 3px;
  73. }
  74.  
  75. #s-m-t-tooltip { /* tooltip is what styles the hover title="" of the link */
  76. margin-top:20px;
  77. background-color:#ffffff;
  78. font-family:Helvetica;
  79. font-size:8px;
  80. color:#333333;
  81. letter-spacing:1px;
  82. text-transform:lowercase;
  83. padding:5px;
  84. padding-bottom:3px;
  85. z-index:999999999999999999999999999999999999;
  86. border-bottom: 9px double #e6d9c1 ; /* COLOUR OF THE ON HOVER LINES UNDER THE TEXT */
  87. font-weight:500;
  88. }
  89.  
  90.  
  91. #container {
  92. padding-top:30px;
  93. width:535px;
  94. height:545px;
  95. position:absolute;
  96. left:50%;
  97. top:40%;
  98. margin-left:-240px;
  99. margin-top:-230px;
  100. border-top: 2px solid #f5e9d0 ; /* COLOUR OF CONTAINER'S TOP BORDER */
  101. }
  102.  
  103.  
  104. #title h1{
  105. margin-top:-40px;
  106. margin-left:209px;
  107. padding:0px 5px 0px 5px;
  108. line-height:100%;
  109. background-color:#fff;
  110. color:#000;
  111. font-family: 'Martel', serif;
  112. font-size:21px;
  113. position:fixed;
  114. text-transform:uppercase;
  115. z-index:22222;
  116. }
  117.  
  118.  
  119. #members {
  120. padding-top:23px;
  121. margin-top:5px;
  122. margin-left:-8px;
  123. width:535px;
  124. height:515px;
  125. position:absolute;
  126. overflow: scroll;
  127.  
  128. }
  129.  
  130.  
  131. .section {
  132. width:160px;
  133. height:160px;
  134. background:#FFF;
  135. display:inline-block;
  136. padding-left:13px;
  137. padding-bottom:30px;
  138. margin-top:-15px;
  139. -webkit-transition: all 0.4s ease-in;
  140. -moz-transition: all 0.4s ease-in;
  141. -o-transition: all 0.4s ease-in;
  142. }
  143.  
  144. .section img {
  145. width:160px;
  146. height:160px;
  147. border-radius: 100%;
  148. display:inline-block;
  149. }
  150.  
  151.  
  152. .section:hover span.text-content {
  153. opacity:0.7; /* INFO OPACITY HOVER */
  154. -webkit-transition: all 0.4s ease-in;
  155. -moz-transition: all 0.4s ease-in;
  156. -o-transition: all 0.4s ease-in;
  157. }
  158.  
  159. span.text-content {
  160. position:absolute;
  161. width:140px;
  162. height:140px;
  163. padding:10px;
  164. border-radius: 100%;
  165. background:#333; /* INFO BACKGROUND COLOR */
  166. font-family: 'Helvetica', serif;
  167. font-size:11px;
  168. text-transform:none;
  169. color:#fff; /* INFO TEXT COLOUR */
  170. opacity:0;
  171. margin-top:-160px;
  172. text-align:center;
  173. -webkit-transition: all 0.4s ease-in;
  174. -moz-transition: all 0.4s ease-in;
  175. -o-transition: all 0.4s ease-in;
  176. }
  177.  
  178. span.text-content a {
  179. color:#fff; /* INFO LINK COLOR */
  180. -webkit-transition: all 0.4s ease-in;
  181. -moz-transition: all 0.4s ease-in;
  182. -o-transition: all 0.4s ease-in;
  183. }
  184.  
  185. span.text-content a:hover {
  186. color:#f5e9d0; /* INFO LINK HOVER */
  187. -webkit-transition: all 0.4s ease-in;
  188. -moz-transition: all 0.4s ease-in;
  189. -o-transition: all 0.4s ease-in;
  190. }
  191.  
  192.  
  193.  
  194. #text {
  195. width:450px;
  196. background:#ffffff;
  197. margin-top:553px;
  198. padding-left:45px;
  199. text-align: center;
  200. color: #344247; /* COLOUR OF TEXT */
  201. font-size: 12px; /* SIZE OF THE FONT */
  202. }
  203.  
  204.  
  205.  
  206. #linkies {
  207. margin-top:20px;
  208. margin-left:218px;
  209. }
  210.  
  211. #linkies a {
  212. height:30px;
  213. width: 30px;
  214. padding:7px 8px 7px 8px;
  215. border-radius:100px;
  216. background-color:#f5e9d0; /* COLOUR OF LINK CIRCLES */
  217. color: #555;
  218.  
  219. -webkit-transition: all 0.5s ease-in-out;
  220. -moz-transition: all 0.5s ease-in-out;
  221. transition: all 0.5s ease-in-out;
  222. }
  223.  
  224.  
  225. #linkies a:hover {
  226. background-color:#fff; /* COLOUR OF LINK CIRCLES ON HOVER */
  227. -webkit-transition: all 0.5s ease-in-out;
  228. -moz-transition: all 0.5s ease-in-out;
  229. transition: all 0.5s ease-in-out;
  230. }
  231.  
  232.  
  233. #credit {
  234. position:fixed;
  235. font-size:16px;
  236. letter-spacing:1px;
  237. right:10px;
  238. bottom:15px;
  239. }
  240. #credit a {
  241. padding:3px;
  242. border-radius:100px;
  243. color:#000;
  244. background-color:#ffffff;
  245. }
  246. #credit a:hover {
  247. color:#ffffff;
  248. background-color:#000;
  249. }
  250.  
  251.  
  252.  
  253.  
  254. {CustomCSS}</style></head><body>
  255.  
  256. <div id="container">
  257. <div id="title"><h1>members</h1></div>
  258.  
  259.  
  260.  
  261. <div id="members">
  262.  
  263. <div class="section">
  264. <img src="https://41.media.tumblr.com/589d1f9f111ed35a39f8c70f1ef6a286/tumblr_nuxhzvz8911sxhoaio2_r1_400.jpg">
  265. <span class="text-content"><span><p><br>
  266. <b><a href="http://protectmccall.tumblr.com/">PROTECTMCCALL</a></b><br>
  267. admin<br>
  268. <hr>
  269. some short text over here keep it two lines
  270. </span></span>
  271. </div>
  272.  
  273.  
  274.  
  275. <div class="section">
  276. <img src="https://40.media.tumblr.com/ba0ab46f07b8ef07f64027be25551c22/tumblr_nv1f1e9IBB1sxhoaio6_250.png">
  277. <span class="text-content"><span><p><br>
  278. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  279. member<br>
  280. <hr>
  281. some short text over here keep it two lines
  282. </span></span>
  283. </div>
  284.  
  285.  
  286.  
  287. <div class="section">
  288. <img src="https://41.media.tumblr.com/e309fde71a42f6682600c9ae454aca83/tumblr_nv1f2hMQaC1sxhoaio1_250.png">
  289. <span class="text-content"><span><p><br>
  290. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  291. member<br>
  292. <hr>
  293. some short text over here keep it two lines
  294. </span></span>
  295. </div>
  296.  
  297. <div class="section">
  298. <img src="https://40.media.tumblr.com/d3ff27512f31fa6964c64167d66d3efc/tumblr_nv1f1e9IBB1sxhoaio10_250.png">
  299. <span class="text-content"><span><p><br>
  300. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  301. member<br>
  302. <hr>
  303. some short text over here keep it two lines
  304. </span></span>
  305. </div>
  306.  
  307.  
  308.  
  309. <div class="section">
  310. <img src="https://40.media.tumblr.com/cafbe5cdd5234cecef455ce390fa33cd/tumblr_nv1f2hMQaC1sxhoaio4_250.png">
  311. <span class="text-content"><span><p><br>
  312. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  313. member<br>
  314. <hr>
  315. some short text over here keep it two lines
  316. </span></span>
  317. </div>
  318.  
  319.  
  320.  
  321. <div class="section">
  322. <img src="https://40.media.tumblr.com/92a6bf02098b4ed0a42a5c7e29d51386/tumblr_nv1f2hMQaC1sxhoaio3_250.png">
  323. <span class="text-content"><span><p><br>
  324. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  325. member<br>
  326. <hr>
  327. some short text over here keep it two lines
  328. </span></span>
  329. </div>
  330.  
  331. <div class="section">
  332. <img src="https://40.media.tumblr.com/8374e653d4588cf5cc72f23668b9c75a/tumblr_nv1f1e9IBB1sxhoaio3_250.png">
  333. <span class="text-content"><span><p><br>
  334. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  335. member<br>
  336. <hr>
  337. some short text over here keep it two lines
  338. </span></span>
  339. </div>
  340.  
  341.  
  342.  
  343. <div class="section">
  344. <img src="https://36.media.tumblr.com/da4e8460e817eb9d8a1755b456865fbd/tumblr_nv1f1e9IBB1sxhoaio8_250.png">
  345. <span class="text-content"><span><p><br>
  346. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  347. member<br>
  348. <hr>
  349. some short text over here keep it two lines
  350. </span></span>
  351. </div>
  352.  
  353.  
  354.  
  355. <div class="section">
  356. <img src="https://41.media.tumblr.com/5b97ef330e26511f4d87f9661e52e4fa/tumblr_nv1f2hMQaC1sxhoaio5_r1_400.png">
  357. <span class="text-content"><span><p><br>
  358. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  359. member<br>
  360. <hr>
  361. some short text over here keep it two lines
  362. </span></span>
  363. </div>
  364.  
  365. <div class="section">
  366. <img src="https://41.media.tumblr.com/03bb51f188a5b94688ffb07a68e7bb8d/tumblr_nv1f1e9IBB1sxhoaio9_250.png">
  367. <span class="text-content"><span><p><br>
  368. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  369. member<br>
  370. <hr>
  371. some short text over here keep it two lines
  372. </span></span>
  373. </div>
  374.  
  375.  
  376.  
  377. <div class="section">
  378. <img src="https://40.media.tumblr.com/657d0e06e8c2ed3ef42ee83242181de6/tumblr_nv1f1e9IBB1sxhoaio4_250.png">
  379. <span class="text-content"><span><p><br>
  380. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  381. member<br>
  382. <hr>
  383. some short text over here keep it two lines
  384. </span></span>
  385. </div>
  386.  
  387.  
  388. <div class="section">
  389. <img src="https://40.media.tumblr.com/7125eb84745498c33c1cc4f5eea275c5/tumblr_nv1f1e9IBB1sxhoaio7_250.png">
  390. <span class="text-content"><span><p><br>
  391. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  392. member<br>
  393. <hr>
  394. some short text over here keep it two lines
  395. </span></span>
  396. </div>
  397.  
  398. <div class="section">
  399. <img src="https://36.media.tumblr.com/aa8ee17ac175a9c7aef9ea87d27eef21/tumblr_nv1f2hMQaC1sxhoaio2_250.png">
  400. <span class="text-content"><span><p><br>
  401. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  402. member<br>
  403. <hr>
  404. some short text over here keep it two lines
  405. </span></span>
  406. </div>
  407.  
  408.  
  409.  
  410. <div class="section">
  411. <img src="https://41.media.tumblr.com/f7b33e2d8b01dcab1076e3f9f8807f26/tumblr_nv1f1e9IBB1sxhoaio2_250.png">
  412. <span class="text-content"><span><p><br>
  413. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  414. member<br>
  415. <hr>
  416. some short text over here keep it two lines
  417. </span></span>
  418. </div>
  419.  
  420.  
  421.  
  422. <div class="section">
  423. <img src="https://41.media.tumblr.com/0c98853510b37cbf4a90c1b4ad5a05c0/tumblr_nv1f1e9IBB1sxhoaio5_250.png">
  424. <span class="text-content"><span><p><br>
  425. <b><a href="http://protectmccall.tumblr.com/">URL GOES HERE</a></b><br>
  426. member<br>
  427. <hr>
  428. some short text over here keep it two lines
  429. </span></span>
  430. </div>
  431.  
  432.  
  433. </div>
  434.  
  435.  
  436. <div id="text">
  437. Lorem ipsum dolor<a href="http://hholke.tumblr.com/post/69198355274/more-white" title="link icons credit"> sit amet,</a> consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et magna aliqua. Ut nim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip commodo consequat. <p>
  438.  
  439. </div>
  440.  
  441. <div id="linkies">
  442. <a href="/" title="back to blog" class="link"><img src="http://33.media.tumblr.com/80a571a81daebb8ef04da3fbe7ce3d83/tumblr_inline_mxeidb5Ett1qhuq5z.png"></a>
  443. <a href="/ask" title="ask" class="link"><img src="http://31.media.tumblr.com/15eac61266f7a7fb260d5763d8596ccf/tumblr_inline_mxeiabZiGf1qhuq5z.png"></a>
  444. <a href="http://hholke.tumblr.com/post/69198355274/more-white" title="click here to find some more icons for links~" class="link"><img src="http://33.media.tumblr.com/33071e97f3ce470dd4f676cacc10e146/tumblr_inline_mxeib4WHT41qhuq5z.png"></a>
  445.  
  446. </div>
  447.  
  448.  
  449.  
  450.  
  451.  
  452.  
  453. </div>
  454.  
  455.  
  456.  
  457.  
  458.  
  459.  
  460.  
  461. <div id="credit"><a href="http://protectmccall.tumblr.com" title="code by protectmccall">©</a></div> <!--DONT TOUCH THIS BROS-->
  462.  
  463.  
  464. </body>
  465. </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!