API tools faq
paste
Advertisement
ZonaFlow

untitled 6 s pace

ZonaFlow
Nov 25th, 2019
123
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.37 KB | None | 0 0
raw download clone embed print report
  1. CSS:
  2. background:url(https://i.postimg.cc/tgz6DkLh/1zquder.png)top left repeat,radial-gradient(#ffc0cb,#bc6896)}*{margin:0;padding:0;box-sizing:border-box}:root{--font-1:Merriweather,serif;--font-2:'Roboto Slab',serif;--font-3:Arvo,serif}:before,:after{content:'';position:absolute}a{display:inline-block;text-transform:uppercase;text-decoration:none}span{display:inline-block}h1,h2{font-weight:300}#main{width:100%;height:100vh;position:relative;color:#bc6896;font-family:var(--font-1);font-size:16px;overflow:hidden}.app{width:950px;height:100vh;position:relative;margin:0 auto}.header{height:150px;display:inline-block;width:100%;margin-top:80px;text-align:right}.header h1{font-size:8em;line-height:110px;color:#ff1493;font-family:var(--font-2);text-shadow:2px 2px #222}.header p{font-size:1.6em;color:#eee;text-shadow:1px 1px #222}._color{color:#eee}.nav{height:230px;margin-top:30px}.nav ul{position:relative;display:flex;position:relative;justify-content:space-between}[class*='item-nav']{width:230px;height:230px;list-style:none}.btn-nav{width:100%;height:100%;padding:10px;background:#ffc0cb;position:relative;overflow:hidden}.btn-nav img{width:210px;height:210px;filter:grayscale(1)}.btn-nav span{width:210px;line-height:40px;text-align:center;background:rgba(255,192,203,.6);position:absolute;left:10px;bottom:-40px;color:#222;transition:all .3s ease-out}.btn-nav:hover span{bottom:10px}.item-nav:nth-of-type(5){position:absolute;left:-230px;top:230px;text-align:center;opacity:0;transition:all .5s ease-in-out}.hover-li{width:120px;height:120px;display:inline-block;margin-top:50px;background:#ffc0c9;padding:5px;border-radius:50%;position:relative}.img-nav-hover{width:110px;height:110px;border-radius:50%;position:absolute;top:5px;left:5px;opacity:0;transform:rotate(0);transition:all .4s ease-out}.item-nav:nth-of-type(1):hover ~ .item-nav:nth-of-type(5){left:0;opacity:1}.item-nav:nth-of-type(2):hover ~ .item-nav:nth-of-type(5){left:240px;opacity:1}.item-nav:nth-of-type(3):hover ~ .item-nav:nth-of-type(5){left:480px;opacity:1}.item-nav:nth-of-type(4):hover ~ .item-nav:nth-of-type(5){left:720px;opacity:1}.item-nav:nth-of-type(1):hover ~ .item-nav:nth-of-type(5) .img-nav-hover:nth-of-type(1){transform:rotate(360deg);opacity:1}.item-nav:nth-of-type(2):hover ~ .item-nav:nth-of-type(5) .img-nav-hover:nth-of-type(2){transform:rotate(360deg);opacity:1}.item-nav:nth-of-type(3):hover ~ .item-nav:nth-of-type(5) .img-nav-hover:nth-of-type(3){transform:rotate(360deg);opacity:1}.item-nav:nth-of-type(4):hover ~ .item-nav:nth-of-type(5) .img-nav-hover:nth-of-type(4){transform:rotate(360deg);opacity:1}.page{width:100%;height:450px;position:absolute;background:#ffc0cb;box-shadow:0 0 100px 10px rgba(0,0,0,.4);top:200vh;left:50%;transform:translate(-50%,-50%);transition:all .5s ease-out;overflow:hidden}[class*='page-']{width:100%;height:450px;position:absolute;top:0;left:0;background:#ffc0cb;display:flex;visibility:hidden}[class*='col-']{width:50%}.col-left{box-shadow:-5px 0 #bc6896 inset}.col-right{overflow-y:auto;height:440px}.title-page{width:100%;height:120px;margin-top:150px;padding-left:50px;color:#222}.title-page h1{font-size:5em;line-height:80px}.title-page span{color:#bc6896}#content-1:target .page{top:50%}#content-1:target .page-home{visibility:visible}#content-2:target .page{top:50%}#content-2:target .page-music{visibility:visible}#content-3:target .page{top:50%}#content-3:target .page-friend{visibility:visible}#content-4:target .page{top:50%}#content-4:target .page-gallery{visibility:visible}.user{width:190px;height:190px;border-radius:50%;box-shadow:0 0 0 5px #bc6896;margin:30px 125px}.desc{padding:0 15px;text-align:center}.user-infor{padding:15px}.song{line-height:100px;padding-left:25px}.video{width:400px;height:226px;background:#222;margin:0 25px;box-shadow:0 10px #bc6896}.friend-col,.gallery-col{width:440px;padding:10px;height:auto}.row{width:250px;height:60px;display:flex;margin-bottom:20px;background:#ff68b4;border-radius:30px;box-shadow:5px 5px 10px rgba(0,0,0,.2)}.avatar{width:60px;height:60px;background:#fff;padding:5px}.avatar img{width:50px;height:50px}.infor{position:relative;padding:10px;width:calc(100% - 60px)}.infor a{position:absolute;width:80px;height:30px;line-height:30px;text-align:center;font-size:.6em;color:#fff;background:#222;box-shadow:0 0 0 5px #eee inset;right:30px;top:40px}.infor span,.infor p{color:#222;font-size:.8em;line-height:20px}.gallery-col img{width:440px;height:auto;filter:grayscale(1);margin-bottom:30px;transition:all .3s ease-out}.gallery-col img:hover{filter:grayscale(0)}::-webkit-scrollbar{width:5px;background:#222}::-webkit-scrollbar-thumb{background:#ff69b4}.footer{width:100%;line-height:50px;position:absolute;bottom:0;text-align:center;color:#222;}
  3.  
  4. html:
  5.  
  6. </style>
  7. <div id="NotAllowedme">
  8. </style>
  9. <div id="NotAllowedme">
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  
  16. <div id="main">
  17. <div id="content-1">
  18. <div id="content-2">
  19. <div id="content-3">
  20. <div id="content-4">
  21. <div class="app">
  22. <div class="princ">
  23. <div class="header">
  24. <h1>Қ≀ɛ<span class="_color">T</span>⍺❥</h1>
  25. <p>Bem vindo ao meu xatspace!</p>
  26. </div>
  27. <div class="nav">
  28. <ul>
  29. <li class="item-nav"><a class="btn-nav" href="#content-1">
  30. <img src="https://i.postimg.cc/rFgn9TNY/71240911-1603465943117499-6832278960517152768-n.jpg" />
  31. <span>about</span>
  32. </a>
  33. </li>
  34. <li class="item-nav"><a class="btn-nav" href="#content-2">
  35. <img src="https://i.postimg.cc/L8zp6gGL/000-sawes.jpg" />
  36. <span>music</span>
  37. </a>
  38. </li>
  39. <li class="item-nav"><a class="btn-nav" href="#content-3">
  40. <img src="https://i.postimg.cc/qMDtXS7j/0-pont.jpg" />
  41. <span>friends</span>
  42. </a>
  43. </li>
  44. <li class="item-nav"><a class="btn-nav" href="#content-4">
  45. <img src="https://i.postimg.cc/mDSkc6q3/54523933-1452696901527738-4134089434683408384-n.jpg" />
  46. <span>gallery</span>
  47. </a>
  48. </li>
  49. <li class="item-nav">
  50. <div class="hover-li">
  51. <img class="img-nav-hover" src="https://i.postimg.cc/qMDtXS7j/0-pont.jpg" />
  52. <img class="img-nav-hover" src="https://i.postimg.cc/mDSkc6q3/54523933-1452696901527738-4134089434683408384-n.jpg" />
  53. <img class="img-nav-hover" src="https://i.postimg.cc/L8zp6gGL/000-sawes.jpg" />
  54. <img class="img-nav-hover" src="https://i.postimg.cc/43sTKNTM/59975016-1492878334176261-8427209847501488128-n.jpg" />
  55. </div>
  56. </li>
  57. </ul>
  58. </div>
  59. </div>
  60. <div class="page">
  61. <div class="page-home">
  62. <div class="col-left">
  63. <a class="title-page" href="#">
  64. <h1>home</h1>
  65. <span>back to menu</span>
  66. </a>
  67. </div>
  68. <div class="col-right">
  69. <img class="user" src="https://i.postimg.cc/43sTKNTM/59975016-1492878334176261-8427209847501488128-n.jpg" />
  70. <p class="desc">
  71. ❀ “Já não sei mais se Sinto<br />
  72. falta de vc ou de mim, <br />
  73. De como eu era com vc,
  74. </p>
  75. <span class="user-infor">de como só vc conseguiu me fazer sentir.!❀<br />
  76.  
  77. </span>
  78. </div>
  79. </div>
  80. <div class="page-music">
  81. <div class="col-left">
  82. <a class="title-page" href="#">
  83. <h1>music</h1>
  84. <span>back to menu</span>
  85. </a>
  86. </div>
  87. <div class="col-right">
  88. <span class="song">Rayane & Rafaela - Onde Não Tinha Espaço</span>
  89. <div class="video">
  90. Your browser does not support iframes!
  91. </div>
  92. </div>
  93. </div>
  94. <div class="page-friend">
  95. <div class="col-left">
  96. <a class="title-page" href="#">
  97. <h1>friends</h1>
  98. <span>back to menu</span>
  99. </a>
  100. </div>
  101. <div class="col-right">
  102. <div class="friend-col">
  103. <div class="row">
  104. <div class="avatar">
  105. <img src="https://imgur.com/rqn48tw.jpg" />
  106. </div>
  107. <div class="infor">
  108. <span>Tuga</span>
  109. <p>ღ</p>
  110. <a href="https://xat.me/Tuga">xat.me</a>
  111. </div>
  112. </div>
  113. <div class="row">
  114. <div class="avatar">
  115. <img src="https://imgur.com/D7EucCRl.jpg" />
  116. </div>
  117. <div class="infor">
  118. <span>Morgane</span>
  119. <p>ღ</p>
  120. <a href="https://xat.me/iiiimor">xat.me</a>
  121. </div>
  122. </div>
  123. <div class="row">
  124. <div class="avatar">
  125. <img src="http://i67.tinypic.com/a0ffck.jpg" />
  126. </div>
  127. <div class="infor">
  128. <span>Estrela</span>
  129. <p>❥</p>
  130. <a href="https://xat.me/josystar10">xat.me</a>
  131. </div>
  132. </div>
  133. <div class="row">
  134. <div class="avatar">
  135. <img src="https://u.cubeupload.com/xpheliph/CtS58MY.png" />
  136. </div>
  137. <div class="infor">
  138. <span>Filha Eloh</span>
  139. <p>ღ</p>
  140. <a href="https://xat.me/Eloh#content-3">xat.me</a>
  141. </div>
  142. </div>
  143. <div class="row">
  144. <div class="avatar">
  145. <img src="http://i64.tinypic.com/fp3vok.jpg" />
  146. </div>
  147. <div class="infor">
  148. <span>Mana Azeda</span>
  149. <p>❥</p>
  150. <a href="https://xat.me/AzedinhaSz">xat.me</a>
  151. </div>
  152. </div>
  153. <div class="row">
  154. <div class="avatar">
  155. <img src="http://i66.tinypic.com/j9aru8.png" />
  156. </div>
  157. <div class="infor">
  158. <span>𝑀ana Chata</span>
  159. <p>ღ</p>
  160. <a href="https://xat.me/chata">xat.me</a>
  161. </div>
  162. </div>
  163. <div class="row">
  164. <div class="avatar">
  165. <img src="http://i66.tinypic.com/vzepmu.jpg" />
  166. </div>
  167. <div class="infor">
  168. <span>G4to</span>
  169. <p>❥</p>
  170. <a href="http://xat.me/G4to">xat.me</a>
  171. </div>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. <div class="page-gallery">
  177. <div class="col-left">
  178. <a class="title-page" href="#">
  179. <h1>gallery</h1>
  180. <span>back to menu</span>
  181. </a>
  182. </div>
  183. <div class="col-right">
  184. <div class="gallery-col">
  185. <img src="https://i.postimg.cc/SKdbcFSK/01-vcdk.jpg" />
  186. <img src="https://i.postimg.cc/V6NQRGvW/52775039-1435249989939096-1464995353047597056-n.jpg" />
  187. <img src="https://i.postimg.cc/NLqzWpsV/pronto.jpg" />
  188. <img src="https://i.postimg.cc/LX5wfJQy/68751358-1567253590072068-4512753529823166464-n.jpg" />
  189.  
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. </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!