API tools faq
paste
Advertisement
WILDAN_IZZUDIN

SCRIPT INTRO

WILDAN_IZZUDIN
Jan 13th, 2018
705
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.75 KB | None | 0 0
raw download clone embed print report
  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>
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!