Facebook
From artem, 1 Month ago, written in Python.
Embed
Download Paste or View Raw
Hits: 115
  1.  
  2. <!DOCTYPE html>
  3. &lt;html lang="en"&gt;
  4. &lt;head&gt;
  5.   &lt;meta charset="UTF-8"&gt;
  6.   &lt;meta name="viewport" c initial-scale=1.0"&gt;
  7.  &lt;title&gt;RedBall&lt;/title&gt;
  8.  &lt;style&gt;
  9.    .button-49,
  10. .button-49:after {
  11.  width: 150px;
  12.  height: 76px;
  13.  line-height: 78px;
  14.  font-size: 20px;
  15.  font-family: 'Bebas Neue', sans-serif;
  16.  background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
  17.  border: 0;
  18.  color: #fff;
  19.  letter-spacing: 3px;
  20.  box-shadow: 6px 0px 0px #00E6F6;
  21.  outline: transparent;
  22.  position: relative;
  23.  user-select: none;
  24.  -webkit-user-select: none;
  25.  touch-action: manipulation;
  26. }
  27.  
  28. .button-49:after {
  29.  --slice-0: inset(50% 50% 50% 50%);
  30.  --slice-1: inset(80% -6px 0 0);
  31.  --slice-2: inset(50% -6px 30% 0);
  32.  --slice-3: inset(10% -6px 85% 0);
  33.  --slice-4: inset(40% -6px 43% 0);
  34.  --slice-5: inset(80% -6px 5% 0);
  35.  
  36.  content: 'Ball???';
  37.  display: block;
  38.  position: absolute;
  39.  top: 0;
  40.  left: 0;
  41.  right: 0;
  42.  bottom: 0;
  43.  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
  44.  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  45.  clip-path: var(--slice-0);
  46. }
  47.  
  48. .button-49:hover:after {
  49.  animation: 1s glitch;
  50.  animation-timing-function: steps(2, end);
  51. }
  52.  
  53. @keyframes glitch {
  54.  0% {
  55.    clip-path: var(--slice-1);
  56.    transform: translate(-20px, -10px);
  57.  }
  58.  10% {
  59.    clip-path: var(--slice-3);
  60.    transform: translate(10px, 10px);
  61.  }
  62.  20% {
  63.    clip-path: var(--slice-1);
  64.    transform: translate(-10px, 10px);
  65.  }
  66.  30% {
  67.    clip-path: var(--slice-3);
  68.    transform: translate(0px, 5px);
  69.  }
  70.  40% {
  71.    clip-path: var(--slice-2);
  72.    transform: translate(-5px, 0px);
  73.  }
  74.  50% {
  75.    clip-path: var(--slice-3);
  76.    transform: translate(5px, 0px);
  77.  }
  78.  60% {
  79.    clip-path: var(--slice-4);
  80.    transform: translate(5px, 10px);
  81.  }
  82.  70% {
  83.    clip-path: var(--slice-2);
  84.    transform: translate(-10px, 10px);
  85.  }
  86.  80% {
  87.    clip-path: var(--slice-5);
  88.    transform: translate(20px, -10px);
  89.  }
  90.  90% {
  91.    clip-path: var(--slice-1);
  92.    transform: translate(-10px, 0px);
  93.  }
  94.  100% {
  95.    clip-path: var(--slice-1);
  96.    transform: translate(0);
  97.  }
  98. }
  99.    body {
  100.      margin: 0;
  101.      padding: 0;
  102.      font-family: Arial, sans-serif;
  103.      background-image: url('back.png');
  104.      background-size: cover;
  105.      background-position: center;
  106.      height: 100vh;
  107.    }
  108.  
  109.    .container {
  110.      text-align: center;
  111.    }
  112.  
  113.    button {
  114.      padding: 10px 20px;
  115.      font-size: 18px;
  116.      border: none;
  117.      border-radius: 5px;
  118.      background-color: #4CAF50;
  119.      color: white;
  120.      margin: 10px;
  121.      cursor: pointer;
  122.    }
  123.    @media (min-width: 768px) {
  124.  .button-49,
  125.  .button-49:after {
  126.    width: 200px;
  127.    height: 86px;
  128.    line-height: 88px;
  129.  }  
  130. }
  131.  
  132.    button:hover {
  133.      background-color: #45a049;
  134.    }
  135.    .upcenter {
  136.      
  137.  position: absolute;
  138.  top: 30%;
  139.  left: 50%;
  140.  transform: translate(-50%, -50%);
  141.  padding: 10px;
  142. }
  143.    .center {
  144.    display: flex;
  145.    align-items: center;
  146.    justify-content: center;
  147.    height: 100%;
  148.        width: 100%;
  149. }
  150.  
  151.    h1 {
  152.      font-size: 2em; /* Adjust font size as needed */
  153.      color: #fff; /* Change color to match your design */
  154.    }
  155.    
  156. :root {
  157.  --size: 3;
  158.  --skew: 7;
  159.  --orange: hsl(20, 100%, 71%);
  160.  --svgfilter: url(#squiggly-0);
  161.  --boxshadow: rgb(22, 12, 3);
  162.  --textshadow: rgb(42, 22, 23);
  163.  --noise-image: url([removed]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);
  164. }
  165. @media only screen and (max-width: 600px) {
  166.  :root {
  167.    --size: 2;
  168.  }
  169. }
  170. @media only screen and (max-width: 400px) {
  171.  :root {
  172.    --size: 1.4;
  173.  }
  174. }
  175. .lightning {
  176.  display: flex;
  177.  position: relative;
  178.  margin: 4vmin;
  179.  filter: var(--svgfilter);
  180.  span {
  181.    color: black;
  182.    letter-spacing: calc(var(--size) * 1vmin);
  183.    font-size: 1rem;
  184.    padding: calc(0.5 * 1rem) 0 0 0;
  185.    margin-right: -1rem;
  186.    text-align: left;
  187.    text-shadow: none;
  188.  }
  189.  > * {
  190.    margin: 0;
  191.    flex-grow: 1;
  192.    display: flex;
  193.    justify-content: center;
  194.    flex-direction: column;
  195.    padding: calc(var(--size) * 0.8vmin) calc(var(--size) * 1.6vmin);
  196.    background: rgba(#f4e205, 1);
  197.  
  198.    transform: skew(calc(var(--skew) * -1deg), calc(var(--skew) * -1deg));
  199.    font-size: calc(var(--size) * 3vmax);
  200.    font-weight: 700;
  201.    color: Crimson;
  202.  
  203.    text-transform: uppercase;
  204.    text-align: right;
  205.    border: 3px solid var(--boxshadow);
  206.    border-left: 0;
  207.    text-shadow: var(--textshadow) 0px 0px 0px,
  208.      var(--textshadow) 0.669131px 0.743145px 0px,
  209.      var(--textshadow) 1.33826px 1.48629px 0px,
  210.      var(--textshadow) 2.00739px 2.22943px 0px,
  211.      var(--textshadow) 2.67652px 2.97258px 0px,
  212.      var(--textshadow) 3.34565px 3.71572px 0px,
  213.      var(--textshadow) 4.01478px 4.45887px 0px,
  214.      var(--textshadow) 4.68391px 5.20201px 0px;
  215.    box-shadow: var(--border) 0px 0px 0px,
  216.      var(--boxshadow) 0.819152px 0.573576px 0px,
  217.      var(--boxshadow) 1.6383px 1.14715px 0px,
  218.      var(--boxshadow) 2.45746px 1.72073px 0px,
  219.      var(--boxshadow) 3.27661px 2.29431px 0px,
  220.      var(--boxshadow) 4.09576px 2.86788px 0px,
  221.      var(--boxshadow) 4.91491px 3.44146px 0px,
  222.      var(--boxshadow) 5.73406px 4.01504px 0px,
  223.      var(--boxshadow) 6.55322px 4.58861px 0px,
  224.      var(--boxshadow) 7.37237px 5.16219px 0px,
  225.      var(--boxshadow) 8.19152px 5.73576px 0px,
  226.      var(--boxshadow) 9.01067px 6.30934px 0px,
  227.      var(--boxshadow) 9.82982px 6.88292px 0px,
  228.      var(--boxshadow) 10.649px 7.45649px 0px,
  229.      var(--boxshadow) 11.4681px 8.03007px 0px;
  230.    &:last-child {
  231.      left: calc(var(--size) * -1vmin);
  232.      position: relative;
  233.      text-align: left;
  234.     font-size: 8vmin;
  235.      span {
  236.        border-top: 1px solid;
  237.      }
  238.    }
  239.  }
  240. }
  241.  
  242. .bg {
  243.  position: absolute;
  244.  top: -5vh;
  245.  left: 0;
  246.  z-index: -1;
  247.  width: 100vw;
  248.  height: auto;
  249. }
  250. .orange {
  251.  background-color: var(--orange);
  252. }
  253.  
  254. .noisy {
  255.  background-image: var(--noise-image);
  256. }
  257.  
  258. svg {
  259.  height: 1px;
  260. }
  261.  &lt;/style&gt;
  262. &lt;/head&gt;
  263. &lt;body&gt;  
  264.  <div class="upcenter">
  265.    <div class="lightning">
  266.      <div class="noisy">
  267.        <span></span>
  268.        Red
  269.      </div>
  270.      <div class="noisy">
  271.        Ball
  272.        <span>SOL?</span>
  273.      </div>
  274.    </div>
  275.  </div>
  276.  
  277.  <div class="center">
  278.    <button class="button-49" role="button" >DEX</button>
  279.    <button class="button-49" role="button" >TG</button>
  280.  </div>
  281.  [removed]
  282.    function redirectToDEX() {
  283.      [removed].href = 'https://example.com/dex'; // Replace 'https://example.com/dex' with the actual link for DEX
  284.    }
  285.  
  286.    function redirectToTG() {
  287.      [removed].href = 'https://t.me/redballsol'; // Replace 'https://example.com/tg' with the actual link for TG
  288.    }
  289.  [removed]
  290. &lt;/body&gt;
  291. &lt;/html&gt;
  292. &lt;!-- HTML !--&gt;
  293.    
  294.  
  295.  
  296.  
  297.