API tools faq
paste
Advertisement
thehandyblog

About Page #3

thehandyblog
Apr 21st, 2014
9,901
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.00 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. <!--
  6.  
  7. About Page #3 by
  8.  
  9. █▀▀ ▀▀█▀▀ █▀▀█ █▀▀█ ▀▀█▀▀ █▀▀ █▀▀█ █▀▀█ █▀▀▄
  10. ▀▀█ █ █▄▄▀ █▄▄█ █ █▀▀ █ █ █▄▄▀ ▀▀ █ █
  11. ▀▀▀ ▀ ▀ ▀▀ ▀ ▀ ▀ ▀ ▀▀▀▀ ▀ ▀▀ ▀▀▀
  12.  
  13. More at http://stratfor-d.tumblr.com
  14.  
  15. -->
  16.  
  17.  
  18.  
  19. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  20.  
  21.  
  22.  
  23. <head>
  24.  
  25. <title>{Title}</title>
  26. <meta name="description" content="{MetaDescription}"/>
  27. <link rel="shortcut icon" href="{Favicon}" />
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  29.  
  30. <style type="text/css">
  31.  
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38. #s-m-t-tooltip {
  39. max-width:300px;
  40. margin:15px;
  41. padding:2px 8px;
  42. border:1px solid #ddd;
  43. border-radius:4px;
  44. background:#fff;
  45. color:#bbb;
  46. z-index:999999;
  47. font-size:8px;
  48. font-style:italic;
  49. text-transform:lowercase;
  50. box-shadow:1px 1px 3px rgba(0,0,0,.1);
  51. }
  52.  
  53.  
  54.  
  55.  
  56.  
  57.  
  58.  
  59.  
  60. ::-webkit-scrollbar-thumb {
  61. background:#fff;
  62. border:1px solid #e8c6d5;
  63. }
  64.  
  65. ::-webkit-scrollbar {
  66. background:#e8c6d5;
  67. height:7px;
  68. width:7px;
  69. }
  70.  
  71.  
  72.  
  73.  
  74.  
  75.  
  76. body {
  77. background:#fff;
  78. font-family:arial;
  79. font-size:10px
  80. color:#bbb8b8;
  81. }
  82.  
  83.  
  84.  
  85.  
  86.  
  87.  
  88.  
  89. #all {
  90. width:100%;
  91. }
  92.  
  93. #cover {
  94. width:835px;
  95. }
  96.  
  97. #content {
  98. position:fixed;
  99. top: 50%;
  100. margin-top: -50px;
  101. height:200px;
  102. width:835px;
  103. }
  104.  
  105.  
  106.  
  107.  
  108.  
  109.  
  110.  
  111. #portrait {
  112. width:128px;
  113. height:128px;
  114. text-align:center;
  115. margin-left:2px;
  116. padding:7px;
  117. border:3px solid #e8e8e8;
  118. border-radius:100%;
  119. position:absolute;
  120. transition-duration: 0.8s;
  121. -moz-transition-duration: 0.8s;
  122. -webkit-transition-duration: 0.8s;
  123. -o-transition-duration: 0.8s;
  124. }
  125.  
  126. #portrait img {
  127. width:110px;
  128. height:110px;
  129. border-radius:100%;
  130. background:#e8e8e8;
  131. padding:9px;
  132. transition-duration: 0.8s;
  133. -moz-transition-duration: 0.8s;
  134. -webkit-transition-duration: 0.8s;
  135. -o-transition-duration: 0.8s;
  136. }
  137.  
  138.  
  139.  
  140.  
  141.  
  142.  
  143. #portrait2 {
  144. margin-left:533px;
  145. margin-top:-30px;
  146. padding:11px;
  147. width:128px;
  148. height:128px;
  149. text-align:center;
  150. border-radius:100%;
  151. position:absolute;
  152. transition-duration: 0.8s;
  153. -moz-transition-duration: 0.8s;
  154. -webkit-transition-duration: 0.8s;
  155. -o-transition-duration: 0.8s;
  156. }
  157.  
  158. #portrait2 img {
  159. width:110px;
  160. height:110px;
  161. border-radius:100%;
  162. background:#e8e8e8;
  163. padding:9px;
  164. transition-duration: 0.8s;
  165. -moz-transition-duration: 0.8s;
  166. -webkit-transition-duration: 0.8s;
  167. -o-transition-duration: 0.8s;
  168. }
  169.  
  170.  
  171.  
  172.  
  173.  
  174.  
  175.  
  176.  
  177. #line1 {
  178. position:absolute;
  179. margin-left:137px;
  180. margin-top:60px;
  181. background:#e8e8e8;
  182. height:3px;
  183. width:115px;
  184. -webkit-transform: rotate(345deg) scale(1) skew(1deg) translate(0px);
  185. -moz-transform: rotate(345deg) scale(1) skew(1deg) translate(0px);
  186. -o-transform: rotate(345deg) scale(1) skew(1deg) translate(0px);
  187. -ms-transform: rotate(345deg) scale(1) skew(1deg) translate(0px);
  188. transition-duration: 0.8s;
  189. -moz-transition-duration: 0.8s;
  190. -webkit-transition-duration: 0.8s;
  191. -o-transition-duration: 0.8s;
  192. box-shadow:inset 0px 0px #e8c6d5;
  193. -webkit-box-shadow:inset 0px 0px #e8c6d5;
  194. }
  195.  
  196. #line2 {
  197. position:absolute;
  198. margin-left:286px;
  199. margin-top:66px;
  200. background:#e8e8e8;
  201. height:3px;
  202. width:122px;
  203. -webkit-transform: rotate(20deg) scale(1) skew(1deg) translate(0px);
  204. -moz-transform: rotate(20deg) scale(1) skew(1deg) translate(0px);
  205. -o-transform: rotate(20deg) scale(1) skew(1deg) translate(0px);
  206. -ms-transform: rotate(20deg) scale(1) skew(1deg) translate(0px);
  207. transition-duration: 0.8s;
  208. -moz-transition-duration: 0.8s;
  209. -webkit-transition-duration: 0.8s;
  210. -o-transition-duration: 0.8s;
  211. transition-duration: 0.8s;
  212. -moz-transition-duration: 0.8s;
  213. -webkit-transition-duration: 0.8s;
  214. -o-transition-duration: 0.8s;
  215. box-shadow:inset 0px 0px #e8c6d5;
  216. -webkit-box-shadow:inset 0px 0px #e8c6d5;
  217. }
  218.  
  219. #line3 {
  220. position:absolute;
  221. margin-left:433px;
  222. margin-top:67px;
  223. background:#e8e8e8;
  224. height:3px;
  225. width:116px;
  226. -webkit-transform: rotate(338deg) scale(1) skew(1deg) translate(0px);
  227. -moz-transform: rotate(338deg) scale(1) skew(1deg) translate(0px);
  228. -o-transform: rotate(338deg) scale(1) skew(1deg) translate(0px);
  229. -ms-transform: rotate(338deg) scale(1) skew(1deg) translate(0px);
  230. transition-duration: 0.8s;
  231. -moz-transition-duration: 0.8s;
  232. -webkit-transition-duration: 0.8s;
  233. -o-transition-duration: 0.8s;
  234. transition-duration: 0.8s;
  235. -moz-transition-duration: 0.8s;
  236. -webkit-transition-duration: 0.8s;
  237. -o-transition-duration: 0.8s;
  238. box-shadow:inset 0px 0px #e8c6d5;
  239. -webkit-box-shadow:inset 0px 0px #e8c6d5;
  240. }
  241.  
  242. #line4 {
  243. position:absolute;
  244. margin-left:668px;
  245. margin-top:67px;
  246. background:#e8e8e8;
  247. height:3px;
  248. width:122px;
  249. -webkit-transform: rotate(20deg) scale(1) skew(1deg) translate(0px);
  250. -moz-transform: rotate(20deg) scale(1) skew(1deg) translate(0px);
  251. -o-transform: rotate(20deg) scale(1) skew(1deg) translate(0px);
  252. -ms-transform: rotate(20deg) scale(1) skew(1deg) translate(0px);
  253. transition-duration: 0.8s;
  254. -moz-transition-duration: 0.8s;
  255. -webkit-transition-duration: 0.8s;
  256. -o-transition-duration: 0.8s;
  257. transition-duration: 0.8s;
  258. -moz-transition-duration: 0.8s;
  259. -webkit-transition-duration: 0.8s;
  260. -o-transition-duration: 0.8s;
  261. box-shadow:inset 0px 0px #e8c6d5;
  262. -webkit-box-shadow:inset 0px 0px #e8c6d5;
  263. }
  264.  
  265.  
  266.  
  267.  
  268.  
  269.  
  270.  
  271.  
  272.  
  273.  
  274. .c1 {
  275. background:#e8e8e8;
  276. width:40px;
  277. height:40px;
  278. border-radius:50px;
  279. transition-duration: 0.8s;
  280. -moz-transition-duration: 0.8s;
  281. -webkit-transition-duration: 0.8s;
  282. -o-transition-duration: 0.8s;
  283. }
  284.  
  285. #circle1 {
  286. width:40px;
  287. height:40px;
  288. padding:5px;
  289. border: 2px dashed #e8e8e8;
  290. border-radius:50px;
  291. margin-left:243px;
  292. margin-top:20px;
  293. position:absolute;
  294. transition-duration: 0.8s;
  295. -moz-transition-duration: 0.8s;
  296. -webkit-transition-duration: 0.8s;
  297. -o-transition-duration: 0.8s;
  298. }
  299.  
  300.  
  301.  
  302. #circle1:hover {
  303. border:2px dashed #e8c6d5;
  304. -webkit-transform: rotate(360deg);
  305. -moz-transform: rotate(360deg);
  306. -o-transform: rotate(360deg);
  307. -ms-transform: rotate(360deg);
  308. transition-duration: 0.8s;
  309. -moz-transition-duration: 0.8s;
  310. -webkit-transition-duration: 0.8s;
  311. -o-transition-duration: 0.8s;
  312. }
  313.  
  314. #circle1:hover .c1 {
  315. box-shadow:inset 120px 0px #e8c6d5;
  316. -webkit-box-shadow:inset 120px 0px #e8c6d5;
  317. -webkit-transform: rotate(360deg);
  318. -moz-transform: rotate(360deg);
  319. -o-transform: rotate(360deg);
  320. -ms-transform: rotate(360deg);
  321. transition-duration: 0.8s;
  322. -moz-transition-duration: 0.8s;
  323. -webkit-transition-duration: 0.8s;
  324. -o-transition-duration: 0.8s;
  325. }
  326.  
  327.  
  328.  
  329.  
  330.  
  331.  
  332.  
  333. .c2 {
  334. background:#e8e8e8;
  335. width:35px;
  336. height:35px;
  337. border-radius:50px;
  338. transition-duration: 0.8s;
  339. -moz-transition-duration: 0.8s;
  340. -webkit-transition-duration: 0.8s;
  341. -o-transition-duration: 0.8s;
  342. }
  343.  
  344. #circle2 {
  345. width:35px;
  346. height:35px;
  347. padding:9px;
  348. border: 2px solid #e8e8e8;
  349. border-radius:50px;
  350. margin-left:392px;
  351. margin-top:60px;
  352. position:absolute;
  353. transition-duration: 0.8s;
  354. -moz-transition-duration: 0.8s;
  355. -webkit-transition-duration: 0.8s;
  356. -o-transition-duration: 0.8s;
  357. }
  358.  
  359.  
  360.  
  361. #circle2:hover {
  362. border: 2px solid #e8c6d5;
  363. padding:4px;
  364. width:45px;
  365. height:45px;
  366. transition-duration: 0.8s;
  367. -moz-transition-duration: 0.8s;
  368. -webkit-transition-duration: 0.8s;
  369. -o-transition-duration: 0.8s;
  370. }
  371.  
  372. #circle2:hover .c2 {
  373. width:45px;
  374. height:45px;
  375. box-shadow:inset 120px 0px #e8c6d5;
  376. -webkit-box-shadow:inset 120px 0px #e8c6d5;
  377. -webkit-transform: rotate(360deg);
  378. -moz-transform: rotate(360deg);
  379. -o-transform: rotate(360deg);
  380. -ms-transform: rotate(360deg);
  381. transition-duration: 0.8s;
  382. -moz-transition-duration: 0.8s;
  383. -webkit-transition-duration: 0.8s;
  384. -o-transition-duration: 0.8s;
  385. }
  386.  
  387. #circle2:hover ~ #line2 {
  388. width:116px;
  389. box-shadow:inset 116px 0px #e8c6d5;
  390. -webkit-box-shadow:inset 116px 0px #e8c6d5;
  391. transition-duration: 0.8s;
  392. -moz-transition-duration: 0.8s;
  393. -webkit-transition-duration: 0.8s;
  394. -o-transition-duration: 0.8s;
  395. }
  396.  
  397. #circle2:hover ~ #line3 {
  398. box-shadow:inset 6px 0px #e8c6d5;
  399. -webkit-box-shadow:inset 6px 0px #e8c6d5;
  400. transition-duration: 0.8s;
  401. -moz-transition-duration: 0.8s;
  402. -webkit-transition-duration: 0.8s;
  403. -o-transition-duration: 0.8s;
  404. }
  405.  
  406.  
  407.  
  408.  
  409.  
  410.  
  411.  
  412.  
  413. .c3 {
  414. background:#e8e8e8;
  415. width:40px;
  416. height:40px;
  417. border-radius:50px;
  418. transition-duration: 0.8s;
  419. -moz-transition-duration: 0.8s;
  420. -webkit-transition-duration: 0.8s;
  421. -o-transition-duration: 0.8s;
  422. }
  423.  
  424. #circle3 {
  425. width:40px;
  426. height:40px;
  427. padding:4px;
  428. border: 4px double #e8e8e8;
  429. border-radius:50px;
  430. margin-left:778px;
  431. margin-top:60px;
  432. position:absolute;
  433. transition-duration: 0.8s;
  434. -moz-transition-duration: 0.8s;
  435. -webkit-transition-duration: 0.8s;
  436. -o-transition-duration: 0.8s;
  437. }
  438.  
  439.  
  440.  
  441. #circle3:hover {
  442. border: 4px solid #e8c6d5;
  443. transition-duration: 0.8s;
  444. -moz-transition-duration: 0.8s;
  445. -webkit-transition-duration: 0.8s;
  446. -o-transition-duration: 0.8s;
  447. }
  448.  
  449. #circle3:hover .c3 {
  450. box-shadow:inset 120px 0px #e8c6d5;
  451. -webkit-box-shadow:inset 120px 0px #e8c6d5;
  452. -webkit-transform: rotate(360deg);
  453. -moz-transform: rotate(360deg);
  454. -o-transform: rotate(360deg);
  455. -ms-transform: rotate(360deg);
  456. transition-duration: 0.8s;
  457. -moz-transition-duration: 0.8s;
  458. -webkit-transition-duration: 0.8s;
  459. -o-transition-duration: 0.8s;
  460. }
  461.  
  462. #circle3:hover ~ #portrait2 {
  463. transition-duration: 0.8s;
  464. -moz-transition-duration: 0.8s;
  465. -webkit-transition-duration: 0.8s;
  466. -o-transition-duration: 0.8s;
  467. }
  468.  
  469. #circle3:hover ~ #portrait2 img {
  470. box-shadow:inset 150px 0px #e8c6d5;
  471. -webkit-box-shadow:inset 150px 0px #e8c6d5;
  472. transition-duration: 0.8s;
  473. -moz-transition-duration: 0.8s;
  474. -webkit-transition-duration: 0.8s;
  475. -o-transition-duration: 0.8s;
  476. }
  477.  
  478. #circle3:hover ~ #line2 {
  479. box-shadow:inset 121px 0px #e8c6d5;
  480. -webkit-box-shadow:inset 121px 0px #e8c6d5;
  481. transition-duration: 0.8s;
  482. -moz-transition-duration: 0.8s;
  483. -webkit-transition-duration: 0.8s;
  484. -o-transition-duration: 0.8s;
  485. }
  486.  
  487. #circle3:hover ~ #line3 {
  488. width:116px;
  489. box-shadow:inset 116px 0px #e8c6d5;
  490. -webkit-box-shadow:inset 116px 0px #e8c6d5;
  491. transition-duration: 0.8s;
  492. -moz-transition-duration: 0.8s;
  493. -webkit-transition-duration: 0.8s;
  494. -o-transition-duration: 0.8s;
  495. }
  496.  
  497. #circle3:hover ~ #line4 {
  498. box-shadow:inset 122px 0px #e8c6d5;
  499. -webkit-box-shadow:inset 122px 0px #e8c6d5;
  500. transition-duration: 0.8s;
  501. -moz-transition-duration: 0.8s;
  502. -webkit-transition-duration: 0.8s;
  503. -o-transition-duration: 0.8s;
  504. }
  505.  
  506.  
  507.  
  508.  
  509.  
  510.  
  511.  
  512.  
  513.  
  514.  
  515.  
  516.  
  517.  
  518. #circle1:hover ~ #line1, #circle2:hover ~ #line1, #circle3:hover ~ #line1 {
  519. box-shadow:inset 120px 0px #e8c6d5;
  520. -webkit-box-shadow:inset 120px 0px #e8c6d5;
  521. transition-duration: 0.8s;
  522. -moz-transition-duration: 0.8s;
  523. -webkit-transition-duration: 0.8s;
  524. -o-transition-duration: 0.8s;
  525. }
  526.  
  527. #circle1:hover ~ #portrait, #circle2:hover ~ #portrait, #circle3:hover ~ #portrait {
  528. border:3px solid #e8c6d5;
  529. transition-duration: 0.8s;
  530. -moz-transition-duration: 0.8s;
  531. -webkit-transition-duration: 0.8s;
  532. -o-transition-duration: 0.8s;
  533. }
  534.  
  535. #circle1:hover ~ #portrait img, #circle2:hover ~ #portrait img, #circle3:hover ~ #portrait img {
  536. box-shadow:inset 150px 0px #e8c6d5;
  537. -webkit-box-shadow:inset 150px 0px #e8c6d5;
  538. transition-duration: 0.8s;
  539. -moz-transition-duration: 0.8s;
  540. -webkit-transition-duration: 0.8s;
  541. -o-transition-duration: 0.8s;
  542. }
  543.  
  544.  
  545.  
  546.  
  547.  
  548.  
  549.  
  550.  
  551.  
  552.  
  553.  
  554. #tri1 {
  555. opacity:0;
  556. font-size:0px;
  557. color:#e8c6d5;
  558. position:absolute;
  559. font-family:times;
  560. text-align:center;
  561. margin-left:140px;
  562. margin-top:-48px;
  563. width:260px;
  564. transition-duration: 0.8s;
  565. -moz-transition-duration: 0.8s;
  566. -webkit-transition-duration: 0.8s;
  567. -o-transition-duration: 0.8s;
  568. }
  569.  
  570. #bubble1 {
  571. opacity:0;
  572. width:0px;
  573. overflow:hidden;
  574. background:#e8c6d5;
  575. padding:0px;
  576. border:0px solid #e8c6d5;
  577. height:0px;
  578. color:#fff;
  579. font-size:11px;
  580. margin-left:270px;
  581. margin-top:-35px;
  582. position:absolute;
  583. text-align:justify;
  584. transition-duration: 0.8s;
  585. -moz-transition-duration: 0.8s;
  586. -webkit-transition-duration: 0.8s;
  587. -o-transition-duration: 0.8s;
  588. }
  589.  
  590. #btext1 b {
  591. font-family:times;
  592. font-style:italic;
  593. font-size:12px;
  594. margin-right:3px;
  595. }
  596.  
  597.  
  598.  
  599. #circle1:hover ~ #tri1, #tri1:hover {
  600. opacity:1;
  601. font-size:40px;
  602. width:260px;
  603. margin-top:-48px;
  604. padding-bottom:20px;
  605. transition-duration: 0.8s;
  606. -moz-transition-duration: 0.8s;
  607. -webkit-transition-duration: 0.8s;
  608. -o-transition-duration: 0.8s;
  609. }
  610.  
  611. #circle1:hover ~ #bubble1, #tri1:hover ~ #bubble1, #bubble1:hover {
  612. opacity:1;
  613. width:230px;
  614. border:15px solid #e8c6d5;
  615. border-right:10px solid #e8c6d5;
  616. padding-right:5px;
  617. height:97px;
  618. overflow-y:scroll;
  619. margin-top:-164px;
  620. margin-left:140px;
  621. transition-duration: 0.8s;
  622. -moz-transition-duration: 0.8s;
  623. -webkit-transition-duration: 0.8s;
  624. -o-transition-duration: 0.8s;
  625. }
  626.  
  627.  
  628.  
  629.  
  630.  
  631.  
  632.  
  633.  
  634.  
  635. #tri2 {
  636. opacity:0;
  637. font-size:0px;
  638. color:#e8c6d5;
  639. position:absolute;
  640. font-family:times;
  641. text-align:center;
  642. margin-left:140px;
  643. margin-top:147px;
  644. width:260px;
  645. transition-duration: 0.8s;
  646. -moz-transition-duration: 0.8s;
  647. -webkit-transition-duration: 0.8s;
  648. -o-transition-duration: 0.8s;
  649. }
  650.  
  651. #bubble2 {
  652. opacity:0;
  653. width:0px;
  654. overflow-x:hidden;
  655. overflow-y:scroll;
  656. background:#e8c6d5;
  657. padding:0px;
  658. border:0px solid #e8c6d5;
  659. height:0px;
  660. color:#fff;
  661. font-size:11px;
  662. margin-left:270px;
  663. margin-top:130px;
  664. position:absolute;
  665. text-align:justify;
  666. transition-duration: 0.8s;
  667. -moz-transition-duration: 0.8s;
  668. -webkit-transition-duration: 0.8s;
  669. -o-transition-duration: 0.8s;
  670. }
  671.  
  672. #btext2 a {
  673. border-bottom:1px dotted #fff;
  674. color:#fff;
  675. }
  676.  
  677. #btext2 a:hover {
  678. border-bottom:0px dotted #fff;
  679. }
  680.  
  681. #header {
  682. font-family:times;
  683. font-size:18px;
  684. font-weight:700;
  685. font-style:italic;
  686. margin-bottom:7px;
  687. }
  688.  
  689. #header:first-letter {
  690. text-transform:uppercase;
  691. font-size:27px;
  692. font-weight:700;
  693. font-family:georgia;
  694. margin-right:-2px;
  695. }
  696.  
  697.  
  698.  
  699. #circle1:hover ~ #tri2, #tri2:hover {
  700. opacity:1;
  701. font-size:40px;
  702. width:260px;
  703. margin-top:74px;
  704. padding-top:20px;
  705. transition-duration: 0.8s;
  706. -moz-transition-duration: 0.8s;
  707. -webkit-transition-duration: 0.8s;
  708. -o-transition-duration: 0.8s;
  709. }
  710.  
  711. #circle1:hover ~ #bubble2, #tri2:hover ~ #bubble2, #bubble2:hover {
  712. opacity:1;
  713. width:230px;
  714. border:15px solid #e8c6d5;
  715. border-right:10px solid #e8c6d5;
  716. padding-right:5px;
  717. height:135px;
  718. margin-left:140px;
  719. transition-duration: 0.8s;
  720. -moz-transition-duration: 0.8s;
  721. -webkit-transition-duration: 0.8s;
  722. -o-transition-duration: 0.8s;
  723. }
  724.  
  725.  
  726.  
  727.  
  728.  
  729.  
  730. #tri3 {
  731. opacity:0;
  732. font-size:0px;
  733. color:#e8c6d5;
  734. position:absolute;
  735. font-family:times;
  736. text-align:center;
  737. margin-left:293px;
  738. margin-top:-38px;
  739. width:260px;
  740. transition-duration: 0.8s;
  741. -moz-transition-duration: 0.8s;
  742. -webkit-transition-duration: 0.8s;
  743. -o-transition-duration: 0.8s;
  744. }
  745.  
  746. #bubble3 {
  747. opacity:0;
  748. width:0px;
  749. overflow-y:scroll;
  750. background:#e8c6d5;
  751. padding:0px;
  752. border:0px solid #e8c6d5;
  753. height:0px;
  754. color:#fff;
  755. font-size:11px;
  756. margin-left:423px;
  757. margin-top:-33px;
  758. position:absolute;
  759. text-align:justify;
  760. transition-duration: 0.8s;
  761. -moz-transition-duration: 0.8s;
  762. -webkit-transition-duration: 0.8s;
  763. -o-transition-duration: 0.8s;
  764. }
  765.  
  766. #btext3 b {
  767. font-family:times;
  768. font-style:italic;
  769. font-size:12px;
  770. margin-right:3px;
  771. }
  772.  
  773. #btext3:first-letter {
  774. text-transform:uppercase;
  775. font-size:33px;
  776. padding:2px 9px;
  777. margin-right:10px;
  778. border:3px double #fff;
  779. float:left;
  780. font-family:times;
  781. font-style:italic;
  782. }
  783.  
  784.  
  785.  
  786. #circle2:hover ~ #tri3, #tri3:hover {
  787. opacity:1;
  788. font-size:40px;
  789. margin-top:-8px;
  790. width:260px;
  791. padding-bottom:20px;
  792. transition-duration: 0.8s;
  793. -moz-transition-duration: 0.8s;
  794. -webkit-transition-duration: 0.8s;
  795. -o-transition-duration: 0.8s;
  796. }
  797.  
  798. #circle2:hover ~ #bubble3, #tri3:hover ~ #bubble3, #bubble3:hover {
  799. opacity:1;
  800. width:230px;
  801. border:15px solid #e8c6d5;
  802. border-right:10px solid #e8c6d5;
  803. padding-right:5px;
  804. height:135px;
  805. margin-top:-162px;
  806. margin-left:293px;
  807. transition-duration: 0.8s;
  808. -moz-transition-duration: 0.8s;
  809. -webkit-transition-duration: 0.8s;
  810. -o-transition-duration: 0.8s;
  811. }
  812.  
  813.  
  814.  
  815.  
  816.  
  817.  
  818. #tri4 {
  819. opacity:0;
  820. font-size:0px;
  821. color:#e8c6d5;
  822. position:absolute;
  823. font-family:times;
  824. text-align:center;
  825. margin-left:293px;
  826. margin-top:190px;
  827. width:260px;
  828. transition-duration: 0.8s;
  829. -moz-transition-duration: 0.8s;
  830. -webkit-transition-duration: 0.8s;
  831. -o-transition-duration: 0.8s;
  832. }
  833.  
  834. #bubble4 {
  835. opacity:0;
  836. width:0px;
  837. overflow:hidden;
  838. background:#e8c6d5;
  839. padding:0px;
  840. border:0px solid #e8c6d5;
  841. height:0px;
  842. color:#fff;
  843. margin-left:423px;
  844. margin-top:173px;
  845. position:absolute;
  846. text-align:center;
  847. transition-duration: 0.8s;
  848. -moz-transition-duration: 0.8s;
  849. -webkit-transition-duration: 0.8s;
  850. -o-transition-duration: 0.8s;
  851. }
  852.  
  853. #btext4 {
  854. font-style:italic;
  855. font-weight:700;
  856. font-family:times;
  857. font-size:20px;
  858. line-height:18px;
  859. }
  860.  
  861. .quo {
  862. font-style:normal;
  863. }
  864.  
  865.  
  866.  
  867. #circle2:hover ~ #tri4, #tri4:hover {
  868. opacity:1;
  869. font-size:40px;
  870. width:260px;
  871. margin-top:117px;
  872. padding-top:20px;
  873. transition-duration: 0.8s;
  874. -moz-transition-duration: 0.8s;
  875. -webkit-transition-duration: 0.8s;
  876. -o-transition-duration: 0.8s;
  877. }
  878.  
  879. #circle2:hover ~ #bubble4, #tri4:hover ~ #bubble4, #bubble4:hover {
  880. opacity:1;
  881. width:230px;
  882. border:15px solid #e8c6d5;
  883. height:58px;
  884. margin-left:293px;
  885. transition-duration: 0.8s;
  886. -moz-transition-duration: 0.8s;
  887. -webkit-transition-duration: 0.8s;
  888. -o-transition-duration: 0.8s;
  889. }
  890.  
  891.  
  892.  
  893.  
  894.  
  895.  
  896.  
  897. #tri5 {
  898. opacity:0;
  899. font-size:0px;
  900. color:#e8c6d5;
  901. position:absolute;
  902. width:130px;
  903. font-family:times;
  904. text-align:center;
  905. margin-left:742px;
  906. margin-top:-8px;
  907. transition-duration: 0.8s;
  908. -moz-transition-duration: 0.8s;
  909. -webkit-transition-duration: 0.8s;
  910. -o-transition-duration: 0.8s;
  911. }
  912.  
  913. #bubble5 {
  914. opacity:0;
  915. width:0px;
  916. overflow:hidden;
  917. background:#e8c6d5;
  918. padding:0px;
  919. border:0px solid #e8c6d5;
  920. height:0px;
  921. color:#fff;
  922. font-size:11px;
  923. margin-left:807px;
  924. margin-top:-1px;
  925. position:absolute;
  926. text-align:justify;
  927. transition-duration: 0.8s;
  928. -moz-transition-duration: 0.8s;
  929. -webkit-transition-duration: 0.8s;
  930. -o-transition-duration: 0.8s;
  931. }
  932.  
  933. #bubble5 a {
  934. display:block;
  935. margin:5px;
  936. text-decoration:none;
  937. padding:5px;
  938. margin-bottom:10px;
  939. background:#fff;
  940. text-transform:uppercase;
  941. font-size:7px;
  942. height:7px;
  943. letter-spacing:1px;
  944. color:#e8c6d5;
  945. text-align:center;
  946. transition-duration: 0.8s;
  947. -moz-transition-duration: 0.8s;
  948. -webkit-transition-duration: 0.8s;
  949. -o-transition-duration: 0.8s;
  950. }
  951.  
  952. #bubble5 a:hover {
  953. background:#e8c6d5;
  954. color:#fff;
  955. transition-duration: 0.8s;
  956. -moz-transition-duration: 0.8s;
  957. -webkit-transition-duration: 0.8s;
  958. -o-transition-duration: 0.8s;
  959. }
  960.  
  961.  
  962.  
  963. #circle3:hover ~ #tri5, #tri5:hover {
  964. opacity:1;
  965. font-size:40px;
  966. padding-bottom:20px;
  967. transition-duration: 0.8s;
  968. -moz-transition-duration: 0.8s;
  969. -webkit-transition-duration: 0.8s;
  970. -o-transition-duration: 0.8s;
  971. }
  972.  
  973. #circle3:hover ~ #bubble5, #tri5:hover ~ #bubble5, #bubble5:hover {
  974. opacity:1;
  975. width:110px;
  976. padding:10px;
  977. height:108px;
  978. margin-top:-125px;
  979. margin-left:742px;
  980. transition-duration: 0.8s;
  981. -moz-transition-duration: 0.8s;
  982. -webkit-transition-duration: 0.8s;
  983. -o-transition-duration: 0.8s;
  984. }
  985.  
  986.  
  987.  
  988.  
  989.  
  990.  
  991. #tri6 {
  992. opacity:0;
  993. font-size:0px;
  994. color:#e8c6d5;
  995. position:absolute;
  996. font-family:times;
  997. text-align:center;
  998. margin-left:707px;
  999. margin-top:189px;
  1000. width:200px;
  1001. transition-duration: 0.8s;
  1002. -moz-transition-duration: 0.8s;
  1003. -webkit-transition-duration: 0.8s;
  1004. -o-transition-duration: 0.8s;
  1005. }
  1006.  
  1007. #bubble6 {
  1008. opacity:0;
  1009. width:0px;
  1010. overflow:hidden;
  1011. background:#e8c6d5;
  1012. padding:0px;
  1013. border:0px solid #e8c6d5;
  1014. height:0px;
  1015. color:#fff;
  1016. margin-left:807px;
  1017. margin-top:172px;
  1018. position:absolute;
  1019. text-align:center;
  1020. transition-duration: 0.8s;
  1021. -moz-transition-duration: 0.8s;
  1022. -webkit-transition-duration: 0.8s;
  1023. -o-transition-duration: 0.8s;
  1024. }
  1025.  
  1026. #bubble6 img {
  1027. width:16px;
  1028. height:16px;
  1029. margin:2px;
  1030. padding:10px;
  1031. background:#e8c6d5;
  1032. border:1px solid #fff;
  1033. -webkit-transform: perspective(400px) rotateY(0deg);
  1034. -moz-transform: perspective(400px) rotateY(0deg);
  1035. -o-transform: perspective(400px) rotateY(0deg);
  1036. -ms-transform: perspective(400px) rotateY(0deg);
  1037. transition-duration: 0.8s;
  1038. -moz-transition-duration: 0.8s;
  1039. -webkit-transition-duration: 0.8s;
  1040. -o-transition-duration: 0.8s;
  1041. }
  1042.  
  1043. #bubble6 img:hover {
  1044. -webkit-transform: perspective(400px) rotateY(360deg);
  1045. -moz-transform: perspective(400px) rotateY(360deg);
  1046. -o-transform: perspective(400px) rotateY(360deg);
  1047. -ms-transform: perspective(400px) rotateY(360deg);
  1048. transition-duration: 0.8s;
  1049. -moz-transition-duration: 0.8s;
  1050. -webkit-transition-duration: 0.8s;
  1051. -o-transition-duration: 0.8s;
  1052. }
  1053.  
  1054.  
  1055.  
  1056. #circle3:hover ~ #tri6, #tri6:hover {
  1057. opacity:1;
  1058. font-size:40px;
  1059. margin-top:116px;
  1060. padding-top:20px;
  1061. transition-duration: 0.8s;
  1062. -moz-transition-duration: 0.8s;
  1063. -webkit-transition-duration: 0.8s;
  1064. -o-transition-duration: 0.8s;
  1065. }
  1066.  
  1067. #circle3:hover ~ #bubble6, #tri6:hover ~ #bubble6, #bubble6:hover {
  1068. opacity:1;
  1069. width:200px;
  1070. height:52px;
  1071. padding-top:10px;
  1072. margin-left:707px;
  1073. transition-duration: 0.8s;
  1074. -moz-transition-duration: 0.8s;
  1075. -webkit-transition-duration: 0.8s;
  1076. -o-transition-duration: 0.8s;
  1077. }
  1078.  
  1079.  
  1080.  
  1081.  
  1082. {CustomCSS}
  1083. </style>
  1084.  
  1085.  
  1086.  
  1087. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  1088.  
  1089. <!---TOOLTIP--->
  1090. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  1091. <script>
  1092. (function($){
  1093. $(document).ready(function(){
  1094. $("[title]").style_my_tooltips({
  1095. tip_follows_cursor:true,
  1096. tip_delay_time:200,
  1097. tip_fade_speed:300
  1098. }
  1099. );
  1100. });
  1101. })(jQuery);
  1102. </script>
  1103. <!------------->
  1104.  
  1105.  
  1106.  
  1107. </head>
  1108. <body>
  1109.  
  1110. <div id="all">
  1111. <center>
  1112.  
  1113.  
  1114. <div id="cover">
  1115. <div id="content">
  1116.  
  1117.  
  1118. <div id="circle1"><div class="c1"></div></div>
  1119. <div id="circle2"><div class="c2"></div></div>
  1120. <div id="circle3"><div class="c3"></div></div>
  1121.  
  1122.  
  1123. <!---IMAGE 1--->
  1124. <div id="portrait">
  1125. <img src="http://s15.postimg.org/gvt5w9dm3/floral1.png">
  1126. </div>
  1127. <!------------->
  1128.  
  1129.  
  1130. <!---IMAGE 2--->
  1131. <div id="portrait2">
  1132. <img src="http://s11.postimg.org/txkepveib/floral4.png">
  1133. </div>
  1134. <!------------->
  1135.  
  1136.  
  1137.  
  1138. <div id="line1"></div>
  1139. <div id="line2"></div>
  1140. <div id="line3"></div>
  1141. <div id="line4"></div>
  1142.  
  1143.  
  1144.  
  1145.  
  1146.  
  1147. <!---BUBBLE 1--->
  1148. <div id="tri1">▼</div>
  1149. <div id="bubble1">
  1150. <div id="btext1">
  1151.  
  1152. <!------------INFOS--------------------->
  1153. <b>Name:</b>Your name here</br>
  1154. <b>Age:</b>Your age here</br>
  1155. <b>Gender:</b>Your gender here</br>
  1156. <b>Location:</b>Your location here</br>
  1157. <b>Likes:</b>Stuffs you like</br>
  1158. <b>Fandoms:</b>Your fandoms here
  1159. <!-------------------------------------->
  1160.  
  1161. </div>
  1162. </div>
  1163. <!-------------->
  1164.  
  1165.  
  1166.  
  1167.  
  1168.  
  1169. <!---BUBBLE 2--->
  1170. <div id="tri2">▲</div>
  1171. <div id="bubble2">
  1172. <div id="btext2">
  1173. <div id="header">More about me;</div>
  1174.  
  1175. <!------------MORE ABOUT ME------------->
  1176. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="/">Aliquam nisi</a> lorem, pulvinar id, commodo feugiat, <b>vehicula et</b>, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</p>
  1177. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.
  1178. <!-------------------------------------->
  1179.  
  1180. </div>
  1181. </div>
  1182. <!-------------->
  1183.  
  1184.  
  1185.  
  1186.  
  1187.  
  1188. <!---BUBBLE 3--->
  1189. <div id="tri3">▼</div>
  1190. <div id="bubble3">
  1191. <div id="btext3">
  1192.  
  1193. <!------------MORE ABOUT ME #2------------->
  1194. Suspendisse ac pede. Cras tincidunt pretium felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porttitor mi id felis. Maecenas nec augue. Praesent a quam pretium leo congue accumsan.</p>
  1195. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  1196. <!----------------------------------------->
  1197.  
  1198. </div>
  1199. </div>
  1200. <!-------------->
  1201.  
  1202.  
  1203.  
  1204.  
  1205.  
  1206. <!---BUBBLE 4--->
  1207. <div id="tri4">▲</div>
  1208. <div id="bubble4">
  1209. <div id="btext4">
  1210.  
  1211. <!------------QUOTE------------->
  1212. <span class="quo">❝</span> It does not matter how slow you go so long as you do not stop.<span class="quo">❞</span>
  1213. <!------------------------------>
  1214.  
  1215. </div>
  1216. </div>
  1217. <!-------------->
  1218.  
  1219.  
  1220.  
  1221.  
  1222.  
  1223. <!---BUBBLE 5--->
  1224. <div id="tri5">▼</div>
  1225. <div id="bubble5">
  1226. <div id="btext5">
  1227.  
  1228. <!------------LINKS------------->
  1229. <a href="">Link one</a>
  1230. <a href="">Link two</a>
  1231. <a href="">Link three</a>
  1232. <a href="">Link four</a>
  1233. <!------------------------------>
  1234.  
  1235. </div>
  1236. </div>
  1237. <!-------------->
  1238.  
  1239.  
  1240.  
  1241.  
  1242.  
  1243. <!---BUBBLE 6--->
  1244. <div id="tri6">▲</div>
  1245. <div id="bubble6">
  1246. <div id="btext6">
  1247.  
  1248. <!------------NAVIGATION------------->
  1249. <a href="/" title="home"><img src="http://static.tumblr.com/kmw8hta/mwbmtzzx8/home.png"></a>
  1250. <a href="/" title="message"><img src="http://static.tumblr.com/kmw8hta/LIgmu008n/mail.png"></a>
  1251. <a href="/archive" title="archive"><img src="http://static.tumblr.com/kmw8hta/2JDmu009j/time.png"></a>
  1252. <a href="http://stratfor-d.tumblr.com" title="credit"><img src="http://static.tumblr.com/kmw8hta/VvQmu3x2c/edit.png"></a>
  1253. <!----------------------------------->
  1254.  
  1255. </div>
  1256. </div>
  1257. <!-------------->
  1258.  
  1259.  
  1260.  
  1261.  
  1262.  
  1263. </div>
  1264. </div>
  1265.  
  1266.  
  1267. </center>
  1268. </div>
  1269.  
  1270. </body>
  1271. </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!