API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 16th, 2018
106
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.14 KB | None | 0 0
raw download clone embed print report
  1. background:url(http://oi66.tinypic.com/5z3c7a.jpg)center center no-repeat fixed / cover,repeating-linear-gradient(0deg,rgba(0,0,0,.2) 1px,transparent 2px,transparent 50px),repeating-linear-gradient(90deg,rgba(0,0,0,.2) 1px,transparent 2px,transparent 100px),linear-gradient(#d62b00,#fd8c00)}*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}:before,:after{content:'';position:absolute}:root{--font-1:Play,sans-serif;--font-2:Boogaloo,cursive;--font-3:Amaranth,sans-serif;--font-4:Peddana,serif;--grad-1:linear-gradient(#fbfbfb,#f2f2f2);--grad-2:linear-gradient(#d62b00,#fd8c00);--orangelight:#ed6400;--orangedark:#d62b00;--grad-3:linear-gradient(90deg,#ed6400,#d62b00,#ed6400)}a{display:inline-block;text-decoration:none;text-align:center;text-transform:uppercase}span{display:block}h1,h2,h3,h4{font-weight:300}#main{width:100%;height:100vh;position:relative;font-family:var(--font-1);color:#fff;font-size:1em;overflow:hidden}.container{width:1080px;height:100vh;position:relative;margin:0 auto}.app{width:990px;height:560px;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0);background:#ed6400;box-shadow:0 0 0 10px #000 inset;padding:10px}.app:before{width:80%;height:80px;background:#000;border-radius:50%;filter:blur(20px);opacity:.4;left:10%;bottom:-40px;z-index:-1}.menu{width:970px;height:540px;position:relative;background:#000;display:flex;justify-content:space-between;box-shadow:0 0 0 10px var(--orangedark);overflow:hidden}.cube-menu{width:194px;height:540px;perspective:1000px}.btn-cube{width:194px;height:540px;transform-style:preserve-3d;transition:all .3s ease-in-out;position:relative;transform:translateZ(-97px) rotateY(-0)}.btn-cube:hover{transform:translateZ(-97px) rotateY(-90deg)}[class^='tab']{width:194px;height:540px;position:absolute;overflow:hidden}.tab-front{transform:translate3d(0,0,97px);background:var(--grad-1);box-shadow:1px 0 #ddd inset}.tab-right{transform:translateZ(-97px) rotateY(90deg);-webkit-transform-origin:right center;transform-origin:right center;background:var(--grad-2)}[class*='icon-img']{position:relative;width:210px;height:210px;top:150px;left:0;transform:rotate(-35deg) translateX(-70px)}.title-btn{width:100%;position:absolute;font-size:2em;color:#fff;bottom:70px}.main-content{position:absolute;width:100%;height:100%;top:0;left:0;visibility:hidden;perspective:1500px}.bg-flip{width:100%;height:100%;position:absolute;transform-style:preserve-3d}.flip{width:100%;height:calc(100% / 3);background:var(--orangedark);opacity:0;position:relative;box-shadow:0 1px var(--orangedark);transition:all .2s ease-out;z-index:99}.flip:nth-of-type(3){transform:rotateX(90deg);-webkit-transform-origin:bottom center}.flip:nth-of-type(2){transform:rotateX(80deg);-webkit-transform-origin:bottom center;transition-delay:.2s}.flip:nth-of-type(1){transform:rotateX(75deg);-webkit-transform-origin:bottom center;transition-delay:.4s}.bg-flip:before{width:100%;height:100%;background:#fff;opacity:0;top:0;left:0;z-index:100}.page{width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;margin:10px;z-index:200}.home,.music,.servics{width:100%;height:100%;position:absolute;opacity:0;display:flex;visibility:hidden;background:#f2f2f2;transition:all .5s .8s ease-out}#content-1:target .main-content{visibility:visible}#content-1:target .flip{transform:rotateX(0);opacity:1}#content-1:target .bg-flip:before{animation:flip-animate .5s .6s ease-out forwards}#content-1:target .home{visibility:visible;opacity:1}#content-2:target .main-content{visibility:visible}#content-2:target .flip{transform:rotateX(0);opacity:1}#content-2:target .bg-flip:before{animation:flip-animate .5s .6s ease-out forwards}#content-2:target .music{visibility:visible;opacity:1}#content-3:target .main-content{visibility:visible}#content-3:target .flip{transform:rotateX(0);opacity:1}#content-3:target .bg-flip:before{animation:flip-animate .5s .6s ease-out forwards}#content-3:target .servics{visibility:visible;opacity:1}@keyframes flip-animate{from{opacity:.8}to{opacity:0}}.aside{width:370px;position:relative;background:url(http://oi67.tinypic.com/2py111h.jpg)top left no-repeat;text-align:center}.title{font-size:6em;font-weight:700;line-height:80px;margin-top:70px;color:var(--orangedark)}.sub-title{font-size:5.3em;line-height:60px;color:var(--orangelight)}.aside span{display:inline-block;color:#333;font-size:1.6em;letter-spacing:4.1px;margin-top:5px;border-top:solid 1px #333;border-bottom:solid 1px #333}.pin{width:14px;height:14px;position:absolute;top:280px;left:250px;border-radius:50%;box-shadow:0 0 0 0 #fff,0 0 0 0 var(--orangedark);animation:pulse .5s ease-out infinite}.pin:before{width:6px;height:6px;background:#aaa;border-radius:50%;top:4px;left:4px}@keyframes pulse{to{box-shadow:0 0 0 5px transparent,0 0 0 10px transparent}}.title-page{position:absolute;height:80px;line-height:102px;background:url(http://oi67.tinypic.com/2a94h11.png)top left no-repeat;bottom:20px;padding-left:80px;font-size:3.4em;color:var(--orangedark);left:28px}.music .title-page{background-position:center left}.servics .title-page{background-position:bottom left}.section{width:calc(100% - 370px);position:relative;padding:10px}.btn-close{width:38px;height:38px;position:absolute;right:10px;top:10px;background:var(--orangedark);box-shadow:0 0 0 19px #fff inset;transition:all .2s ease-out;z-index:100}.btn-close:hover{box-shadow:0 0 0 0 #fff inset}.btn-close span{line-height:38px;border-radius:50%;color:var(--orangedark);transition:all .5s ease-out}.btn-close:hover span{transform:rotate(360deg);color:#fff}.home .section{text-align:center}.title-section{text-align:left;font-size:1.4em;color:#333;padding-left:5%}.img-design{margin-top:30px}.desc{color:#333;width:90%;display:inline-block;margin:40px 0;text-align:justify;font-size:.8em}.design{width:90%;height:90px;display:flex;margin-left:5%;justify-content:space-between}.col-design{width:90px;height:90px;position:relative;border-radius:50%;box-shadow:0 0 0 8px var(--orangelight) inset}.col-design:before{width:101%;height:46px;background:#f2f2f2;top:45px;left:-.5%}.col-design span{padding-top:28px;color:#333}.col-design:nth-of-type(1){box-shadow:0 0 0 8px purple inset}.col-design:nth-of-type(2){box-shadow:0 0 0 8px #a3d900 inset}.col-design:nth-of-type(4){box-shadow:0 0 0 8px #e1c71a inset}.col-design:nth-of-type(5){box-shadow:0 0 0 8px #4682b4 inset}.xat{color:#333;font-size:.75em}.music .section{padding:0}.block-video{width:100%;height:100%;position:relative}.block-video:before{width:100%;height:40px;background:var(--orangedark);top:calc(50% - 20px)}.block-video:after{width:300px;height:300px;background:#f2f2f2;box-shadow:0 0 0 4px #333,0 0 0 15px #fff,0 0 0 17px var(--orangedark),0 0 0 19px #fff,0 0 0 20px var(--orangelight);transform:translate(-50%,-50%)rotate(45deg);top:50%;left:50%}.content-title{position:relative;width:300px;height:100px;top:90px;left:calc(50% - 150px);background:linear-gradient(90deg,#333 10px,transparent 10px,transparent 290px,#333 90px);z-index:50}.content-title:before{width:100%;height:10px;background:#333;top:0;left:0}.content-title:after{width:150px;height:35px;border-radius:50%;background:#000;filter:blur(20px);top:0;left:75px;z-index:-1;opacity:.8}.title-music{width:240px;height:50px;text-align:center;background:var(--grad-3);position:relative;top:-20px;left:30px;padding:5px}.title-music h2{font-size:1.1em;color:#333}.content-video{width:420px;height:246px;position:relative;top:50px;left:calc(50% - 210px);background:var(--grad-3);z-index:52}.video{width:420px;height:246px;position:relative;padding:10px;display:inline-block;background:var(--grad-3)}.content-video:after{width:320px;height:70px;border-radius:50%;background:#000;filter:blur(20px);left:50px;bottom:-20px;opacity:.7;z-index:-1}.row-video{width:400px;height:226px;background:#222}.servics .title-section{padding-left:0}.block-servics{width:100%;height:480px;overflow-y:auto;margin-top:17px;color:#333}.header-servics{width:98%;height:auto;margin-bottom:10px}.block-servics h2{font-size:1em;border-bottom:solid 1px var(--orangedark);margin-bottom:10px}.main-section{width:98%}.row-servics{display:flex;height:260px;margin-bottom:20px;position:relative;z-index:50}.row-servics:nth-of-type(2){flex-direction:row-reverse}.row-servics:nth-of-type(2) .box-servics-img{margin-right:0;margin-left:10px}.box-servics-img{width:320px;height:230px;position:relative;margin-right:10px}.box-servics-img:before{width:80%;height:40px;border-radius:50%;background:#000;filter:blur(20px);left:10%;bottom:-15px;z-index:-1}.desc-servics{width:calc(100% - 330px)}.desc-servics h3{width:100%;padding-bottom:5px;border-bottom:solid 1px var(--orangelight)}.desc-servics p{font-size:.9em;margin:10px 0}.desc-servics a{color:var(--orangelight);font-size:.8em}::-webkit-scrollbar{width:5px;background:#333}::-webkit-scrollbar-thumb{background:var(--orangedark);}
  2. div#nowayfixed {
  3. z-index: 2147483647;
  4. position: fixed;
  5. bottom: 0;
  6. left: 0;
  7. }
  8. div#nowaymenu
  9. {
  10. background-color:#009;
  11. background: linear-gradient(#000014, #000024, #00004e);
  12. border-radius: 0px 5px 0px 0px;
  13. display: none;
  14. FONT-SIZE: 12pt;
  15. FONT-FAMILY: Arial, Helvetica, sans-serif;
  16. }
  17. div#nowayitems
  18. {
  19. padding-top: 5px;
  20. padding-right: 0px;
  21. /*padding-bottom: 5px;*/
  22. padding-left: 0px;
  23. margin-left: 6px;
  24. line-height: 130%;
  25. color:#fff;
  26. }
  27. div#nowayitems > a
  28. {
  29. color:#fff;
  30. text-decoration: none;
  31. }
  32. div#nowayitems > a:hover {
  33. text-decoration: underline;
  34. div#nowayfixed {
  35. z-index: 2147483647;
  36. position: fixed;
  37. bottom: 0;
  38. left: 0;
  39. }
  40. div#nowaymenu
  41. {
  42. background-color:#009;
  43. background: linear-gradient(#000014, #000024, #00004e);
  44. border-radius: 0px 5px 0px 0px;
  45. display: none;
  46. FONT-SIZE: 12pt;
  47. FONT-FAMILY: Arial, Helvetica, sans-serif;
  48. }
  49. div#nowayitems
  50. {
  51. padding-top: 5px;
  52. padding-right: 0px;
  53. /*padding-bottom: 5px;*/
  54. padding-left: 0px;
  55. margin-left: 6px;
  56. line-height: 130%;
  57. color:#fff;
  58. }
  59. div#nowayitems > a
  60. {
  61. color:#fff;
  62. text-decoration: none;
  63. }
  64. div#nowayitems > a:hover {
  65. text-decoration: underline;
  66.  
  67. ===========================================================================
  68.  
  69. </style>
  70. <div id="NotAllowedme">
  71. <div id="main">
  72. <div id="content-1">
  73. <div id="content-2">
  74. <div id="content-3">
  75. <div id="content-4">
  76. <div class="container">
  77. <div class="app">
  78. <div class="menu">
  79. <div class="cube-menu">
  80. <a class="btn-cube" href="#content-1">
  81. <div class="tab-front">
  82. <img class="icon-img-front" src="http://oi64.tinypic.com/207rq85.png" />
  83. </div>
  84. <div class="tab-right">
  85. <img class="icon-img-right" src="http://oi66.tinypic.com/t7hpu9.png" />
  86. <span class="title-btn">home</span>
  87. </div>
  88. </a>
  89. </div>
  90. <div class="cube-menu">
  91. <a class="btn-cube" href="#content-2">
  92. <div class="tab-front">
  93. <img class="icon-img-front" src="http://oi66.tinypic.com/118ngqv.png" />
  94. </div>
  95. <div class="tab-right">
  96. <img class="icon-img-right" src="http://oi63.tinypic.com/5ouu4h.png" />
  97. <span class="title-btn">music</span>
  98. </div>
  99. </a>
  100. </div>
  101. <div class="cube-menu">
  102. <a class="btn-cube" href="#content-3">
  103. <div class="tab-front">
  104. <img class="icon-img-front" src="http://oi68.tinypic.com/24zamgh.png" />
  105. </div>
  106. <div class="tab-right">
  107. <img class="icon-img-right" src="http://oi65.tinypic.com/2yl01ht.png" />
  108. <span class="title-btn">servics</span>
  109. </div>
  110. </a>
  111. </div>
  112. <div class="cube-menu">
  113. <a class="btn-cube" href="https://forum.xat.com/profile/45505-jasonoficial/">
  114. <div class="tab-front">
  115. <img class="icon-img-front" src="http://oi65.tinypic.com/w8w12t.png" />
  116. </div>
  117. <div class="tab-right">
  118. <img class="icon-img-right" src="http://oi66.tinypic.com/2je1w1v.jpg" />
  119. <span class="title-btn">forum</span>
  120. </div>
  121. </a>
  122. </div>
  123. <div class="cube-menu">
  124. <a class="btn-cube" href="http://xat.me/edit">
  125. <div class="tab-front">
  126. <img class="icon-img-front" src="http://oi67.tinypic.com/1583u2q.png" />
  127. </div>
  128. <div class="tab-right">
  129. <img class="icon-img-right" src="http://oi63.tinypic.com/2yuat6a.png" />
  130. <span class="title-btn">edit</span>
  131. </div>
  132. </a>
  133. </div>
  134. </div>
  135. <div class="main-content">
  136. <div class="bg-flip">
  137. <div class="flip"></div>
  138. <div class="flip"></div>
  139. <div class="flip"></div>
  140. </div>
  141. <div class="page">
  142. <div class="home">
  143. <div class="aside">
  144. <h1 class="title">JASON</h1>
  145. <h2 class="sub-title">DESIGN</h2>
  146. <span>PERSONAL XAT ME</span>
  147. <div class="pin"></div>
  148. <h3 class="title-page">HOME</h3>
  149. </div>
  150. <div class="section">
  151. <a class="btn-close" href="#main"><span>✕</span></a>
  152. <h1 class="title-section">Welcome to my xatspace!</h1>
  153. <img class="img-design" src="http://oi67.tinypic.com/1216e1f.png" />
  154. <p class="desc">
  155. Develop graphic designer for xat.com users, work with banners, gifs, players and also xatspace. Wide variety of models in all areas. Pay me a visit and get to know my work.
  156. </p>
  157. <div class="design">
  158. <div class="col-design">
  159. <span>CSS</span>
  160. </div>
  161. <div class="col-design">
  162. <span>htmI</span>
  163. </div>
  164. <div class="col-design">
  165. <span>AI</span>
  166. </div>
  167. <div class="col-design">
  168. <span>FW</span>
  169. </div>
  170. <div class="col-design">
  171. <span>PS</span>
  172. </div>
  173. </div>
  174. <a class="xat" href="https://xat.com/centraldosplayers">xat.com/centraldosplayers</a>
  175. </div>
  176. </div>
  177. <div class="music">
  178. <div class="aside">
  179. <h1 class="title">JASON</h1>
  180. <h2 class="sub-title">DESIGN</h2>
  181. <span>PERSONAL XAT ME</span>
  182. <div class="pin"></div>
  183. <h3 class="title-page">MUSIC</h3>
  184. </div>
  185. <div class="section">
  186. <a class="btn-close" href="#main"><span>✕</span></a>
  187. <div class="block-video">
  188. <div class="content-title">
  189. <div class="title-music">
  190. <span>Estrelinha</span>
  191. <h2>Marília Mendonça</h2>
  192. </div>
  193. </div>
  194. <div class="content-video">
  195. <div class="video">
  196. <div class="row-video">
  197. Your browser does not support iframes!
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. </div>
  203. </div>
  204. <div class="servics">
  205. <div class="aside">
  206. <h1 class="title">JASON</h1>
  207. <h2 class="sub-title">DESIGN</h2>
  208. <span>PERSONAL XAT ME</span>
  209. <div class="pin"></div>
  210. <h3 class="title-page">SERVICS</h3>
  211. </div>
  212. <div class="section">
  213. <a class="btn-close" href="#main"><span>✕</span></a>
  214. <h1 class="title-section">Portfólio</h1>
  215. <div class="block-servics">
  216. <div class="header-servics">
  217. <h2>Featured</h2>
  218. <img class="img-big" src="http://oi63.tinypic.com/307uv6s.jpg" />
  219. </div>
  220. <div class="main-section">
  221. <h2>Some our best works</h2>
  222. <div class="row-servics">
  223. <div class="box-servics-img">
  224. <img src="http://oi67.tinypic.com/nprnyh.jpg" />
  225. </div>
  226. <div class="desc-servics">
  227. <h3>Xatspace</h3>
  228. <p>
  229. Elegant Xatspace, clean code design organized for you to be able to edit if necessary. htmI and css language, unique model for each client. Power "me" required.
  230.  
  231. </p>
  232. <a class="btn-more" href="https://xat.com/centraldosplayers">read more</a>
  233. </div>
  234. </div>
  235. <div class="row-servics">
  236. <div class="box-servics-img">
  237. <img src="http://oi67.tinypic.com/se9d77.jpg" />
  238. </div>
  239. <div class="desc-servics">
  240. <h3>tab xat</h3>
  241. <p>
  242. Static page for tab of xat.com, designer similar to web site radio. Top five options, announcers, raffles, rules, social networks, player, area for partnerships and banner. Includes your free radio logo.
  243.  
  244. </p>
  245. <a class="btn-more" href="https://xat.com/centraldosplayers">read more</a>
  246. </div>
  247. </div>
  248. <div class="row-servics">
  249. <div class="box-servics-img">
  250. <img src="http://oi67.tinypic.com/v4tglg.jpg" />
  251. </div>
  252. <div class="desc-servics">
  253. <h3>Player</h3>
  254. <p>
  255. AacPlus flash player for your web radio on xat.com, various models with great functionality and sound in HD. RTMP required for running, swf hosted by xatradio.com.
  256.  
  257. </p>
  258. <a class="btn-more" href="https://xat.com/centraldosplayers">read more</a>
  259. </div>
  260. </div>
  261. </div>
  262. </div>
  263. </div>
  264. </div>
  265. </div>
  266. </div>
  267. </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!