API tools faq
paste
RyukiChan

P

RyukiChan
May 31st, 2020
105
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.58 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>km1bok</title>
  5.         <meta charset="utf-8">
  6.         <link rel="icon" href="https://gamepedia.cursecdn.com/minecraft_gamepedia/2/2d/Impulse_Command_Block_Revision_1.png?version=575ff98fb9a1f2c816a82f8f044d5be5">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  8.         <style type="text/css">
  9.  
  10.  
  11.         /** Regular */
  12.         @font-face {
  13.           font-family: "SF Display";
  14.           font-weight: 400;
  15.           src: url("https://sf.abarba.me/SF-UI-Display-Regular.otf");
  16.         }
  17.         /** Semibold */
  18.         @font-face {
  19.           font-family: "SF Display";
  20.           font-weight: 600;
  21.           src: url("https://sf.abarba.me/SF-UI-Display-Semibold.otf");
  22.         }
  23.  
  24.         /** Thin */
  25.         @font-face {
  26.           font-family: "SF Display";
  27.           font-weight: 300;
  28.           src: url("https://sf.abarba.me/SF-UI-Display-Thin.otf");
  29.         }
  30.         /** Bold */
  31.         @font-face {
  32.           font-family: "SF Display";
  33.           font-weight: 700;
  34.           src: url("https://sf.abarba.me/SF-UI-Display-Bold.otf");
  35.         }
  36.         /* width */
  37.         ::-webkit-scrollbar {
  38.           width: 10px;
  39.         }
  40.  
  41.         /* Track */
  42.         ::-webkit-scrollbar-track {
  43.           background: #F1F1F1;
  44.           border-radius: 5px;
  45.         }
  46.  
  47.         /* Handle */
  48.         ::-webkit-scrollbar-thumb {
  49.           background: #9EAEBA;
  50.           border-radius: 5px;
  51.         }
  52.  
  53.         /* Handle on hover */
  54.         ::-webkit-scrollbar-thumb:hover {
  55.           background: #8A9CA5;
  56.         }
  57.         *{
  58.             font-family: SF Display;
  59.             cursor: default;
  60.             -webkit-user-select: none;
  61.             -khtml-user-select: none;
  62.             -moz-user-select: none;
  63.             -ms-user-select: none;
  64.             -o-user-select: none;
  65.             user-select: none;
  66.         }
  67.         a{
  68.             text-decoration: none;
  69.             color: unset;
  70.         }
  71.         body{
  72.             padding: 0px;
  73.             margin: 0px;
  74.             overflow: hidden;
  75.             height: 100vh;
  76.             width: 100vw;
  77.         }
  78.         .container{
  79.             position: absolute;
  80.             background: #FFFFFF;
  81.             height: 100%;
  82.             width: 100%;
  83.         }
  84.         .sideBar{
  85.             position: absolute;
  86.             height: 100vh;
  87.             width: 40vw;
  88.             max-width: 600px;
  89.             background: #59548D;
  90.             right: 0;
  91.             border-radius: 600px 0px 0px 300px;
  92.         }
  93.         .contSideBar{
  94.             position: absolute;
  95.             height: 100vh;
  96.             width: 50vw;
  97.             right: 0;
  98.             z-index: 1;
  99.             transition: all ease 1s;
  100.         }
  101.         .header{
  102.             position: absolute;
  103.             z-index: 1;
  104.             width: 100%;
  105.             height: 200px;
  106.             top: 0px;
  107.             transition: all ease 0.3s;
  108.         }
  109.         .header .bg{
  110.             position: absolute;
  111.             width: 100%;   
  112.             font-size: 9vw;
  113.             color: #B0BFCC;
  114.             font-weight: 600;
  115.             left: -3vw;
  116.         }
  117.         .header .fg{
  118.             position: absolute;
  119.             font-size: 3vw;
  120.             font-weight: 600;
  121.             width: 90vw;
  122.             left: 7vw;
  123.             top: 8vw;
  124.         }
  125.         .footer{   
  126.             position: absolute;
  127.             height: 90px;
  128.             width: 100vw;
  129.             background: #6268AD;
  130.             bottom: 0px;
  131.             transition: all ease 0.5s;
  132.         }
  133.         .footext{
  134.             position: absolute;
  135.             width: 100vw;
  136.             height: 90px;
  137.             font-weight: 700;
  138.             font-size: 99px;
  139.             line-height: 90px;
  140.             color: rgba(61, 64, 125, 0.6);
  141.             left: 50px;
  142.         }
  143.         .email{
  144.             position: absolute;
  145.             background: #FBD753;
  146.             border-radius: 10px;
  147.             width: 350px;
  148.             height: 45px;
  149.             font-size: 18px;
  150.             font-weight: 700;
  151.             text-align: center;
  152.             line-height: 45px;
  153.             left: 50%;
  154.             transform: translate(-50%, calc(90px / 2 - 45px / 2));
  155.             z-index: 1;
  156.         }
  157.         .content{
  158.             position: absolute;
  159.             width: 50vw;
  160.             height:calc(100vh - 25vw);
  161.             margin-top: 15vw;
  162.             margin-bottom: 150px;
  163.             z-index: 2;
  164.             transition: all ease 0.8s;
  165.             left: 0;
  166.         }
  167.         .judul{
  168.             position: absolute;
  169.             width: 344px;
  170.             height: 57px;
  171.             line-height: 57px;
  172.             background: #FBD753;
  173.             border-radius: 0px 28.5px 28.5px 0px;
  174.             font-size: 18px;
  175.             font-weight: 700;
  176.             text-align: right;
  177.             margin-left: -70px;
  178.             padding-right: 70px;
  179.         }
  180.         .listcont{
  181.             position: absolute;
  182.             height: calc(100vh - 25vw - 100px);
  183.             width: calc(50vw - 100px);
  184.             bottom: 0;
  185.             right: 0;
  186.             overflow-y: scroll;
  187.         }
  188.         .list{
  189.             position: relative;
  190.             width: calc(50vw - 130px);
  191.             bottom: 0;
  192.             left: 0;
  193.             text-align: right;
  194.         }
  195.         .list .box{
  196.             margin: 10px;
  197.             position: relative;
  198.             display: inline-block;
  199.             width: 200px;
  200.             width: 18vw;
  201.             height: 9vw;
  202.             border-radius: 1vw;
  203.             background: #F1F1F1;
  204.             text-align: center;
  205.             line-height: 9vw;
  206.             font-size: 18px;
  207.             box-shadow: 0px 0px 0px #00000000;
  208.             transition: all ease 0.3s;
  209.         }
  210.         .list .box:hover{
  211.             box-shadow: 0px 0px 20px #00000030;
  212.             transform: scale(1.01);
  213.             cursor: pointer;
  214.         }
  215.         .list .box:active{
  216.             transform: scale(0.99);
  217.         }
  218.         .mac{          
  219.             background: linear-gradient(90deg, rgba(61,76,168,1) -10%, rgba(69,104,255,1) 20%, rgba(255,168,252,1) 100%) !important;
  220.             color:#FFF;    
  221.         }
  222.         .clk{
  223.             background: linear-gradient(0deg, rgba(255,230,113,1) 0%, rgba(82,167,255,1) 100%) !important;
  224.         }
  225.         img{
  226.             position: absolute;
  227.         }
  228.         .hideright{
  229.             right: -50vw;
  230.         }
  231.         .hideleft{
  232.             left: calc(-50vw);
  233.         }
  234.         .hidetop{
  235.             top: -250px;
  236.         }
  237.         .hidebottom{
  238.             bottom: -100px;
  239.         }
  240.         @media all and (max-width: 1024px){
  241.             .header .bg{
  242.                 position: absolute;
  243.                 width: 1000px; 
  244.                 font-size: 100px;
  245.                 color: #B0BFCC;
  246.                 font-weight: 600;
  247.                 left: -31px;
  248.             }
  249.             .header .fg{
  250.                 position: absolute;
  251.                 font-size: 50px;
  252.                 font-weight: 600;
  253.                 width: 90vw;
  254.                 left: 30px;
  255.                 top: 50px;
  256.             }
  257.             .contSideBar{
  258.                 display: none;
  259.             }
  260.             .content{
  261.                 width: 100vw;
  262.                 height:calc(100vh - 11vw - 100px);
  263.                 margin-top: 100px;
  264.             }
  265.             .judul{
  266.                 height: 40px;
  267.                 line-height: 40px;
  268.             }
  269.             .listcont{
  270.                 position: absolute;
  271.                 height: calc(100vh - 270px);
  272.                 width: calc(100vw);
  273.                 bottom: 0;
  274.                 right: 0;
  275.                 top: 50px;
  276.                 overflow-y: scroll;
  277.                 /*background: #fee;*/
  278.             }
  279.             .list{
  280.                 position: relative;
  281.                 width: calc(100% - 30px);
  282.                 bottom: 0;
  283.                 left: 0;
  284.                 text-align: right;
  285.             }
  286.             .list .box{
  287.                 margin: 10px;
  288.                 position: relative;
  289.                 display: inline-block;
  290.                 width: 400px;
  291.                 height: 200px;
  292.                 border-radius: 1vw;
  293.                 background: #F1F1F1;
  294.                 text-align: center;
  295.                 line-height: 200px;
  296.                 font-size: 25px;
  297.                 box-shadow: 0px 0px 0px #00000000;
  298.                 transition: all ease 0.3s;
  299.             }
  300.             .footer{
  301.                 height: 50px;
  302.             }
  303.             .footext{
  304.                 position: absolute;
  305.                 width: 100vw;
  306.                 height: 50px;
  307.                 font-weight: 700;
  308.                 font-size: 50px;
  309.                 line-height: 50px;
  310.                 left: 10px;
  311.             }
  312.             .email{
  313.                 position: absolute;
  314.                 background: #FBD753;
  315.                 border-radius: 10px;
  316.                 width: 220px;
  317.                 height: 30px;
  318.                 font-size: 12px;
  319.                 font-weight: 700;
  320.                 text-align: center;
  321.                 line-height: 30px;
  322.                 left: 50%;
  323.                 transform: translate(-50%, calc(50px / 2 - 30px / 2));
  324.                 z-index: 1;
  325.             }
  326.             .hideleft{
  327.                 left: calc(-100vw);
  328.             }
  329.         }
  330.         @media all and (max-width: 438px){
  331.             body *{
  332.                 display: none;
  333.             }
  334.             body:after{
  335.                 content: 'layar hp anda tidak bisa menampilkan halaman';
  336.                 text-align: center;
  337.                 position: absolute;
  338.                 height: 100vh;
  339.                 font-size: 20px;
  340.                 top: calc(50% - 10px);
  341.             }
  342.         }
  343.         .loader {
  344.             border: 8px solid #f3f3f3;
  345.             border-radius: 50%;
  346.             border-top: 8px solid #4287f5;
  347.             border-right: 8px solid #FFF;
  348.             border-bottom: 8px solid #4287f5;
  349.             border-left: 8px solid #FFF;
  350.             width: 40px;
  351.             height: 40px;
  352.             -webkit-animation: spin 1.5s ease infinite;
  353.             animation: spin 1.5s ease infinite;
  354.             position: absolute;
  355.             left: calc(50% - 20px);
  356.             top: calc(50% - 20px);
  357.             z-index: 10;
  358.         }
  359.         @-webkit-keyframes spin {
  360.             0% { -webkit-transform: rotate(0deg); }
  361.             100% { -webkit-transform: rotate(360deg); }
  362.         }
  363.         @keyframes spin {
  364.             0% { transform: rotate(0deg); }
  365.             100% { transform: rotate(360deg); }
  366.         }
  367.       </style>
  368.     </head>
  369.     <body>
  370.         <div class="loader"></div>
  371.         <div class="container">
  372.             <div class="header hidetop">
  373.                 <div class="bg">km1bok</div>
  374.                 <div class="fg">km1bok</div>
  375.             </div>
  376.             <div class="content hideleft">
  377.                 <div class="judul">My Works:</div>
  378.                 <div class="listcont">
  379.                     <div class="list">
  380.                         <a href="somebody" target="_blank" class="box mac">MacOS Style</a>
  381.                         <a href="clock" target="_blank" class="box clk">Clock</a>
  382.                         <div class="box">soon</div>
  383.                         <div class="box">soon</div>
  384.                         <div class="box">soon</div>
  385.                         <div class="box">soon</div>
  386.                         <div class="box">soon</div>
  387.                         <div class="box">soon</div>
  388.                     </div>
  389.                 </div>
  390.             </div>
  391.             <div class="contSideBar hideright">
  392.                 <div class="sideBar"></div>
  393.                 <img src="image.svg" alt="illustration" height="100%" width="100%" onmousedown="return false"/>
  394.             </div>
  395.             <div class="footer hidebottom">
  396.                 <div class="footext">made by km1bok❤</div>
  397.                 <div class="email">kecikmbledos@gmail.com</div>
  398.             </div>
  399.         </div>
  400.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  401.     </body>
  402.     <script type="text/javascript">
  403.         function init(){
  404.             $('.contSideBar').toggleClass("hideright");
  405.             $('.content').toggleClass("hideleft");
  406.             $('.header').toggleClass("hidetop");
  407.             $('.footer').toggleClass("hidebottom");
  408.             $(".loader").remove();
  409.         }
  410.         $(window).on('load',function(){
  411.             if(window.btoa($('.fg').text())!='a20xYm9r'){
  412.                 $('body').remove();
  413.             }
  414.             init();
  415.         });
  416.     </script>
  417. </html>
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!