Ledger Nano X - The secure hardware wallet
SHARE
TWEET

Teste

a guest Mar 26th, 2020 113 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3.   <head>
  4.  
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.    
  8.         <!-- Dependencias slick-->
  9.    
  10.         <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  11.         <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  12.         <script type="text/javascript" src="slick/jquery-1.11.0.min.js"></script>
  13.         <script type="text/javascript" src="slick/jquery-migrate-1.2.1.min.js"></script>
  14.         <script type="text/javascript" src="slick/slick.min.js"></script>
  15.         <script type="text/javascript" src="slick/slick.js"></script>
  16.    
  17.         <title>Toste</title>
  18.     <head>
  19.    
  20.     <body>
  21.    
  22.         <div class="container">
  23.             <div class="hero__title" id="animatedHeading">
  24.                 <div class="slick-dupe"><span class="hero__title-misc  |  animate">111111111111</span></div>
  25.                 <div class="slick-dupe"><span class="hero__title-misc  |  animate">222222222222</span></div>
  26.                 <div class="slick-dupe"><span class="hero__title-misc  |  animate">333333333333</span></div>
  27.                 <div class="slick-dupe"><span class="hero__title-misc  |  animate">444444444444</span></div>
  28.                 <div class="slick-dupe"><span class="hero__title-misc  |  animate">555555555555</span></div>
  29.             </div>
  30.     </div>
  31.  
  32.  
  33.  
  34. <style>
  35.  
  36. /**
  37.  * Title:
  38.  *    Animations
  39.  * Description:
  40.  *    List all the animations of the site in one file
  41.  * Sections:
  42.  *    $. Keyframes
  43.  *    $. Classes
  44.  */
  45.  
  46.  
  47.  
  48. /* $. Keyframes
  49. \*----------------------------------------------------------------*/
  50.  
  51.  
  52. @keyframes shrink {
  53.     0% {
  54.         color: green;
  55.         transform: scale(2);
  56.     }
  57.  
  58.     100% {
  59.         transform: scale(1);
  60.         color: yellow;
  61.     }
  62. }
  63.  
  64. @keyframes grow {
  65.     0% {
  66.         transform: scale(1);
  67.         color: blue;
  68.     }
  69.  
  70.     100% {
  71.         transform: scale(2);
  72.         color: green;
  73.     }
  74. }
  75.  
  76.  
  77. /* $. Classes
  78. \*----------------------------------------------------------------*/
  79.  
  80. .animate {
  81.     transform: translate3d(0,0,0);
  82.     perspective: 1000;
  83.     filter: blur(0);
  84.     animation-iteration-count: 1;
  85.     animation-fill-mode: forwards;
  86.     transform-origin: center left;
  87.  
  88. }
  89.  
  90. .animate--shrink {
  91.     animation-duration: 1s;
  92.     animation-name: shrink;
  93.     animation-timing-function: 'linear';
  94. }
  95.  
  96. .animate--grow {
  97.     animation-duration: 1s;
  98.     animation-timing-function: 'linear';
  99.     animation-name: grow;
  100. }
  101.  
  102.  
  103. /* Slider */
  104.  
  105. .slick-slider {
  106.     position: relative;
  107.     display: block;
  108.     box-sizing: border-box;
  109.     touch-callout: none;
  110.     user-select: none;
  111.     touch-action: pan-y;
  112.     tap-highlight-color: transparent;
  113.         padding-top: 40px;
  114.    
  115. }
  116. .slick-list {
  117.     position: relative;
  118.     overflow: hidden;
  119.     display: block;
  120.     margin: 0;
  121.     padding: 0;
  122.  
  123.     &:focus {
  124.        outline: none;
  125.     }
  126.  
  127.     &.dragging {
  128.        cursor: pointer;
  129.         cursor: hand;
  130.     }
  131. }
  132. .slick-slider .slick-track,
  133. .slick-slider .slick-list {
  134.     transform: translate3d(0, 0, 0);
  135. }
  136.  
  137. .slick-track {
  138.     position: relative;
  139.     left: 0;
  140.     top: 0;
  141.     display: block;
  142.  
  143.     &:before,
  144.    &:after {
  145.        content: "";
  146.         display: table;
  147.     }
  148.  
  149.     &:after {
  150.        clear: both;
  151.     }
  152.  
  153.     .slick-loading & {
  154.        visibility: hidden;
  155.     }
  156. }
  157. .slick-slide {
  158.     float: left;
  159.     height: 100%;
  160.     min-height: 1px;
  161.     [dir="rtl"] & {
  162.        float: right;
  163.     }
  164.     img {
  165.         display: block;
  166.     }
  167.     &.slick-loading img {
  168.        display: none;
  169.     }
  170.  
  171.     display: none;
  172.  
  173.     &.dragging img {
  174.        pointer-events: none;
  175.     }
  176.  
  177.     .slick-initialized & {
  178.        display: block;
  179.     }
  180.  
  181.     .slick-loading & {
  182.        visibility: hidden;
  183.     }
  184.  
  185.     .slick-vertical & {
  186.        display: block;
  187.         height: auto;
  188.         border: 0;
  189.         outline: none;
  190.  
  191.         &:focus,
  192.        &:active,
  193.        &::selection{
  194.            outline: none !important;
  195.             border: 0 !important;
  196.             box-shadow: none;
  197.         }
  198.     }
  199. }
  200. .slick-arrow.slick-hidden {
  201.     display: none;
  202. }
  203.  
  204. .slick-current{
  205.     position: relative;
  206. }
  207.  
  208.  
  209. .hero__title .slick-slide{
  210.     overflow: hidden;
  211.         padding: 20px 0;
  212.    
  213. }
  214.  
  215. .hero__title [aria-hidden]{
  216.     transition: 1s;
  217. }
  218. /*
  219. .hero__title [aria-hidden="false"]{
  220.     opacity: 1;
  221. }
  222.  
  223. .hero__title [aria-hidden="true"] {
  224.     opacity: 0;
  225. }
  226.  */
  227. .hero__title .slick-current > span{
  228.     box-sizing: border-box;
  229.     display: block;
  230.     @extend .animate--shrink;
  231. }
  232.  
  233. .hero__title .slick-current + .slick-slide > span{
  234.     @extend .animate--grow;
  235. }
  236.  
  237. .no-js .hero__title .slick-dupe:nth-child(2) > span{
  238.     padding: 1em;
  239.     @extend .animate--grow;
  240. }
  241.  
  242.  
  243.  
  244. .hero__title-misc{
  245.   display: block;
  246.   font-size: 24px;
  247.   font-weight: bold;
  248.   color: grey;
  249. }
  250.  
  251.  
  252. .container{
  253.   margin: 0 auto;
  254.   width: 500px;
  255.   background: pink;
  256.   padding: 0 40px;
  257. }
  258.  
  259. </style>
  260.  
  261.     <script>
  262.         // Get titles from the DOM
  263.         var titleMain  = $("#animatedHeading");
  264.         var titleSubs  = titleMain.find("slick-active");
  265.  
  266.         if (titleMain.length) {
  267.  
  268.           titleMain.slick({
  269.             autoplay: false,
  270.             arrows: false,
  271.             dots: false,
  272.             slidesToShow: 3,
  273.             centerPadding: "10px",
  274.             draggable: false,
  275.             infinite: true,
  276.             pauseOnHover: false,
  277.             swipe: false,
  278.             touchMove: false,
  279.             vertical: true,
  280.             verticalScrolling: true,
  281.             speed: 1000,
  282.             autoplaySpeed: 2000,
  283.             useTransform: true,
  284.             cssEase: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
  285.             adaptiveHeight: true
  286.           });
  287.  
  288.           // On init
  289.           $(".slick-dupe").each(function(index, el) {
  290.             $("#animatedHeading").slick('slickAdd', "<div>" + el.innerHTML + "</div>");
  291.           });
  292.  
  293.           // Manually refresh positioning of slick
  294.           titleMain.slick('slickPlay');
  295.         };
  296.     </script>
  297.  
  298.     </body>
  299. </html>
RAW Paste Data
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
Top