API tools faq
paste
Advertisement
paigeh987

Network Page 1 (Theme Ver.)

paigeh987
Jun 21st, 2016
2,370
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.19 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. <!--
  4.  
  5. Network Page #01 by Paige @ neonbikethemes.tumblr.com
  6. last updated 06.21.2016
  7.  
  8. Rules:
  9. - Do not steal code or design
  10. - Edit as much as you want but don't remove credit!
  11. - Like/reblog the post
  12.  
  13. made using a base code by Narruld @ narruld.tumblr.com
  14.  
  15. if you need help with changing anything let me know and i'll be happy to help! (message me through neonbikethemes.tumblr.com/ask)
  16.  
  17. -->
  18.  
  19.  
  20. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  21. <head>
  22.  
  23. <title>{Title}</title>
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  27.  
  28. <meta name="color:title" content="98ac3e"/>
  29. <meta name="color:background" content="ffffff"/>
  30. <meta name="color:text" content="#858585"/>
  31. <meta name="color:link" content="#fbce047"/>
  32. <meta name="color:hover" content="#f1f1f1"/>
  33. <meta name="color:box" content="#f8f8f8"/>
  34. <meta name="color:border" content="#f5f5f5"/>
  35. <meta name="color:scrollbar" content="b9b9b9"/>
  36. <meta name="color:scrollbarbg" content="f7f7f7"/>
  37.  
  38. <meta name="select:Font" content="Inconsolata" title="Inconsolata">
  39. <meta name="select:Font" content="Helvetica" title="Helevtica">
  40. <meta name="select:Font" content="Montserrat" title="Montserrat">
  41. <meta name="select:Font" content="Bitter" title="Bitter">
  42. <meta name="select:Font" content="Open Sans" title="Open Sans">
  43. <meta name="select:Font" content="Lato" title="Lato">
  44.  
  45. <meta name="image:network icon" content=""/>
  46.  
  47. <meta name="if:Grayscale" content="0"/>
  48.  
  49. <meta name="text:link1" content="">
  50. <meta name="text:Link1 url" content="/">
  51. <meta name="text:Link2" content="">
  52. <meta name="text:Link2 url" content="/">
  53. <meta name="text:Link3" content="">
  54. <meta name="text:Link3 url" content="/">
  55. <meta name="text:Link4" content="">
  56. <meta name="text:Link4 url" content="/">
  57.  
  58. <!-- FONT SCRIPTS -->
  59.  
  60. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic,400italic|Bitter:400,400italic,700|Montserrat:400,700|Lato:400,400italic,700italic,700|Inconsolata:400,700' rel='stylesheet' type='text/css'>
  61.  
  62. <script type="text/javascript">
  63. WebFontConfig = {
  64. google: { families: [ 'Open+Sans:400,700,700italic,400italic:latin', 'Bitter:400,400italic,700:latin', 'Montserrat:400,700:latin', 'Lato:400,400italic,700italic,700:latin', 'Inconsolata:400,700:latin' ] }
  65. };
  66. (function() {
  67. var wf = document.createElement('script');
  68. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  69. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  70. wf.type = 'text/javascript';
  71. wf.async = 'true';
  72. var s = document.getElementsByTagName('script')[0];
  73. s.parentNode.insertBefore(wf, s);
  74. })(); </script>
  75.  
  76. <style type="text/css">
  77.  
  78. /* --------------------------- SCROLLBAR ---------------------------- */
  79.  
  80. ::-webkit-scrollbar {
  81. width: 4px;height: 0px;}
  82. ::-webkit-scrollbar-button:start:decrement,
  83. ::-webkit-scrollbar-button:end:increment {
  84. height: 0px;
  85. display: block;
  86. }
  87. ::-webkit-scrollbar-track-piece {
  88. background-color: transparent;}
  89. ::-webkit-scrollbar-thumb:vertical {
  90. height: 9px;
  91. background-color: #e7e7e7;
  92. border:1px solid #a0a0a0;
  93. }
  94.  
  95.  
  96. /* ---------------------------- FONTS ------------------------------ */
  97.  
  98. @import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);
  99.  
  100. /* --------------------------- STRUCTURE ----------------------------- */
  101.  
  102. body {
  103. margin:0px;
  104. color:{color:text};
  105. font-family: {select:font}, sans-serif;
  106. font-size:11px;
  107. line-height:140%;
  108. background-color: {color:background};
  109. }
  110.  
  111. a {
  112. text-decoration:none;
  113. -webkit-transition: all .3s;
  114. color:{color:link};
  115. }
  116.  
  117. a:hover{
  118. color:{color:text};
  119. -webkit-transition: all .3s;
  120. }
  121.  
  122. img {
  123. border:none;
  124. margin-bottom:-6px;
  125. }
  126.  
  127. #container{
  128. margin-left:auto;
  129. margin-right:auto;
  130. width:685px;
  131. }
  132.  
  133. #image{
  134. margin-top:40px;
  135. text-align:center;
  136. }
  137.  
  138. #image img{
  139. height:80px;
  140. width:80px;
  141. border-radius:100px;
  142. padding:15px;
  143. border: 1px solid {color:border};
  144. }
  145.  
  146. #title{
  147. position:relative;
  148. margin:70px 0px 25px 0px;
  149. text-align:center;
  150. font-size:19px;
  151. font-weight:300;
  152. letter-spacing:8px;
  153. text-transform:uppercase;
  154. line-height:100%;
  155. }
  156.  
  157. #description{
  158. position:relative;
  159. padding-left:90px;
  160. padding-right:90px;
  161. padding-bottom:20px;
  162. text-align:center;
  163. font-size:11px;
  164. font-style:italic;
  165. letter-spacing:1px;
  166. text-transform:lowercase;
  167. line-height:150%;
  168. }
  169.  
  170. #memberscontainer{
  171. position:relative;
  172. margin-bottom:100px;
  173. margin-top:20px;
  174. text-align:center;
  175. }
  176.  
  177.  
  178. #links{
  179. position:relative;
  180. text-align:center;
  181. font-size:11px;
  182. line-height:100%;
  183. margin-bottom:60px;
  184. z-index:5;
  185. }
  186.  
  187. .link{
  188. position:relative;
  189. display: inline-block;
  190. padding:3px;
  191. margin-left:10px;
  192. margin-right:10px;
  193. border:1px solid #e7e7e7;
  194. background:#f8f8f8;
  195. text-align:center;
  196. text-transform:uppercase;
  197. letter-spacing:1px;
  198. -webkit-transition: all .3s;
  199. }
  200.  
  201. .link:hover{
  202. color:#a0a0a0;
  203. -webkit-transition: all .3s;
  204. }
  205.  
  206. .link a {
  207. color:#000;
  208. }
  209.  
  210. .sh{
  211. text-align:center;
  212. font-size:15px;
  213. margin-top:40px;
  214. margin-bottom:10px;
  215. letter-spacing:1px;
  216. font-style:italic;
  217. }
  218.  
  219. .member{
  220. position:relative;
  221. display:inline-block;
  222. height:170px;
  223. width:170px;
  224. margin-top:27px;
  225. margin-left:27px;
  226. margin-right:27px;
  227. margin-bottom:40px;
  228. background:{color:box};
  229. -webkit-transition: all .3s
  230. }
  231.  
  232. .memberimg{
  233. position:absolute;
  234. padding:15px;
  235. border:1px solid #e7e7e7;
  236. -webkit-transition: all .3s
  237. }
  238.  
  239. .memberimg img{
  240. height:140px;
  241. width:140px;
  242. {block:Ifgrayscale}
  243. -webkit-filter: grayscale(100%);
  244. {/block:Ifgrayscale}
  245. -webkit-transition: all 0.4s;
  246. -moz-transition: all 0.4s;
  247. -o-transition: all 0.4s;
  248. -ms-transition: all 0.4s;
  249. transition: all 0.4s;
  250. }
  251.  
  252. .member:hover{
  253. opacity:1.0;
  254. -webkit-transition: all .3s
  255. }
  256.  
  257. .name{
  258. position:relative;
  259. float:left;
  260. margin-top:16px;
  261. margin-left:16px;
  262. padding:20px;
  263. padding-bottom:10px;
  264. width:100px;
  265. height:110px;
  266. overflow:scroll;
  267. text-align:center;
  268. opacity:0.0;
  269. text-transform:uppercase;
  270. text-align:center;
  271. font-size:13px;
  272. z-index:9999999;
  273. color:{color:text};
  274. letter-spacing:2px;
  275. font-weight:bold;
  276. box-shadow: inset 0 0 0 0 transparent;
  277. -webkit-transition: all .6s;
  278. }
  279.  
  280. .member:hover .name{
  281. opacity:1.0;
  282. background:rgba(255,255,255,0);
  283. box-shadow: inset 0 140px 0 0 #fff;
  284. -webkit-transition: all .6s;
  285. }
  286.  
  287. .name a{
  288. color:{color:link};
  289. font-weight:thin;
  290. -webkit-transition: all .3s;
  291. }
  292.  
  293. .name a:hover{
  294. color:{color:text};
  295. -webkit-transition: all .3s;
  296. }
  297.  
  298. .member:hover .memberimg{
  299. opacity:1;
  300. -webkit-filter: grayscale(0%);
  301. -moz-filter: grayscale(0%);
  302. -ms-filter: grayscale(0%);
  303. -o-filter: grayscale(0%);
  304. filter: grayscale(0%);
  305. -webkit-transition: all .3s;
  306. }
  307.  
  308. .bio{
  309. margin-left:-15px;
  310. margin-right:-15px;
  311. padding-top:10px;
  312. margin-bottom:-5px;
  313. text-transform:lowercase;
  314. letter-spacing:0px;
  315. font-size:11px;
  316. font-weight:400;
  317. }
  318.  
  319. .bio a{
  320. padding:3px;
  321. border:1px solid {color:border};
  322. margin-left:3px;
  323. margin-right:3px;
  324. text-transform:uppercase;
  325. background:{color:box};
  326. }
  327.  
  328. .cred{
  329. position:fixed;
  330. bottom:10px;
  331. right:15px;
  332. padding:3px 5px 3px 5px;
  333. background:#f5f5f5;
  334. border:1px solid {color:border};
  335. color:{color:text};
  336. }
  337.  
  338. .cred a{
  339. color:#a0a0a0;
  340. }
  341.  
  342. {CustomCSS}</style></head><body>
  343.  
  344. <!-- FONTS (AGAIN) -->
  345.  
  346. <link href='http://fonts.googleapis.com/css?family=Neucha' rel='stylesheet' type='text/css'>
  347.  
  348.  
  349.  
  350. <div id="container">
  351.  
  352.  
  353. <!-- ------------ TITLE, IMAGE, DESCRIPTION AND LINKS ----------------->
  354.  
  355. <div id="title">The Example Network</div>
  356.  
  357. <div id="description">
  358. {Description}
  359. </div>
  360.  
  361. <div id="links">
  362.  
  363. {block:Iflink1}<a href="{text:link1 url}"><div class="link">{text:link1}</div></a>{/block:Iflink1}
  364.  
  365. {block:Iflink2}<a href="{text:link2 url}"><div class="link">{text:link2}</div></a>{/block:Iflink2}
  366.  
  367. {block:Iflink3}<a href="{text:link3 url}"><div class="link">{text:link3}</div></a>{/block:Iflink3}
  368.  
  369. {block:Iflink4}<a href="{text:link4 url}"><div class="link">{text:link4}</div></a>{/block:Iflink4}
  370.  
  371. </div>
  372.  
  373.  
  374. <!-- ------------------------------ MEMBERS ------------------------ -->
  375.  
  376. <div id="memberscontainer">
  377.  
  378. <div class="sh">ADMINS</div>
  379.  
  380. <!-- Start Member 1 -->
  381. <div class="member">
  382. <div class="name">
  383. Name
  384. <div class="bio">two or three line description goes here. you are an apple
  385. <p><a href="/">blogurl</a> <!-- fill in the blog url -->
  386. </div>
  387. </div>
  388. <div class="memberimg">
  389. <img src="http://40.media.tumblr.com/8ec515faf818306911d3e55adb6c266e/tumblr_ngr4tbMUBb1sj8ev1o2_250.png"></div> <!-- replace the url with the urrl of your image right click and hit image url) -->
  390. </div>
  391. <!-- End Member 1 -->
  392.  
  393. <!-- Start Member 2 -->
  394. <div class="member">
  395. <div class="name">
  396. name
  397. <div class="bio">two or three line description goes here. If it goes longer, you get a scrollbar. isn't that neat.
  398. <p><a href="/">blogurl</a>
  399. </div>
  400. </div>
  401. <div class="memberimg">
  402. <img src="http://40.media.tumblr.com/28aaef41420deb3b8396832bdfaaee34/tumblr_ngr4tbMUBb1sj8ev1o3_250.png"></div>
  403. </div>
  404. <!-- End Member 2 -->
  405.  
  406. <!-- Start Member 3 -->
  407. <div class="member">
  408. <div class="name">
  409. name
  410. <div class="bio">two or three line description goes here
  411. <p><a href="/">blogurl</a>
  412. </div>
  413. </div>
  414. <div class="memberimg">
  415. <img src="http://40.media.tumblr.com/4354cab4788e5eb27552db2d79d5ffc0/tumblr_ngr4tbMUBb1sj8ev1o5_250.png"></div>
  416. </div>
  417. <!-- End Member 3 -->
  418.  
  419.  
  420. <div class="sh">MEMBERS</div>
  421.  
  422. <!-- Start Member 4 -->
  423. <div class="member">
  424. <div class="name">
  425. name
  426. <div class="bio">two or three line description goes here
  427. <p><a href="/">blogurl</a>
  428. </div>
  429. </div>
  430. <div class="memberimg">
  431. <img src="http://40.media.tumblr.com/70b65d9d37e4c6bca9f920841650fa8f/tumblr_ngr4tbMUBb1sj8ev1o6_250.png"></div>
  432. </div>
  433. <!-- End Member 4 -->
  434.  
  435. <!-- Start Member 5 -->
  436. <div class="member">
  437. <div class="name">
  438. name
  439. <div class="bio">two or three line description goes here
  440. <p><a href="/">blogurl</a>
  441. </div>
  442. </div>
  443. <div class="memberimg">
  444. <img src="http://40.media.tumblr.com/d352a40dc0d49bbefafec47cfa69c568/tumblr_ngr4tbMUBb1sj8ev1o4_250.png"></div>
  445. </div>
  446. <!-- End Member 5 -->
  447.  
  448. <!-- Start Member 6 -->
  449. <div class="member">
  450. <div class="name">
  451. name
  452. <div class="bio">two or three line description goes here
  453. <p><a href="/">blogurl</a>
  454. </div>
  455. </div>
  456. <div class="memberimg">
  457. <img src="http://40.media.tumblr.com/8ec515faf818306911d3e55adb6c266e/tumblr_ngr4tbMUBb1sj8ev1o2_250.png"></div>
  458. </div>
  459. <!-- End Member 6 -->
  460.  
  461. <!-- Start Member 7 -->
  462. <div class="member">
  463. <div class="name">
  464. name
  465. <div class="bio">two or three line description goes here
  466. <p><a href="/">blogurl</a>
  467. </div>
  468. </div>
  469. <div class="memberimg">
  470. <img src="http://40.media.tumblr.com/28aaef41420deb3b8396832bdfaaee34/tumblr_ngr4tbMUBb1sj8ev1o3_250.png"></div>
  471. </div>
  472. <!-- End Member 7 -->
  473.  
  474. <!-- Start Member 8 -->
  475. <div class="member">
  476. <div class="name">
  477. name
  478. <div class="bio">two or three line description goes here
  479. <p><a href="/">blogurl</a>
  480. </div>
  481. </div>
  482. <div class="memberimg">
  483. <img src="http://40.media.tumblr.com/4354cab4788e5eb27552db2d79d5ffc0/tumblr_ngr4tbMUBb1sj8ev1o5_250.png"></div>
  484. </div>
  485. <!-- End Member 8 -->
  486.  
  487. <!-- Start Member 9 -->
  488. <div class="member">
  489. <div class="name">
  490. name
  491. <div class="bio">two or three line description goes here
  492. <p><a href="/">blogurl</a>
  493. </div>
  494. </div>
  495. <div class="memberimg">
  496. <img src="http://40.media.tumblr.com/70b65d9d37e4c6bca9f920841650fa8f/tumblr_ngr4tbMUBb1sj8ev1o6_250.png"></div>
  497. </div>
  498. <!-- End Member 9 -->
  499.  
  500. <!-- Start Member 10 -->
  501. <div class="member">
  502. <div class="name">
  503. name
  504. <div class="bio">two or three line description goes here
  505. <p><a href="/">blogurl</a>
  506. </div>
  507. </div>
  508. <div class="memberimg">
  509. <img src="http://40.media.tumblr.com/d352a40dc0d49bbefafec47cfa69c568/tumblr_ngr4tbMUBb1sj8ev1o4_250.png"></div>
  510. </div>
  511. <!-- End Member 10 -->
  512.  
  513. <!-- Start Member 11 -->
  514. <div class="member">
  515. <div class="name">
  516. name
  517. <div class="bio">two or three line description goes here
  518. <p><a href="/">blogurl</a>
  519. </div>
  520. </div>
  521. <div class="memberimg">
  522. <img src="http://40.media.tumblr.com/8ec515faf818306911d3e55adb6c266e/tumblr_ngr4tbMUBb1sj8ev1o2_250.png"></div>
  523. </div>
  524. <!-- End Member 11 -->
  525.  
  526. <!-- Start Member 12 -->
  527. <div class="member">
  528. <div class="name">
  529. name
  530. <div class="bio">two or three line description goes here
  531. <p><a href="/">blogurl</a>
  532. </div>
  533. </div>
  534. <div class="memberimg">
  535. <img src="http://40.media.tumblr.com/28aaef41420deb3b8396832bdfaaee34/tumblr_ngr4tbMUBb1sj8ev1o3_250.png"></div>
  536. </div>
  537. <!-- End Member 12 -->
  538.  
  539. <!-- Start Member 13 -->
  540. <div class="member">
  541. <div class="name">
  542. name
  543. <div class="bio">two or three line description goes here
  544. <p><a href="/">blogurl</a>
  545. </div>
  546. </div>
  547. <div class="memberimg">
  548. <img src="http://40.media.tumblr.com/4354cab4788e5eb27552db2d79d5ffc0/tumblr_ngr4tbMUBb1sj8ev1o5_250.png"></div>
  549. </div>
  550. <!-- End Member 13 -->
  551.  
  552. <!-- Start Member 14 -->
  553. <div class="member">
  554. <div class="name">
  555. name
  556. <div class="bio">two or three line description goes here
  557. <p><a href="/">blogurl</a>
  558. </div>
  559. </div>
  560. <div class="memberimg">
  561. <img src="http://40.media.tumblr.com/70b65d9d37e4c6bca9f920841650fa8f/tumblr_ngr4tbMUBb1sj8ev1o6_250.png"></div>
  562. </div>
  563. <!-- End Member 14 -->
  564.  
  565. <!-- Start Member 15 -->
  566. <div class="member">
  567. <div class="name">
  568. name
  569. <div class="bio">two or three line description goes here
  570. <p><a href="/">blogurl</a>
  571. </div>
  572. </div>
  573. <div class="memberimg">
  574. <img src="http://40.media.tumblr.com/d352a40dc0d49bbefafec47cfa69c568/tumblr_ngr4tbMUBb1sj8ev1o4_250.png"></div>
  575. </div>
  576. <!-- End Member 15 -->
  577.  
  578. <center><br><br><br><span style="font-size:12px; font-style:italic;">and more coming soon!</span></center>
  579.  
  580.  
  581. <!-- NOTE: if you want to add more members copy the code under div class=member and paste it here (before the breaks)-->
  582.  
  583. </div>
  584.  
  585.  
  586.  
  587. </div>
  588.  
  589.  
  590. </div>
  591.  
  592.  
  593. <a href="http://neonbikethemes.tumblr.com"><div class="cred">nb</div></a>
  594.  
  595. </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!