API tools faq
paste
ciunkwanara

Kata Bijak books

ciunkwanara
May 3rd, 2018
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.72 KB | None | 0 0
raw download clone embed print report
  1. <br></br>
  2. <center>
  3. <h2>
  4. <script type='text/javascript'>
  5. //<![CDATA[
  6. /*
  7. Teks berganti-ganti warna Script by Matt Hedgecoe
  8. Featured on JavaScript Kit, visit http://www.javascriptkit.com/script/script2/rainbowtext.shtml
  9. */
  10. var text="D'CAFE ~ ALTIZ - KATA BIJAK" //Ganti dengan teks anda
  11. var speed=80 //Kecepatan ganti warna
  12. if (document.all||document.getElementById){
  13. document.write('<span id="highlight">' + text + '</span>')
  14. var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
  15. }
  16. else
  17. document.write(text)
  18. var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
  19. var r=1
  20. var g=1
  21. var b=1
  22. var seq=1
  23. function changetext(){
  24. rainbow="#"+hex[r]+hex[g]+hex[b]
  25. storetext.style.color=rainbow
  26. }
  27. function change(){
  28. if (seq==6){
  29. b--
  30. if (b==0)
  31. seq=1
  32. }
  33. if (seq==5){
  34. r++
  35. if (r==12)
  36. seq=6
  37. }
  38. if (seq==4){
  39. g--
  40. if (g==0)
  41. seq=5
  42. }
  43. if (seq==3){
  44. b++
  45. if (b==12)
  46. seq=4
  47. }
  48. if (seq==2){
  49. r--
  50. if (r==0)
  51. seq=3
  52. }
  53. if (seq==1){
  54. g++
  55. if (g==12)
  56. seq=2
  57. }
  58. changetext()
  59. }
  60. function starteffect(){
  61. if (document.all||document.getElementById)
  62. flash=setInterval("change()",speed)
  63. }
  64. starteffect()
  65. //]]>
  66. </script>
  67. </h2></center>
  68. <br>
  69. <style>
  70. body{background:#ff8000;}
  71. ul.topUL {padding:0; margin:0; list-style:none; width:250px; margin:0 auto; position:relative; z-index:100; font-family:verdana, arial, sans-serif;}ul.topUL > li {float:left; margin-right:1px; position:relative; z-index:10;}ul.topUL > li a.p1 {display:block; width:43px; border:2px solid #333; border-width:1px 3px; height:248px; color:#fff; top:0; left:0; text-decoration:none; position:relative;-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  72. -webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;}ul.topUL > li > a span {display:block; width:43px; white-space:nowrap; position:absolute; left:0px; top:200px;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-o-transform: rotate(-90deg);transform: rotate(-90deg);}ul.topUL > li.b1 > a {background:#562; border-color:#340;background: -moz-linear-gradient(0, #562, #784 50%, #562 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#562), color-stop(50%, #784), color-stop(100%, #562)); }ul.topUL > li.b2 > a {background:#366; border-color:#144;background: -moz-linear-gradient(0, #366, #688 50%, #366 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#366), color-stop(50%, #688), color-stop(100%, #366)); }ul.topUL > li.b3 > a {background:#246; border-color:#024;background: -moz-linear-gradient(0, #246, #579 50%, #246 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#246), color-stop(50%, #579), color-stop(100%, #246)); }ul.topUL > li.b4 > a {background:#741; border-color:#520;background: -moz-linear-gradient(0, #741, #a74 50%, #741 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#741), color-stop(50%, #a74), color-stop(100%, #741)); }ul.topUL > li.b5 > a {background:#623; border-color:#401;background: -moz-linear-gradient(0, #623, #956 50%, #623 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#623), color-stop(50%, #956), color-stop(100%, #623)); }
  73. ul.topUL ul.sub {padding:0; list-style:none; position:absolute; left:-51px; top:230px; width:0; overflow:hidden; height:250px; margin:0 0 20px 0;-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  74. -webkit-transition: 0s;-moz-transition: 0s;-o-transition: 0s;transition: 0s;transition-delay:0s;-o-transition-delay: 0s;-moz-transition-delay: 0s;-ms-transition-delay: 0s;-webkit-transition-delay: 0s;}
  75. ul.topUL > li.b1 > ul {background:#784;}ul.topUL > li.b2 > ul {background:#688;}ul.topUL > li.b3 > ul {background:#579;}ul.topUL > li.b4 > ul {background:#a74;}ul.topUL > li.b5 > ul {background:#956;}
  76. ul ul li.content {width:0; height:190px; position:absolute; left:0; top:10px; background:#eee; padding:40px 0 0 0; text-indent:20px; font-size:11px; color:#444; overflow:hidden;-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  77. -webkit-transition: 0s;-moz-transition: 0s;-o-transition: 0s;transition: 0s;transition-delay: 0s;-o-transition-delay: 0s;-moz-transition-delay: 0s;-ms-transition-delay: 0s;-webkit-transition-delay: 0s;}ul ul li b {display:block;}ul ul li a {text-decoration:none; color:#444; padding-left:20px; line-height:20px;}ul ul li a:hover {color:#000; text-decoration:underline;}
  78. ul ul li.cover {width:0; height:220px; position:absolute; padding-top:30px; text-indent:10px; font-size:14px font-weight:bold; color:#fff; left:0; top:0; z-index:100; overflow:hidden; white-space:nowrap;}
  79. ul ul li.cover i {font-weight:normal; font-style:normal; font-size:10px; line-height:40px; padding-left:10px;}ul ul li.cover em {display:block; font-weight:normal; font-style:normal; margin-top:120px; font-size:10px; line-height:40px;}
  80. ul.topUL > li.b1 li.cover {background:#562;background: -moz-linear-gradient(0, #562, #784 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#562), color-stop(100%, #784)); }ul.topUL > li.b2 li.cover {background:#366;background: -moz-linear-gradient(0, #366, #688 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#366), color-stop(100%, #688)); }ul.topUL > li.b3 li.cover {background:#246;background: -moz-linear-gradient(0, #246, #579 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#246), color-stop(100%, #579)); }ul.topUL > li.b4 li.cover {background:#741;background: -moz-linear-gradient(0, #741, #a74 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#741), color-stop(100%, #a74)); }ul.topUL > li.b5 li.cover {background:#623;background: -moz-linear-gradient(0, #623, #956 100%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#623), color-stop(100%, #956)); }
  81. ul.topUL > li:hover {direction:ltr; z-index:100;}ul.topUL > li:hover a.p1 {top:230px;left:-100px;-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
  82. -webkit-transition: 0.5s;-moz-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s;transition-delay: 0s;-o-transition-delay: 0s;-moz-transition-delay: 0s;-ms-transition-delay: 0s;-webkit-transition-delay: 0s;}
  83. ul.topUL li:hover ul {width:200px;-o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
  84. -webkit-transition: 0.5s;-moz-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s;transition-delay: 0.5s;-o-transition-delay: .5s;-moz-transition-delay: 0.5s;-ms-transition-delay: 0.5s;-webkit-transition-delay: 0.5s;}ul.topUL li:hover ul li.cover {width:200px;-webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;}
  85. ul.topUL li:hover ul li.content {width:190px;background: -moz-linear-gradient(0, #ddd, #fff 50%); background: -webkit-gradient(linear, 0 0, 100% 0, from(#ddd), color-stop(50%, #fff)); -webkit-transition: 0.5s;-moz-transition: 0.5s;-o-transition: 0.5s;transition: 0.5s;}
  86. ul.topUL li:hover ul:hover {overflow:visible;}
  87. ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;}ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;}ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;}ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;}ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;}
  88. ul.topUL li.b1:hover ul:hover li.cover {border-right:4px solid #451;}ul.topUL li.b2:hover ul:hover li.cover {border-right:4px solid #255;}ul.topUL li.b3:hover ul:hover li.cover {border-right:4px solid #135;}ul.topUL li.b4:hover ul:hover li.cover {border-right:4px solid #630;}ul.topUL li.b5:hover ul:hover li.cover {border-right:4px solid #512;}
  89. ul.topUL li:hover ul:hover li.cover {left:-2px; width:1px; height:235px; top:-15px; padding-top:45px;-o-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  90. -webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;}
  91. .shelf {clear:left; width:350px; height:25px; background:#620; margin:0 auto; background: -moz-linear-gradient(90deg, #620, #950 20%, #620 30%); background: -webkit-gradient(linear, 0 100%, 0 0 , from(#620), color-stop(20%, #950), color-stop(30%, #620)); -o-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);-moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);}
  92. body#layout #main,
  93. body#layout #sidebar {
  94. padding: 0;
  95. }
  96. .coveraka {
  97. position: relative;
  98. width: 940px;
  99. height: 260px;
  100. margin: 20px auto;
  101. background-color: rgba(0,0,0,0.3);
  102. z-index: 1;
  103. -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  104. -mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  105. box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  106. }
  107. .coveraka p {color:black;
  108. text-align:center;
  109. margin: 0;
  110. }
  111. .left_gate {
  112. position: absolute;
  113. background: #41B5F0;
  114. bottom: 0; right: 50%; left: 0; top: 0;
  115. -webkit-transition: all 0.5s ease-out;
  116. -moz-transition: all 0.5s ease-out;
  117. -ms-transition: all 0.5s ease-out;
  118. -o-transition:all 0.5s ease-out;
  119. transition: all 0.5s ease-out;
  120. }
  121. .coveraka:hover .left_gate {
  122. right: 100%; left: -50%;
  123. }
  124. .right_gate {
  125. position:absolute;
  126. background:#0C5CA3;
  127. bottom: 0;
  128. left: 50%;
  129. right:0;top:0;
  130. -webkit-transition: all 0.5s ease-out;
  131. -moz-transition: all 0.5s ease-out;
  132. -ms-transition: all 0.5s ease-out;
  133. -o-transition: all 0.5s ease-out;
  134. transition: all 0.5s ease-out;
  135. }
  136. .coveraka:hover .right_gate {
  137. left: 100%; right: -50%;
  138. }
  139. .slide_in {
  140. overflow:hidden;
  141. }
  142. .slide_in .left_gate {
  143. background: #0C5CA3;
  144. }
  145. .slide_in .right_gate {
  146. background: #41B5F0;
  147. }
  148. </style>
  149. <div id='info'>
  150. <ul class='topUL'>
  151. <li class='b1'>
  152. <a class='p1' href='#url'>
  153. <span></span></a><ul class='sub'><li class='cover'><br/><i>by: D'Cafe ~ Altiz</i><em> Buka </em></li>
  154. <li class='content'><b></b><a href='#'>***********************************************************</a>
  155. <a href='#'>Dalam hal gaya, ikutilah arus; dalam hal prinsip, berdirilah bagai batu karang.</a></li></ul></li>
  156. <li class='b3'><a class='p1' href='#url'><span></span></a>
  157. <ul class='sub'><li class='cover'><br/><i> by: D'Cafe ~ Altiz </i><em> Buka </em></li>
  158. <li class='content'><b></b><a href='#'>***********************************************************</a><a href='#'>Kesuksesan adalah hasil perpaduan kerja otak, kerja hati, dan kerja keras.</a></li></ul></li>
  159. <li class='b3'><a class='p1' href='#url'><span></span></a><ul class='sub'><li class='cover'><br/><i> by: D'Cafe ~ Altiz </i><em> Buka </em></li>
  160. <li class='content'><b></b><a href='#'>***********************************************************</a><a href='#'>Teman terbaik dalam menemani perjalan hidup saya adalah terutama diri saya sendiri.</a></li></ul></li>
  161. <li class='b4'><a class='p1' href='#url'><span></span></a><ul class='sub'><li class='cover'><br/><i> by: D'Cafe ~ Altiz </i><em> Buka </em></li>
  162. <li class='content'><b></b><a href='#'>***********************************************************</a><a href='#'>Masalah menciptakan peluang bagi saya untuk menjadi kreatif dan menjadi pemenang.</a></li></ul></li>
  163. <li class='b5'><a class='p1' href='#url'><span></span></a><ul class='sub'><li class='cover'><br/><i> by: D'Cafe ~ Altiz </i><em>Buka</em></li><li class='content'><b></b><a href='#'>***********************************************************</a>
  164. <a href='#'>Kemarin Saya mersa baik. Hari ini Saya hebat. besok Saya akan merasa lebih baik lagi dan lebih hebat lagi.</a></li></ul></li></ul>
  165. <div class='shelf'></div></div><!-- end of info --><div style='clear: both;'></div></div>
  166. <br></br><center>
  167. <table border=20>
  168. <td>
  169. <style>#oktri img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
  170. #oktri img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>
  171. <div id="oktri">
  172. <a href=""><img src=" https://z-p3-scontent-sin6-2.xx.fbcdn.net/v/t1.0-0/cp0/e15/q65/p600x600/30726174_1004875582996483_1698630802172018688_o.jpg?_nc_cat=0&efg=eyJpIjoiYiJ9&oh=fe693679706c867b33d635b0359e7340&oe=5B61A90A " style="width:250px;height:250px;">
  173. </a> </div></td>
  174. </table></center>
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!