API tools faq
paste
bsethemes

BETWEEN FRIENDS

bsethemes
Sep 18th, 2015
522
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.23 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><html><head>
  2. <!----
  3. _______ __ __ .____ __ __ .____ ____ _ _
  4. ' / | | / | | / / \ `. /
  5. | |___| |__. |\ /| |__. |,_-< `./
  6. | | | | | \/ | | | ` ,'
  7. / / / /----/ / / /----/ `----' _-'
  8.  
  9.  
  10.  
  11.  
  12. ____ _____ .____ _______ __ __ .____ __ __ .____ _____
  13. / \ ( / ' / | | / | | / (
  14. |,_-< `--. |__. | |___| |__. |\ /| |__. `--.
  15. | ` | | | | | | | \/ | | |
  16. `----' \___.' /----/ / / / /----/ / / /----/ \___.'
  17.  
  18.  
  19.  
  20. -don't change or remove credit
  21. -don't take bits of the code
  22. -don't claim theme as yours
  23. -for any questions, feedback or theme requests please don't hesitate to contanct me!!!
  24.  
  25. DON'T TOUCH ANYTHING THAT'S NOT ANNOTATED UNLESS YOU KNOW WHAT YOU'RE DOING
  26. ---->
  27.  
  28.  
  29. <title>for how long?</title>
  30. <!--THE TITLE THAT SHOWS IN THE UPPER TAB ^^^^-->
  31.  
  32.  
  33.  
  34. <link rel="shortcut icon" href="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSQYlGy39OyvCx1Td_hyYh9BwIejyMCPVvIUibUjQ97nuZ4q-co">
  35. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  36.  
  37.  
  38. <script type="text/javascript">
  39. WebFontConfig = {
  40. google: { families: [ 'Raleway::latin' ] }
  41. };
  42. (function() {
  43. var wf = document.createElement('script');
  44. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  45. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  46. wf.type = 'text/javascript';
  47. wf.async = 'true';
  48. var s = document.getElementsByTagName('script')[0];
  49. s.parentNode.insertBefore(wf, s);
  50. })(); </script>
  51.  
  52. <!--FONT CODE-->
  53.  
  54. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  55. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  56. <script>
  57. (function($){
  58. $(document).ready(function(){
  59. $("a[title]").style_my_tooltips({
  60. tip_follows_cursor:true,
  61. tip_delay_time:90,
  62. tip_fade_speed:600,
  63. attribute:"title"
  64. });
  65. });
  66. })(jQuery);
  67. </script>
  68.  
  69. <!--TOOLTIP CODE-->
  70.  
  71. <style type="text/css">
  72.  
  73.  
  74. ::-moz-selection {
  75. background: transparent; /*background selection color*/
  76. color:#14121D; /*text selection color*/
  77. }
  78.  
  79. ::selection {
  80. background: transparent; /*background selection color*/
  81. color:#14121D; /*text selection color (different browser)*/
  82. }
  83.  
  84.  
  85. ::-webkit-scrollbar {
  86. width: 5px;
  87. }
  88.  
  89. ::-webkit-scrollbar-track {
  90. background-color: transparent; /*scroll bar track*/
  91. border:2px solid #14121D; /*scroll bar borders color (I advise to make the same color as the scroll bar thumb, but you can delete it if you don't want it*/
  92. }
  93.  
  94. ::-webkit-scrollbar-thumb {
  95. height:auto;
  96. background-color:#14121D; /*scroll bar thumb color*/
  97. }
  98.  
  99. #s-m-t-tooltip {
  100. max-width:200px;
  101. margin:25px 20px 25px 20px;
  102. background:#14121D; /* tool tips color */
  103. color:#fff; /* tool tips text color */
  104. font-size:11px;
  105. line-height:13px;
  106. padding:3px 5px 4px 5px;
  107. opacity:.1;
  108. border: 1px solid #e5e5e5; /* tool tip border */
  109. -webkit-box-shadow: 3px 3px 0px -1px rgba(255,255,255,0.08);
  110. -moz-box-shadow: 3px 3px 0px -1px rgba(255,255,255,0.08);
  111. box-shadow: 3px 3px 0px -1px rgba(255,255,255,0.08);
  112. -webkit-transition: all 0.2s ease-out;
  113. -moz-transition: all 0.2s ease-out;
  114. transition: all 0.2s ease-out;
  115. z-index:999999999999999999999999999999999999;
  116. }
  117.  
  118.  
  119. body {
  120. overflow:hidden;
  121. font-family: 'Raleway', sans-serif;
  122. font-size:12px; /*text size*/
  123. color:#2d2d2d;/*text color*/
  124. background-color:#2d2d2d; /*background color*/
  125. }
  126.  
  127.  
  128. a {
  129. color:transparent;
  130. font-style:italic; /*italiced links */
  131. text-decoration:none;
  132. }
  133.  
  134.  
  135. a:hover {
  136. color:#c0c0c0;/* hover color */
  137. text-decoration:none;
  138. }
  139.  
  140. h3 {
  141. text-align:left;
  142. text-decoration:none;
  143. text-transform:uppercase;
  144. font-size:17px;
  145. margin-top:-4px;
  146. margin-bottom:0px;
  147. letter-spacing:3px;
  148. }
  149.  
  150. q {
  151. font-style:italic;
  152. }
  153.  
  154. #circle1 {
  155. background:#E93D20;/*first crescent color*/
  156. width:150px;
  157. height:150px;
  158. border-radius:100%;
  159. position:absolute;
  160. left:300px;
  161. top:200px;
  162. }
  163.  
  164. #info1 {
  165. background:#2d2d2d; /*CHANGE THIS TO THE COLOR OF THE BACKGROUND*/
  166. width:150px;
  167. height:150px;
  168. overflow:hidden;
  169. color:transparent;
  170. position:absolute;
  171. border-radius:100%;
  172. top:20px;
  173. -webkit-transition-duration: 0.5s;
  174. -moz-transition-duration: 0.5s;
  175. -o-transition-duration: 0.5s;
  176. transition-duration: 0.5s;
  177. }
  178.  
  179. #circle1:hover a {
  180. color:#808080;
  181. }
  182.  
  183. #info1 h3 {
  184. margin-bottom:7px;
  185. }
  186.  
  187. #circle1:hover #info1 {
  188. border-radius:5px;
  189. background:#fff;
  190. padding:10px;
  191. overflow:auto;
  192. width:230px;
  193. height:230px;
  194. right:-50px;
  195. z-index:1;
  196. -webkit-transition-duration: 0.5s;
  197. -moz-transition-duration: 0.5s;
  198. -o-transition-duration: 0.5s;
  199. transition-duration: 0.5s;
  200. }
  201.  
  202. #circle2 {
  203. background:#E9D820;/*second crescent color*/
  204. width:150px;
  205. height:150px;
  206. border-radius:100%;
  207. position:absolute;
  208. left:450px;
  209. top:200px;
  210. }
  211.  
  212. #info2 {
  213. background:#2d2d2d; /*CHANGE THIS TO THE COLOR OF THE BACKGROUND*/
  214. width:150px;
  215. height:150px;
  216. color:transparent;
  217. overflow:hidden;
  218. position:absolute;
  219. border-radius:100%;
  220. bottom:20px;
  221. -webkit-transition-duration: 0.5s;
  222. -moz-transition-duration: 0.5s;
  223. -o-transition-duration: 0.5s;
  224. transition-duration: 0.5s;
  225. }
  226.  
  227. #circle2:hover a {
  228. color:#808080;
  229. }
  230.  
  231. #circle2:hover a:hover {
  232. text-decoration:line-through;
  233. }
  234.  
  235. #circle2:hover #info2 {
  236. border-radius:5px;
  237. background:#fff;/*box on-hover color*/
  238. padding:10px;
  239. overflow:auto;
  240. font-size:16px;
  241. width:250px;
  242. height:250px;
  243. right:-60px;
  244. z-index:1;
  245. -webkit-transition-duration: 0.5s;
  246. -moz-transition-duration: 0.5s;
  247. -o-transition-duration: 0.5s;
  248. transition-duration: 0.5s;
  249. }
  250.  
  251. #tagsbundle {
  252. border-bottom:1px solid #2d2d2d;
  253. padding:10px;
  254. letter-spacing:2px;
  255. }
  256.  
  257. #tagsbundle:first-child {
  258. padding-top:0px;
  259. margin-top:0px;
  260. }
  261.  
  262. #circle3 {
  263. background:#20E92C;/*third crescent color*/
  264. width:150px;
  265. height:150px;
  266. border-radius:100%;
  267. position:absolute;
  268. left:600px;
  269. top:200px;
  270. }
  271.  
  272. #info3 {
  273. background:#2d2d2d; /*CHANGE THIS TO THE COLOR OF THE BACKGROUND*/
  274. width:150px;
  275. height:150px;
  276. color:transparent;
  277. overflow:hidden;
  278. position:absolute;
  279. border-radius:100%;
  280. top:20px;
  281. -webkit-transition-duration: 0.5s;
  282. -moz-transition-duration: 0.5s;
  283. -o-transition-duration: 0.5s;
  284. transition-duration: 0.5s;
  285. }
  286.  
  287. #circle3:hover #info3 {
  288. border-radius:5px;
  289. background:#fff;/*box on-hover color*/
  290. padding:10px;
  291. overflow:auto;
  292. width:230px;
  293. height:230px;
  294. right:-50px;
  295. z-index:1;
  296. -webkit-transition-duration: 0.5s;
  297. -moz-transition-duration: 0.5s;
  298. -ms-transition-duration: 0.5s;
  299. -o-transition-duration: 0.5s;
  300. transition-duration: 0.5s;
  301. }
  302.  
  303. #link {
  304. border-bottom:1px solid #2d2d2d;/*links underline*/
  305. text-align:center;
  306. letter-spacing:3px;
  307. font-size:17px;
  308. font-style:italic; /* italic links, if not needed, delete it*/
  309. background:transparent;
  310. margin-top:10px;
  311. font-weight:bold;/*bold links, to change it replace bold >> normal*/
  312. padding:5px;
  313. -webkit-transition-duration: 0.5s;
  314. -moz-transition-duration: 0.5s;
  315. -ms-transition-duration: 0.5s;
  316. -o-transition-duration: 0.5s;
  317. transition-duration: 0.5s;
  318. }
  319.  
  320. #link:hover {
  321. background-color:#2d2d2d; /*links background color on-hover*/
  322. letter-spacing:6px;
  323. -webkit-box-shadow: 3px 3px 0 0 rgba(0,0,0,0.3);
  324. -moz-box-shadow: 3px 3px 0 0 rgba(0,0,0,0.3);
  325. -ms-box-shadow: 3px 3px 0 0 rgba(0,0,0,0.3);
  326. -o-box-shadow: 3px 3px 0 0 rgba(0,0,0,0.3);
  327. box-shadow: 3px 3px 0 0 rgba(0,0,0,0.3);
  328. -webkit-transition-duration: 0.5s;
  329. -moz-transition-duration: 0.5s;
  330. -ms-transition-duration: 0.5s;
  331. -o-transition-duration: 0.5s;
  332. transition-duration: 0.5s;
  333. }
  334.  
  335. #circle3:hover a {
  336. color:#808080;
  337. font-style:normal;
  338. text-shadow: 1px 1px 0 #FFFFFF;
  339. }
  340.  
  341. #circle4 {
  342. background:#20DBE9;/*fourth crescent color*/
  343. width:150px;
  344. height:150px;
  345. border-radius:100%;
  346. position:absolute;
  347. left:750px;
  348. top:200px;
  349. }
  350.  
  351. #info4 {
  352. background:#2d2d2d; /*CHANGE THIS TO THE COLOR OF THE BACKGROUND*/
  353. width:150px;
  354. height:150px;
  355. color:transparent;
  356. overflow:hidden;
  357. position:absolute;
  358. border-radius:100%;
  359. bottom:20px;
  360. }
  361.  
  362. #circle4:hover #info4 {
  363. border-radius:5px;
  364. background:#fff;/*box on-hover color*/
  365. padding:10px;
  366. overflow:auto;
  367. width:230px;
  368. height:230px;
  369. right:-50px;
  370. z-index:1;
  371. -webkit-transition-duration: 0.5s;
  372. -moz-transition-duration: 0.5s;
  373. -ms-transition-duration: 0.5s;
  374. -o-transition-duration: 0.5s;
  375. transition-duration: 0.5s;
  376. }
  377.  
  378. #info4 img {
  379. border-radius:10px;
  380. opacity:0;
  381. margin:5px;
  382. -webkit-box-shadow: 3px 3px 0 0 rgba(0,0,0,0.3);
  383. -moz-box-shadow: 3px 3px 0 0 rgba(0,0,0,0.3);
  384. -ms-box-shadow: 3px 3px 0 0 rgba(0,0,0,0.3);
  385. -o-box-shadow: 3px 3px 0 0 rgba(0,0,0,0.3);
  386. box-shadow: 3px 3px 0 0 rgba(0,0,0,0.3);
  387. }
  388.  
  389. #circle4:hover img {
  390. opacity:1;
  391. }
  392.  
  393. #circle5 {
  394. background:#3020E9;/*fifth crescent color*/
  395. width:150px;
  396. height:150px;
  397. border-radius:100%;
  398. position:absolute;
  399. left:900px;
  400. top:200px;
  401. }
  402.  
  403. #info5 {
  404. background:#2d2d2d; /*CHANGE THIS TO THE COLOR OF THE BACKGROUND*/
  405. width:150px;
  406. height:150px;
  407. color:transparent;
  408. overflow:hidden;
  409. position:absolute;
  410. border-radius:100%;
  411. top:20px;
  412. }
  413.  
  414. #circle5:hover #info5 {
  415. border-radius:5px;
  416. background:#fff;/*box on-hover color*/
  417. padding:10px;
  418. overflow:auto;
  419. width:230px;
  420. height:230px;
  421. right:-50px;
  422. z-index:1;
  423. -webkit-transition-duration: 0.5s;
  424. -moz-transition-duration: 0.5s;
  425. -ms-transition-duration: 0.5s;
  426. -o-transition-duration: 0.5s;
  427. transition-duration: 0.5s;
  428. }
  429.  
  430. #q {
  431. text-transform:uppercase;
  432. font-size:14px;
  433. border-bottom:1px solid #2d2d2d;
  434. border-left:1px solid #2d2d2d;
  435. letter-spacing:3px;
  436. padding:5px;
  437. margin:5px;
  438. }
  439.  
  440. #credit {
  441. position:fixed;
  442. right:10px;
  443. bottom:15px;
  444. }
  445.  
  446. #credit a {
  447. font-style:normal;
  448. letter-spacing:4px;
  449. border:1px solid #fff;
  450. text-transform:uppercase;
  451. padding:6px;
  452. background:#2d2d2d;
  453. color:#fff;
  454. -webkit-transition-duration:0.5s;
  455. -moz-transition-duration:0.5s;
  456. -ms-transition-duration:0.5s;
  457. -o-transition-duration:0.5s;
  458. transition-duration:0.5s;
  459. }
  460.  
  461. #credit a:hover {
  462. letter-spacing:6px;
  463. border:1px solid #2d2d2d;
  464. background:#fff;
  465. color:#2d2d2d;
  466. -webkit-transition-duration:0.5s;
  467. -moz-transition-duration:0.5s;
  468. -ms-transition-duration:0.5s;
  469. -o-transition-duration:0.5s;
  470. transition-duration:0.5s;
  471. }
  472.  
  473. </style>
  474. </head>
  475. <body>
  476.  
  477. <div id="circle1">
  478. <div id="info1"> <!--FIRST BOX TEXT /// ABOUT -->
  479. <h3>Dana | ENFP | 17</h3>
  480. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit imperdiet lorem, quis vulputate enim dignissim nec. Vestibulum sed leo id turpis sagittis tincidunt. Sed consequat semper dictum. Fusce viverra sollicitudin sagittis. Fusce felis velit, tincidunt in urna vel, hendrerit ullamcorper odio. Vivamus dui nunc, condimentum at ultrices sed, imperdiet vitae sapien.<br> <b>Bold.</b> <em>Italic.</em> <q>Quote.</q>
  481. </div>
  482. </div>
  483.  
  484.  
  485. <div id="circle2">
  486. <div id="info2"><!--SECOND BOX TEXT /// TAGS -->
  487. <h3>Tags</h3>
  488. <div id="tagsbundle">
  489. <a href="link here">tag</a>
  490. <a href="without adding your url">tag</a>
  491. <a href="if you want to direct to a page outside of your blog">tag</a>
  492. <a href="add http:// for example">tag</a>
  493. <a href="http://twitter.com/">tag</a>
  494. <a href="for a tooltip add >>" title="TOOLTIP">tag</a>
  495. <a href="/">tag</a>
  496. <a href="/">tag</a>
  497. <a href="/">tag</a>
  498. <a href="/">tag</a>
  499. <a href="/">tag</a>
  500. <a href="/">tag</a>
  501. <a href="/">tag</a>
  502. <a href="/">tag</a>
  503. <a href="/">tag</a>
  504. <a href="/">tag</a>
  505. <a href="/">tag</a>
  506. <a href="/">tag</a>
  507. <a href="/">tag</a>
  508. <a href="/">tag</a>
  509. <a href="/">tag</a>
  510. <a href="/">tag</a>
  511. <a href="/">tag</a>
  512. <a href="/">tag</a>
  513. </div>
  514.  
  515. <!--copy and paste from the word category to </div> for another category -->
  516. Category
  517. <div id="tagsbundle">
  518. <a href="/">tag</a>
  519. <a href="/">tag</a>
  520. <a href="/">tag</a>
  521. <a href="/">tag</a>
  522. <a href="/">tag</a>
  523. <a href="/">tag</a>
  524. <a href="/">tag</a>
  525. <a href="/">tag</a>
  526. <a href="/">tag</a>
  527. <a href="/">tag</a>
  528. <a href="/">tag</a>
  529. <a href="/">tag</a>
  530. <a href="/">tag</a>
  531. <a href="/">tag</a>
  532. <a href="/">tag</a>
  533. <a href="/">tag</a>
  534. <a href="/">tag</a>
  535. <a href="/">tag</a>
  536. <a href="/">tag</a>
  537. <a href="/">tag</a>
  538. <a href="/">tag</a>
  539. <a href="/">tag</a>
  540. <a href="/">tag</a>
  541. <a href="/">tag</a>
  542. </div>
  543. Category
  544. <div id="tagsbundle">
  545. <a href="/">tag</a>
  546. <a href="/">tag</a>
  547. <a href="/">tag</a>
  548. <a href="/">tag</a>
  549. <a href="/">tag</a>
  550. <a href="/">tag</a>
  551. <a href="/">tag</a>
  552. <a href="/">tag</a>
  553. <a href="/">tag</a>
  554. <a href="/">tag</a>
  555. <a href="/">tag</a>
  556. <a href="/">tag</a>
  557. <a href="/">tag</a>
  558. <a href="/">tag</a>
  559. <a href="/">tag</a>
  560. <a href="/">tag</a>
  561. <a href="/">tag</a>
  562. <a href="/">tag</a>
  563. <a href="/">tag</a>
  564. <a href="/">tag</a>
  565. <a href="/">tag</a>
  566. <a href="/">tag</a>
  567. <a href="/">tag</a>
  568. <a href="/">tag</a>
  569. </div>
  570. Category
  571. </div>
  572. </div>
  573.  
  574.  
  575. <div id="circle3">
  576. <div id="info3"><!--THIRD BOX TEXT /// LINKS -->
  577. <h3>Links</h3>
  578. <div id="link"><a href="/">Link</a></div>
  579. <div id="link"><a href="/">Link</a></div>
  580. <div id="link"><a href="/">Link</a></div>
  581. <div id="link"><a href="/">Link</a></div>
  582. <div id="link"><a href="/">Link</a></div>
  583. </div>
  584. </div>
  585.  
  586.  
  587. <div id="circle4">
  588. <div id="info4"><!--FOURTH BOX TEXT /// BLOGROLL -->
  589. <h3>Blogroll</h3>
  590. {block:Following}{block:Followed}<a target="_blank" href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-30}" /></a>{/block:Followed}{/block:Following}
  591. </div>
  592. </div>
  593.  
  594.  
  595. <div id="circle5">
  596. <div id="info5"><!--FIFTH BOX TEXT /// FAQ -->
  597. <h3>FAQ</h3>
  598. <div id="q">Question?</div>
  599. Answer.
  600. <div id="q">Question?</div>
  601. Answer.
  602. <div id="q">Question?</div>
  603. Answer.
  604. <div id="q">Question?</div>
  605. Answer.
  606. </div>
  607. </div>
  608.  
  609. <div id="credit"><a href="http://bsethemes.tumblr.com/">bsethemes</a></div>
  610.  
  611. </body>
  612. </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!