API tools faq
paste
Advertisement
Guest User

CSS AND HTML CODE XATSPACE

a guest
Nov 27th, 2018
402
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.53 KB | None | 0 0
raw download clone embed print report
  1. ///////CSS///////////////
  2.  
  3. background:url(http://oi65.tinypic.com/v8pke9.jpg)center center no-repeat / cover,#222}*{margin:0;border:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}:before,:after{content:'';position:absolute}a{display:inline-block;text-decoration:none;color:#fff}h1,h2{font-weight:300}#main,.app,.main-content{width:100%;height:100vh;position:relative;font-size:1em;color:#fff;font-family:'Segoe UI',sans-serif;overflow:hidden}.main-content{height:calc(100vh - 40px)}.aside{position:absolute;width:600px;height:530px;background:rgba(0,0,0,.8);bottom:0;left:0;display:flex;padding-left:66px;font-size:.75em;z-index:50}.aside:after{width:20px;height:1px;background:#fff;box-shadow:0 4px #fff,0 8px #fff;left:13px;top:12px}.col-add{width:200px}.title-aside{line-height:30px;display:block}.col-add .title-aside{padding-left:3px}.col-add ul{list-style:none;padding-left:0}.col-add li{width:100%;height:42px;margin-bottom:3px;padding-left:48px;line-height:40px;background:linear-gradient(90deg,transparent,transparent,transparent);border-top:solid 1px transparent;border-bottom:solid 1px transparent;position:relative}.col-add li:hover{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0));border-top:solid 1px rgba(255,255,255,.1);border-bottom:solid 1px rgba(255,255,255,.1)}.icon{width:35px;height:35px;position:absolute;left:3px;top:2px;background:url(http://oi68.tinypic.com/k0fxpx.jpg)left top no-repeat,#0078d7}.col-add li:nth-of-type(2) .icon{background-position:left -34px}.col-add li:nth-of-type(3) .icon{background-position:left -69px}.col-add li:nth-of-type(4) .icon{background-position:left -103px}.col-add li:nth-of-type(5) .icon{background-position:left -138px}.col-add li:nth-of-type(6) .icon{background-position:left -175px}.col-add li:nth-of-type(7) .icon{background-position:left bottom}.col-nav{width:310px;margin-left:10px}.grid{width:310px;height:auto;margin-bottom:10px;display:flex;justify-content:space-between;flex-wrap:wrap}.btn-nav{width:100px;height:100px;background:url(http://oi67.tinypic.com/f4mi6g.jpg)center top no-repeat,#0078d7;margin-bottom:5px}.btn-nav:hover{box-shadow:0 0 0 2px rgba(255,255,255,.8) inset}.btn-nav:nth-of-type(2){background-position:center -100px;width:205px}.btn-nav:nth-of-type(3){background-position:center -200px;background-color:#608b8b}.btn-nav:nth-of-type(4){background-position:center -300px;background-color:#dc3c00}.btn-nav:nth-of-type(5){background-position:center -400px;background-color:#7719aa}.btn-nav span,.tab span{display:block;margin-top:70px;line-height:30px;padding-left:10px}.cube{width:100px;height:100px;perspective:1000px;margin-bottom:5px;overflow:hidden}.btn-cube{width:100px;height:100px;position:relative;transform-style:preserve-3d;transform:translateZ(-50px) rotateX(0deg);transition:all .5s cubic-bezier(0,.69,.31,.99)}.cube:hover .btn-cube{transform:translateZ(-50px) rotateX(90deg)}.tab{position:absolute;width:100px;height:100px}.tab:nth-of-type(1){transform:translateZ(50px)}.tab:nth-of-type(2){transform:translateZ(-50px) rotateX(270deg);-webkit-transform-origin:bottom center}.cube:nth-of-type(1) .btn-cube .tab:nth-of-type(1){background:url(http://oi63.tinypic.com/292sboz.jpg) left top no-repeat,#3c5b9a}.cube:nth-of-type(2) .btn-cube .tab:nth-of-type(1){background:url(http://oi63.tinypic.com/292sboz.jpg) left -100px no-repeat,#00abed}.cube:nth-of-type(3) .btn-cube .tab:nth-of-type(1){background:url(http://oi63.tinypic.com/292sboz.jpg) left -200px no-repeat,#01539b}.cube:nth-of-type(4) .btn-cube .tab:nth-of-type(1){background:url(http://oi63.tinypic.com/292sboz.jpg) left -300px no-repeat,#e42526}.cube:nth-of-type(1) .btn-cube .tab:nth-of-type(2){background:url(http://oi63.tinypic.com/292sboz.jpg) left top no-repeat,#0c1b9a}.cube:nth-of-type(2) .btn-cube .tab:nth-of-type(2){background:url(http://oi63.tinypic.com/292sboz.jpg) left -100px no-repeat,#000060}.cube:nth-of-type(3) .btn-cube .tab:nth-of-type(2){background:url(http://oi63.tinypic.com/292sboz.jpg) left -200px no-repeat,#000048}.cube:nth-of-type(4) .btn-cube .tab:nth-of-type(2){background:url(http://oi63.tinypic.com/292sboz.jpg) left -300px no-repeat,#a10000}.user{position:absolute;width:225px;height:285px;top:150px;left:50%;transform:translate(-50%,0);text-align:center}.box-img{width:170px;height:170px;display:inline-block;margin-left:calc(50% - 85px);border-radius:50%;background:rgba(255,255,255,.3);overflow:hidden;display:flex;align-items:center;justify-content:center}.box-img img{width:60%}.user h1{font-size:2.5em}.user span,.user a{line-height:36px;font-size:1.2em}.footer{width:100%;height:40px;background:url(http://oi66.tinypic.com/2ylwdhi.jpg)14px 10px no-repeat / 20px ,#111;padding-left:48px;display:flex}.search{width:344px;height:40px;background:#f2f2f2;border-bottom:solid 1px #ddd;line-height:39px;color:#1d1d1d;padding-left:40px;position:relative}.search:before{width:23px;height:23px;background:#f2f2f2;box-shadow:0 0 0 3px #4e4e4e inset;border-radius:50%;top:9px;left:9px}.search:after{width:40px;height:40px;background:url(http://oi63.tinypic.com/1oaecz.jpg) center center no-repeat;right:0;top:0}.menubar{width:360px;height:40px;display:flex;justify-content:space-between;margin-left:50px}.btn-menubar{width:50px;background:url(http://oi63.tinypic.com/wmjuqw.jpg)left top no-repeat,rgba(255,255,255,0);box-shadow:0 -2px #66b7db inset}.btn-menubar:hover{background-color:rgba(255,255,255,.3)}.btn-menubar:nth-of-type(2){background-position:left -40px}.btn-menubar:nth-of-type(3){background-position:left -80px}.btn-menubar:nth-of-type(4){background-position:left -120px}.btn-menubar:nth-of-type(5){background-position:left -160px}.btn-menubar:nth-of-type(6){background-position:left -200px}.page,.about{position:absolute;width:960px;height:520px;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 0 1px #6095ff,0 0 30px 15px rgba(0,0,0,.2);visibility:hidden;opacity:0;z-index:10}.header{height:56px;position:relative;border-bottom:solid 1px #e1e1e1;background:url(http://oi63.tinypic.com/ajo0m0.jpg)9px 7px no-repeat}.header:after{width:1px;height:15px;background:#e1e1e1;top:7px;left:33px}.nav-w{position:absolute;width:135px;height:30px;right:0;top:0;display:flex}.btn-w{width:45px;height:30px;background:url(http://oi68.tinypic.com/2h30sqf.jpg)left top no-repeat,#fff}.btn-w:hover{background-color:#e5e5e5}.btn-w:nth-child(2){background-position:left -30px}.btn-w:nth-child(3){background-position:left -60px}.btn-w:nth-child(3):hover{background:url(http://oi67.tinypic.com/dxbevd.jpg)left -60px no-repeat,#e81123}.header span{display:inline-block;width:56px;height:25px;text-align:center;line-height:25px;font-size:.7em;background:#1979ca;margin-top:30px}.works,.music{width:100%;height:calc(100% - 56px);position:absolute;top:56px;left:0;visibility:hidden}.works{height:calc(100% - 80px);overflow-y:auto}.gallery{width:95%;height:auto;display:flex;flex-wrap:wrap;justify-content:space-around}.box-gallery{width:415px;height:242px;padding:10px;margin:25px 0;text-align:center;color:#222;font-size:.8em}.box-gallery:hover{background:#f8f8f8}.img-works{width:397px;height:200px;display:inline-block}.box-gallery span{line-height:24px}.video{width:960px;height:464px;background:#222}.about .header{height:50px;background:url(http://oi67.tinypic.com/30ww1zp.jpg) 7px 7px no-repeat}.about .header span{background:transparent;color:#222;width:200px;height:22px;text-align:left;margin:4px 40px}._b{display:block;width:270px;color:#222;display:flex;list-style:none;padding-left:8px;justify-content:space-between}._b li{font-size:.75em}.about p{color:#222;font-family:'Consolas',sans-serif;font-size:.9em;width:60%;padding:10px}#content-1:target .about{visibility:visible;opacity:1;z-index:100}#content-2:target .page{visibility:visible;opacity:1;z-index:100}#content-2:target .works{visibility:visible}#content-3:target .page{visibility:visible;opacity:1;z-index:100}#content-3:target .music{visibility:visible}::-webkit-scrollbar{width:15px;background:#f8f8f8}::-webkit-scrollbar-thumb{background:#ccc;
  4.  
  5.  
  6.  
  7.  
  8. ////////HTML//////////
  9.  
  10. <div id="main">
  11.  <div id="content-1">
  12.  <div id="content-2">
  13.  <div id="content-3">
  14.  <div class="app">
  15.  <div class="main-content">
  16.  <div class="aside">
  17.  <div class="col-add">
  18.  <span class="title-aside">Recente Adicionado</span>
  19.  <ul>
  20.  <li><div class="icon"></div>Adobe After Effects</li>
  21.  <li><div class="icon"></div>Adobe Dreamweaver</li>
  22.  <li><div class="icon"></div>Adobe Flash</li>
  23.  <li><div class="icon"></div>Adobe Illustrator</li>
  24.  <li><div class="icon"></div>Adobe After Fireworks</li>
  25.  <li><div class="icon"></div>Adobe Photoshop</li>
  26.  <li><div class="icon"></div>Adobe XD</li>
  27.  </ul>
  28.  </div>
  29.  <div class="col-nav">
  30.  <div class="top">
  31.  <span class="title-aside">Explore</span>
  32.  <div class="grid">
  33.  <a class="btn-nav" href="#content-1"><span>About</span></a>
  34.  <a class="btn-nav" href="#content-2"><span>Work</span></a>
  35.  <a class="btn-nav" href="#content-3"><span>Music</span></a>
  36.  <a class="btn-nav" href="https://forum.xat.com/profile/45505/"><span>Forum</span></a>
  37.  <a class="btn-nav" href="https://xat.com/web_gear/chat/editprofile.php"><span>Edit</span></a>
  38.  </div>
  39.  </div>
  40.  <div class="bottom">
  41.  <span class="title-aside">Redes Sociais</span>
  42.  <div class="grid">
  43.  <div class="cube">
  44.  <a class="btn-cube" href="https://www.facebook.com">
  45.  <div class="tab">
  46.  <span>Facebook</span>
  47.  </div>
  48.  <div class="tab">
  49.  <span>Facebook</span>
  50.  </div>
  51.  </a>
  52.  </div>
  53.  <div class="cube">
  54.  <a class="btn-cube" href="https://www.twitter.com">
  55.  <div class="tab">
  56.  <span>Twitter</span>
  57.  </div>
  58.  <div class="tab">
  59.  <span>Twitter</span>
  60.  </div>
  61.  </a>
  62.  </div>
  63.  <div class="cube">
  64.  <a class="btn-cube" href="https://www.instagran.com">
  65.  <div class="tab">
  66.  <span>Instagran</span>
  67.  </div>
  68.  <div class="tab">
  69.  <span>Instagran</span>
  70.  </div>
  71.  </a>
  72.  </div>
  73.  <div class="cube">
  74.  <a class="btn-cube" href="https://www.youtube.com">
  75.  <div class="tab">
  76.  <span>Youtube</span>
  77.  </div>
  78.  <div class="tab">
  79.  <span>Youtube</span>
  80.  </div>
  81.  </a>
  82.  </div>
  83.  </div>
  84.  </div>
  85.  </div>
  86.  </div>
  87.  <div class="user">
  88.  <div class="box-img">
  89.  <img src="http://oi67.tinypic.com/3497vig.jpg" />
  90.  </div>
  91.  <h1>Jason</h1>
  92.  <span>Welcome to my xatspace!</span>
  93.  <a href="https://xat.com/centraldosplayers">xat.com/Centraldosplayers</a>
  94.  </div>
  95.  <div class="page">
  96.  <div class="header">
  97.  <div class="nav-w">
  98.  <a class="btn-w" href="#main"></a>
  99.  <a class="btn-w" href="#"></a>
  100.  <a class="btn-w" href="#main"></a>
  101.  </div>
  102.  <span>Arquivo</span>
  103.  </div>
  104.  <div class="works">
  105.  <div class="gallery">
  106.  <div class="box-gallery">
  107.  <img class="img-works" src="http://oi68.tinypic.com/29e53tj.jpg" />
  108.  <span>xatspace_Ch3rry</span>
  109.  </div>
  110.  <div class="box-gallery">
  111.  <img class="img-works" src="http://oi65.tinypic.com/2jfhvfs.jpg" />
  112.  <span>xatspace_Zara</span>
  113.  </div>
  114.  <div class="box-gallery">
  115.  <img class="img-works" src="http://oi63.tinypic.com/2hnuezt.jpg" />
  116.  <span>xatspace_Emiih</span>
  117.  </div>
  118.  <div class="box-gallery">
  119.  <img class="img-works" src="http://oi66.tinypic.com/9k8enr.jpg" />
  120.  <span>xatspace_Vini</span>
  121.  </div>
  122.  <div class="box-gallery">
  123.  <img class="img-works" src="http://oi67.tinypic.com/o5nynd.jpg" />
  124.  <span>xatspace_Flor</span>
  125.  </div>
  126.  <div class="box-gallery">
  127.  <img class="img-works" src="http://oi64.tinypic.com/rhtwmq.jpg" />
  128.  <span>xatspace_Cebolinha</span>
  129.  </div>
  130.  </div>
  131.  </div>
  132.  <div class="music">
  133.  <div class="video">
  134.  [youtube:960:464:UybGw37WbuY:start=0&end=0&autohide=1&autoplay=1&controls=0&disablekb=1&loop=1&modestbranding=1&rel=0&showinfo=0&vq=large]
  135. </div>
  136. </div>
  137. </div>
  138. <div class="about">
  139. <div class="header">
  140. <span>About - Bloco de notas</span>
  141. <div class="nav-w">
  142. <a class="btn-w" href="#main"></a>
  143. <a class="btn-w" href="#"></a>
  144. <a class="btn-w" href="#main"></a>
  145. </div>
  146. <ul class="_b">
  147. <li>Arquivo</li>
  148. <li>Editar</li>
  149. <li>Formatar</li>
  150. <li>Exibir</li>
  151. <li>Ajuda</li>
  152. </ul>
  153. </div>
  154. <p>
  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>
  158. </div>
  159. <div class="footer">
  160. <div class="search">
  161. <span>Digite aqui para pesquisar</span>
  162. </div>
  163. <div class="menubar">
  164. <a class="btn-menubar" href="#content-1"></a>
  165. <a class="btn-menubar" href="#content-2"></a>
  166. <a class="btn-menubar" href="#content-3"></a>
  167. <a class="btn-menubar" href="https://xat.com/web_gear/chat/GetPowers.php"></a>
  168. <a class="btn-menubar" href="https://xat.com/centraldosplayers"></a>
  169. <a class="btn-menubar" href="https://xat.com/web_gear/chat/editprofile.php"></a>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. </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!