WILDAN_IZZUDIN

SCRIPT INTRO

Jan 13th, 2018
316
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en" >
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>Underxploit Reborn</title>
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  9. <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  10. <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  11. <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,900,500' rel='stylesheet' type='text/css'>
  12. <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
  13.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  14.  
  15.  
  16.       <style>
  17. @import url('https://fonts.googleapis.com/css?family=Iceland');      
  18. @import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
  19. body {
  20.     background: url(https://c1.staticflickr.com/6/5673/30593604650_bfe4251a9c_b.jpg) no-repeat center center fixed;
  21.     background-size: cover;
  22.     overflow: hidden;
  23.     cursor: default;
  24. }
  25.  
  26. #card {
  27.     width: 400px;
  28.     height: 300px;
  29.     position: relative;
  30.     margin: 10% auto;
  31.     border-radius: 8px;
  32.     box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2), 0px 2px 6px rgba(0, 0, 0, 0.4);
  33.     overflow: hidden;
  34. }
  35.  
  36. #blur {
  37.     background: url(https://c1.staticflickr.com/6/5673/30593604650_bfe4251a9c_b.jpg) no-repeat center center fixed;
  38.     background-size: cover;
  39.     width: 430px;
  40.     height: 330px;
  41.     position: relative;
  42.     top: -15px;
  43.     left: -15px;
  44.     border-radius: 8px;
  45.     -webkit-filter: blur(8px);
  46.     -moz-filter: blur(8px);
  47.     filter: blur(8px);
  48. }
  49.  
  50. #color {
  51.     background: rgba(255, 255, 255, .60);
  52.     width: 430px;
  53.     height: 330px;
  54. }
  55.  
  56. #profile {
  57.     cursor: grabbing;
  58.     width: 400px;
  59.     height: 300px;
  60.     position: relative;
  61.     top: -330px;
  62.     border-radius: 8px;
  63. }
  64.  
  65. img {
  66.     width: 100px;
  67.     height: 100px;
  68.     border-radius: 100px;
  69.     position: relative;
  70.     top: 32px;
  71.     display: block;
  72.     margin: 0 auto;
  73.     -webkit-filter: sepia(.25);
  74.     -moz-filter: sepia(.25);
  75.     filter: sepia(.25);
  76. }
  77.  
  78. h1 {
  79.     color: rgba(38, 50, 56, 1);
  80.     font-family: 'Iceland';
  81.     font-size: 36px;
  82.     font-weight: 700;
  83.     text-align: center;
  84.     position: relative;
  85.     top: 48px;
  86. }
  87.  
  88. p {
  89.     color: rgba(38, 50, 56, .87);
  90.     font-family: 'Josefin Sans';
  91.     font-size: 16px;
  92.     font-weight: 400;
  93.     text-align: center;
  94.     position: relative;
  95.     top: 56px;
  96. }
  97.  
  98. a {
  99.     color: rgba(255, 255, 255, 1);
  100.     transition: color 0.4s;
  101.     text-decoration: none;
  102. }
  103. a:hover {
  104.     color: rgba(232, 77, 59, .70);
  105.     transition: color 0.4s;
  106. }
  107.  
  108. .info {
  109.     text-align: center;
  110.     margin: 0 auto;
  111.     position: relative;
  112.     top: 86px;
  113.     background: rgba(71, 71, 71, 1);
  114.     width: 32px;
  115.     height: 32px;
  116.     border-radius: 100px;
  117.     background-position: center center;
  118.     background-size: cover;
  119.     transition: all 0.2s ease;
  120.     z-index: 0;
  121. }
  122.  
  123. .info.active {
  124.     width: 100%;
  125.     height: 200%;
  126.     position: relative;
  127.     top: -100%;
  128.     background: rgba(71, 71, 71, 1);
  129.     transition: width .1s ease, height .2s ease, top .2s ease, z-index .2s ease;
  130.     z-index: 999;
  131. }
  132.  
  133. .info i.block {
  134.     color: rgba(255, 255, 255, .6);
  135.     display: block;
  136. }
  137.  
  138. .info .fa-info {
  139.     padding: 8px;
  140.     cursor: pointer;
  141.     visibility: visible;
  142.  opacity: 1;
  143.     transition: visibility 0s, opacity 0.4s ease;
  144. }
  145.  
  146. .info.active .fa-info {
  147.     visibility: hidden;
  148.  opacity: 0;
  149.  transition: visibility 0s, opacity 0.4s ease;
  150. }
  151.  
  152. .info .fa-angle-down {
  153.     cursor: pointer;
  154.     visibility: hidden;
  155. }
  156.  
  157. .info.active .fa-angle-down {
  158.     position: relative;
  159.     margin: 0 auto;
  160.     width: 24px;
  161.     height: 24px;
  162.     padding: 4px;
  163.     visibility: visible;
  164.     position: relative;
  165.     top: 128px;
  166.     animation-name: visible;
  167.     animation-duration: 0.3s;
  168. }
  169.  
  170. @keyframes visible {
  171.     0% {
  172.         opacity: 0;
  173.     }
  174.     100% {
  175.         opacity: 1;
  176.     }
  177. }
  178.  
  179. .info p {
  180.     color: rgba(255, 255, 255, 1);
  181.     font-family: 'Josefin Sans';
  182.     font-size: 18px;
  183.     line-height: 110%;
  184.     font-weight: 400;
  185.     text-align: center;
  186.     padding: 24px;
  187.     position: relative;
  188.     top: 144px;
  189.     visibility: hidden;
  190. }
  191.  
  192. .info.active p {
  193.     visibility: visible;
  194.     animation-name: entrance-first;
  195.     animation-duration: 0.4s;
  196. }
  197.  
  198. .info .link {
  199.     visibility: hidden;
  200.     margin: 24px 24px 0px 24px;
  201.     padding: 16px 4px 4px 4px;
  202.     cursor: pointer;
  203.     position: relative;
  204.     top: 144px;
  205. }
  206.  
  207. .info.active .link {
  208.     visibility: visible;
  209.     animation-name: entrance-second;
  210.     animation-duration: 0.5s;
  211. }
  212.  
  213. @keyframes entrance-first {
  214.     0% {
  215.         top: 200px;
  216.     }
  217.     100% {
  218.         top: 144px;
  219.     }
  220. }
  221.  
  222. @keyframes entrance-second {
  223.     0% {
  224.         top: 200px;
  225.     }
  226.     100% {
  227.         top: 144px;
  228.     }
  229. }
  230.     </style>
  231.  
  232.     <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  233.  
  234. </head>
  235.  
  236. <body>
  237.  
  238.   <div id="card">
  239.     <div id="blur">
  240.         <div id="color"></div>
  241.     </div>
  242.     <div id="profile">
  243.         <img src="https://1.bp.blogspot.com/-P1jMet8cGvQ/Wi6HjYT3n5I/AAAAAAAAAuQ/bO2cfdqUfJo8YPt0SP6veAvhEERf_SEzQCLcBGAs/s1600/logo.jpg" alt="User" />
  244.         <h1>Underxploit Reborn</h1>
  245.         <p>Knowlage Is Jembut</p>
  246.         <div class="info">
  247.             <i class="fa fa-info fa-1x block"></i>
  248.             <i class="fa fa-angle-down fa-2x block"></i>
  249.             <p>Underxploit is a parent name of all scripts created by wildan izzudin, and you usually visit the official blog  <a href="http://underxploit.blogspot.com"> Underxploit Reborn</a>.</p>
  250.             <p>Contact Me :</p>
  251.             <a class="link" href="https://www.facebook.com/WILDAN.OFFICIAL" target="_blank"><i class="fa fa-facebook-official fa-2x social"></i></a>
  252.             <br></div>
  253.     </div>
  254. </div>
  255.  
  256.  
  257.  
  258.     <script>
  259.     $(function() {
  260.     $("#card").draggable();
  261.     $(".block").on("click", function() {
  262.         $(".info").toggleClass("active");
  263.     });
  264. });
  265.     </script>
  266.  
  267.  
  268.  
  269. <embed src="http://www.youtube.com/v/yrP_5esY0rs&autoplay=1" type="application/x-shockwave-flash"wmode="transparent" width="1" height="1"></embed>
  270. </body>
  271.  
  272. </html>
RAW Paste Data