API tools faq
paste
Taipan_PC_Pro

Untitled

Taipan_PC_Pro
Aug 15th, 2018
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.14 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head><meta charset="UTF-8">
  4. <link href='//fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700|Roboto:300,400,500,700,900' rel='stylesheet'/>
  5. <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
  6. <title>Sharescript.net</title>
  7. <style id='page-skin-1' type='text/css'><!--
  8. html {
  9. height: 100%;
  10. }
  11. body {
  12. overflow: hidden;
  13. background: #bcdee7 url("../img/bg.jpg") no-repeat center center fixed;
  14. background-size: cover;
  15. position: fixed;
  16. padding: 0px;
  17. margin: 0px;
  18. width: 100%;
  19. height: 100%;
  20. font: normal 14px/1.618em "Roboto", sans-serif;
  21. -webkit-font-smoothing: antialiased;
  22. }
  23. body:before {
  24. content: "";
  25. height: 0px;
  26. padding: 0px;
  27. border: 130em solid #313440;
  28. position: absolute;
  29. left: 50%;
  30. top: 100%;
  31. z-index: 2;
  32. display: block;
  33. -webkit-border-radius: 50%;
  34. border-radius: 50%;
  35. -webkit-transform: translate(-50%, -50%);
  36. transform: translate(-50%, -50%);
  37. -webkit-animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
  38. animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
  39. }
  40. h1,
  41. h2 {
  42. font-weight: 500;
  43. margin: 0px 0px 5px 0px;
  44. }
  45. h1 {
  46. font-size: 24px;
  47. }
  48. h2 {
  49. font-size: 16px;
  50. }
  51. p {
  52. margin: 0px;
  53. }
  54. .profile-card {
  55. background: #FFB300;
  56. width: 56px;
  57. height: 56px;
  58. position: absolute;
  59. left: 50%;
  60. top: 50%;
  61. z-index: 2;
  62. overflow: hidden;
  63. opacity: 0;
  64. margin-top: 70px;
  65. -webkit-transform: translate(-50%, -50%);
  66. transform: translate(-50%, -50%);
  67. -webkit-border-radius: 50%;
  68. border-radius: 50%;
  69. -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
  70. box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
  71. -webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
  72. animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
  73. }
  74. .profile-card header {
  75. width: 179px;
  76. height: 280px;
  77. padding: 40px 20px 30px 20px;
  78. display: inline-block;
  79. float: left;
  80. border-right: 2px dashed #EEEEEE;
  81. background: #FFFFFF;
  82. color: #000000;
  83. margin-top: 50px;
  84. opacity: 0;
  85. text-align: center;
  86. -webkit-animation: moveIn 1s 3.1s ease forwards;
  87. animation: moveIn 1s 3.1s ease forwards;
  88. }
  89. .profile-card header h1 {
  90. color: #FF5722;
  91. }
  92. .profile-card header a {
  93. display: inline-block;
  94. text-align: center;
  95. position: relative;
  96. margin: 25px 30px;
  97. }
  98. .profile-card header a:after {
  99. position: absolute;
  100. content: "";
  101. bottom: 3px;
  102. right: 3px;
  103. width: 20px;
  104. height: 20px;
  105. border: 4px solid #FFFFFF;
  106. -webkit-transform: scale(0);
  107. transform: scale(0);
  108. background: -webkit-linear-gradient(top, #fb094c 0%, #fe6b3c 50%, #4d90fe 50%, #4d90fe 100%);
  109. border-radius: 50%;
  110. -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  111. box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  112. -webkit-animation: scaleIn 0.3s 3.5s ease forwards;
  113. animation: scaleIn 0.3s 3.5s ease forwards;
  114. }
  115. .profile-card header a > img {
  116. width: 120px;
  117. max-width: 100%;
  118. -webkit-border-radius: 50%;
  119. border-radius: 50%;
  120. -webkit-transition: -webkit-box-shadow 0.3s ease;
  121. transition: box-shadow 0.3s ease;
  122. -webkit-box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
  123. box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
  124. }
  125. .profile-card header a:hover > img {
  126. -webkit-box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
  127. box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
  128. }
  129. .profile-card .profile-bio {
  130. width: 175px;
  131. height: 180px;
  132. display: inline-block;
  133. float: right;
  134. padding: 50px 20px 30px 20px;
  135. background: #FFFFFF;
  136. color: #333333;
  137. margin-top: 50px;
  138. text-align: center;
  139. opacity: 0;
  140. -webkit-animation: moveIn 1s 3.1s ease forwards;
  141. animation: moveIn 1s 3.1s ease forwards;
  142. }
  143. .profile-social-links {
  144. width: 218px;
  145. display: inline-block;
  146. float: right;
  147. margin: 0px;
  148. padding: 15px 20px;
  149. background: #FFFFFF;
  150. margin-top: 50px;
  151. text-align: center;
  152. opacity: 0;
  153. -webkit-box-sizing: border-box;
  154. box-sizing: border-box;
  155. -webkit-animation: moveIn 1s 3.1s ease forwards;
  156. animation: moveIn 1s 3.1s ease forwards;
  157. }
  158. .profile-social-links li {
  159. list-style: none;
  160. margin: -5px 0px 0px 0px;
  161. padding: 0px;
  162. float: left;
  163. width: 25%;
  164. text-align: center;
  165. }
  166. .profile-social-links li a {
  167. display: inline-block;
  168. color: red;
  169. width: 24px;
  170. height: 24px;
  171. padding: 6px;
  172. position: relative;
  173. overflow: hidden!important;
  174. -webkit-border-radius: 50%;
  175. border-radius: 50%;
  176. }
  177. .profile-social-links li a i {
  178. position: relative;
  179. z-index: 1;
  180. }
  181. .profile-social-links li a img,
  182. .profile-social-links li a svg {
  183. width: 24px;
  184. }
  185. @-webkit-keyframes init {
  186. 0% {
  187. width: 0px;
  188. height: 0px;
  189. }
  190. 100% {
  191. width: 56px;
  192. height: 56px;
  193. margin-top: 0px;
  194. opacity: 1;
  195. }
  196. }
  197. @keyframes init {
  198. 0% {
  199. width: 0px;
  200. height: 0px;
  201. }
  202. 100% {
  203. width: 56px;
  204. height: 56px;
  205. margin-top: 0px;
  206. opacity: 1;
  207. }
  208. }
  209. @-webkit-keyframes puff {
  210. 0% {
  211. top: 100%;
  212. height: 0px;
  213. padding: 0px;
  214. }
  215. 100% {
  216. top: 50%;
  217. height: 100%;
  218. padding: 0px 100%;
  219. }
  220. }
  221. @keyframes puff {
  222. 0% {
  223. top: 100%;
  224. height: 0px;
  225. padding: 0px;
  226. }
  227. 100% {
  228. top: 50%;
  229. height: 100%;
  230. padding: 0px 100%;
  231. }
  232. }
  233. @-webkit-keyframes borderRadius {
  234. 0% {
  235. -webkit-border-radius: 50%;
  236. }
  237. 100% {
  238. -webkit-border-radius: 0px;
  239. }
  240. }
  241. @keyframes borderRadius {
  242. 0% {
  243. -webkit-border-radius: 50%;
  244. }
  245. 100% {
  246. border-radius: 0px;
  247. }
  248. }
  249. @-webkit-keyframes moveDown {
  250. 0% {
  251. top: 50%;
  252. }
  253. 50% {
  254. top: 40%;
  255. }
  256. 100% {
  257. top: 100%;
  258. }
  259. }
  260. @keyframes moveDown {
  261. 0% {
  262. top: 50%;
  263. }
  264. 50% {
  265. top: 40%;
  266. }
  267. 100% {
  268. top: 100%;
  269. }
  270. }
  271. @-webkit-keyframes moveUp {
  272. 0% {
  273. background: #FFB300;
  274. top: 100%;
  275. }
  276. 50% {
  277. top: 40%;
  278. }
  279. 100% {
  280. top: 50%;
  281. background: #E0E0E0;
  282. }
  283. }
  284. @keyframes moveUp {
  285. 0% {
  286. background: #FFB300;
  287. top: 100%;
  288. }
  289. 50% {
  290. top: 40%;
  291. }
  292. 100% {
  293. top: 50%;
  294. background: #E0E0E0;
  295. }
  296. }
  297. @-webkit-keyframes materia {
  298. 0% {
  299. background: #E0E0E0;
  300. }
  301. 50% {
  302. -webkit-border-radius: 4px;
  303. }
  304. 100% {
  305. width: 440px;
  306. height: 280px;
  307. background: #FFFFFF;
  308. -webkit-border-radius: 4px;
  309. }
  310. }
  311. @keyframes materia {
  312. 0% {
  313. background: #E0E0E0;
  314. }
  315. 50% {
  316. border-radius: 4px;
  317. }
  318. 100% {
  319. width: 440px;
  320. height: 280px;
  321. background: #FFFFFF;
  322. border-radius: 4px;
  323. }
  324. }
  325. @-webkit-keyframes moveIn {
  326. 0% {
  327. margin-top: 50px;
  328. opacity: 0;
  329. }
  330. 100% {
  331. opacity: 1;
  332. margin-top: -20px;
  333. }
  334. }
  335. @keyframes moveIn {
  336. 0% {
  337. margin-top: 50px;
  338. opacity: 0;
  339. }
  340. 100% {
  341. opacity: 1;
  342. margin-top: -20px;
  343. }
  344. }
  345. @-webkit-keyframes scaleIn {
  346. 0% {
  347. -webkit-transform: scale(0);
  348. }
  349. 100% {
  350. -webkit-transform: scale(1);
  351. }
  352. }
  353. @keyframes scaleIn {
  354. 0% {
  355. transform: scale(0);
  356. }
  357. 100% {
  358. transform: scale(1);
  359. }
  360. }
  361. @-webkit-keyframes ripple {
  362. 0% {
  363. transform: scale3d(0, 0, 0);
  364. }
  365. 50%,
  366. 100% {
  367. -webkit-transform: scale3d(1, 1, 1);
  368. }
  369. 100% {
  370. opacity: 0;
  371. }
  372. }
  373. @keyframes ripple {
  374. 0% {
  375. transform: scale3d(0, 0, 0);
  376. }
  377. 50%,
  378. 100% {
  379. transform: scale3d(1, 1, 1);
  380. }
  381. 100% {
  382. opacity: 0;
  383. }
  384. }
  385. @media screen and (min-aspect-ratio: 4/3) {
  386. body {
  387. background-size: cover;
  388. }
  389. body:before {
  390. width: 0px;
  391. }
  392. @ -webkit-keyframes puff {
  393. 0% {
  394. top: 100%;
  395. width: 0px;
  396. padding-bottom: 0px;
  397. }
  398. 100% {
  399. top: 50%;
  400. width: 100%;
  401. padding-bottom: 100%;
  402. }
  403. }
  404. @keyframes puff {
  405. 0% {
  406. top: 100%;
  407. width: 0px;
  408. padding-bottom: 0px;
  409. }
  410. 100% {
  411. top: 50%;
  412. width: 100%;
  413. padding-bottom: 100%;
  414. }
  415. }
  416. }
  417. @media screen and (min-height: 480px) {
  418. .profile-card header {
  419. width: auto;
  420. height: auto;
  421. padding: 30px 20px;
  422. display: block;
  423. float: none;
  424. border-right: none;
  425. }
  426. .profile-card .profile-bio {
  427. width: auto;
  428. height: auto;
  429. padding: 15px 20px 30px 20px;
  430. display: block;
  431. float: none;
  432. }
  433. .profile-social-links {
  434. width: 100%;
  435. display: block;
  436. float: none;
  437. }
  438. @ -webkit-keyframes materia {
  439. 0% {
  440. background: #E0E0E0;
  441. }
  442. 50% {
  443. -webkit-border-radius: 4px;
  444. }
  445. 100% {
  446. width: 280px;
  447. height: 440px;
  448. background: #FFFFFF;
  449. -webkit-border-radius: 4px;
  450. }
  451. }
  452. @keyframes materia {
  453. 0% {
  454. background: #E0E0E0;
  455. }
  456. 50% {
  457. border-radius: 4px;
  458. }
  459. 100% {
  460. width: 280px;
  461. height: 440px;
  462. background: #FFFFFF;
  463. border-radius: 4px;
  464. }
  465. }
  466. }
  467.  
  468. --></style>
  469.  
  470. </head>
  471. <body>
  472. <aside class='profile-card'>
  473. <header>
  474. <a href='#' target='_blank'>
  475. <img class="hoverZoomLink" src="https://i.imgur.com/7EZR177.png">
  476. </a>
  477. <h1>
  478. Sharescript.net
  479. </h1>
  480. <h2>
  481. Website chia sẻ mã nguồn
  482. </h2>
  483. </header>
  484. <div class='profile-bio'>
  485. <p style="
  486. font-family: Roboto;
  487. ">
  488. Download mã nguồn <a href="">tại đây</a> </p>
  489. </div>
  490. <ul class='profile-social-links'>
  491. <li>
  492. <a href='https://www.facebook.com/sharescript' target='_blank'>
  493. <i class='fa fa-facebook'></i>
  494. </a>
  495. </li>
  496. <li>
  497. <a href='#!' target='_blank'>
  498. <i class='fa fa-twitter'></i>
  499. </a>
  500. </li>
  501. <li>
  502. <a href='#!' target='_blank'>
  503. <i class='fa fa-globe'></i>
  504. </a>
  505. </li>
  506. <li>
  507. <a href='#!' target='_blank'>
  508. <i class='fa fa-instagram'></i>
  509. </a>
  510. </li>
  511. </ul>
  512. </aside>
  513. <div class='navbar no-items section' id='navbar'></div>
  514. </body>
  515. </html>
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!