API tools faq
paste
Advertisement
ZonaFlow

untitled 4 s pace

ZonaFlow
Nov 25th, 2019
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.81 KB | None | 0 0
raw download clone embed print report
  1. CSS):: Rules
  2.  
  3. background:radial-gradient(#444,#000)}*{margin:0;padding:0;box-sizing:border-box}:before,:after{content:'';position:absolute}:root{--font-1:Oswald,sans-serif;--font-2:Anton,sans-serif;--blue:#2b318e}a{display:inline-table;text-decoration:none}span{display:inline-table}#jd-main{width:100%;height:100vh;position:relative;font-family:var(--font-1);color:var(--blue);font-size:1em;overflow:hidden}.jd-app{width:830px;height:440px;position:absolute;background:#222;border:solid 10px var(--blue);top:calc(50% - 40px);left:50%;transform:translate(-50%,-50%)}.jd-back,.jd-bg{width:100%;height:100%;overflow:hidden;display:flex;background:#000}.jd-bg{justify-content:space-between;transition:all .5s ease-out}.jd-aside{width:250px;height:500px;background:#202020;border:solid 5px #000;position:absolute;top:-40px;left:calc(50% - 125px);transition:all .5s ease-out}.jd-header{width:100%;height:155px;border-bottom:solid 5px #000;background:radial-gradient(circle at center top,#444,#111);padding:10px}.jd-header p{color:#888}.jd-nav{width:100%;height:335px;background:#000}.jd-3d{width:100%;height:111px;perspective:500px;color:var(--blue)}.jd-cube{transform-style:preserve-3d;width:100%;height:111px;transform:translateZ(-55.5px) rotateX(0);position:relative;transition:all .4s ease-out}.jd-cube:hover{transform:translateZ(-55.5px) rotateX(-90deg)}.jd-tab{width:100%;height:111px;background:linear-gradient(#313131,#242424);border:solid 5px #000;position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:10px}.jd-tab:nth-child(1){transform:translateZ(55.5px)}.jd-tab:nth-child(2){transform:rotateX(90deg) translateY(-55.5px);-webkit-transform-origin:top center}.jd-tab span{font-size:1.6em}.jd-tab h2{color:#222;font-size:3em}.jd-section-pages{width:280px;height:420px;position:absolute;top:0;left:calc(100% - 280px);background:#000;overflow:hidden;visibility:hidden;opacity:0;transition:all .5s ease-out}[class*='jd-page']{position:absolute;top:0;left:0;transform:translate(100%,0);background:#000;padding:25px 15px;width:530px;height:420px;display:flex;transition:all .5s ease-out}.jd-prev{width:31px;height:24px;background:url(https://i.postimg.cc/wxrfBQB7/Group-1.png)no-repeat;position:absolute;right:15px;bottom:20px}#jd-content-1:target .jd-aside{left:40px}#jd-content-1:target .jd-bg{width:560px}#jd-content-1:target .jd-section-pages{left:290px;visibility:visible;opacity:1;width:530px}#jd-content-1:target .jd-page-about{transform:translate(0,0)}#jd-content-2:target .jd-aside{left:40px}#jd-content-2:target .jd-bg{width:560px}#jd-content-2:target .jd-section-pages{left:290px;visibility:visible;opacity:1;width:530px}#jd-content-2:target .jd-page-music{transform:translate(0,0)}#jd-content-3:target .jd-aside{left:40px}#jd-content-3:target .jd-bg{width:560px}#jd-content-3:target .jd-section-pages{left:290px;visibility:visible;opacity:1;width:530px}#jd-content-3:target .jd-page-friend{transform:translate(0,0)}.jd-col-left{width:225px;height:370px;border:solid 5px var(--blue);position:relative;overflow:hidden}.jd-col-left img{position:absolute;height:100%;width:auto;left:50%;top:50%;transform:translate(-50%,-50%)}.jd-col-right{flex-grow:1;padding:0 10px}.jd-col-f{width:230px;height:100%;overflow-y:auto}.jd-row{width:200px;height:60px;display:flex;box-shadow:0 1px var(--blue) inset;align-items:center;justify-content:space-between}.jd-avatar{width:50px;height:50px;background:var(--blue);border-radius:3px;overflow:hidden}.jd-avatar img{width:100%}.jd-row a{width:50px;height:24px;background:var(--blue);color:#fff;text-align:center;font-size:1.1em}.jd-row span{flex-grow:1;padding:10px;color:#fff}.jd-video{width:470px;height:266px;background:var(--blue);margin:auto}.jd-page-about .jd-col-right{width:267px}.jd-infor,.jd-pin{display:block;line-height:30px}.jd-pin{color:#90ee90}.jd-col-right p{color:#fff;margin-top:40px;font-size:.8em}.jd-footer{width:100%;position:absolute;text-align:center;line-height:40px;bottom:0}::-webkit-scrollbar{background:var(--blue);width:5px}::-webkit-scrollbar-thumb{background:#fff;}
  4. div#nowayfixed {}
  5. div#nowayfixed {
  6. z-index: 2147483647;
  7. position: fixed;
  8. bottom: 0;
  9. left: 0;
  10. }
  11. div#nowaymenu
  12. {
  13. background-color:#009;
  14. background: linear-gradient(#000014, #000024, #00004e);
  15. border-radius: 0px 5px 0px 0px;
  16. display: none;
  17. FONT-SIZE: 12pt;
  18. FONT-FAMILY: Arial, Helvetica, sans-serif;
  19. }
  20. div#nowayitems
  21. {
  22. padding-top: 5px;
  23. padding-right: 0px;
  24. /*padding-bottom: 5px;*/
  25. padding-left: 0px;
  26. margin-left: 6px;
  27. line-height: 130%;
  28. color:#fff;
  29. }
  30. div#nowayitems > a
  31. {
  32. color:#fff;
  33. text-decoration: none;
  34. }
  35. div#nowayitems > a:hover {
  36. text-decoration: underline;
  37. }
  38.  
  39. HTML
  40.  
  41. </style>
  42. <div id="NotAllowedme">
  43.  
  44. </style>
  45. <div id="NotAllowedme">
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53.  
  54.  
  55. <div id="jd-main">
  56. <div id="jd-content-1">
  57. <div id="jd-content-2">
  58. <div id="jd-content-3">
  59. <div class="jd-app">
  60. <div class="jd-back">
  61. <div class="jd-bg">
  62. <div class="jd-box">
  63. <img src="https://i.postimg.cc/PxqnGqQj/IMG0526.jpg" />
  64. </div>
  65. <div class="jd-box">
  66. <img src="https://i.postimg.cc/xd8q59NX/staz1.jpg" />
  67. </div>
  68. </div>
  69. </div>
  70. <div class="jd-aside">
  71. <div class="jd-header">
  72. <h1>ˁ𝑆𝑡𝑎[𝑧];</h1>
  73. <p>Bem Vindo ao Meu Perfil!</p>
  74. </div>
  75. <div class="jd-nav">
  76. <a class="jd-3d" href="#jd-content-1">
  77. <div class="jd-cube">
  78. <div class="jd-tab">
  79. <span>Sobre mim</span>
  80. <h2>01</h2>
  81. </div>
  82. <div class="jd-tab">
  83. <span>Sobre mim</span>
  84. <h2>01</h2>
  85. </div>
  86. </div>
  87. </a>
  88. <a class="jd-3d" href="#jd-content-2">
  89. <div class="jd-cube">
  90. <div class="jd-tab">
  91. <span>Musica</span>
  92. <h2>02</h2>
  93. </div>
  94. <div class="jd-tab">
  95. <span>Musica</span>
  96. <h2>02</h2>
  97. </div>
  98. </div>
  99. </a>
  100. <a class="jd-3d" href="#jd-content-3">
  101. <div class="jd-cube">
  102. <div class="jd-tab">
  103. <span>Amigos</span>
  104. <h2>03</h2>
  105. </div>
  106. <div class="jd-tab">
  107. <span>Amigos</span>
  108. <h2>03</h2>
  109. </div>
  110. </div>
  111. </a>
  112. </div>
  113. </div>
  114. <div class="jd-section-pages">
  115. <div class="jd-page-about">
  116. <div class="jd-col-left">
  117. <img src="https://i.postimg.cc/HsrWc65g/47fakesbebsmeninos7.jpg" />
  118. </div>
  119. <div class="jd-col-right">
  120. <span class="jd-infor">Nome ˁ𝑆𝑡𝑎[𝑧];</span>
  121. <span class="jd-infor"> </span>
  122. </a>
  123. </a>
  124. <a class="jd-pin" href="/"></a>
  125. <p>
  126. Nunca deixe que te digam que não vale apena acreditar no sonho que se tem.
  127. </p>
  128. </div>
  129. <a class="jd-prev" href="#jd-main"></a>
  130. </div>
  131. <div class="jd-page-friend">
  132. <div class="jd-col-left">
  133. <img src="https://i.postimg.cc/YCmSVdq3/tumblrstatic3ubwm407.jpg" />
  134. </div>
  135. <div class="jd-col-right">
  136. <div class="jd-col-f">
  137. <div class="jd-row">
  138. <div class="jd-avatar">
  139. <img src="https://i.postimg.cc/NGp6rJhd/144576123.jpg" />
  140. </div>
  141. <span>Azeda</span>
  142. <a href="https://xat.me/AzedinhaSz">✚</a>
  143. </div>
  144. <div class="jd-row">
  145. <div class="jd-avatar">
  146. <img src="https://i.postimg.cc/Jn1ncJXM/2j0yu4n.png" />
  147. </div>
  148. <span>Mana</span>
  149. <a href="https://xat.me/sinistra16">✚</a>
  150. </div>
  151. <div class="jd-row">
  152. <div class="jd-avatar">
  153. <img src="https://i.postimg.cc/MZmxnhXN/1c63fe78-be2b-4270-9e1a-35f7907ff58b.jpg" />
  154. </div>
  155. <span>Tia Kiss</span>
  156. <a href="https://xat.me/xkiss">✚</a>
  157. </div>
  158. <div class="jd-row">
  159. <div class="jd-avatar">
  160. <img src="https://i.postimg.cc/8c2hQjWX/2r6yz4o.png" />
  161. </div>
  162. <span>Mana Xflor</span>
  163. <a href="http://xat.me/xFl0r">✚</a>
  164. </div>
  165. <div class="jd-row">
  166. <div class="jd-avatar">
  167. <img src="https://i.postimg.cc/KzG8thCj/2aimzc1.png" />
  168. </div>
  169. <span>❣</span>
  170. <a href="❣">✚</a>
  171. </div>
  172. </div>
  173. </div>
  174. <a class="jd-prev" href="#jd-main"></a>
  175. </div>
  176. <div class="jd-page-music">
  177. <div class="jd-video">
  178. Your browser does not support iframes!
  179. </div>
  180. <a class="jd-prev" href="#jd-main"></a>
  181. </div>
  182. </div>
  183. </div></div>
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!