API tools faq
paste
Advertisement
Guest User

CSS and HTML xatspace

a guest
Nov 11th, 2019
724
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.40 KB | None | 0 0
raw download clone embed print report
  1. CSS CODE
  2.  
  3. body{
  4.     background:url(https://i.postimg.cc/hDV03Kwc/textura-blue.jpg)center top no-repeat fixed;
  5. }
  6. *{
  7.     margin:0;
  8.     padding:0;
  9.     box-sizing:border-box;
  10. }
  11. :before,
  12. :after{
  13.     content:'';
  14.     position:absolute;
  15. }
  16. :root{
  17.     --font-1: 'Roboto', sans-serif;
  18.     --font-2: 'Oswald', sans-serif;
  19.     --font-3: 'Open Sans', sans-serif;
  20.     --corbase: #221C5A;
  21.     --corbg: #F8F8F8;
  22.     --corlight: #FFF;
  23.     --cortxt: #444;
  24.     --corinnerixt: #FDFDFD;
  25. }
  26. a{
  27.     display:inline-block;
  28.     text-decoration:none;
  29.     text-transform:uppercase;
  30.     text-align:center;
  31. }
  32. h3, h4{
  33.     font-weight:lighter;
  34. }
  35. ul{
  36.     list-style:none;
  37. }
  38. span{
  39.     display:inline-block;
  40. }
  41. p{
  42.     font-size:.9em;
  43. }
  44. .jd-container{
  45.     width:1058px;
  46.     height:auto;
  47.     margin:0 auto;
  48.     position:relative;
  49. }
  50. #jd-main{
  51.     position:relative;
  52.     width:100%;
  53.     height:auto;
  54. }
  55. .jd-app{
  56.     width:100%;
  57.     height:auto;
  58.     min-height:100vh;
  59.     position:relative;
  60.     font-family:var(--font-1);
  61.     color:var(--cortxt);
  62.     font-size:1em;
  63.     background:var(--corbg);
  64. }
  65. .jd-header,
  66. .jd-main-content{
  67.     width:100%;
  68.     height:auto;
  69. }
  70. .jd-header{
  71.     box-shadow:0 50px var(--corbase) inset;
  72. }
  73. .jd-top{
  74.     height:50px;
  75. }
  76. .jd-nav-top{
  77.     width:500px;
  78.     display:flex;
  79.     justify-content:space-around;
  80.     float:right;
  81.     margin-right:50px;
  82. }
  83. .jd-nav-top a{
  84.     line-height:50px;
  85.     padding:0 20px;
  86.     color:var(--corlight);
  87.     font-size:.75em;
  88. }
  89. .jd-nav-top a:hover{
  90.     background:rgba(0,0,0,.2);
  91. }
  92. .jd-icon-menu{
  93.     width:50px;
  94.     height:60px;
  95.     position:absolute;
  96.     right:0;
  97.     top:0;
  98. }
  99. .jd-icon-menu:after{
  100.     width:30px;
  101.     height:3px;
  102.     background:var(--corlight);
  103.     box-shadow:0 7px var(--corlight), 0 14px var(--corlight);
  104.     left:10px;
  105.     top:17px;
  106. }
  107. .jd-account{
  108.     width:180px;
  109.     height:auto;
  110.     padding:15px 10px;
  111.     background:var(--corlight);
  112.     position:absolute;
  113.     right:0;
  114.     top:100px;
  115.     transition:all .4s ease-out;
  116.     box-shadow:0 0 25px 4px rgba(0,0,0,.2);
  117.     opacity:0;
  118.     visibility:hidden;
  119.     z-index:1000;
  120. }
  121. .jd-icon-menu:hover ~ .jd-account{
  122.     opacity:1;
  123.     visibility:visible;
  124.     top:50px;
  125. }
  126. .jd-account:hover{
  127.     opacity:1;
  128.     visibility:visible;
  129.     top:50px;
  130. }
  131. .jd-account:after{
  132.     width:15px;
  133.     height:15px;
  134.     background:var(--corlight);
  135.     transform:rotate(45deg);
  136.     right:10px;
  137.     top:-7.5px;
  138. }
  139. .jd-account span{
  140.     font-size:.8em;
  141.     color:#aaa;
  142.     line-height:36px;
  143. }
  144. .jd-account a{
  145.     width:100%;
  146.     line-height:36px;
  147.     background:var(--corbase);
  148.     margin-bottom:5px;
  149.     color:var(--corlight);
  150.     text-align:left;
  151.     padding-left:15px;
  152.     border-radius:2px;
  153.     font-size:.8em;
  154. }
  155. .jd-banner{
  156.     height:320px;
  157.     background:#aaa;
  158. }
  159. .jd-box-banner{
  160.     Width:100%;
  161.     height:100%;
  162.     position:relative;
  163.     overflow:hidden;
  164. }
  165. .jd-box-banner img{
  166.     width:100%;
  167.     min-width:1058px;
  168.     height:auto;
  169.     min-height:320px;
  170.     position:absolute;
  171.     top:50%;
  172.     left:50%;
  173.     transform:translate(-50%, -50%);
  174. }
  175. .jd-user{
  176.     position:absolute;
  177.     width:405px;
  178.     height:145px;
  179.     top:84px;
  180.     left:34px;
  181.     display:flex;
  182.     z-index:100;
  183. }
  184. .jd-avatar{
  185.     width:140px;
  186.     height:140px;
  187.     margin-right:10px;
  188.     background:var(--corlight);
  189.     overflow:hidden;
  190. }
  191. .jd-avatar img{
  192.     width:100%;
  193.     height:100%;
  194. }
  195. .jd-infor{
  196.     width:255px;
  197.     color:var(--corlight);
  198. }
  199. .jd-infor h1{
  200.     line-height:30px;
  201.     padding-left:10px;
  202.     background:rgba(0,0,0,.4);
  203.     font-size:1em;
  204.     margin-top:75px;
  205. }
  206. .jd-infor h2{
  207.     line-height:28px;
  208.     background:rgba(0,0,0,.4);
  209.     margin-top:5px;
  210.     padding-left:10px;
  211.     font-size:1em;
  212.     font-weight:300;
  213. }
  214. .jd-nav-me{
  215.     height:55px;
  216.     background:var(--corlight);
  217.     border-bottom:solid 8px var(--corbase);
  218. }
  219. .jd-nav-banner{
  220.     width:calc(140px * 5);
  221.     display:flex;
  222. }
  223. .jd-nav-banner a{
  224.     width:140px;
  225.     line-height:47px;
  226.     background:var(--corlight);
  227.     color:var(--cortxt);
  228.     font-size:.75em;
  229.     transition:all .3s ease-out;
  230. }
  231. .jd-nav-banner a:hover{
  232.     background:var(--corbase);
  233.     color:var(--corlight);
  234. }
  235. .jd-main-content{
  236.     margin-top:30px;
  237. }
  238. .jd-main-content .jd-container{
  239.     display:flex;
  240.     justify-content:space-between;
  241. }
  242. .jd-aside,
  243. .jd-section{
  244.     background:var(--corlight);
  245. }
  246. .jd-aside{
  247.     width:257px;
  248. }
  249. .jd-section{
  250.     width:600px;
  251.     padding:15px;
  252. }
  253. .jd-nav{
  254.     width:161px;
  255. }
  256. .jd-aside h3{
  257.     line-height:36px;
  258.     background:var(--corbase);
  259.     color:var(--corlight);
  260.     font-size:.8em;
  261.     padding-left:15px;
  262. }
  263. .jd-col-f{
  264.     display:flex;
  265.     flex-direction:column;
  266. }
  267. .jd-row{
  268.     width:100%;
  269.     height:51px;
  270.     border-bottom:solid 1px #e8e8e8;
  271.     display:flex;
  272.     margin-bottom:2px;
  273.     align-items:center;
  274. }
  275. .jd-box-img-f{
  276.     width:40px;
  277.     height:40px;
  278.     margin-left:5px;
  279.     margin-right:5px;
  280.     background:var(--corlight);
  281.     overflow:hidden;
  282.     box-shadow:0 0 0 1px #e8e8e8;
  283. }
  284. .jd-box-img-f img{
  285.     width:100%;
  286.     height:100%;
  287. }
  288. .jd-infor-f{
  289.     flex-grow:1;
  290.     text-align:left;
  291.     font-size:.75em;
  292.     height:40px;
  293.     position:relative;
  294. }
  295. .jd-infor-f img{
  296.     width:30px;
  297.     height:30px;
  298.     position:absolute;
  299.     top:5px;
  300.     right:10px;
  301. }
  302. .jd-row:hover .jd-infor-f img{
  303.     animation:mover .6s ease-out infinite;
  304. }
  305. @keyframes mover{
  306.     0%{
  307.         right:30px;
  308.     }
  309.     100%{
  310.         right:10px;
  311.     }
  312. }
  313. .jd-infor-f span{
  314.     display:block;
  315.     margin-top:10px;
  316.     color:var(--cortxt);
  317. }
  318. .jd-infor-f p{
  319.     text-transform:none;
  320.     color:#b53b6f;
  321.     line-height:12px;
  322.     margin-top:4px;
  323.     padding-left:10px;
  324.     background:url(https://i.postimg.cc/m24CBFRq/Subtraction-3.png)left center no-repeat;
  325. }
  326. .jd-article{
  327.     display:flex;
  328.     min-height:400px;
  329.     margin-bottom:25px;
  330. }
  331. .jd-img-post{
  332.     width:60px;
  333.     height:60px;
  334.     margin-right:10px;
  335.     overflow:hidden;
  336. }
  337. .jd-img-post img{
  338.     width:100%;
  339.     height:100%;
  340. }
  341. .jd-box-post{
  342.     width:500px;
  343. }
  344. .jd-box-post h4{
  345.     font-size:.9em;
  346.     margin-bottom:25px;
  347. }
  348. .jd-box-post p{
  349.     padding:8px;
  350.     background:#fdfdfd;
  351.     border-bottom:solid 1px #e7e7e7;
  352.     border-top:solid 1px #e7e7e7;
  353. }
  354. .jd-btn-utils{
  355.     width:100%;
  356.     line-height:36px;
  357.     margin-bottom:5px;
  358.     background:var(--corbase);
  359.     color:var(--corlight);
  360.     font-size:.8em;
  361.     border-radius:2px;
  362. }
  363. .jd-footer{
  364.     height:50px;
  365.     line-height:50px;
  366.     background:#111;
  367.     margin-top:50px;
  368.     text-align:center;
  369.     font-size:.8em;
  370.     color:steelblue;
  371. }
  372. .jd-modal{
  373.     position:absolute;
  374.     top:0;
  375.     left:0;
  376.     width:100%;
  377.     height:100%;
  378.     background:rgba(0,0,0,.7);
  379.     visibility:hidden;
  380.     opacity:0;
  381.     overflow:hidden;
  382.     font-family:var(--font-1);
  383.     font-size:1em;
  384.     z-index:1000;
  385. }
  386. [class*='jd-page-modal']{
  387.     width:720px;
  388.     height:auto;
  389.     min-height:520px;
  390.     position:absolute;
  391.     top:150px;
  392.     left:calc(50% - 360px);
  393.     background:var(--corlight);
  394.     transform:translate(0, -100vh);
  395.     transition:all .5s ease-out;
  396. }
  397. .jd-header-modal{
  398.     height:40px;
  399.     background:var(--corbase);
  400.     position:relative;
  401.     color:var(--corlight);
  402. }
  403. .jd-header-modal h2{
  404.     line-height:40px;
  405.     padding-left:15px;
  406.     font-weight:lighter;
  407.     font-size:1em;
  408. }
  409. .jd-close-modal{
  410.     width:40px;
  411.     height:40px;
  412.     position:absolute;
  413.     top:0;
  414.     right:0;
  415.     border-radius:50%;
  416.     transform:rotate(45deg);
  417. }
  418. .jd-close-modal:before,
  419. .jd-close-modal:after{
  420.     width:20px;
  421.     height:3px;
  422.     background:var(--corlight);
  423.     border-radius:1.5px;
  424.     left:10px;
  425.     top:19px;
  426. }
  427. .jd-close-modal:after{
  428.     transform:rotate(90deg);
  429. }
  430.  
  431. #jd-content-1:target .jd-modal{
  432.     visibility:visible;
  433.     opacity:1;
  434. }
  435. #jd-content-1:target .jd-page-modal-gallery{
  436.     transform:translate(0, 0);
  437. }
  438. #jd-content-2:target .jd-modal{
  439.     visibility:visible;
  440.     opacity:1;
  441. }
  442. #jd-content-2:target .jd-page-modal-player{
  443.     transform:translate(0, 0);
  444. }
  445. #jd-content-3:target .jd-modal{
  446.     visibility:visible;
  447.     opacity:1;
  448. }
  449. #jd-content-3:target .jd-page-modal-video{
  450.     transform:translate(0, 0);
  451. }
  452. #jd-content-4:target .jd-modal{
  453.     visibility:visible;
  454.     opacity:1;
  455. }
  456. #jd-content-4:target .jd-page-modal-xat{
  457.     transform:translate(0, 0);
  458. }
  459.  
  460. .jd-block-modal{
  461.     width:700px;
  462.     height:450px;
  463.     margin:15px 10px;
  464.     border-bottom:solid 1px #eee;
  465.     overflow-y:auto;
  466. }
  467. .jd-box-gallery{
  468.     width:670px;
  469.     height:auto;
  470.     margin-bottom:20px;
  471. }
  472. .jd-box-gallery img{
  473.     width:100%;
  474.     height:auto;
  475. }
  476. .jd-box-gallery p{
  477.     line-height:24px;
  478.     margin:10px 0;
  479.     padding:5px;
  480.     background:#eee;
  481.     font-size:.8em;
  482.     color:#aaa;
  483. }
  484. .jd-page-modal-video .jd-block-modal{
  485.     overflow:hidden;
  486. }
  487. .jd-box-video{
  488.     width:700px;
  489.     height:390px;
  490.     background:#222;
  491. }
  492. .jd-btn-youtube{
  493.     width:700px;
  494.     height:40px;
  495.     text-align:left;
  496.     margin-top:10px;
  497.     color:var(--cortxt);
  498.     font-size:.9em;
  499. }
  500. .jd-btn-youtube img{
  501.     float:left;
  502.     margin-right:10px;
  503. }
  504. .jd-btn-youtube p,
  505. .jd-btn-youtube span{
  506.     line-height:20px;
  507.     float:left;
  508.     width:90%;
  509. }
  510. .jd-btn-youtube span{
  511.     font-weight:bold;
  512.     color:#ddd;
  513.     font-size:.8em;
  514. }
  515. .jd-box-xat{
  516.     width:660px;
  517.     height:440px;
  518.     background:var(--cortxt);
  519.     margin-left:calc(50% - 330px);
  520. }
  521. .jd-box-player{
  522.     width:700px;
  523.     height:450px;
  524.     display:flex;
  525.     justify-content:center;
  526.     align-items:center;
  527.     overflow:auto;
  528. }
  529.  
  530. /*------PARA USAR FUNDO COM IMAGEM DESCOMENTE ESSE CODIGO ABAIXO--------*/
  531. /*-------
  532.  
  533. .jd-app{
  534.     background:transparent;
  535. }
  536.  
  537. -----*/
  538.  
  539. =========================FIM CSS======================
  540.  
  541.  
  542.  
  543. =======================HTML============================
  544.  
  545.  
  546. [font:Oswald]
  547. [font:Oswald]
  548. [font:Open Sans]
  549. [font:Fira Code]
  550.  
  551.  
  552.  
  553. <div id="jd-main">
  554.  <div id="jd-content-1">
  555.  <div id="jd-content-2">
  556.  <div id="jd-content-3">
  557.  <div id="jd-content-4">
  558.  <div id="jd-content-5">
  559.  <div class="jd-app">
  560.  <div class="jd-header">
  561.  <div class="jd-container">
  562.  <div class="jd-top">
  563.  <ul class="jd-nav-top">
  564.  <li><a href="https://xat.com/xat5">test</a></li>
  565.  <li><a href="https://xat.com/trade">trade</a></li>
  566.  <li><a href="https://xat.com/web_gear/chat/GetPowers.php">store</a></li>
  567.  <li><a href="https://xat.com/ajuda">help</a></li>
  568.  <li><a href="https://forum.xat.com/profile/45505/">forum</a></li>
  569.  <li><a href="https://util.xat.com/wiki/index.php/Main_Page/pt-br">wiki</a></li>
  570.  </ul>
  571.  <div class="jd-icon-menu"></div>
  572.  
  573.  <div class="jd-account">
  574.  <span>Others Accounts</span>
  575.  <div class="jd-nav-account">
  576.  <a href="http://xat.me/FredPlayer">Fred</a>
  577.  <a href="http://xat.me/CH3RRy">Married</a>
  578.  </div>
  579.  </div>
  580.  </div>
  581.  <div class="jd-banner">
  582.  <div class="jd-box-banner">
  583.  
  584.  <img src="https://i.postimg.cc/zBrRgzkv/banner.jpg" />
  585.  </div>
  586.  <div class="jd-user">
  587.  <div class="jd-avatar">
  588.  <img src="https://i.postimg.cc/nrkkW1c6/user-2.jpg" />
  589.  </div>
  590.  <div class="jd-infor">
  591.  <h1>JASON</h1>
  592.  <h2> 354656823</h2>
  593.  </div>
  594.  </div>
  595.  </div>
  596.  <div class="jd-nav-me">
  597.  <ul class="jd-nav-banner">
  598.  <li><a href="#jd-content-1">my gallery</a></li>
  599.  <li><a href="#jd-content-2">player radio</a></li>
  600.  <li><a href="#jd-content-3">youtube</a></li>
  601.  <li><a href="#jd-content-4">my xat</a></li>
  602.  <li><a href="https://www.facebook.com">facebook</a></li>
  603.  </ul>
  604.  </div>
  605.  </div>
  606.  </div>
  607.  <div class="jd-main-content">
  608.  <div class="jd-container">
  609.  <div class="jd-aside">
  610.  <h3>MY FRIENDS</h3>
  611.  <div class="jd-col-f">
  612.  <a class="jd-row" href="http://xat.me/CH3RRY">
  613.  <div class="jd-box-img-f">
  614.  <img src="https://i.postimg.cc/7hPGKKdy/girl-1.png" />
  615.  </div>
  616.  <div class="jd-infor-f">
  617.  <span>Cherry</span>
  618.  <p>Manicomio</p>
  619.  <img src="https://i.postimg.cc/4y8KqzRH/icon-arrow.png" />
  620.  </div>
  621.  </a>
  622.  <a class="jd-row" href="http://xat.me/Lanusse">
  623.  <div class="jd-box-img-f">
  624.  <img src="https://i.postimg.cc/7hPGKKdy/girl-1.png" />
  625.  </div>
  626.  <div class="jd-infor-f">
  627.  <span>Lanusse</span>
  628.  <p>Manicomio</p>
  629.  <img src="https://i.postimg.cc/4y8KqzRH/icon-arrow.png" />
  630.  </div>
  631.  </a>
  632.  <a class="jd-row" href="http://xat.me/FredPlayer">
  633.  <div class="jd-box-img-f">
  634.  <img src="https://i.postimg.cc/y6Fr9mBh/businessman.png" />
  635.  </div>
  636.  <div class="jd-infor-f">
  637.  <span>Fred 'JASON'</span>
  638.  <p>Central dos Players</p>
  639.  <img src="https://i.postimg.cc/4y8KqzRH/icon-arrow.png" />
  640.  </div>
  641.  </a>
  642.  </div>
  643.  </div>
  644.  <div class="jd-section">
  645.  <div class="jd-article">
  646.  <div class="jd-img-post">
  647.  <img src="https://i.postimg.cc/nrkkW1c6/user-2.jpg" />
  648.  </div>
  649.  <div class="jd-box-post">
  650.  <h4>About me</h4>
  651.  <p>
  652.  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.
  653.  </p>
  654.  </div>
  655.  </div>
  656.  </div>
  657.  <div class="jd-nav">
  658.  <a class="jd-btn-utils" href="https://xat.com/Mundosmilies">mudodossmilies</a>
  659.  <a class="jd-btn-utils" href="https://xat.com/Arcbot">arcbot</a>
  660.  <a class="jd-btn-utils" href="https://xat.com/fexbot">fexbot</a>
  661.  <a class="jd-btn-utils" href="https://xatradio.com">xatradio</a>
  662.  </div>
  663.  </div>
  664.  </div>
  665.  <div class="jd-footer">
  666.  <span>© 2019 by Jason - Design</span>
  667.  </div>
  668.  </div>
  669.  <div class="jd-modal">
  670.  <div class="jd-container">
  671.  <div class="jd-page-modal-gallery">
  672.  <div class="jd-header-modal">
  673.  <h2>My Gallery</h2>
  674.  <a class="jd-close-modal" href="#jd-main"></a>
  675.  </div>
  676.  <div class="jd-block-modal">
  677.  <div class="jd-box-gallery">
  678.  <img src="https://i.postimg.cc/RCtNBjm0/10.jpg" width="670/" />
  679.  <p>Xatspace Cherry by Jason - Design</p>
  680.  </div>
  681.  <div class="jd-box-gallery">
  682.  <img src="https://i.postimg.cc/mgNq4R7q/template.png" width="670/" />
  683.  <p>Xatspace Andy by Jason - Design</p>
  684.  </div>
  685.  <div class="jd-box-gallery">
  686.  <img src="https://i.postimg.cc/dqJd9tYj/13.jpg" width="670/" />
  687.  <p>Xatspace Cherry by Jason - Design</p>
  688.  </div>
  689.  <div class="jd-box-gallery">
  690.  <img src="https://i.postimg.cc/wqGmHXsw-/04.jpg" width="670/" />
  691.  <p>Xatspace Menina by Jason - Design</p>
  692.  </div>
  693.  </div>
  694.  </div>
  695.  <div class="jd-page-modal-player">
  696.  <div class="jd-header-modal">
  697.  <h2>Radio Player</h2>
  698.  <a class="jd-close-modal" href="#jd-main"></a>
  699.  </div>
  700.  <div class="jd-block-modal">
  701.  <div class="jd-box-player">
  702.  [radioswf:570:450:36ac8ef5e]
  703.  </div>
  704.  </div>
  705.  </div>
  706.  <div class="jd-page-modal-video">
  707.  <div class="jd-header-modal">
  708.  <h2>My Music</h2>
  709.  <a class="jd-close-modal" href="#jd-main"></a>
  710.  </div>
  711.  <div class="jd-block-modal">
  712.  <div class="jd-box-video">
  713.  [youtube:700:390:450p7goxZqg:start=0&end=0&autohide=1&autoplay=0&controls=0&disablekb=1&loop=1&modestbranding=1&rel=0&showinfo=0&vq=large]
  714. </div>
  715. <a class="jd-btn-youtube" href="https://www.youtube.com/watch?v=450p7goxZqg">
  716. <img src="https://i.postimg.cc/nLZsPfgw/artist.jpg" width="40" />
  717. <p>All Of Me</p>
  718. <span>John Legend</span>
  719. </a>
  720. </div>
  721. </div>
  722. <div class="jd-page-modal-xat">
  723. <div class="jd-header-modal">
  724. <h2>Central dos Players</h2>
  725. <a class="jd-close-modal" href="#jd-main"></a>
  726. </div>
  727. <div class="jd-block-modal">
  728. <div class="jd-box-xat">
  729. [chat:660:440:208708578:CentralDosPlayers:autologin-nosound]
  730. </div>
  731. </div>
  732. </div>
  733. </div>
  734. </div>
  735. </div>
  736. </div>
  737. </div>
  738. </div>
  739. </div>
  740. </div>
  741.  
  742. =================================FIM HTML=======================
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!