API tools faq
paste
Advertisement
paigeh987

Network Page 1 (Page Ver.)

paigeh987
Jun 21st, 2016
6,369
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.51 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.  
  26.  
  27. <!-- FONT SCRIPTS -->
  28.  
  29. <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'>
  30.  
  31. <script type="text/javascript">
  32. WebFontConfig = {
  33. 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' ] }
  34. };
  35. (function() {
  36. var wf = document.createElement('script');
  37. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  38. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  39. wf.type = 'text/javascript';
  40. wf.async = 'true';
  41. var s = document.getElementsByTagName('script')[0];
  42. s.parentNode.insertBefore(wf, s);
  43. })(); </script>
  44.  
  45. <style type="text/css">
  46.  
  47. /* --------------------------- SCROLLBAR ---------------------------- */
  48.  
  49. ::-webkit-scrollbar {
  50. width: 4px;height: 0px;}
  51. ::-webkit-scrollbar-button:start:decrement,
  52. ::-webkit-scrollbar-button:end:increment {
  53. height: 0px;
  54. display: block;
  55. }
  56. ::-webkit-scrollbar-track-piece {
  57. background-color: transparent;}
  58. ::-webkit-scrollbar-thumb:vertical {
  59. height: 9px;
  60. background-color: #e7e7e7;
  61. border:1px solid #a0a0a0;
  62. }
  63.  
  64.  
  65. /* --------------------------- STRUCTURE ----------------------------- */
  66.  
  67. body {
  68. margin:0px;
  69. color:#000;
  70. font-family: inconsolata, sans-serif;
  71. /*
  72. You can pick any of the following fonts (retype inside quote marks above):
  73. - inconsolata
  74. - helvetica
  75. - montserrat
  76. - open sans
  77. - bitter
  78. - lato
  79. */
  80. font-size:11px;
  81. line-height:140%;
  82. background-color: #ffffff;
  83. }
  84.  
  85. a {
  86. text-decoration:none;
  87. -webkit-transition: all .3s;
  88. color:#000;
  89. }
  90.  
  91. a:hover{
  92. color:#a0a0a0;
  93. -webkit-transition: all .3s;
  94. }
  95.  
  96. img {
  97. border:none;
  98. margin-bottom:0px;
  99. }
  100.  
  101. #container{
  102. margin-left:auto;
  103. margin-right:auto;
  104. width:685px;
  105. }
  106.  
  107. #image{
  108. margin-top:40px;
  109. text-align:center;
  110. }
  111.  
  112. #image img{
  113. height:80px;
  114. width:80px;
  115. border-radius:100px;
  116. padding:15px;
  117. border: 1px solid #f1f1f1;
  118. }
  119.  
  120. #title{
  121. position:relative;
  122. margin:70px 0px 25px 0px;
  123. text-align:center;
  124. font-size:19px;
  125. font-weight:300;
  126. letter-spacing:8px;
  127. text-transform:uppercase;
  128. line-height:100%;
  129. color:#000;
  130. }
  131.  
  132. #description{
  133. position:relative;
  134. padding-left:90px;
  135. padding-right:90px;
  136. padding-bottom:20px;
  137. text-align:center;
  138. font-size:11px;
  139. font-style:italic;
  140. letter-spacing:1px;
  141. text-transform:lowercase;
  142. line-height:150%;
  143. }
  144.  
  145. #memberscontainer{
  146. position:relative;
  147. margin-bottom:100px;
  148. margin-top:20px;
  149. text-align:center;
  150. }
  151.  
  152.  
  153. #links{
  154. position:relative;
  155. text-align:center;
  156. font-size:11px;
  157. line-height:100%;
  158. margin-bottom:60px;
  159. z-index:5;
  160. }
  161.  
  162. .link{
  163. position:relative;
  164. display: inline-block;
  165. padding:3px;
  166. margin-left:10px;
  167. margin-right:10px;
  168. border:1px solid #e7e7e7;
  169. background:#f8f8f8;
  170. text-align:center;
  171. text-transform:uppercase;
  172. letter-spacing:1px;
  173. -webkit-transition: all .5s;
  174. }
  175.  
  176. .link:hover{
  177. color:#a0a0a0;
  178. -webkit-transition: all .5s;
  179. }
  180.  
  181. .link a {
  182. color:#000;
  183. }
  184.  
  185. .sh{
  186. text-align:center;
  187. font-size:15px;
  188. margin-top:40px;
  189. margin-bottom:10px;
  190. letter-spacing:1px;
  191. font-style:italic;
  192. }
  193.  
  194. .member{
  195. position:relative;
  196. display:inline-block;
  197. height:170px;
  198. width:170px;
  199. margin-top:27px;
  200. margin-left:27px;
  201. margin-right:27px;
  202. margin-bottom:40px;
  203. background:#f8f8f8;
  204. -webkit-transition: all .5s
  205. }
  206.  
  207. .memberimg{
  208. position:absolute;
  209. padding:15px;
  210. border:1px solid #e7e7e7;
  211. -webkit-transition: all .5s
  212. }
  213.  
  214. .memberimg img{
  215. height:140px;
  216. width:140px;
  217. /* If you want grayscale icons delete, show the next line */
  218. /* -webkit-filter: grayscale(100%); */
  219. -webkit-transition: all 0.4s;
  220. -moz-transition: all 0.4s;
  221. -o-transition: all 0.4s;
  222. -ms-transition: all 0.4s;
  223. transition: all 0.4s;
  224. }
  225.  
  226. .member:hover{
  227. opacity:1.0;
  228. -webkit-transition: all .5s
  229. }
  230.  
  231. .name{
  232. position:relative;
  233. float:left;
  234. margin-top:16px;
  235. margin-left:16px;
  236. padding:20px;
  237. padding-bottom:10px;
  238. width:100px;
  239. height:110px;
  240. overflow:scroll;
  241. text-align:center;
  242. opacity:0.0;
  243. text-transform:uppercase;
  244. text-align:center;
  245. font-size:13px;
  246. z-index:9999999;
  247. color:#000;
  248. letter-spacing:2px;
  249. font-weight:bold;
  250. box-shadow: inset 0 0 0 0 transparent;
  251. -webkit-transition: all .6s;
  252. }
  253.  
  254. .member:hover .name{
  255. opacity:1.0;
  256. background:rgba(255,255,255,0);
  257. box-shadow: inset 0 140px 0 0 #fff;
  258. -webkit-transition: all .6s;
  259. }
  260.  
  261. .name a{
  262. color:#000;
  263. font-weight:thin;
  264. -webkit-transition: all .5s;
  265. }
  266.  
  267. .name a:hover{
  268. color:#a0a0a0;
  269. -webkit-transition: all .5s;
  270. }
  271.  
  272. .member:hover .memberimg{
  273. opacity:1;
  274. -webkit-filter: grayscale(0%);
  275. -moz-filter: grayscale(0%);
  276. -ms-filter: grayscale(0%);
  277. -o-filter: grayscale(0%);
  278. filter: grayscale(0%);
  279. -webkit-transition: all .5s;
  280. }
  281.  
  282. .bio{
  283. margin-left:-15px;
  284. margin-right:-15px;
  285. padding-top:10px;
  286. margin-bottom:-5px;
  287. text-transform:lowercase;
  288. letter-spacing:0px;
  289. font-size:11px;
  290. font-weight:400;
  291. }
  292.  
  293. .bio a{
  294. padding:3px;
  295. border:1px solid #e7e7e7;
  296. margin-left:3px;
  297. margin-right:3px;
  298. text-transform:uppercase;
  299. background:#f8f8f8;
  300. }
  301.  
  302. .cred{
  303. position:fixed;
  304. bottom:10px;
  305. right:15px;
  306. padding:3px 5px 3px 5px;
  307. background:#f5f5f5;
  308. border:1px solid #aeaeae;
  309. color:#a0a0a0;
  310. }
  311.  
  312. .cred a{
  313. color:#a0a0a0;
  314. }
  315.  
  316. {CustomCSS}</style></head><body>
  317.  
  318. <!-- FONTS (AGAIN) -->
  319.  
  320. <link href='http://fonts.googleapis.com/css?family=Neucha' rel='stylesheet' type='text/css'>
  321.  
  322.  
  323.  
  324. <div id="container">
  325.  
  326.  
  327. <!-- ------------ TITLE, IMAGE, DESCRIPTION AND LINKS ----------------->
  328.  
  329. <div id="title">The Example Network</div>
  330.  
  331. <div id="description">
  332. Type descripiton here
  333. </div>
  334.  
  335. <div id="links">
  336.  
  337. <a href="/"><div class="link">One</div></a>
  338.  
  339. <a href="/"><div class="link">Two</div></a>
  340.  
  341. <a href="/"><div class="link">Three</div></a>
  342.  
  343. <a href="/"><div class="link">Four</div></a>
  344.  
  345. </div>
  346.  
  347.  
  348. <!-- ------------------------------ MEMBERS ------------------------ -->
  349.  
  350. <div id="memberscontainer">
  351.  
  352. <div class="sh">ADMINS</div>
  353.  
  354. <!-- Start Member 1 -->
  355. <div class="member">
  356. <div class="name">
  357. Name
  358. <div class="bio">two or three line description goes here. you are an apple
  359. <p><a href="/">blogurl</a>
  360. </div>
  361. </div>
  362. <div class="memberimg">
  363. <img src="http://40.media.tumblr.com/8ec515faf818306911d3e55adb6c266e/tumblr_ngr4tbMUBb1sj8ev1o2_250.png"></div>
  364. </div>
  365. <!-- End Member 1 -->
  366.  
  367. <!-- Start Member 2 -->
  368. <div class="member">
  369. <div class="name">
  370. name
  371. <div class="bio">two or three line description goes here. If it goes longer, you get a scrollbar. isn't that neat.
  372. <p><a href="/">blogurl</a>
  373. </div>
  374. </div>
  375. <div class="memberimg">
  376. <img src="http://40.media.tumblr.com/28aaef41420deb3b8396832bdfaaee34/tumblr_ngr4tbMUBb1sj8ev1o3_250.png"></div>
  377. </div>
  378. <!-- End Member 2 -->
  379.  
  380. <!-- Start Member 3 -->
  381. <div class="member">
  382. <div class="name">
  383. name
  384. <div class="bio">two or three line description goes here
  385. <p><a href="/">blogurl</a>
  386. </div>
  387. </div>
  388. <div class="memberimg">
  389. <img src="http://40.media.tumblr.com/4354cab4788e5eb27552db2d79d5ffc0/tumblr_ngr4tbMUBb1sj8ev1o5_250.png"></div>
  390. </div>
  391. <!-- End Member 3 -->
  392.  
  393.  
  394. <div class="sh">MEMBERS</div>
  395.  
  396. <!-- Start Member 4 -->
  397. <div class="member">
  398. <div class="name">
  399. name
  400. <div class="bio">two or three line description goes here
  401. <p><a href="/">blogurl</a>
  402. </div>
  403. </div>
  404. <div class="memberimg">
  405. <img src="http://40.media.tumblr.com/70b65d9d37e4c6bca9f920841650fa8f/tumblr_ngr4tbMUBb1sj8ev1o6_250.png"></div>
  406. </div>
  407. <!-- End Member 4 -->
  408.  
  409. <!-- Start Member 5 -->
  410. <div class="member">
  411. <div class="name">
  412. name
  413. <div class="bio">two or three line description goes here
  414. <p><a href="/">blogurl</a>
  415. </div>
  416. </div>
  417. <div class="memberimg">
  418. <img src="http://40.media.tumblr.com/d352a40dc0d49bbefafec47cfa69c568/tumblr_ngr4tbMUBb1sj8ev1o4_250.png"></div>
  419. </div>
  420. <!-- End Member 5 -->
  421.  
  422. <!-- Start Member 6 -->
  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/8ec515faf818306911d3e55adb6c266e/tumblr_ngr4tbMUBb1sj8ev1o2_250.png"></div>
  432. </div>
  433. <!-- End Member 6 -->
  434.  
  435. <!-- Start Member 7 -->
  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/28aaef41420deb3b8396832bdfaaee34/tumblr_ngr4tbMUBb1sj8ev1o3_250.png"></div>
  445. </div>
  446. <!-- End Member 7 -->
  447.  
  448. <!-- Start Member 8 -->
  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/4354cab4788e5eb27552db2d79d5ffc0/tumblr_ngr4tbMUBb1sj8ev1o5_250.png"></div>
  458. </div>
  459. <!-- End Member 8 -->
  460.  
  461. <!-- Start Member 9 -->
  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/70b65d9d37e4c6bca9f920841650fa8f/tumblr_ngr4tbMUBb1sj8ev1o6_250.png"></div>
  471. </div>
  472. <!-- End Member 9 -->
  473.  
  474. <!-- Start Member 10 -->
  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/d352a40dc0d49bbefafec47cfa69c568/tumblr_ngr4tbMUBb1sj8ev1o4_250.png"></div>
  484. </div>
  485. <!-- End Member 10 -->
  486.  
  487. <!-- Start Member 11 -->
  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/8ec515faf818306911d3e55adb6c266e/tumblr_ngr4tbMUBb1sj8ev1o2_250.png"></div>
  497. </div>
  498. <!-- End Member 11 -->
  499.  
  500. <!-- Start Member 12 -->
  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/28aaef41420deb3b8396832bdfaaee34/tumblr_ngr4tbMUBb1sj8ev1o3_250.png"></div>
  510. </div>
  511. <!-- End Member 12 -->
  512.  
  513. <!-- Start Member 13 -->
  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/4354cab4788e5eb27552db2d79d5ffc0/tumblr_ngr4tbMUBb1sj8ev1o5_250.png"></div>
  523. </div>
  524. <!-- End Member 13 -->
  525.  
  526. <!-- Start Member 14 -->
  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/70b65d9d37e4c6bca9f920841650fa8f/tumblr_ngr4tbMUBb1sj8ev1o6_250.png"></div>
  536. </div>
  537. <!-- End Member 14 -->
  538.  
  539. <!-- Start Member 15 -->
  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/d352a40dc0d49bbefafec47cfa69c568/tumblr_ngr4tbMUBb1sj8ev1o4_250.png"></div>
  549. </div>
  550. <!-- End Member 15 -->
  551.  
  552. <center><br><br><br><span style="font-size:12px; font-style:italic;">and more coming soon!</span></center>
  553.  
  554.  
  555. <!-- NOTE: if you want to add more members copy the code under div class=member and paste it here (before the breaks)-->
  556.  
  557. </div>
  558.  
  559.  
  560.  
  561. </div>
  562.  
  563.  
  564. </div>
  565.  
  566.  
  567. <a href="http://neonbikethemes.tumblr.com"><div class="cred">nb</div></a>
  568.  
  569. </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!