API tools faq
paste
Advertisement
ZonaFlow

untitled 3 s pace

ZonaFlow
Nov 25th, 2019
138
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.78 KB | None | 0 0
raw download clone embed print report
  1. CSS:
  2. background:radial-gradient(circle at center center,#DAA520,#FF1493),#12182a}*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}:root{--font-1:Gruppo,cursive;--font-2:Oswald,sans-serif;--font-3:Teko,sans-serif;--font-4:'Archivo Black',sans-serif;--font-5:'Luckiest Guy',cursive;--font-6:Boogaloo,cursive}:before,:after{content:'';position:absolute}a{display:inline-block;text-decoration:none;text-transform:uppercase;text-align:center}#jd-main,.jd-app{width:100%;height:100vh;position:relative;font-size:1em;font-family:var(--font-1);color:#646464;overflow:hidden}.jd-start{width:100%;height:100vh;background:radial-gradient(cicle at center center,#1e172b,#12182a),#12182a;visibility:visible;opacity:1;position:relative;z-index:1000;overflow:hidden;transition:all .3s ease-out}.jd-mov{width:450px;height:146px;position:absolute;top:0;left:0;transform:translate(0,0);animation:mover 20s infinite linear}.jd-mov img{width:100%;height:100%}.jd-open{width:120px;height:50px;line-height:50px;background:#ff71a0;border-radius:4px;font-family:var(--font-3);font-size:1.2em;color:#df386f;box-shadow:0 0 60px 5px rgba(0,2,10,.8);position:absolute;top:10px;left:220px;opacity:0;transition:all .2s ease-out}.jd-open:after{width:0;height:0;border-top:solid 30px #ff71a0;border-left:solid 15px transparent;border-right:solid 15px transparent;top:35px;left:45px}.jd-mov:hover{animation-play-state:paused}.jd-mov:hover .jd-open{opacity:1}@keyframes mover{0%{top:calc(50% - 73px);left:0}25%{top:0;left:calc(50% - 225px)}50%{top:calc(50% - 73px);left:calc(100vw - 450px)}75%{top:calc(100vh - 146px);left:calc(50% - 225px)}100%{top:calc(50% - 73px);left:0}}.jd-container{position:absolute;width:100%;height:100vh;top:0;left:0;opacity:0;visibility:hidden;overflow:hidden;transition:all .5s .2s ease-out}.jd-3d{width:650px;height:500px;position:absolute;perspective:1000px;top:50%;left:50%;transform:translate(-50%,-50%)}.jd-cubo{width:650px;height:500px;transform-style:preserve-3d;position:relative;transform:translateZ(-325px) rotateY(0deg)}.jd-tab{width:650px;height:500px;position:absolute;border:solid 1px #222;background:#fff;top:0;left:0}.jd-tab:nth-child(1){transform:translateZ(325px)}.jd-tab:nth-child(2){transform:translateZ(325px) rotateY(90deg);-webkit-transform-origin:left center;transform-origin:left center}.jd-tab:nth-child(3){transform:translateZ(-325px)}.jd-tab:nth-child(4){transform:translateZ(325px) rotateY(270deg);-webkit-transform-origin:right center;transform-origin:right center}.jd-section{width:650px;height:500px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;visibility:hidden;transition:all .1s 1.2s ease-out}[class*='jd-page']{width:650px;height:500px;background:#fbfeff;position:absolute;top:0;left:0;opacity:0;visibility:hidden;box-shadow:0 5px #ff538b;transition:all .2s 1.2s ease-out}.jd-header-page,.jd-nav{width:100%;height:90px;display:flex}.jd-btn-nav{width:calc(100% / 4);position:relative;background:radial-gradient(circle at left top,#75c5e8,#ff71a0)}.jd-btn-nav h1{line-height:90px;position:absolute;width:100%;font-size:4em;font-family:var(--font-4);color:#fff;opacity:.3}.jd-btn-nav span{display:block;line-height:90px;font-size:1.4em;color:#222;font-family:var(--font-3)}.jd-btn-nav:after{width:100%;height:7px;background:#ff71a0;left:0;top:calc(100% - 7px);transition:all .4s ease-out}.jd-btn-nav:hover:after{top:0;background:#75c5e8}.jd-banner,.jd-section-page{width:650px;height:410px;overflow:hidden}.jd-img-banner{width:100%;height:100%}.jd-letters{width:350px;height:112px;position:absolute;background:#131740;left:-26px;top:300px;padding-left:26px;visibility:hidden;opacity:0;box-shadow:5px 5px 5px rgba(0,0,0,.3);transition:all .5s ease-out}.jd-letters:after{width:0;height:0;border-top:solid 26px #3e426a;border-left:solid 26px transparent;left:0;bottom:-26px}.jd-letters img{width:300px;height:54px;margin-top:10px}.jd-letters span{color:#ff538b;font-size:1.6em}#jd-content-1:target .jd-start{opacity:0;visibility:hidden}#jd-content-1:target .jd-container{opacity:1;visibility:visible}#jd-content-1:target .jd-cubo{animation:girar 1s ease-out}#jd-content-1:target .jd-section{visibility:visible}#jd-content-1:target .jd-letters{visibility:visible;opacity:1;transition-delay:1.2s}#jd-content-1:target .jd-page-home{opacity:1;visibility:visible}@keyframes girar{0%{transform:translateZ(-325px) rotateY(180deg)}100%{transform:translateZ(-325px) rotateY(0deg)}}#jd-content-2:target .jd-start{opacity:0;visibility:hidden}#jd-content-2:target .jd-container{opacity:1;visibility:visible}#jd-content-2:target .jd-section{visibility:visible}#jd-content-2:target .jd-page-home{opacity:0;visibility:hidden}#jd-content-2:target .jd-page-inicio{opacity:1;visibility:visible}#jd-content-2:target .jd-letters{top:-14px;visibility:visible;opacity:1}#jd-content-3:target .jd-start{opacity:0;visibility:hidden}#jd-content-3:target .jd-container{opacity:1;visibility:visible}#jd-content-3:target .jd-section{visibility:visible}#jd-content-3:target .jd-page-home{opacity:0;visibility:hidden}#jd-content-3:target .jd-page-friend{opacity:1;visibility:visible}#jd-content-3:target .jd-letters{top:-14px;visibility:visible;opacity:1}#jd-content-4:target .jd-start{opacity:0;visibility:hidden}#jd-content-4:target .jd-container{opacity:1;visibility:visible}#jd-content-4:target .jd-section{visibility:visible}#jd-content-4:target .jd-page-home{opacity:0;visibility:hidden}#jd-content-4:target .jd-page-video{opacity:1;visibility:visible}#jd-content-4:target .jd-letters{top:-14px;visibility:visible;opacity:1}#jd-content-5:target .jd-start{opacity:0;visibility:hidden}#jd-content-5:target .jd-container{opacity:1;visibility:visible}#jd-content-5:target .jd-section{visibility:visible}#jd-content-5:target .jd-page-home{opacity:0;visibility:hidden}#jd-content-5:target .jd-page-credits{opacity:1;visibility:visible}#jd-content-5:target .jd-letters{top:-14px;visibility:visible;opacity:1}#jd-content-6:target .jd-start{opacity:0;visibility:hidden}#jd-content-6:target .jd-container{opacity:1;visibility:visible}#jd-content-6:target .jd-section{visibility:visible}#jd-content-6:target .jd-page-home{opacity:1;visibility:visible}#jd-content-6:target .jd-page-inicio{opacity:0;visibility:hidden}#jd-content-6:target .jd-letters{top:300px;visibility:visible;opacity:1}.jd-header{width:100%;height:90px;background:#111;position:relative}.jd-banner-page{width:405px;height:90px;margin-left:245px}.jd-btn-prev{background:#df386f;width:150px;height:40px;position:absolute;right:15px;top:75px;border-radius:4px;line-height:40px;color:#000;box-shadow:6px 6px 5px rgba(0,0,0,.2)}.jd-section-page{padding-top:30px;display:flex}.jd-col{width:50%;position:relative;height:350px;margin-top:15px;padding:0 15px}.jd-col:nth-child(1){border-right:solid 1px #ddd}.jd-nav-page{width:35px;height:105px;background:url(https://i.postimg.cc/fb0sHxcK/sprite.jpg)top left no-repeat,#222;box-shadow:4px 0 #222,4px 4px 5px rgba(0,0,0,.2);display:flex;flex-direction:column;position:absolute;left:0;top:100px}.jd-nav-page a{width:35px;height:35px;position:relative}.jd-nav-page a[name]:hover:after{content:attr(name);background:#222;padding:5px 10px;color:#fff;font-size:.8em;left:30px;top:-5px}.jd-col h1{font-size:2.3em;padding-left:40px;color:#ccc}.jd-col span{display:block;padding-left:170px;font-size:1.3em;color:#75c5e8}.slug{margin-top:20px;padding-left:40px;color:#ff71a0}.jd-desc{font-size:1.2em}.jd-box-video{width:290px;height:164px;background:#222;margin:50px 0}.jd-col-f{width:100%;height:350px;overflow-y:auto;display:flex;flex-direction:column}.jd-row{width:80%;height:80px;margin-bottom:10px;margin-top:2px;position:relative}.jd-row > div{width:80px;height:80px;border-radius:3px;background:linear-gradient(#fff,#ddd);box-shadow:0 0 0 1px #eee,2px 2px 5px rgba(0,0,0,.2);overflow:hidden;display:flex;flex-direction:column;align-items:center;position:relative;z-index:10}.jd-row > div img{width:70%}.jd-n-f{width:80px;line-height:20px;display:block;text-align:center;color:#222;font-family:var(--font-3)}.jd-me{width:50px;line-height:26px;background:#222;color:#fff;position:absolute;top:calc(50% - 13px);left:0;transition:all .3s ease-out}.jd-row:hover .jd-me{left:80px}::-webkit-scrollbar{width:5px;background:#222}::-webkit-scrollbar-thumb{background:#df386f;}
  3. div#nowayfixed {
  4. }
  5. HTML:
  6. </style>
  7. <div id="NotAllowedme">
  8.  
  9. <div id="NotAllowedme">
  10.  
  11.  
  12. <div id="jd-main">
  13.  
  14.  
  15.  
  16. <div id="jd-content-1">
  17.  
  18.  
  19.  
  20. <div id="jd-content-2">
  21.  
  22.  
  23.  
  24. <div id="jd-content-3">
  25.  
  26.  
  27.  
  28. <div id="jd-content-4">
  29.  
  30.  
  31.  
  32. <div id="jd-content-5">
  33.  
  34.  
  35.  
  36. <div id="jd-content-6">
  37.  
  38.  
  39.  
  40. <div class="jd-app">
  41.  
  42.  
  43.  
  44. <div class="jd-start">
  45.  
  46.  
  47.  
  48. <div class="jd-mov"> <img src="https://i.postimg.cc/cHD4pYjm/Bff.png" /> <a class="jd-open" href="#jd-content-1">Entrar</a> </div> </div>
  49.  
  50.  
  51.  
  52. <div class="jd-container">
  53.  
  54.  
  55.  
  56. <div class="jd-3d">
  57.  
  58.  
  59.  
  60. <div class="jd-cubo">
  61.  
  62.  
  63.  
  64. <div class="jd-tab"> </div>
  65.  
  66.  
  67.  
  68. <div class="jd-tab"> </div>
  69.  
  70.  
  71.  
  72. <div class="jd-tab"> </div>
  73.  
  74.  
  75.  
  76. <div class="jd-tab"> </div> </div> </div>
  77.  
  78.  
  79.  
  80. <div class="jd-section">
  81.  
  82.  
  83.  
  84. <div class="jd-page-home">
  85.  
  86.  
  87.  
  88. <div class="jd-nav"> <a class="jd-btn-nav" href="#jd-content-2">
  89.  
  90.  
  91.  
  92. <h1>01</h1> inicio </a> <a class="jd-btn-nav" href="#jd-content-3">
  93.  
  94.  
  95.  
  96. <h1>02</h1> amigos </a> <a class="jd-btn-nav" href="#jd-content-4">
  97.  
  98.  
  99.  
  100. <h1>03</h1> vídeo </a> <a class="jd-btn-nav" href="#jd-content-5">
  101.  
  102.  
  103.  
  104. <h1>04</h1> Love </a> </div>
  105.  
  106.  
  107.  
  108. <div class="jd-banner"> <img class="jd-img-banner" src="https://i.postimg.cc/ZR9H5QdB/download-12.png" /> </div> </div>
  109.  
  110.  
  111.  
  112. <div class="jd-page-inicio">
  113.  
  114.  
  115.  
  116. <div class="jd-header">
  117.  
  118.  
  119.  
  120. <div class="jd-banner-page"> <img src="https://i.postimg.cc/MGzRLF52/zeda.jpg" /> </div> <a class="jd-btn-prev" href="#jd-content-6">Voltar ao menu</a> </div>
  121.  
  122.  
  123.  
  124. <div class="jd-section-page">
  125.  
  126.  
  127.  
  128. <div class="jd-col">
  129.  
  130.  
  131.  
  132. <h1>͜͡و͜͡ᵃʐᵉᵈᵃ</h1> 1500643840
  133.  
  134.  
  135.  
  136. <p class="slug">Dona de Mim</p>
  137.  
  138.  
  139.  
  140. <div class="jd-nav-page"> <a href="https://xat.com/carinhoeamizade" name="tumblr"></a> <a href="https://xat.com/carinhoeamizade" name="forum"></a> <a href="http://xat.com/manicomio" name="xat"></a> </div> </div>
  141.  
  142.  
  143.  
  144. <div class="jd-col">
  145.  
  146.  
  147.  
  148. <p class="jd-desc">''Dizem que as melhores coisas não são planejadas, simplesmente acontecem e é melhor não pressionar o tempo. Porque se alguma coisa deve acontecer, ela vai acontecer de qualquer maneira. E se não deve, não acontecerá. Simples assim.''
  149.  
  150.  
  151. </p> </div> </div> </div>
  152.  
  153.  
  154.  
  155. <div class="jd-page-friend">
  156.  
  157.  
  158.  
  159. <div class="jd-header">
  160.  
  161.  
  162.  
  163. <div class="jd-banner-page"> <img src="https://i.postimg.cc/MGzRLF52/zeda.jpg" /> </div> <a class="jd-btn-prev" href="#jd-content-6">Voltar ao menu</a> </div>
  164.  
  165.  
  166.  
  167. <div class="jd-section-page">
  168.  
  169.  
  170.  
  171. <div class="jd-col">
  172.  
  173.  
  174.  
  175. <h1>Meus Amigos</h1> </div>
  176.  
  177.  
  178.  
  179. <div class="jd-col">
  180.  
  181.  
  182.  
  183. <div class="jd-col-f">
  184.  
  185.  
  186.  
  187. <div class="jd-row">
  188.  
  189.  
  190.  
  191. <div> <img src="https://i.postimg.cc/m2VWykNx/IMG0526.jpg" />
  192.  
  193.  
  194.  
  195. <p class="jd-n-f">Staz</p> </div> <a class="jd-me" href="https://xat.me/xStaz">💖</a> </div>
  196.  
  197.  
  198. <div class="jd-row">
  199.  
  200.  
  201.  
  202. <div> <img src="https://i.postimg.cc/CKRjMZZM/15977736-1164686763629171-1317821247697950681-n.jpg" />
  203.  
  204.  
  205.  
  206. <p class="jd-n-f">Cunha</p> </div> <a class="jd-me" href="https://xat.me/xkiss">💖</a> </div>
  207.  
  208. <div class="jd-row">
  209.  
  210.  
  211.  
  212. <div> <img src="https://i.postimg.cc/fyjttm3P/IMG-20180909-WA0028.jpg" />
  213.  
  214.  
  215.  
  216. <p class="jd-n-f">Bff 💖</p> </div> <a class="jd-me" href="https://xat.me/malcriadamalvadaa">💖</a> </div>
  217.  
  218.  
  219.  
  220. <div class="jd-row">
  221.  
  222.  
  223.  
  224. <div> <img src="https://i.postimg.cc/66ZTWrY1/bri.png" />
  225.  
  226.  
  227.  
  228.  
  229. <p class="jd-n-f">Brinha</p> </div> <a class="jd-me" href="https://xat.me/Eloh#content-3">💖</a> </div>
  230.  
  231.  
  232.  
  233.  
  234. <div class="jd-row">
  235.  
  236.  
  237.  
  238. <div> <img src="https://i.postimg.cc/632yc67f/so.png" />
  239.  
  240.  
  241.  
  242. <p class="jd-n-f">Sogra</p> </div> <a class="jd-me" href="https://xat.me/sinistra16">💖</a> </div> </div> </div> </div> </div>
  243.  
  244.  
  245.  
  246. <div class="jd-page-video">
  247.  
  248.  
  249.  
  250. <div class="jd-header">
  251.  
  252.  
  253.  
  254. <div class="jd-banner-page"> <img src="https://i.postimg.cc/MGzRLF52/zeda.jpg" /> </div> <a class="jd-btn-prev" href="#jd-content-6">Voltar ao menu</a> </div>
  255.  
  256.  
  257.  
  258. <div class="jd-section-page">
  259.  
  260.  
  261.  
  262. <div class="jd-col">
  263.  
  264.  
  265.  
  266. <h1>Vídeo</h1>Lucas Lucco - Motivo Pra Agradecer </div>
  267.  
  268.  
  269.  
  270. <div class="jd-col">
  271.  
  272.  
  273.  
  274. <div class="jd-box-video">Your browser does not support iframes!
  275. </div> </div> </div> </div>
  276.  
  277.  
  278.  
  279. <div class="jd-page-credits">
  280.  
  281.  
  282.  
  283. <div class="jd-header">
  284.  
  285.  
  286.  
  287. <div class="jd-banner-page"> <img src="https://i.postimg.cc/MGzRLF52/zeda.jpg" /> </div> <a class="jd-btn-prev" href="#jd-content-6">Voltar ao menu</a> </div>
  288.  
  289.  
  290.  
  291. <div class="jd-section-page">
  292.  
  293.  
  294.  
  295. <div class="jd-col">
  296.  
  297.  
  298.  
  299. <h1>Meu Dengo</h1>
  300.  
  301.  
  302.  
  303. <p class="slug">xat.com/carinhoeamizade</p>
  304.  
  305.  
  306.  
  307. <div class="jd-nav-page"> <a href="#" name="tumblr"></a> <a href="https://xat.com/carinhoeamizade" name="forum"></a> <a href="https://xat.com/carinhoeamizade" name="xat"></a> </div> </div>
  308.  
  309.  
  310.  
  311. <div class="jd-col">
  312.  
  313.  
  314.  
  315. <p class="jd-desc">Você tem um lugar todo especial em minha vida e cada dia vai mais do que o espaço dentro do meu coração. O que você quer que seja, você é uma pessoa que gosta de viver e viver para sempre do seu lado, você é uma razão daquilo que me faz feliz.
  316. </p> </div> </div> </div>
  317.  
  318.  
  319.  
  320. <div class="jd-letters"> <img src="https://i.postimg.cc/cHD4pYjm/Bff.png" /> Bem vindo ao meu xatspace</div></div></div></div>
  321. </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!