API tools faq
paste
arabtion

Untitled

arabtion
Apr 3rd, 2019
117
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.65 KB | None | 0 0
raw download clone embed print report
  1. background:url(http://oi68.tinypic.com/qqo02x.gif)top left repeat; } *{ margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; user-select:none; } :root{ --font-1: 'Raleway', sans-serif; --font-2: 'Great Vibes', cursive; --font-3: 'Courgette', cursive; --pink: #ed196c; --white: #fff; --black: #1a1a1a; } a{ display:inline-block; text-decoration:none; text-align:center; } #main{ width:100%; height:100vh; position:relative; font-size:1rem; color:var(--white); font-family:var(--font-1); overflow:hidden; } .container{ width:1080px; height:100vh; position:relative; margin:0 auto; } .book{ width:950px; height:570px; background:url(http://oi64.tinypic.com/210ee6w.png)top left repeat, #242424; border-radius:6px; box-shadow:0 0 4px 2px rgba(255,191,255,.1) inset, 0 0 30px 20px rgba(0,0,0,.5); position:relative; top:80px; left:calc(50% - 475px); } .book:before, .book:after{ content:''; position:absolute; background:var(--white); } .book:before{ width:926px; height:540px; top:15px; left:12px; } .book:after{ width:100px; height:100%; top:0; left:calc(50% - 50px); } .nav{ width:390px; height:40px; position:absolute; display:flex; justify-content:space-between; top:-25px; left:50px; z-index:50; } .btn-nav{ width:90px; height:40px; line-height:50px; color:var(--pink); background:var(--black); border-top-left-radius:6px; border-top-right-radius:6px; text-transform:uppercase; font-size:.8rem; box-shadow:0 0 6px black; transition:all .3s linear; } .btn-nav:hover{ line-height:35px; background:var(--white); } #selected-1{ line-height:35px; background:var(--white); } .main-content{ position:relative; width:846px; height:540px; background:#222; top:15px; left:calc(50% - 423px); z-index:100; box-shadow:-2px 0 6px black, -4px 0 #222, -6px 0 6px black, -8px 0 #222, -10px 0 6px black, -14px 0 #222, -16px 0 6px black, -20px 0 #222, -22px 0 6px black, -26px 0 #222, -28px 0 6px black, -32px 0 #222, -34px 0 6px black, 2px 0 6px black, 4px 0 #222, 6px 0 6px black, 8px 0 #222, 10px 0 6px black, 14px 0 #222, 16px 0 6px black, 20px 0 #222, 22px 0 6px black, 26px 0 #222, 28px 0 6px black, 32px 0 #222, 34px 0 6px black; perspective:3000px; } [class^='page-']{ position:absolute; width:423px; height:540px; top:0; padding:30px 20px; overflow:hidden; } .page-left{ background:linear-gradient(90deg, #2b2b2b, #2b2b2b 38%, #3e3e3e 81%, #2b2b2b 100%); transform-style:preserve-3d; transform:rotateY(0); transform-origin:center right; -webkit-transform-origin:center right; border-right:solid 1px var(--black); animation:flip 5s ease-in-out infinite; } .page-right{ left:423px; background:linear-gradient(90deg, #2b2b2b, #3e3e3e 19%, #2b2b2b 62%, #2b2b2b 100%); } @keyframes flip{ 0%{ transform:rotateY(0); } 50%{ transform:rotateY(25deg); } 100%{ transform:rotateY(0); } } .box-img{ width:100%; height:220px; text-align:center; position:relative; top:30px; } .box-img img{ position:absolute; width:200px; height:220px; padding:5px; background:#fefefe; box-shadow:0 0 10px 4px rgba(0,0,0,.2); left:calc(50% - 100px); } .box-img img:nth-of-type(1){ transform:rotate(-45deg); } .page-left h1{ margin-top:80px; font-family:var(--font-3); font-weight:300; color:var(--pink); } .page-left p{ margin-top:10px; font-family:var(--font-3); } .home, .music, .gallery, .friends{ width:calc(100% - 40px); height:calc(100% - 60px); position:absolute; top:130px; opacity:0; visibility:hidden; transition:all .5s ease-out; } .home{ top:30px; opacity:1; visibility:visible; } .calendar{ width:100%; height:140px; display:flex; } .box-a{ width:116px; color:var(--pink); font-family:var(--font-3); text-align:center; } .box-a h1{ font-size:3.5rem; font-weight:300; } .box-a h2{ font-size:5rem; font-weight:300; line-height:4rem; } .box-b{ width:calc(100% - 116px); display:flex; padding-left:10px; justify-content:space-around; } ul{ list-style:none; } ul:nth-of-type(1){ color:var(--pink); } li{ text-align:center; line-height:22px; width:30px; height:22px; } .birthday{ color:var(--pink); } .box-infor{ width:100%; margin-top:10px; font-family:var(--font-3); } .box-infor h1{ font-size:1.3rem; font-weight:300; margin-bottom:10px; } .box-infor span{ display:block; line-height:26px; } .box-infor strong{ color:var(--pink); } .box-infor p{ margin-top:10px; font-size:.9rem; } #content-1:target .home{ top:30px; visibility:visible; opacity:1; transition-delay:.5s; } #content-1:target .music, .gallery, .friends{ top:130px; opacity:0; visibility:hidden; } #content-1:target #selected-1{ line-height:35px; background:var(--white); } #content-2:target .music{ top:30px; visibility:visible; opacity:1; transition-delay:.5s; } #content-2:target .home, .gallery, .friends{ top:130px; opacity:0; visibility:hidden; } #content-2:target #selected-1{ line-height:50px; background:var(--black); } #content-2:target #selected-1:hover{ line-height:35px; background:var(--white); } #content-2:target #selected-2{ line-height:35px; background:var(--white); } #content-3:target .gallery{ top:30px; visibility:visible; opacity:1; transition-delay:.5s; } #content-3:target .home, .music, .friends{ top:130px; opacity:0; visibility:hidden; } #content-3:target #selected-1{ line-height:50px; background:var(--black); } #content-3:target #selected-1:hover{ line-height:35px; background:var(--white); } #content-3:target #selected-3{ line-height:35px; background:var(--white); } #content-4:target .friends{ top:30px; visibility:visible; opacity:1; transition-delay:.5s; } #content-4:target .home, .music, .gallery{ top:130px; opacity:0; visibility:hidden; } #content-4:target #selected-1{ line-height:50px; background:var(--black); } #content-4:target #selected-1:hover{ line-height:35px; background:var(--white); } #content-4:target #selected-4{ line-height:35px; background:var(--white); } .title{ color:var(--pink); font-family:var(--font-3); font-weight:300; } .bloco{ font-family:var(--font-3); width:100%; height:450px; overflow-y:auto; } .video{ width:100%; height:auto; margin-top:40px; text-align:center; font-family:var(--font-3); } .video h2, h3{ font-weight:300; } .video h2{ color:var(--pink); } .box-video{ width:370px; height:209px; background:#222; display:inline-block; margin-top:30px; box-shadow:0 5px var(--pink), 0 20px 20px -12px rgba(0,0,0,.6); } ::-webkit-scrollbar{ width:5px; background:var(--white); } ::-webkit-scrollbar-thumb{ background:var(--pink); } .gallery img{ background:var(--pink); padding:5px; margin-bottom:30px; } .box-friends{ width:80%; height:100px; margin-bottom:10px; margin-left:50px; text-align:left; } .box-friends h1{ float:left; line-height:80px; font-size:1rem; font-weight:300; color:var(--pink); transition:all .3s; } .box-friends:hover h1{ color:var(--white); } .box-friends span{ font-size:2rem; padding-right:20px; } .box-img-friend{ float:right; width:128px; height:100px; position:relative; } .box-img-friend:before, .box-img-friend:after{ content:''; position:absolute; } .box-img-friend:after{ width:100%; height:30px; background:#2b2b2b; left:0; bottom:0; } .box-img-friend:before{ width:118px; height:12px; border-radius:50%; background:#000; left:5px; filter:blur(5px); top:70px; } .box-img-friend img{ width:70px; height:70px; position:absolute; left:calc(50% - 35px); transform:rotate(45deg); top:15px;
  2.  
  3.  
  4.  
  5.  
  6. //////////////
  7.  
  8. الجزء الثاني
  9. </style>
  10. <div id="xatstyme">
  11.  
  12.  
  13.  
  14.  
  15. <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Great Vibes">
  16. <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway">
  17. <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Courgette">
  18.  
  19. <div id="main">
  20. <div id="content-1">
  21. <div id="content-2">
  22. <div id="content-3">
  23. <div id="content-4">
  24. <div class="container">
  25. <div class="book">
  26. <div class="nav">
  27. <a class="btn-nav" id="selected-1" href="#content-1">home</a>
  28. <a class="btn-nav" id="selected-2" href="#content-2">music</a>
  29. <a class="btn-nav" id="selected-3" href="#content-3">photos</a>
  30. <a class="btn-nav" id="selected-4" href="#content-4">friends</a>
  31. </div>
  32. <div class="main-content">
  33. <div class="page-left">
  34. <div class="box-img">
  35. <img src="http://oi67.tinypic.com/2j11wt2.jpg" />
  36. <img src="http://oi67.tinypic.com/2j11wt2.jpg" />
  37. </div>
  38. <h1>Personal xat me</h1>
  39. <p>
  40. Quando alguém encontra seu caminho precisa ter coragem suficiente para dar passos errados. As decepções, as derrotas, o desânimo são ferramentas que Deus utiliza para mostrar a estrada !!
  41. </p>
  42. </div>
  43. <div class="page-right">
  44. <div class="home">
  45. <div class="calendar">
  46. <div class="box-a">
  47. <h1>Febr</h1>
  48. <h2>06</h2>
  49. </div>
  50. <div class="box-b">
  51. <ul>
  52. <li><strong>Sun</strong></li>
  53. <li></li>
  54. <li>4</li>
  55. <li>11</li>
  56. <li>18</li>
  57. <li>25</li>
  58. </ul>
  59. <ul>
  60. <li><strong>Mon</strong></li>
  61. <li></li>
  62. <li>5</li>
  63. <li>12</li>
  64. <li>19</li>
  65. <li>26</li>
  66. </ul>
  67. <ul>
  68. <li><strong>Tue</strong></li>
  69. <li></li>
  70. <li class="birthday">6</li>
  71. <li>13</li>
  72. <li>20</li>
  73. <li>27</li>
  74. </ul>
  75. <ul>
  76. <li><strong>Wed</strong></li>
  77. <li></li>
  78. <li>7</li>
  79. <li>14</li>
  80. <li>21</li>
  81. <li>28</li>
  82. </ul>
  83. <ul>
  84. <li><strong>Thu</strong></li>
  85. <li>1</li>
  86. <li>8</li>
  87. <li>15</li>
  88. <li>22</li>
  89. <li></li>
  90. </ul>
  91. <ul>
  92. <li><strong>Fri</strong></li>
  93. <li>2</li>
  94. <li>9</li>
  95. <li>16</li>
  96. <li>23</li>
  97. <li></li>
  98. </ul>
  99. <ul>
  100. <li><strong>Sat</strong></li>
  101. <li>3</li>
  102. <li>10</li>
  103. <li>17</li>
  104. <li>24</li>
  105. <li></li>
  106. </ul>
  107. </div>
  108. </div>
  109. <div class="box-infor">
  110. <h1>Bem vindo(a) ao meu xatspace!</h1>
  111. <span><strong>NICK:</strong> Rosita</span>
  112. <span><strong>ID:</strong> 1505329564</span>
  113. <span><strong>STATUS:</strong> Namorando</span>
  114. <p>
  115. Nunca diga te amo se não te interessa.<br /> Nunca fale sobre sentimentos se estes não existem. <br /><br />Nunca toque numa vida se não pretende romper um coração.<br /> Nunca olhe nos olhos de alguém se não quiser vê-lo se derramar em lágrimas por causa de ti.<br /><br /> A coisa mais cruel que alguém pode fazer é permitir que alguém se apaixone por você quando você não pretende fazer o mesmo.
  116. </p>
  117. </div>
  118. </div>
  119. <div class="music">
  120. <h1 class="title">Music</h1>
  121. <div class="video">
  122. <h2>When You Came Into My Life</h2>
  123. <h3>Scorpions</h3>
  124. <div class="box-video">
  125. <iframe width="370" height="209" src="//www.youtube.com/embed/mG05YzmmiCU?start=0&end=0&autohide=1&autoplay=1&controls=0&disablekb=1&loop=1&modestbranding=1&rel=0&showinfo=0&vq=large" frameborder="0">Your browser does not support iframes!</iframe>
  126. </div>
  127. </div>
  128. </div>
  129. <div class="gallery">
  130. <h1 class="title">Photos</h1>
  131. <div class="bloco">
  132. <img src="http://oi64.tinypic.com/24wvjwn.jpg" width="360/" />
  133. <img src="http://oi63.tinypic.com/33xh381.jpg" width="360/" />
  134. <img src="http://oi67.tinypic.com/2uzusmx.jpg" width="360/" />
  135. </div>
  136. </div>
  137. <div class="friends">
  138. <h1 class="title">Friends</h1>
  139. <div class="bloco">
  140. <a class="box-friends" href="http://xat.me/">
  141. <h1><span>✓</span>Lucia</h1>
  142. <div class="box-img-friend">
  143. <img src="http://oi68.tinypic.com/157d4yb.jpg" width="70/" />
  144. </div>
  145. </a>
  146. <a class="box-friends" href="http://xat.me/nero">
  147. <h1><span>✓</span>Diablo</h1>
  148. <div class="box-img-friend">
  149. <img src="http://oi68.tinypic.com/157d4yb.jpg" width="70/" />
  150. </div>
  151. </a>
  152. <a class="box-friends" href="http://xat.me/">
  153. <h1><span>✓</span>Lobo</h1>
  154. <div class="box-img-friend">
  155. <img src="http://oi68.tinypic.com/157d4yb.jpg" width="70/" />
  156. </div>
  157. </a>
  158. <a class="box-friends" href="http://xat.me/">
  159. <h1><span>✓</span>Lucha</h1>
  160. <div class="box-img-friend">
  161. <img src="http://oi68.tinypic.com/157d4yb.jpg" width="70/" />
  162. </div>
  163. </a>
  164. </div>
  165. </div>
  166. </div>
  167. </div>
  168. </div>
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!