API tools faq
paste
Advertisement
MystiqueAquanian

RP: Connections Page

MystiqueAquanian
Jul 13th, 2017
106
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.26 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>Connections</title>
  24. <link rel="shortcut icon" href="http://i.imgur.com/NjyI2Hp.png">
  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">Connections</div>
  330.  
  331. <div id="description">
  332. hover for more info!!!
  333. </div>
  334.  
  335. <div id="links">
  336.  
  337. <a href="/"><div class="link">Home</div></a>
  338.  
  339. <a href="/ask"><div class="link">Ask</div></a>
  340.  
  341. <a href="/nav"><div class="link">Nav</div></a>
  342.  
  343. <a href="/about"><div class="link">bio</div></a>
  344.  
  345. </div>
  346.  
  347.  
  348. <!-- ------------------------------ MEMBERS ------------------------ -->
  349.  
  350. <div id="memberscontainer">
  351.  
  352. <div class="sh">Taken</div>
  353.  
  354.  
  355.  
  356.  
  357.  
  358.  
  359.  
  360.  
  361.  
  362. <div class="sh">Wanted</div>
  363.  
  364. <!-- Start Member 1 -->
  365. <div class="member">
  366. <div class="name">
  367. Best Friends
  368. <div class="bio">the only one she can confide everything in. advice, secrets, talking about crushes… anything.
  369. <p><a href="/">blogurl</a>
  370. </div>
  371. </div>
  372. <div class="memberimg">
  373. <img src="http://imgur.com/yIfmo2I.png"></div>
  374. </div>
  375. <!-- End Member 1 -->
  376.  
  377. <!-- Start Member 2 -->
  378. <div class="member">
  379. <div class="name">
  380. xx buddies
  381. <div class="bio">these two share the same hobby:
  382. <p><a href="/">blogurl</a>
  383. </div>
  384. </div>
  385. <div class="memberimg">
  386. <img src="/"></div>
  387. </div>
  388. <!-- End Member 2 -->
  389.  
  390.  
  391. <!-- Start Member 3 -->
  392. <div class="member">
  393. <div class="name">
  394. Old friend
  395. <div class="bio">
  396. <p>this person was once a friend of hers, but they drifted apart, and now they are reunited. </p>
  397. <p><a href="/">blogurl</a>
  398. </div>
  399. </div>
  400. <div class="memberimg">
  401. <img src="http://imgur.com/jDrTXve.png"></div>
  402. </div>
  403. <!-- End Member 3 -->
  404.  
  405.  
  406. <!-- Start Member 3 -->
  407. <div class="member">
  408. <div class="name">
  409. Good Influence
  410. <div class="bio">someone calm and quiet to tone down her sass and enthusiasm. Stops her from doing stupid things like spending too much money.
  411. <p><a href="/">blogurl</a>
  412. </div>
  413. </div>
  414. <div class="memberimg">
  415. <img src="http://imgur.com/nBm1fD4.png"></div>
  416. </div>
  417. <!-- End Member 3 -->
  418.  
  419. <!-- Start Member 3 -->
  420. <div class="member">
  421. <div class="name">
  422. Partners in crime
  423. <div class="bio">this person tries their best to convince her to do stupid stuff. the one she goes to when she wants to stupid stuff.
  424. <p><a href="/">blogurl</a>
  425. </div>
  426. </div>
  427. <div class="memberimg">
  428. <img src="http://imgur.com/oSsf5YH.png"></div>
  429. </div>
  430. <!-- End Member 3 -->
  431.  
  432.  
  433. <!-- Start Member 15 -->
  434. <div class="member">
  435. <div class="name">
  436. Frenemy (m/f/nb)
  437. <div class="bio">a love-hate relationship, sometimes they are all besties and everything, while other times they can't stand each other.
  438. <p><a href="/">blogurl</a>
  439. </div>
  440. </div>
  441. <div class="memberimg">
  442. <img src="http://imgur.com/RcIaB24.png"></div>
  443. </div>
  444. <!-- End Member 15 -->
  445.  
  446.  
  447. <!-- Start Member 3 -->
  448. <div class="member">
  449. <div class="name">
  450. Enemy/rival
  451. <div class="bio">the one she dislikes at first glance, simply cannot stand, and just pisses her off anytime anywhere.
  452. <p><a href="/">blogurl</a>
  453. </div>
  454. </div>
  455. <div class="memberimg">
  456. <img src="http://imgur.com/PV2kfVD.png"></div>
  457. </div>
  458. <!-- End Member 3 -->
  459.  
  460. <!-- Start Member 8 -->
  461. <div class="member">
  462. <div class="name">
  463. Low-key crush (m)
  464. <div class="bio">the one she kinda has a crush on, but since she is so focused on her work and studies, she didn't really paid attention to this crush in the past. Maybe things will change?
  465. <p><a href="/">blogurl</a>
  466. </div>
  467. </div>
  468. <div class="memberimg">
  469. <img src="http://imgur.com/hRNminI.png"></div>
  470. </div>
  471. <!-- End Member 8 -->
  472.  
  473. <!-- Start Member 9 -->
  474. <div class="member">
  475. <div class="name">
  476. Awkward Kinda-ex (m)
  477. <div class="bio">this is by far the most fun to think of. the idea is that she once went to a bar/club/got dragged to a party, got drunk, hooked up with this person. She completely regretted it afterwards, and her relationship with them has always been very awkward ever since.
  478. <p><a href="/">blogurl</a>
  479. </div>
  480. </div>
  481. <div class="memberimg">
  482. <img src="http://imgur.com/CwAxmMu.png"></div>
  483. </div>
  484. <!-- End Member 9 -->
  485.  
  486.  
  487. <!-- Start Member 7 -->
  488. <div class="member">
  489. <div class="name">
  490. NOTP (m)
  491. <div class="bio">They dated a few times either because of friends setting them up or her parents want her to have fun, either is ok, but they just don't work out. Their relationship has been awkward ever since.
  492. <p><a href="/">blogurl</a>
  493. </div>
  494. </div>
  495. <div class="memberimg">
  496. <img src="http://i.imgur.com/Sbrhz2S.png"></div>
  497. </div>
  498. <!-- End Member 7 -->
  499.  
  500.  
  501. <!-- Start Member 15 -->
  502. <div class="member">
  503. <div class="name">
  504. Asshole Ex (m)
  505. <div class="bio">they were once in a relationship but one day he just left with only a text. That's why she had a constant fear of being left behind, but this also helped her become more independent and learn to be happy by herself. they reunited at HWU now, and she is NOT happy with him.
  506. <p><a href="/">blogurl</a>
  507. </div>
  508. </div>
  509. <div class="memberimg">
  510. <img src="http://imgur.com/YsH8Au7.png"></div>
  511. </div>
  512. <!-- End Member 15 -->
  513.  
  514.  
  515. <center><br><br><br><span style="font-size:12px; font-style:italic;">and more coming soon!</span></center>
  516.  
  517.  
  518. <!-- NOTE: if you want to add more members copy the code under div class=member and paste it here (before the breaks)-->
  519.  
  520. </div>
  521.  
  522.  
  523.  
  524. </div>
  525.  
  526.  
  527. </div>
  528.  
  529.  
  530. <a href="http://neonbikethemes.tumblr.com"><div class="cred">nb</div></a>
  531.  
  532. </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!