API tools faq
paste
Advertisement
ZonaFlow

untitled 8 s pace

ZonaFlow
Nov 25th, 2019
117
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.27 KB | None | 0 0
raw download clone embed print report
  1. CSS:
  2. background:repeating-linear-gradient(45deg,rgba(231,10,1,.6) 1px,rgba(0,0,0,.1) 50px),repeating-linear-gradient(-45deg,rgba(0,0,0,.1) 1px,rgba(231,10,1,.6) 50px),#d90000}/*-------CSSDESIGN-------*/*{margin:0;padding:0;box-sizing:border-box}:before,:after{content:'';position:absolute}:root{--font-1:Dosis,sans-serif;--font-2:Quicksand,sans-serif;--font-3:Cookie,cursive;--font-4:'Archivo Black',sans-serif}a{display:inline-block;text-decoration:none;text-align:center}h1,h2{font-weight:300}#main{width:100%;height:100vh;position:relative;font-size:1em;font-family:var(--font-2);color:#222;overflow:hidden}.app{position:absolute;width:800px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;display:flex;flex-wrap:wrap}.app:after{width:90%;height:100px;background:#000;left:5%;bottom:-50px;border-radius:50%;filter:blur(25px);opacity:.6;z-index:-1}.aside{width:280px;height:460px;background:#e70a01;text-align:center}.img-user{width:170px;height:170px;padding:10px;background:#000;border-radius:50%;margin-top:40px}.title-user,.aside p{font-family:var(--font-3)}.aside p{font-size:1.6em;margin-top:20px}.aside a{color:#000;margin-top:10px}.aside a:hover{color:#fff;text-decoration:underline}.section{width:520px;height:460px;background:#fff;position:relative;overflow:hidden}.slyde{width:1040px;height:460px;position:absolute;left:0;top:0;transition:all .5s cubic-bezier(.32,.06,.39,1);display:flex}.nav{width:520px;height:460px;position:relative;overflow:hidden}.banner{position:absolute;width:450px;height:460px;top:0;right:0}.box-nav{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.row-nav{width:100%;height:calc(100% / 4);display:flex;overflow:hidden}.nav-left{width:70px;line-height:114px;font-size:2em;color:#666;opacity:.6;transition:all .3s ease-out}.nav-right{width:calc(100% - 70px);border-bottom:solid 1px rgba(255,255,255,.4);text-transform:uppercase;color:#fff;background:rgba(255,255,255,0);position:relative}.nav-right span{display:block;height:100%;line-height:114px;position:relative}.nav-right span:nth-of-type(1){text-align:left;padding-left:20px;margin-top:0;font-size:1.4em;transition:all .3s ease-out}.row-nav:hover .nav-right span:nth-of-type(1){margin-top:-115px}.nav-right span:nth-of-type(2){font-family:var(--font-4);font-size:4em;color:rgba(255,255,255,.5);text-shadow:2px 2px rgba(0,0,0,.2)}.row-nav:nth-of-type(4) .nav-right{border:none}.row-nav:hover .nav-left{color:#fff}.row-nav:hover .nav-right{animation:flash .2s ease-out;animation-fill-mode:forwards}@keyframes flash{0%{background:rgba(255,255,255,.9)}100%{background:rgba(255,255,255,.5)}}.pages{width:520px;height:460px;position:relative;background:#24252a}.about,.friend,.music,.gallery{position:absolute;width:100%;height:100%;background:#24252a;visibility:hidden;border-left:solid 10px #fff;transition:all .5s;padding:10px}#content-1:target .slyde{left:-520px}#content-1:target .about{visibility:visible}#content-2:target .slyde{left:-520px}#content-2:target .friend{visibility:visible}#content-3:target .slyde{left:-520px}#content-3:target .music{visibility:visible}#content-4:target .slyde{left:-520px}#content-4:target .gallery{visibility:visible}.title-page{color:#e70a01;font-size:1.5em}.btn-prev{position:absolute;width:24px;font-size:1.6em;line-height:24px;top:0;right:5px;color:#e70a01}.btn-prev:hover{color:#fff}.block{width:100%;height:410px;border:solid 1px #fff;padding:5px}.about .block{display:flex}.col-about{text-align:center;padding:10px;overflow-y:auto}.desc{color:#fff;font-size:.9em}.col-about h2{color:#e70a01;margin:10px 0;line-height:36px;border:solid 1px #e70a01}.col-friend,.col-gallery{height:398px;overflow-y:auto}.row-friend{width:220px;height:110px;margin-bottom:10px;position:relative;display:flex;align-items:center}.row-friend img{width:100px;height:100px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 5px #e70a01;margin-left:10px}.btn-me{width:30px;height:30px;line-height:30px;transform:rotate(45deg);position:absolute;background:#700300;color:#fff;font-size:.8em;border-radius:50%;box-shadow:0 0 5px rgba(0,0,0,.4);top:10px;left:90px;z-index:100}.btn-me:hover{background:#fff;color:#700300}.row-friend span{position:absolute;left:200px;top:20px;padding:5px 10px;background:#e70a01;border-radius:3px;box-shadow:3px 3px 5px rgba(0,0,0,.3);opacity:0;transition:all .3s ease-out}.row-friend:hover span{opacity:1;left:140px}.music .block{text-align:center;color:#fff;position:relative;z-index:50}.artist{color:#e70a01;margin:20px 0}.video{width:400px;height:226px;display:inline-block;background:#000;position:relative}.video:before{width:90%;height:60px;background:#000;border-radius:50%;left:5%;bottom:-30px;filter:blur(15px);z-index:-1}.song{display:block;margin-top:40px}.row-gallery{width:99%;height:auto;overflow:hidden;margin-bottom:20px}.row-gallery img{width:100%;height:auto;filter:blur(5px) grayscale(1);transition:all .3s ease-out}.row-gallery:hover img{filter:blur(0) grayscale(0)}::-webkit-scrollbar{width:5px;background:#fff}::-webkit-scrollbar-thumb{background:#e70a01}.footer{width:100%;height:40px;background:#000;line-height:40px;font-size:.75em;color:#888;text-align:left;padding-left:10px;}
  3. HTML:
  4. </style>
  5. <div id="NotAllowedme">
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13. <div id="main">
  14. <div id="content-1">
  15. <div id="content-2">
  16. <div id="content-3">
  17. <div id="content-4">
  18. <div class="app">
  19. <div class="aside">
  20. <img class="img-user" src="https://i.imgur.com/0lRtwPo.jpg" width="170/" />
  21. <h1 class="title-user">Tuga</h1>
  22. <span>(12344321)</span>
  23. <p>Bem vindo(a) ao meu xatspace!</p>
  24. <a class="xat" href="https://xat.com">» Tuguinha</a>
  25. </div>
  26. <div class="section">
  27. <div class="slyde">
  28. <div class="nav">
  29. <div class="banner">
  30. <img src="https://i.postimg.cc/qB3y02tf/foto1.jpg" />
  31. </div>
  32. <div class="box-nav">
  33. <a class="row-nav" href="#content-1">
  34. <span class="nav-left">01</span>
  35. <div class="nav-right">
  36. <span>About</span>
  37. <span>About</span>
  38. </div>
  39. </a>
  40. <a class="row-nav" href="#content-2">
  41. <span class="nav-left">02</span>
  42. <div class="nav-right">
  43. <span>Friend</span>
  44. <span>Friend</span>
  45. </div>
  46. </a>
  47. <a class="row-nav" href="#content-3">
  48. <span class="nav-left">03</span>
  49. <div class="nav-right">
  50. <span>Music</span>
  51. <span>Music</span>
  52. </div>
  53. </a>
  54. <a class="row-nav" href="#content-4">
  55. <span class="nav-left">04</span>
  56. <div class="nav-right">
  57. <span>Photos</span>
  58. <span>Photos</span>
  59. </div>
  60. </a>
  61. </div>
  62. </div>
  63. <div class="pages">
  64. <div class="about">
  65. <h1 class="title-page"><span style="color:#fff">A</span>bout</h1>
  66. <a class="btn-prev" href="#">⨯</a>
  67. <div class="block">
  68. <div class="col-about">
  69. <p class="desc">
  70. Desejo que você
  71. Não tenha medo da vida, tenha medo de não vivê-la.
  72. Não há céu sem tempestades, nem caminhos sem acidentes.
  73. Só é digno do pódio quem usa as derrotas para alcançá-lo.
  74. Só é digno da sabedoria quem usa as lágrimas para irrigá-la.
  75. Os frágeis usam a força; os fortes, a inteligência.
  76. Seja um sonhador, mas una seus sonhos com disciplina,
  77. Pois sonhos sem disciplina produzem pessoas frustradas.
  78. Seja um debatedor de idéias. Lute pelo que você ama.
  79. </p>
  80. <h2>H<span style="color:#fff">MINHA VIDA</span></h2>
  81. <p class="desc">
  82. Dizem que o nosso pensamento pode viajar livre para onde quiser, mas o meu está sempre indo até você.
  83. </p>
  84. </div>
  85. </div>
  86. </div>
  87. <div class="friend">
  88. <h1 class="title-page"><span style="color:#fff">F</span>riends</h1>
  89. <a class="btn-prev" href="#">⨯</a>
  90. <div class="block">
  91. <div class="col-friend">
  92. <div class="row-friend">
  93. <img src="https://i.imgur.com/LVFYBr0.jpg?1" />
  94. <a class="btn-me" href="http://xat.me/Boba">✕</a>
  95. <span>Meu Momozão ♥</span>
  96. </div>
  97. <div class="row-friend">
  98. <img src="h1" />
  99. <a class="btn-me" href="http://xat.me/Abia">✕</a>
  100. <span>Mana ABIA</span>
  101. </div>
  102. <div class="row-friend">
  103. <img src="http://i66.tinypic.com/21m595f.jpg" />
  104. <a class="btn-me" href="http://xat.me/Anitah2018">✕</a>
  105. <span>Amiga Anita</span>
  106. </div>
  107. <div class="row-friend">
  108. <img src="http://i68.tinypic.com/fuxumd.jpg" />
  109. <a class="btn-me" href="http://xat.me/DnnT">✕</a>
  110. <span>Mano Danty</span>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. <div class="music">
  116. <h1 class="title-page"><span style="color:#fff">M</span>usic</h1>
  117. <a class="btn-prev" href="#">⨯</a>
  118. <div class="block">
  119. <h2 class="artist">Matheus & Kauan</h2>
  120. <div class="video">
  121. Your browser does not support iframes!
  122. </div>
  123. <span class="song">Contar Pra Quê</span>
  124. </div>
  125. </div>
  126. <div class="gallery">
  127. <h1 class="title-page"><span style="color:#fff">P</span>hotos</h1>
  128. <a class="btn-prev" href="#">⨯</a>
  129. <div class="block">
  130. <div class="col-gallery">
  131. <div class="row-gallery">https://i.postimg.cc/d35Kghc5/5dsd50.jpg
  132. <img src="https://i.postimg.cc/d35Kghc5/5dsd50.jpg" width="470/" />
  133. </div>
  134. <div class="row-gallery">
  135. <img src="https://i.postimg.cc/4NwdT31k/26943531-10214944326502407-898857417-n.jpgwidth=" />
  136. </div>
  137. <div class="row-gallery">
  138. <img src="https://i.postimg.cc/HsLmX9bR/64953665-2385676035043961-512480574410063872-n.jpg" width="470/" />
  139. </div>
  140. <div class="row-gallery">
  141. <img src="https://i.postimg.cc/9McKVcpK/novasergio.jpg" width="470/" />
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. <div class="footer">
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. <span>Copyright © 2018 </span></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!