API tools faq
paste
Advertisement
YARY

xatspace tigger

YARY
Jun 3rd, 2020
48
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.36 KB | None | 0 0
raw download clone embed print report
  1. background:#000000;}*{padding:0; margin:0; box-sizing:border-box;} :root{--font: 'Abel', sans-serif;} a{display:inline-block;text-align:center;text-decoration:none;}
  2. ul{ text-align: center } ul{ float: left } ul{ z-index:100 } ul{ padding-left: 10% } ul{ margin-top: 85px } ul li{ width: 111px } ul li{ display: block } ul li{ margin-bottom: 7px } ul li { z-index:100 } ul li{ padding: 10px 2px } ul li{ font-size: 12px } ul li{ text-transform: uppercase } ul li{ letter-spacing: 2px } ul li{background: #000000;} ul li{ display: block } ul li{ width: 111px } ul li{ margin-bottom: 7px } ul li{ padding: 14px 2px } ul li{ font-size: 8px } ul li{ text-transform: uppercase } ul li{ letter-spacing: 2px } ul a{ color: #fff} ul a{ text-decoration: none } div[name='nav'] { position: fixed } div[name='nav'] { width: 160px } div[name='nav'] { height: 105% } div[name='nav'] {top: -60px;} div[name='nav'] { left: 0px } div[name='nav'] {background-color: #060606;} ul li:hover, a:hover{ color: #000000} ul li:hover, a:hover{ transition: 0.8s } ul li:hover, a:hover{background-color: #f58220;} div[name='ima'] img{ filter: blur(5px)} div[name='ima'] img:hover {filter: saturate(100%);} div[name='imas'] img{ filter: blur(5px)}
  3.  
  4. #main{width:100%;height:100vh;background: url(https://s25.postimg.org/8foxh04hr/noise.png)top left repeat ,radial-gradient(#ffffffb8, #f58220, #f58220 90%);font-family:var(--font);color:white;font-size:1em;overflow:hidden;position:relative;min-width:1080px;}
  5.  
  6.  
  7. #home{width:100%; height:100vh; position:absolute; top:0; left:0;}
  8.  
  9. .container{width:480px; height:480px; position:relative; top:50%; left:50%; transform:translate(-50%, -50%); border:solid 5px white; border-radius:50%;}
  10.  
  11.  
  12.  
  13. .navbar{width:100%; height:100%; position:absolute;z-index:2}
  14.  
  15. .btn-navbar{width:67px;height:67px;line-height:67px;font-size:2em;color: #f58220;border-radius:50%;background:white;box-shadow:0 0 0 16px rgba(255,255,255,0), 0 0 0 33px rgba(255,255,255,0);position:relative;}
  16.  
  17. .btn-navbar:hover{animation:pulse .5s infinite ease-in-out;}
  18.  
  19. @keyframes pulse{0%{box-shadow:0 0 0 0 white, 0 0 0 0 white;} 100%{box-shadow:0 0 0 8px transparent, 0 0 0 16px transparent;}} #position-1{} #position-2{} #position-3{} #position-4{} .center-jason{width:380px; height:380px; border-radius:50%; padding:10px; background:white; position:relative; top:50%; left:50%; transform:translate(-50% , -50%); overflow:hidden;}
  20.  
  21.  
  22. .center{width:380px; height:380px; border-radius:50%; padding:10px; background:white; position:relative; top:50%; left:50%; transform:translate(-50% , -50%); overflow:hidden;}
  23.  
  24.  
  25. .img-princ{width:360px; height:360px; border-radius:50%; position:absolute;}
  26. .img-princ2{width:470px; height:470px; border-radius:50%; position:absolute;}
  27. .title , .subtitle{transform: translateY(150px);color: #000000;position:relative;display:inline-block;background: rgba(255,255,255,.4);border-radius:4px;line-height:40px;text-align:center;width: 180px;margin-left:90px;} .subtitle{width:260px; margin-top:10px; margin-left:50px; font-size:1.2em;}
  28.  
  29.  
  30.  
  31. .menu-page{position:absolute;/* width:460px; */height:50px;right:30px;top:20px;} .btn-page{width:100px;height:40px;line-height:40px;margin:0 5px;background:white;box-shadow: 0 5px #f58220;border-radius:4px;text-transform:uppercase;transition:all .4s;margin-top:5px;} .btn-page:hover{box-shadow:0 5px rgba(234,99,40,.4), 0 0 30px 20px rgba(0,0,0,.2); background:#ea638c; color:white;}
  32.  
  33.  
  34.  
  35. #footer{width:100%;position:absolute;display:inline-block;text-align:center;bottom:50px;font-size:.75em;color: black;}
  36.  
  37. #video, #friends, #galery{width:100%;height:100vh;background:rgba(0,0,0,.75);visibility:hidden;overflow:hidden;opacity:0;transition:all 0.3s;z-index:100;position:absolute;} .menu-page{position:absolute;/* width:460px; */height:50px;right:30px;top:20px;} .btn-page{width:100px;height:40px;line-height:40px;margin:0 5px;background: #f58220;color: #000000;box-shadow: 0 5px #000000;border-radius:4px;text-transform:uppercase;transition:all .4s;margin-top:5px;} .btn-page:hover{box-shadow:0 5px rgba(234,99,40,.4), 0 0 30px 20px rgba(0,0,0,.2);background: #000000;color: #f58220;} .box-video{width:500px; height:283px; position:relative; top:50%; left:50%; transform:translate(-50%, -50%); box-shadow:0 10px #ea638c;}
  38.  
  39.  
  40.  
  41. #content-3:target #friends, #galery{visibility:hidden; opacity:0;} #content-3:target #video{visibility:visible; opacity:1;}
  42. #content-2:target #friends, #video{visibility:hidden; opacity:0;} #content-2:target #galery{visibility:visible; opacity:1;}
  43. #content-1:target #video, #galery{visibility:hidden; opacity:0;} #content-1:target #friends{visibility:visible;opacity:1;}
  44.  
  45.  
  46. .bloc-friends{width:350px;height:570px;margin-top:120px;margin-left:40%;border-left: solid 1px #f58220;padding-left:20px;} .box-friends{width:280px; height:100px; margin-bottom:17px; text-align:left; position:relative;} .img-friends{width:100px;height:100px;padding:5px;border-radius:50%;background: #f58220;position:relative;z-index:10;} .box-friends h2{position:absolute;width:90px;height:40px;top:30px;left:50px;background:white;border-radius:50px;line-height:40px;padding-left:0;font-size:.6em;color: #000000;transition:all .3s;} .simbol{width:40px; height:40px; display:inline-block; position:relative; right:-15px; text-align:center; font-size:2em; line-height:45px;} .box-friends:hover h2{width:200px; padding-left:60px; font-size:1em; line-height:40px;} .box-galery{width:530px;height:100vh;position:relative;overflow-y:scroll;padding:10px 10px;top:0;left:10%;background:black;border-right: 5px solid #651a1a;border-left: solid 5px #651a1a;transform: translate(20px, -90px);} .box-img-galery{width:474px;height:380px;overflow:hidden;margin:10px 10px;display:inline-block;} .img{width: 274px;height:100%;filter:grayscale(1);transition:all .4s;cursor:pointer;filter: blur(5px)} .box-img-galery:hover .img{transform:scale(1.4) rotate(8deg); filter:grayscale(0);filter: saturate(100%);} ::-webkit-scrollbar{width:5px; background:white;} ::-webkit-scrollbar-thumb{background: #000000;}
  47.  
  48.  
  49. div#nowayfixed {
  50. z-index: 2147483647;
  51. position: absolute;
  52. bottom: 0px;
  53. width: 0;
  54. }
  55. div#nowaymenu
  56. {
  57. background-color:#009;
  58. background: linear-gradient(#000014, #000024, #00004e);
  59. border-radius: 0px 5px 0px 0px;
  60. /* display: none; */
  61. FONT-SIZE: 12pt;
  62. FONT-FAMILY: Arial, Helvetica, sans-serif;
  63. width: 160px;
  64. position: absolute;
  65. left: 90%;
  66. z-index: 100;
  67. bottom: 0px;
  68. right:0px;
  69. }
  70. div#nowayitems
  71. {
  72. padding-top: 5px;
  73. padding-right: 0px;
  74. /*padding-bottom: 5px;*/
  75. padding-left: 0px;
  76. margin-left: 6px;
  77. line-height: 130%;
  78. color:#fff;
  79. display:none; ´
  80. width: 160px;
  81. }
  82. div#nowayitems > a
  83. {
  84. color:#fff;
  85. text-decoration: none;
  86. width: 160px;
  87. }
  88. div#nowayitems > a:hover {
  89. text-decoration: underline;
  90. width: 160px;
  91. }
  92.  
  93. div#nowaymenu:hover > #nowayitems {
  94. display: block;
  95. width: 160px;
  96. } }
  97. div#nowayfixed {
  98. z-index: 2147483647;
  99. position: fixed;
  100. bottom: 0;
  101. left: 0;
  102. }
  103. div#nowaymenu
  104. {
  105. background-color:#009;
  106. background: linear-gradient(#000014, #000024, #00004e);
  107. border-radius: 0px 5px 0px 0px;
  108. display: none;
  109. FONT-SIZE: 12pt;
  110. FONT-FAMILY: Arial, Helvetica, sans-serif;
  111. }
  112. div#nowayitems
  113. {
  114. padding-top: 5px;
  115. padding-right: 0px;
  116. /*padding-bottom: 5px;*/
  117. padding-left: 0px;
  118. margin-left: 6px;
  119. line-height: 130%;
  120. color:#fff;
  121. }
  122. div#nowayitems > a
  123. {
  124. color:#fff;
  125. text-decoration: none;
  126. }
  127. div#nowayitems > a:hover {
  128. text-decoration: underline;
  129. }}
  130. div#nowayfixed {
  131. z-index: 2147483647;
  132. position: fixed;
  133. bottom: 0;
  134. left: 0;
  135. }
  136. div#nowaymenu
  137. {
  138. background-color:#009;
  139. background: linear-gradient(#000014, #000024, #00004e);
  140. border-radius: 0px 5px 0px 0px;
  141. display: none;
  142. FONT-SIZE: 12pt;
  143. FONT-FAMILY: Arial, Helvetica, sans-serif;
  144. }
  145. div#nowayitems
  146. {
  147. padding-top: 5px;
  148. padding-right: 0px;
  149. /*padding-bottom: 5px;*/
  150. padding-left: 0px;
  151. margin-left: 6px;
  152. line-height: 130%;
  153. color:#fff;
  154. }
  155. div#nowayitems > a
  156. {
  157. color:#fff;
  158. text-decoration: none;
  159. }
  160. div#nowayitems > a:hover {
  161. text-decoration: underline;
  162. }}
  163. div#nowayfixed {
  164. z-index: 2147483647;
  165. position: fixed;
  166. bottom: 0;
  167. left: 0;
  168. }
  169. div#nowaymenu
  170. {
  171. background-color:#009;
  172. background: linear-gradient(#000014, #000024, #00004e);
  173. border-radius: 0px 5px 0px 0px;
  174. display: none;
  175. FONT-SIZE: 12pt;
  176. FONT-FAMILY: Arial, Helvetica, sans-serif;
  177. }
  178. div#nowayitems
  179. {
  180. padding-top: 5px;
  181. padding-right: 0px;
  182. /*padding-bottom: 5px;*/
  183. padding-left: 0px;
  184. margin-left: 6px;
  185. line-height: 130%;
  186. color:#fff;
  187. }
  188. div#nowayitems > a
  189. {
  190. color:#fff;
  191. text-decoration: none;
  192. }
  193. div#nowayitems > a:hover {
  194. text-decoration: underline;
  195. }}
  196. div#nowayfixed {
  197. z-index: 2147483647;
  198. position: fixed;
  199. bottom: 0;
  200. left: 0;
  201. }
  202. div#nowaymenu
  203. {
  204. background-color:#009;
  205. background: linear-gradient(#000014, #000024, #00004e);
  206. border-ra
  207.  
  208.  
  209.  
  210.  
  211.  
  212.  
  213. <div>
  214. <div id="main">
  215. <div id="content-1">
  216. <div id="content-2">
  217. <div id="content-3">
  218.  
  219.  
  220. <div class="navbar">
  221. <div name="nav">
  222. <ul>
  223. <li> <a class="btn-navbar" id="position-1" href="#content-1">☺ friends</a></li>
  224. <li> <a class="btn-navbar" id="position-2" href="#content-2">❖ galeria </a></li>
  225. <li> <a class="btn-navbar" id="position-3" href="#content-3">♬ videos</a></li>
  226. <li> <a class="btn-navbar" id="position-4" href="#">✎ editar </a></li>
  227. </ul>
  228. </div>
  229. </div>
  230. <div id="home">
  231.  
  232. <div class="container">
  233. <div name="imas">
  234. <img class="img-princ2" src="http://imgur.com/S0MQyp2.jpg" width="360" />
  235. </div>
  236. <div class="center">
  237. <img class="img-princ" src="http://imgur.com/eTlmPr1.png" width="360" />
  238. <h1 class="title">Obed Trukito</h1>
  239. <span class="subtitle">Welcome my xatspace!</span>
  240.  
  241. </div>
  242.  
  243.  
  244. </div>
  245.  
  246.  
  247. <div id="footer">
  248. <span>© 2020 BY Rfoxobedtrukito<br />https://xat.com/RadioMusicFactory</span>
  249. </div>
  250.  
  251.  
  252.  
  253. </div>
  254.  
  255. <div id="friends">
  256. <div class="menu-page">
  257. <a class="btn-page" href="#main">home</a>
  258. <a class="btn-page" href="#content-1">friends</a>
  259. <a class="btn-page" href="#content-2">galery</a>
  260. <a class="btn-page" href="#content-3">video</a>
  261. <a class="btn-page" href="http://xat.me/edit">edit</a>
  262. </div>
  263. <div class="bloc-friends">
  264. <a class="box-friends" href="http://xat.me/">
  265. <img class="img-friends" src="https://s25.postimg.org/4w2zr79hr/img-princ.jpg" width="100/" />
  266. <h2>prueba<span class="simbol">► </span></h2>
  267. </a>
  268. <a class="box-friends" href="http://xat.me/">
  269. <img class="img-friends" src="https://s25.postimg.org/4w2zr79hr/img-princ.jpg" width="100/" />
  270. <h2>prueba<span class="simbol">► </span></h2>
  271. </a>
  272. <a class="box-friends" href="http://xat.me/">
  273. <img class="img-friends" src="https://s25.postimg.org/4w2zr79hr/img-princ.jpg" width="100/" />
  274. <h2>prueba<span class="simbol">► </span></h2>
  275. </a>
  276. <a class="box-friends" href="http://xat.me/">
  277. <img class="img-friends" src="https://s25.postimg.org/4w2zr79hr/img-princ.jpg" width="100/" />
  278. <h2>prueba<span class="simbol">► </span></h2>
  279. </a>
  280. <a class="box-friends" href="http://xat.me/">
  281. <img class="img-friends" src="https://s25.postimg.org/4w2zr79hr/img-princ.jpg" width="100/" />
  282. <h2>prueba <span class="simbol">► </span></h2>
  283. </a>
  284. </div>
  285. </div>
  286.  
  287.  
  288.  
  289.  
  290. <div id="galery">
  291. <div class="menu-page">
  292. <a class="btn-page" href="#main">home</a>
  293. <a class="btn-page" href="#content-1">friends</a>
  294. <a class="btn-page" href="#content-2">galery</a>
  295. <a class="btn-page" href="#content-3">video</a>
  296. <a class="btn-page" href="http://xat.me/edit">edit</a>
  297. </div>
  298. <ul class="box-galery">
  299. <li class="box-img-galery">
  300. <img class="img" src="http://imgur.com/S0MQyp2.jpg" height="380/" />
  301. </li>
  302. <li class="box-img-galery">
  303. <img class="img" src="http://imgur.com/tAvZ0m8.jpg" height="380/" />
  304. </li>
  305. <li class="box-img-galery">
  306. <img class="img" src="http://imgur.com/IKSLCq5.jpg" height="380/" />
  307. </li>
  308. <li class="box-img-galery">
  309. <img class="img" src="http://imgur.com/Au2RZ2F.png" height="380/" />
  310. </li>
  311. </ul>
  312. </div>
  313.  
  314.  
  315. <div id="video">
  316. <div class="menu-page">
  317. <a class="btn-page" href="#main">home</a>
  318. <a class="btn-page" href="#content-1">friends</a>
  319. <a class="btn-page" href="#content-2">galery</a>
  320. <a class="btn-page" href="#content-3">video</a>
  321. <a class="btn-page" href="http://xat.me/edit">edit</a>
  322. </div>
  323. <div class="box-video">
  324. [youtube:500:283:EGQbxSPNG4U:start=1&end=0&autohide=0&autoplay=1&controls=0&disablekb=1&loop=1&modestbranding=1&rel=0&showinfo=0&vq=large]
  325. </div>
  326. </div>
  327.  
  328.  
  329. <div id="nowayfixed">
  330. <img id="nowayplanet" style="display:block;" />
  331. <div id="nowaymenu" style="display:block;">
  332. <div id="nowayitems">
  333. <a href="http://xat.com">xat</a><br />
  334.  
  335.  
  336.  
  337.  
  338. <a href="http://xat.com/privacy.htmI">Privacy</a><br />
  339. <a href="http://xat.com/terms.htmI">Terms</a><br />
  340. <a href="http://xat.com/safety.htmI">Safety</a><br />
  341.  
  342. <a href="http://xat.com/web_gear/chat/inappropriateprofile.php?id=378587603">Inappropriate👎</a><br />
  343. ©2020 xat<br />
  344.  
  345. </div>
  346. <a href="http://xat.com"><img src="http://xat.com/images/logow.svg" /></a>
  347. </div>
  348. </div>
  349.  
  350. </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!