API tools faq
paste
Advertisement
teuwoo

THE BROCEAN

teuwoo
May 10th, 2014
194
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.04 KB | None | 0 0
raw download clone embed print report
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  2.  
  3. <head>
  4.  
  5. <!------
  6.  
  7. YOU CAN CHANGE THE TITLE OF YOUR TAB IF WANTED.
  8. REPLACE "this is our brocean" WITH YOUR DESIRED TITLE.
  9.  
  10. ------>
  11.  
  12. <title>friends</title>
  13. <link rel="shortcut icon" href="http://media.tumblr.com/tumblr_lkl74dBBpb1qfamg6.gif">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15.  
  16. <style type="text/css">
  17.  
  18. <!----
  19.  
  20. YOU CAN CHANGE THE BACKGROUND TO AN IMAGE.
  21. TO DO THIS REPLACE "IMAGEURL" WITH THE URL OF YOUR IMAGE. ------>
  22.  
  23.  
  24.  
  25. body {
  26. background-color: #ffffff;
  27. background-image: url('IMAGEURL');
  28. background-repeat: repeat;
  29. margin-left: -50px;
  30. background-attachment: fixed;}
  31.  
  32.  
  33.  
  34. .credits {
  35. position:fixed;
  36. left:530px;
  37. background-color:#5a5a5a;
  38. color:#ffffff;
  39. width:100%;top:0;
  40. height:60px;
  41. z-index:99999999999999999;
  42. }
  43.  
  44.  
  45. #s-m-t-tooltip{
  46. max-width:200px;
  47. margin:15px;
  48. font-family:calibri;
  49. padding:2px 8px;
  50. background:#5a5a5a;
  51. color:#ffffff;
  52. z-index:99999999999999999999999999999999999;
  53. font-size:10px;
  54. text-transform:lowercase;
  55. box-shadow:1px 1px 3px rgba(0,0,0,.1);}
  56.  
  57. #topbar {
  58. position:fixed;position:fixed;
  59. width:100%;
  60. height:60px;
  61. left:0;
  62. top:0;
  63. background-color:#DEF4FF;
  64. z-index:99999999999999;
  65. font-family:calibri;transition-duration: 0.8s;
  66. -moz-transition-duration: 0.8s;
  67. -webkit-transition-duration: 0.8s;
  68. -o-transition-duration: 0.8s;
  69. }
  70.  
  71. .topbarbox {
  72. height:60px;position:fixed;top:0;
  73. background-color:#5a5a5a;z-index:99999999999999;
  74. width:150px;transition-duration: 0.8s;
  75. -moz-transition-duration: 0.8s;
  76. -webkit-transition-duration: 0.8s;
  77. -o-transition-duration: 0.8s;
  78. }
  79.  
  80. .topbartext {
  81. letter-spacing:5px;
  82. color:#ffffff;
  83. text-transform:lowercase;
  84. font-size:10px;z-index:99999999999999;
  85. padding:10px;transition-duration: 0.8s;
  86. -moz-transition-duration: 0.8s;
  87. -webkit-transition-duration: 0.8s;
  88. -o-transition-duration: 0.8s;
  89. }
  90.  
  91. .description {
  92. position:fixed;
  93. top:0px;
  94. left:0px;
  95. height:100%;
  96. width:150px;
  97. color:#5a5a5a;
  98. letter-spacing:1px;
  99. background-color:#ededed;
  100. opacity:0;transition-duration: 0.8s;
  101. -moz-transition-duration: 0.8s;
  102. -webkit-transition-duration: 0.8s;
  103. -o-transition-duration: 0.8s;
  104. }
  105.  
  106. .topbarbox:hover .description {
  107. opacity:1;
  108. top:60px;transition-duration: 0.8s;
  109. -moz-transition-duration: 0.8s;
  110. -webkit-transition-duration: 0.8s;
  111. -o-transition-duration: 0.8s;
  112. }
  113.  
  114.  
  115. .topbarlink {
  116. width: 70%;
  117. margin-left:200px;
  118. margin-top:20px;transition-duration: 0.8s;
  119. -moz-transition-duration: 0.8s;
  120. -webkit-transition-duration: 0.8s;
  121. -o-transition-duration: 0.8s;
  122. }
  123.  
  124. .topbarlink a {
  125. display:inline-block;
  126. width:90px;
  127. background-color:#5a5a5a;
  128. color:#ffffff;
  129. font-size:10px;
  130. text-transform:uppercase;
  131. letter-spacing:5px;transition-duration: 0.8s;
  132. -moz-transition-duration: 0.8s;
  133. -webkit-transition-duration: 0.8s;
  134. -o-transition-duration: 0.8s;
  135. }
  136.  
  137.  
  138. .description img {
  139. border:2px solid #DEF4FF;
  140. background-color:#5a5a5a;
  141. width:30px;
  142. display:inline-block;
  143. margin-left:2px;
  144.  
  145. }
  146.  
  147.  
  148. a {
  149. text-decoration:none;
  150. outline:none;
  151. -moz-outline-style:none;
  152. margin-top:-1px;
  153. }
  154.  
  155.  
  156.  
  157.  
  158.  
  159.  
  160.  
  161.  
  162.  
  163.  
  164.  
  165.  
  166.  
  167.  
  168. #brocean {
  169. font-family: calibri;
  170. width: 100%;
  171. overflow:auto;
  172. }
  173.  
  174.  
  175.  
  176.  
  177. .image img {
  178. position: absolute;
  179. left: 280px;
  180. top: 330px;
  181. }
  182.  
  183.  
  184.  
  185.  
  186.  
  187.  
  188.  
  189.  
  190.  
  191.  
  192.  
  193.  
  194.  
  195.  
  196.  
  197.  
  198.  
  199.  
  200.  
  201.  
  202.  
  203. .queenie {
  204. position:fixed;
  205. width:150px;
  206. height:30px;
  207. top:477px;
  208. left:447px;
  209. z-index:99999999;
  210. transition-duration: 0.8s;
  211. -moz-transition-duration: 0.8s;
  212. -webkit-transition-duration: 0.8s;
  213. -o-transition-duration: 0.8s;
  214. }
  215.  
  216.  
  217. .queenieline {
  218. position:fixed;
  219. width:1px;
  220. height:150px;
  221. left:450px;
  222. top:330px;
  223. background-color:#ededed;
  224. border:1px solid #ededed;
  225. transform:rotate(150deg) scale(0); -o-transform: rotate(150deg) scale(0); -ms-transform:rotate(150deg) scale(0); -webkit-transform:rotate(150deg) scale(0);
  226. transition-duration: 0.8s;
  227. -moz-transition-duration: 0.8s;
  228. -webkit-transition-duration: 0.8s;
  229. -o-transition-duration: 0.8s;
  230. }
  231.  
  232. .queenie:hover .queenieline {
  233. position:fixed;
  234. width:1px;
  235. height:150px;
  236. left:450px;
  237. top:330px;
  238. background-color:#ee5b69;
  239. border:1px solid #ee5b69;
  240. transform:rotate(150deg) scale(1); -o-transform: rotate(150deg) scale(1); -ms-transform:rotate(150deg) scale(1); -webkit-transform:rotate(150deg) scale(1);
  241. transition-duration: 0.8s;
  242. -moz-transition-duration: 0.8s;
  243. -webkit-transition-duration: 0.8s;
  244. -o-transition-duration: 0.8s;
  245. }
  246.  
  247. .queeniebox {
  248. position:fixed;
  249. width:300px;
  250. height:100px;
  251. color:#ffffff;
  252. background-color:#ee5b69;
  253. font-size:10px;
  254. opacity:0;
  255. top:390px;
  256. left:320px;
  257. transition-duration: 0.8s; transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0);
  258. -moz-transition-duration: 0.8s;
  259. -webkit-transition-duration: 0.9s;
  260. -o-transition-duration: 0.8s;
  261. }
  262.  
  263. .queenie:hover .queeniebox {
  264. position:fixed;
  265. opacity:1;
  266. top:240px;
  267. left:250px;
  268. transform:rotate(0deg) scale(1); -o-transform: rotate(0deg) scale(1); -ms-transform:rotate(0deg) scale(1); -webkit-transform:rotate(0deg) scale(1);
  269. transition-duration: 0.8s;
  270. -moz-transition-duration: 0.8s;
  271. -webkit-transition-duration: 0.8s;
  272. -o-transition-duration: 0.8s;
  273. }
  274.  
  275.  
  276. .queeniebox img {
  277. position:fixed;
  278. border:5px #5a5a5a solid;
  279. }
  280.  
  281.  
  282. .queenieboxline {
  283. margin-left:100px;
  284. width:200px;
  285. background-color:#5a5a5a;
  286. text-transform: uppercase;
  287. font-size: 15px;
  288. letter-spacing:4px;
  289. }
  290.  
  291. .queenietext {
  292. margin-left:100px;
  293. padding:10px;
  294. width:180px;
  295. }
  296.  
  297.  
  298.  
  299.  
  300.  
  301.  
  302.  
  303.  
  304.  
  305.  
  306.  
  307.  
  308.  
  309.  
  310.  
  311.  
  312.  
  313. .tracy {
  314. position:fixed;
  315. width:130px;
  316. height:50px;
  317. top:437px;
  318. left:665px;
  319. z-index:99999999;
  320. transition-duration: 0.8s;
  321. -moz-transition-duration: 0.8s;
  322. -webkit-transition-duration: 0.8s;
  323. -o-transition-duration: 0.8s;
  324. }
  325.  
  326.  
  327. .tracyline {
  328. position:fixed;
  329. width:1px;
  330. height:150px;
  331. left:700px;
  332. top:270px;
  333. background-color:#FFDB58;
  334. border:1px solid #FFDB58;
  335. transform:rotate(350deg) scale(0); -o-transform: rotate(350deg) scale(0); -ms-transform:rotate(350deg) scale(0); -webkit-transform:rotate(350deg) scale(0);
  336. transition-duration: 0.8s;
  337. -moz-transition-duration: 0.8s;
  338. -webkit-transition-duration: 0.8s;
  339. -o-transition-duration: 0.8s;
  340. }
  341.  
  342. .tracy:hover .tracyline {
  343. position:fixed;
  344. width:1px;
  345. height:150px;
  346. background-color:#FFDB58;
  347. border:1px solid #FFDB58;
  348. transform:rotate(350deg) scale(1); -o-transform: rotate(350deg) scale(1); -ms-transform:rotate(350deg) scale(1); -webkit-transform:rotate(350deg) scale(1);
  349. transition-duration: 0.8s;
  350. -moz-transition-duration: 0.8s;
  351. -webkit-transition-duration: 0.8s;
  352. -o-transition-duration: 0.8s;
  353. }
  354.  
  355. .tracybox {
  356. position:fixed;
  357. width:300px;
  358. height:100px;
  359. color:#ffffff;
  360. background-color:#FFDB58;
  361. font-size:10px;
  362. opacity:0;
  363. top:300px;
  364. left:530px;z-index:99999999999999;
  365. transition-duration: 0.8s; transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0);
  366. -moz-transition-duration: 0.8s;
  367. -webkit-transition-duration: 0.9s;
  368. -o-transition-duration: 0.8s;
  369. }
  370.  
  371. .tracy:hover .tracybox {
  372. position:fixed;
  373. opacity:1;
  374. top:200px;
  375. left:530px;
  376. transform:rotate(0deg) scale(1); -o-transform: rotate(0deg) scale(1); -ms-transform:rotate(0deg) scale(1); -webkit-transform:rotate(0deg) scale(1);
  377. transition-duration: 0.8s;
  378. -moz-transition-duration: 0.8s;
  379. -webkit-transition-duration: 0.8s;
  380. -o-transition-duration: 0.8s;
  381. }
  382.  
  383. .tracybox img {
  384. position:fixed;
  385. border:5px #5a5a5a solid;
  386. }
  387.  
  388. .tracyboxline {
  389. margin-left:100px;
  390. width:200px;
  391. background-color:#5a5a5a;
  392. text-transform: uppercase;
  393. font-size: 15px;
  394. letter-spacing:4px;
  395. }
  396.  
  397. .tracytext {
  398. margin-left:100px;
  399. padding:10px;
  400. width:180px;
  401. }
  402.  
  403.  
  404.  
  405.  
  406.  
  407.  
  408.  
  409.  
  410.  
  411.  
  412.  
  413.  
  414.  
  415.  
  416.  
  417.  
  418. .jisu {
  419. position:fixed;
  420. width:100px;
  421. height:80px;
  422. top:567px;
  423. left:435px;
  424. z-index:99999999;
  425. transition-duration: 0.8s;
  426. -moz-transition-duration: 0.8s;
  427. -webkit-transition-duration: 0.8s;
  428. -o-transition-duration: 0.8s;
  429. }
  430.  
  431.  
  432. .jisuline {
  433. position:fixed;
  434. width:1px;
  435. height:170px;
  436. left:385px;
  437. top:410px;
  438. background-color:#3BB9FF;
  439. border:1px solid #3BB9FF;
  440. transform:rotate(-50deg) scale(0); -o-transform: rotate(-50deg) scale(0); -ms-transform:rotate(-50deg) scale(0); -webkit-transform:rotate(-50deg) scale(0);
  441. transition-duration: 0.8s;
  442. -moz-transition-duration: 0.8s;
  443. -webkit-transition-duration: 0.8s;
  444. -o-transition-duration: 0.8s;
  445. }
  446.  
  447. .jisu:hover .jisuline {
  448. position:fixed;
  449. width:1px;
  450. height:170px;
  451. transform:rotate(-50deg) scale(1); -o-transform: rotate(-50deg) scale(1); -ms-transform:rotate(-50deg) scale(1); -webkit-transform:rotate(-50deg) scale(1);
  452. transition-duration: 0.8s;
  453. -moz-transition-duration: 0.8s;
  454. -webkit-transition-duration: 0.8s;
  455. -o-transition-duration: 0.8s;
  456. }
  457.  
  458. .jisubox {
  459. position:fixed;
  460. width:300px;
  461. height:100px;
  462. color:#ffffff;
  463. background-color:#3BB9FF;
  464. font-size:10px;
  465. opacity:0;
  466. top:450px;
  467. left:230px;z-index:99999999999999;
  468. transition-duration: 0.8s; transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0);
  469. -moz-transition-duration: 0.8s;
  470. -webkit-transition-duration: 0.9s;
  471. -o-transition-duration: 0.8s;
  472. }
  473.  
  474. .jisu:hover .jisubox {
  475. position:fixed;
  476. opacity:1;
  477. top:350px;
  478. left:140px;
  479. transform:rotate(0deg) scale(1); -o-transform: rotate(0deg) scale(1); -ms-transform:rotate(0deg) scale(1); -webkit-transform:rotate(0deg) scale(1);
  480. transition-duration: 0.8s;
  481. -moz-transition-duration: 0.8s;
  482. -webkit-transition-duration: 0.8s;
  483. -o-transition-duration: 0.8s;
  484. }
  485.  
  486.  
  487. .jisubox img {
  488. position:fixed;
  489. border:5px #5a5a5a solid;
  490. }
  491.  
  492. .jisuboxline {
  493. margin-left:100px;
  494. width:200px;
  495. background-color:#5a5a5a;
  496. text-transform: uppercase;
  497. font-size: 15px;
  498. letter-spacing:4px;
  499. }
  500.  
  501. .jisutext {
  502. margin-left:100px;
  503. padding:10px;
  504. width:180px;
  505. }
  506.  
  507.  
  508.  
  509.  
  510.  
  511.  
  512.  
  513.  
  514.  
  515.  
  516.  
  517.  
  518.  
  519.  
  520.  
  521.  
  522.  
  523.  
  524.  
  525.  
  526. .myra {
  527. position:fixed;
  528. width:120px;
  529. height:50px;
  530. top:667px;
  531. left:390px;
  532. z-index:99999999;
  533. transition-duration: 0.8s;
  534. -moz-transition-duration: 0.8s;
  535. -webkit-transition-duration: 0.8s;
  536. -o-transition-duration: 0.8s;
  537. }
  538.  
  539.  
  540. .myraline {
  541. position:fixed;
  542. width:1px;
  543. height:97px;
  544. left:345px;
  545. top:620px;
  546. background-color:#FFB914;
  547. border:1px solid #FFB914;
  548. transform:rotate(-70deg) scale(0); -o-transform: rotate(-70deg) scale(0); -ms-transform:rotate(-70deg) scale(0); -webkit-transform:rotate(-70deg) scale(0);
  549. transition-duration: 0.8s;
  550. -moz-transition-duration: 0.8s;
  551. -webkit-transition-duration: 0.8s;
  552. -o-transition-duration: 0.8s;
  553. }
  554.  
  555. .myra:hover .myraline {
  556. position:fixed;
  557. width:1px;
  558. height:97px;
  559. transform:rotate(-70deg) scale(1); -o-transform: rotate(-70deg) scale(1); -ms-transform:rotate(-70deg) scale(1); -webkit-transform:rotate(-70deg) scale(1);
  560. transition-duration: 0.8s;
  561. -moz-transition-duration: 0.8s;
  562. -webkit-transition-duration: 0.8s;
  563. -o-transition-duration: 0.8s;
  564. }
  565.  
  566. .myrabox {
  567. position:fixed;
  568. width:300px;
  569. height:100px;
  570. color:#ffffff;
  571. background-color:#FFB914;
  572. font-size:10px;
  573. opacity:0;
  574. top:620px;
  575. left:210px;z-index:99999999999999;
  576. transition-duration: 0.8s; transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0);
  577. -moz-transition-duration: 0.8s;
  578. -webkit-transition-duration: 0.9s;
  579. -o-transition-duration: 0.8s;
  580. }
  581.  
  582. .myra:hover .myrabox {
  583. position:fixed;
  584. opacity:1;
  585. top:560px;
  586. left:60px;
  587. transform:rotate(0deg) scale(1); -o-transform: rotate(0deg) scale(1); -ms-transform:rotate(0deg) scale(1); -webkit-transform:rotate(0deg) scale(1);
  588. transition-duration: 0.8s;
  589. -moz-transition-duration: 0.8s;
  590. -webkit-transition-duration: 0.8s;
  591. -o-transition-duration: 0.8s;
  592. }
  593.  
  594.  
  595. .myrabox img {
  596. position:fixed;
  597. border:5px #5a5a5a solid;
  598. }
  599.  
  600. .myraboxline {
  601. margin-left:100px;
  602. width:200px;
  603. background-color:#5a5a5a;
  604. text-transform: uppercase;
  605. font-size: 15px;
  606. letter-spacing:4px;
  607. }
  608.  
  609. .myratext {
  610. margin-left:100px;
  611. padding:10px;
  612. width:180px;
  613. }
  614.  
  615.  
  616.  
  617.  
  618.  
  619.  
  620.  
  621.  
  622.  
  623.  
  624.  
  625.  
  626.  
  627.  
  628.  
  629.  
  630.  
  631.  
  632.  
  633.  
  634. .finlay {
  635. position:fixed;
  636. width:100px;
  637. height:50px;
  638. top:600px;
  639. left:570px;
  640. z-index:99999999;
  641. transition-duration: 0.8s;
  642. -moz-transition-duration: 0.8s;
  643. -webkit-transition-duration: 0.8s;
  644. -o-transition-duration: 0.8s;
  645. }
  646.  
  647.  
  648. .finlayline {
  649. position:fixed;
  650. width:1px;
  651. height:97px;
  652. left:745px;
  653. top:540px;
  654. background-color:#7FE817;
  655. border:1px solid #7FE817;
  656. transform:rotate(70deg) scale(0); -o-transform: rotate(70deg) scale(0); -ms-transform:rotate(70deg) scale(0); -webkit-transform:rotate(70deg) scale(0);
  657. transition-duration: 0.8s;
  658. -moz-transition-duration: 0.8s;
  659. -webkit-transition-duration: 0.8s;
  660. -o-transition-duration: 0.8s;
  661. }
  662.  
  663. .finlay:hover .finlayline {
  664. position:fixed;
  665. transform:rotate(70deg) scale(1); -o-transform: rotate(70deg) scale(1); -ms-transform:rotate(70deg) scale(1); -webkit-transform:rotate(70deg) scale(1);
  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. .finlaybox {
  673. position:fixed;
  674. width:300px;
  675. height:100px;
  676. color:#ffffff;
  677. background-color:#7FE817;
  678. font-size:10px;
  679. opacity:0;
  680. top:530px;
  681. left:700px;
  682. z-index:99999999999999;
  683. transition-duration: 0.8s; transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0);
  684. -moz-transition-duration: 0.8s;
  685. -webkit-transition-duration: 0.9s;
  686. -o-transition-duration: 0.8s;
  687. }
  688.  
  689. .finlay:hover .finlaybox {
  690. position:fixed;
  691. opacity:1;
  692. top:510px;
  693. left:790px;
  694. transform:rotate(0deg) scale(1); -o-transform: rotate(0deg) scale(1); -ms-transform:rotate(0deg) scale(1); -webkit-transform:rotate(0deg) scale(1);
  695. transition-duration: 0.8s;
  696. -moz-transition-duration: 0.8s;
  697. -webkit-transition-duration: 0.8s;
  698. -o-transition-duration: 0.8s;
  699. }
  700.  
  701. .finlaybox img {
  702. position:fixed;
  703. border:5px #5a5a5a solid;
  704. }
  705.  
  706. .finlayboxline {
  707. margin-left:100px;
  708. width:200px;
  709. background-color:#5a5a5a;
  710. text-transform: uppercase;
  711. font-size: 15px;
  712. letter-spacing:4px;
  713. }
  714.  
  715. .finlaytext {
  716. margin-left:100px;
  717. padding:10px;
  718. width:180px;
  719. }
  720.  
  721.  
  722.  
  723.  
  724.  
  725.  
  726.  
  727.  
  728.  
  729.  
  730.  
  731.  
  732.  
  733.  
  734.  
  735.  
  736.  
  737.  
  738.  
  739.  
  740.  
  741.  
  742.  
  743. .mendy {
  744. position:fixed;
  745. width:100px;
  746. height:70px;
  747. top:650px;
  748. left:540px;
  749. z-index:99999999;
  750. transition-duration: 0.8s;
  751. -moz-transition-duration: 0.8s;
  752. -webkit-transition-duration: 0.8s;
  753. -o-transition-duration: 0.8s;
  754. }
  755.  
  756.  
  757. .mendyline {
  758. position:fixed;
  759. width:1px;
  760. height:137px;
  761. left:745px;
  762. top:620px;
  763. background-color:#9E7BFF;
  764. border:1px solid #9E7BFF;
  765. transform:rotate(90deg) scale(0); -o-transform: rotate(90deg) scale(0); -ms-transform:rotate(90deg) scale(0); -webkit-transform:rotate(90deg) scale(0);
  766. transition-duration: 0.8s;
  767. -moz-transition-duration: 0.8s;
  768. -webkit-transition-duration: 0.8s;
  769. -o-transition-duration: 0.8s;
  770. }
  771.  
  772. .mendy:hover .mendyline {
  773. position:fixed;
  774. transform: scale(1) rotate(90deg); -o-transform: rotate(90deg) scale(1); -ms-transform:rotate(90deg) scale(1); -webkit-transform:rotate(90deg) scale(1);
  775. transition-duration: 0.8s;
  776. -moz-transition-duration: 0.8s;
  777. -webkit-transition-duration: 0.8s;
  778. -o-transition-duration: 0.8s;
  779. }
  780.  
  781. .mendybox {
  782. position:fixed;
  783. width:300px;
  784. height:100px;
  785. color:#ffffff;
  786. background-color:#9E7BFF;
  787. font-size:10px;
  788. opacity:0;
  789. top:630px;
  790. left:720px;
  791. z-index:99999999999999;
  792. transition-duration: 0.8s; transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0);
  793. -moz-transition-duration: 0.8s;
  794. -webkit-transition-duration: 0.9s;
  795. -o-transition-duration: 0.8s;
  796. }
  797.  
  798. .mendy:hover .mendybox {
  799. position:fixed;
  800. opacity:1;
  801. top:630px;
  802. left:790px;
  803. transform:rotate(0deg) scale(1); -o-transform: rotate(0deg) scale(1); -ms-transform:rotate(0deg) scale(1); -webkit-transform:rotate(0deg) scale(1);
  804. transition-duration: 0.8s;
  805. -moz-transition-duration: 0.8s;
  806. -webkit-transition-duration: 0.8s;
  807. -o-transition-duration: 0.8s;
  808. }
  809.  
  810. .mendybox img {
  811. position:fixed;
  812. border:5px #5a5a5a solid;
  813. }
  814.  
  815.  
  816. .mendyboxline {
  817. margin-left:100px;
  818. width:200px;
  819. background-color:#5a5a5a;
  820. text-transform: uppercase;
  821. font-size: 15px;
  822. letter-spacing:4px;
  823. }
  824.  
  825. .mendytext {
  826. margin-left:100px;
  827. padding:10px;
  828. width:180px;
  829. }
  830.  
  831.  
  832.  
  833.  
  834. </style>
  835.  
  836. </head>
  837.  
  838. <!-- start of script tooltip -->
  839. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  840.  
  841. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  842.  
  843. <script>
  844.  
  845. (function($){
  846.  
  847. $(document).ready(function(){
  848.  
  849. $("a[title]").style_my_tooltips({
  850.  
  851. tip_follows_cursor:true,
  852.  
  853. tip_delay_time:90,
  854.  
  855. tip_fade_speed:600,
  856.  
  857. attribute:"title"
  858.  
  859. });
  860.  
  861. });
  862.  
  863. })(jQuery);
  864.  
  865. </script>
  866.  
  867. <!-- end of script tooltip -->
  868.  
  869. <link href="#s-m-t-tooltip" rel="stylesheet" type="text/css" />
  870.  
  871. <body>
  872.  
  873.  
  874. <div id="topbar"> <div class="topbarbox"><div class="credits"></div>
  875. <div class="topbartext">this is our brocean <br><div style="font-size:9px;letter-spacing:1px;margin-top:2px;">(hover here)</div><div class="description"><div style="padding:10px">this is a page filled with friends from school! <p><b>HOVER OVER THE IMAGES FOR DESCRIPTIONS AND BLOG LINKS!!!!!!!!!!!!!!</b><p><b>CREDITS:</b> image drawn by myra, page made by super duper talented jisu who can write whatever she wants because she's not going to tell her friends how to customise it, puns made by queenie and mendy, drawing platform provided by finlay, friendship given by tracy!<p><b>not in the picture but still part of the brocean:</b></p>
  876. <center>
  877. <a href="http://brokenrecordcas.tumblr.com" title="a fandom blog called brokenrecordcas"><img src="https://31.media.tumblr.com/fa7acade142368ef15fb06e19f5c64cd/tumblr_n5cylqxW0D1sjueyao7_r1_100.png"></a>
  878. <a href="http://fairytail-is-the-best.tumblr.com" title="a fairy tail blog called with a url too long to type"><img src="https://24.media.tumblr.com/49a7d1ccee0c12a0063aca61e88829c0/tumblr_n5cylqxW0D1sjueyao8_r1_100.png"></a>
  879. <a href="http://g-cutemon.tumblr.com" title="linking to an anime/manga blog called g-cutemon but has a kpop blog at jeonjngk"><img src="https://31.media.tumblr.com/40448c3fe680ec1de9a3e27e1e732e57/tumblr_n5cylqxW0D1sjueyao9_r1_100.jpg"></a>
  880.  
  881.  
  882. </center>
  883.  
  884. </div></div>
  885. </div></div>
  886.  
  887. <div class="topbarlink">
  888. <a href="/"><center>home</center></a>
  889. <a href="/ask"><center>ask</center></a>
  890. <a href="/archive"><center>archive</center></a>
  891. </div>
  892.  
  893. </div>
  894.  
  895.  
  896. <!--
  897.  
  898. THIS IS THE BROCEAN!
  899.  
  900. -->
  901.  
  902.  
  903.  
  904. <div id="brocean">
  905.  
  906. <a href="http://timebeetle.tumblr.com" title="linking to a fandom blog called timebeetle but has a humour blog at infollow"><div class="queenie">
  907. <div class="queeniebox">
  908. <img src="https://31.media.tumblr.com/e175e094d171a85225b364313b9d0c3f/tumblr_n5cylqxW0D1sjueyao4_100.png">
  909. <div class="queenieboxline"><center>sea q-cumber</center></div>
  910. <div class="queenietext">Name: Queenie Yip<p>Age: 15<p>Profile: A witty and super kind sort of kid.</div></div> <div class="queenieline"></div></div></a>
  911.  
  912. <a title="doesn't own a tumblr!"><div class="tracy">
  913. <div class="tracybox">
  914. <img src="https://24.media.tumblr.com/34a0bef5c193a7c551143a36420b2950/tumblr_n5cylqxW0D1sjueyao3_100.png"><div class="tracyboxline"><center>guanana</center></div><div class="tracytext">Name: Tracy Guan<p>Age: 16<p>Profile: The cool mother of the brocean.</p></div></div>
  915. <div class="tracyline"></div></div> </a>
  916.  
  917. <a href="http://btseok.tumblr.com" title="linking to a kpop blog called btseok but has a personal blog at teuwoo"><div class="jisu">
  918. <div class="jisubox"><img src="https://31.media.tumblr.com/f4ca11550fe95db4041c359ec13a7fd1/tumblr_n5cylqxW0D1sjueyao2_100.png"><div class="jisuboxline"><center>ji-tsunami</center></div>
  919. <div class="jisutext">Name: Jisu Im<p>Age: 16<p>Profile: The idiot who likes too many boys.</p></div></div>
  920. <div class="jisuline"></div></div></a>
  921.  
  922. <a href="http://savecosimah.tumblr.com" title="linking to a fandom blog called savecosimah but has a personal blog at snackadaktal"><div class="myra">
  923. <div class="myrabox"><img src="https://31.media.tumblr.com/fe82f99d9a376c834ddf96d331c3eb1f/tumblr_n5cylqxW0D1sjueyao6_100.png"><div class="myraboxline"><center>Myraft</center></div>
  924. <div class="myratext">Name: Myra (Pizza Lasagne) Holani<p>Age: 16<p>Profile: The super punk ass mega nice one.</p></div></div>
  925. <div class="myraline"></div></div></a>
  926.  
  927. <a href="http://jawnnwatson.tumblr.com" title="a fandom blog called jawnnwatson"><div class="finlay">
  928. <div class="finlaybox"><img src="https://24.media.tumblr.com/45c954577db9487db3125e1bcf01ffb4/tumblr_n5cylqxW0D1sjueyao5_100.png"><div class="finlayboxline"><center>fin-lay</center></div>
  929. <div class="finlaytext">Name: Finlay Mackenzie<p>Age: 15<p>Profile: We're convinced she's half-dragon</p></div></div>
  930. <div class="finlayline"></div></div></a>
  931.  
  932. <a href="http://cookiesforcas.tumblr.com" title="a fandom blog called cookiesforcas"><div class="mendy">
  933. <div class="mendybox"><img src="https://24.media.tumblr.com/34d4c3689bbd773552af76e29297abc6/tumblr_n5cylqxW0D1sjueyao1_100.png"><div class="mendyboxline"><center>men-dy</center></div>
  934. <div class="mendytext">Name: Mendy Atencio<p>Age: 16<p>Profile: The one with amazing hidden talents.</p></div></div>
  935. <div class="mendyline"></div></div></a>
  936.  
  937. <div class="image"><img src="https://31.media.tumblr.com/d58208d09125c02bafc6f18aecc3260e/tumblr_n5aqoeCEsP1sjueyao1_1280.gif"></div>
  938.  
  939.  
  940. </div>
  941.  
  942.  
  943. </div>
  944. </body>
  945. </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!