Advertisement
austinh115

[HTML/CSS] Decrypt xatspace

Sep 22nd, 2017
227
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.87 KB | None | 0 0
  1. background:var(--bg)}/** CSS by Austin (638877683) **/:root{--bg:#00bfff}body{margin:0;line-height:17px;color:#9f9f9f;font-size:11px;font-family:sans-serif,arial;font-weight:400}a{text-decoration:none;color:#888;-webkit-transition:.6s all;-moz-transition:.6s all;-o-transition:.6s all;transition:.6s all}a:hover{color:#000}[name=box]{box-shadow:5px 5px rgba(0,0,0,0.1);position:absolute;width:640px;height:460px;left:50%;border:1px solid rgba(0,0,0,0);top:50%;overflow:hidden;margin-left:-320px;margin-top:-250px}[name=left]{float:left;width:175px;height:inherit;display:inline-table}[name=pic]{width:70px;height:70px;padding:52px;background:#fff;text-align:center}[name=pic] img{width:65px;height:65px;border-radius:60px;opacity:.7;-webkit-transition:.7s all;-moz-transition:.7s all;-o-transition:.7s all;transition:.7s all}[name=content]{position:absolute;background:#fff;padding:32px 43px;border-top:4px solid #fff;border-bottom:4px solid #fff;overflow-x:auto;height:388px;width:378px;right:0}[name=nav]{padding:15px 35px;margin-top:2px;width:104px;background:#fff;height:100%;text-align:center;border-bottom:30px solid #f8f8f8}[name=nav] ul{display:block;list-style-type:none;text-align:left;margin:0;padding:0;font-family:monospace}[name=nav] li{list-style-type:none;display:block;margin:0;padding:0}[name=nav] li a{list-style-type:none;text-transform:uppercase;font-size:9px;letter-spacing:1px;display:block;border-bottom:1px solid #f0f0f0;padding:19px 0;text-decoration:none}[name=nav] li:nth-child(1) a:before{content:'1 : ';display:inline}[name=nav] li:nth-child(2) a:before{content:'2 : ';display:inline}[name=nav] li:nth-child(3) a:before{content:'3 : ';display:inline}[name=nav] li:nth-child(4) a:before{content:'4 : ';display:inline}[name=nav] li a:hover{border-bottom:1px solid #d0d0d0;color:#000;padding-left:4px}[name=nav] li a:active{border-bottom:1px solid #637F77;color:#000;padding-left:4px}h2{font-weight:300;letter-spacing:1px;font-size:21px;color:#000;margin-bottom:45px}[name=header2]{border-bottom:1px solid #637F77;padding-bottom:8px}[name=tabs-content-wrap]{list-style-type:none}[name=tabs-content-wrap] ul{display:block;list-style-type:none;padding:0 15px;margin:0}[name=tabs-content-wrap] ul [name|=page]{width:100%;list-style-type:none;display:none;transition:all 1s linear;border-radius:2px;padding-bottom:20px;margin-top:100%}[name=page-2]:not(:target) + [name=page-3]:not(:target) + [name=page-4]:not(:target) ~ [name=page-1-content]{display:block;margin-top:0}[name=page-1]:target ~ [name=page-1-content]{display:block;margin-top:0}[name=page-2]:target ~ [name=page-2-content]{display:block;margin-top:0}[name=page-3]:target ~ [name=page-3-content]{display:block;margin-top:0}[name=page-4]:target ~ [name=page-4-content]{display:block;margin-top:0}[name=br]{width:370px;text-align-last:center}[name=br] div{font-size:10px;background:#fff;height:40px;width:40px;float:left;margin-right:15px;margin-bottom:15px}[name=br] div img{width:40px;border-radius:40px;opacity:.9;padding:5px;background:#fbfbfb;float:left;-webkit-filter:Grayscale(20%);-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}[name=br] div:hover img{opacity:1;-webkit-filter:Grayscale(0%)}[name=q]{letter-spacing:1px;font-size:9px;padding:10px 0;text-transform:uppercase;margin-bottom:12px}[name=q]:before{content:'?';border:1px solid #637F77;color:#637F77;float:left;font-family:arial;font-size:9px;font-weight:700;padding:1px 6px;margin-top:-3px;border-radius:20px;margin-right:10px}[name=answer]{background:#fbfbfb;border-left:1px solid #f0f0f0;padding:15px;margin-bottom:30px;font-size:10px}[name=lw]{margin-top:30px;font-family:'open sans',sans-serif;font-weight:300;line-height:22px}[name=lt]{display:inline;color:#000;padding-right:5px;font-weight:300;padding-bottom:15px;letter-spacing:1px;font-size:11px;text-transform:uppercase}[name=links]{display:inline;font-size:11px}[name=links]a{margin-right:7px}::-webkit-scrollbar{width:14px;height:3px;background:#fff}::-webkit-scrollbar-thumb{border:6px solid #fff;background-color:var(--bg);border-radius:15px}[name=credits]{position:fixed;bottom:5px;right:5px;border-radius:50%}[name=credits] span{text-align:center;width:50px;height:45px;font-size:3em;display:table-cell;color:#e6e6e6;line-height:33px;vertical-align:bottom;text-shadow:0 1px 3px rgba(0,0,0,0.3);transition:linear all .3s}[name=credits] a{text-decoration:none}[name=credits] span:hover{color:#fff}*{;
  2.  
  3.     <div name="box">
  4.         <div name="content">
  5.             <div name="tabs-content-wrap">
  6.                 <ul>
  7.                     <a name="page-1"></a>
  8.                     <a name="page-2"></a>
  9.                     <a name="page-3"></a>
  10.                     <a name="page-4"></a>
  11.  
  12.                     <div name="page-1-content">
  13.                         <h2><span name="header2">About Me</span> / Austin</h2>
  14.                
  15.                         <p><b>This xatspace was designed by <a href="https://xat.me/Austin">Austin</a>.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper hendrerit diam, vitae tempus ante porta nec.</p>
  16.                
  17.                         <p>Vestibulum a ex scelerisque metus finibus pellentesque sit amet vitae urna. Curabitur elementum est sed dolor congue, in aliquet ex viverra. Aenean lacinia dapibus lorem eu pulvinar. Vivamus non velit in ante dictum rhoncus vitae sed velit. </p>
  18.                
  19.                         <p>Fusce convallis gravida turpis vel eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ipsum quam.</p>
  20.  
  21.                         <p>Phasellus porta efficitur eros ut cursus.</p>
  22.                
  23.                         <p>Etiam congue fringilla felis quis tempor. Nam nec mattis velit. Cras rutrum, odio eu auctor dapibus, leo urna aliquam tellus, sit amet laoreet nisi odio in urna. Nulla at ipsum ultricies, tincidunt dui non, lacinia velit. Pellentesque sollicitudin condimentum purus id pharetras.</p>
  24.                     </div>
  25.        
  26.                     <div name="page-2-content">
  27.  
  28.                         <h2><span name="header2">Links</span></h2>
  29.                        
  30.                         <div name="lw">
  31.                             <div name="lt">Title</div>
  32.                             <div name="links">
  33.                                 <a href="https://FEXBots.com" target="_blank">link</a>
  34.                             </div>
  35.                         </div>
  36.                
  37.                         <div name="lw">
  38.                             <div name="lt">Links</div>
  39.                             <div name="links">
  40.                                 <a href="/" target="_blank">put anything here</a>
  41.                             </div>
  42.                         </div>
  43.                
  44.                         <div name="lw">
  45.                             <div name="lt">Tags</div>
  46.                             <div name="links">
  47.                                 <a href="/" target="_blank">posts</a>
  48.                             </div>
  49.                         </div>
  50.                
  51.                         <div name="lw">
  52.                             <div name="lt">Writing</div>
  53.                             <div name="links">
  54.                                 <a href="/" target="_blank">all my writing</a>
  55.                             </div>
  56.                         </div>
  57.                
  58.                         <div name="lw">
  59.                             <div name="lt">Social</div>
  60.                             <div name="links">
  61.                                 <a href="/" target="_blank">main blog</a>
  62.                             </div>
  63.                         </div>
  64.                     </div>
  65.        
  66.                     <div name="page-3-content">
  67.        
  68.                         <h2><span name="header2">F.A.Q.</span></h2>
  69.                
  70.                         <div name="q">This is an example of a question.</div>
  71.                         <div name="answer">And this is an answer.</div>
  72.                
  73.                         <div name="q">This is an example of a question.</div>
  74.                         <div name="answer">And this is an answer.</div>
  75.                
  76.                         <div name="q">This is an example of a question.</div>
  77.                         <div name="answer">And this is an answer.</div>
  78.                
  79.                         <div name="q">This is an example of a question.</div>
  80.                         <div name="answer">And this is an answer.</div>
  81.                
  82.                         <div name="q">This is an example of a question.</div>
  83.                         <div name="answer">And this is an answer.</div>
  84.                
  85.                         <div id="ask-box">
  86.                             <p></p>
  87.                         </div>
  88.                     </div>
  89.        
  90.                     <div name="page-4-content">
  91.                         <h2><span name="header2">Friends</span></h2>
  92.                         <div name="br">
  93.                             <div id="following">
  94.                                 <a href="" target="_blank">
  95.                                 <img src="https://i.imgur.com/iNffFYI.png" class="portrait"></a>
  96.                             </div>
  97.                            
  98.                             <div id="following">
  99.                                 <a href="" target="_blank">
  100.                                 <img src="https://i.imgur.com/iNffFYI.png" class="portrait"></a>
  101.                             </div>
  102.                            
  103.                             <div id="following">
  104.                                 <a href="" target="_blank">
  105.                                 <img src="https://i.imgur.com/iNffFYI.png" class="portrait"></a>
  106.                             </div>
  107.                            
  108.                             <div id="following">
  109.                                 <a href="" target="_blank">
  110.                                 <img src="https://i.imgur.com/iNffFYI.png" class="portrait"></a>
  111.                             </div>
  112.                            
  113.                             <div id="following">
  114.                                 <a href="" target="_blank">
  115.                                 <img src="https://i.imgur.com/iNffFYI.png" class="portrait"></a>
  116.                             </div>
  117.                         </div>
  118.                     </div>
  119.        
  120.                 </ul>
  121.             </div>
  122.         </div>
  123.         <div name="left">
  124.             <div name="pic">
  125.                 <img src="https://i.imgur.com/iNffFYI.png" />
  126.             </div>
  127.             <div name="nav">
  128.                 <div>
  129.                     <ul>
  130.                         <li><a href="#page-1">About Me</a></li>
  131.                         <li><a href="#page-2">Links</a></li>
  132.                         <li><a href="#page-3">F.A.Q.</a></li>
  133.                         <li><a href="#page-4">Friends</a></li>
  134.                     </ul>
  135.                 </div>
  136.             </div>
  137.         </div>
  138.     </div>
  139.     <div name="credits">
  140.        <a href="https://xat.me/Austin"><span>//A</span></a>
  141.     </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement