Facebook

Re: Re: Re: ticket safest cryptocurrency exchange

From ash, 6 Months ago, written in HTML5.
This paste is a reply to Re: Re: ticket from ash - view diff
URL https://pastebin.pl/view/8f8c90c7
Embed
Download Paste or View Raw
Hits: 234
  1. <html lang="en">
  2.  
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" c initial-scale=1.0">
  6.   <link rel="preconnect" href="https://fonts.googleapis.com">
  7.   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  8.   >
  9.   <title>Ticket</title>
  10.   <style>
  11.     @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500&family=Inclusive+Sans&family=Montserrat:wght@300;400;500&family=Open+Sans:wght@300&display=swap');
  12.     /* Define styles for .ticket class */
  13.    
  14.     html {
  15.       -webkit-print-color-adjust: exact;
  16.     }
  17.    
  18.     .ticket {
  19.       max-width: 100%;
  20.       display: flex;
  21.       font-family: Roboto;
  22.       margin: 16px;
  23.       border: 1px solid grey;
  24.       position: relative;
  25.     }
  26.  
  27.     /* Define styles for the ticket corners */
  28.      
  29.  
  30.     .ticket:after {
  31.       content: '';
  32.       width: 32px;
  33.       height: 32px;
  34.       background-color: #fff;
  35.       border: 1px solid grey;
  36.       position: absolute;
  37.       border-radius: 50%;
  38.       border: 1px solid grey;
  39.       border-top-color: transparent;
  40.       border-left-color: transparent;
  41.       top: 50%;
  42.       margin-top: -16px;
  43.       border-radius: 50%;
  44.       transform: rotate(135deg);
  45.       right: -18px;
  46.       top: 50%;
  47.       margin-top: -16px;
  48.     }
  49.  
  50.     .ticket--end:before {
  51.       content: '';
  52.       width: 32px;
  53.       height: 32px;
  54.       background-color: #fff;
  55.       border: 1px solid grey;
  56.       position: absolute;
  57.       border-radius: 50%;
  58.       border: 1px solid grey;
  59.       border-bottom-color: transparent;
  60.       border-top-color: transparent;
  61.       border-right-color: transparent;
  62.       top: 50%;
  63.       margin-top: -16px;
  64.       border-radius: 50%;
  65.       transform: rotate(135deg);
  66.       right: -18px;
  67.       top: 50%;
  68.       margin-top: -16px;
  69.     }
  70.  
  71.     .ticket--end:after {
  72.       content: '';
  73.       width: 32px;
  74.       height: 32px;
  75.       background-color: #fff;
  76.       border: 1px solid grey;
  77.       position: absolute;
  78.       border-radius: 50%;
  79.       border: 1px solid grey;
  80.       border-right-color: transparent;
  81.       border-left-color: transparent;
  82.       border-bottom-color: transparent;
  83.       top: 50%;
  84.       margin-top: -16px;
  85.       border-radius: 50%;
  86.       transform: rotate(135deg);
  87.       right: -18px;
  88.       top: 50%;
  89.       margin-top: -16px;
  90.  
  91.     }
  92.  
  93.  
  94.     /* Define styles for .ticket--center class */
  95.     .ticket--center {
  96.       max-width: 100%;
  97.       display: flex;
  98.       flex-direction: column;
  99.       gap: 15px;
  100.     }
  101.  
  102.     .ticket--center--row {
  103.       display: flex;
  104.     }
  105.  
  106.     .ticket--center--row:not(:last-child) {
  107.       padding-bottom: 48px;
  108.     }
  109.  
  110.     .ticket--center--row:first-child span {
  111.       color: #4872b0;
  112.       /* Updated color */
  113.       text-transform: uppercase;
  114.       line-height: 24px;
  115.       font-size: 13px;
  116.       font-weight: 500;
  117.     }
  118.  
  119.     .ticket--center--row strong {
  120.       font-size: 20px;
  121.       font-weight: 400;
  122.       text-transform: uppercase;
  123.     }
  124.  
  125.     .ticket--center--col {
  126.       display: flex;
  127.       flex: 1;
  128.       width: 50%;
  129.       box-sizing: border-box;
  130.     }
  131.  
  132.     .ticket--center--col:not(:last-child) {
  133.       padding-right: 16px;
  134.     }
  135.  
  136.     /* Define styles for .ticket--end class */
  137.     .ticket--end {
  138.       width: auto;
  139.       background-color: #faae4d;
  140.       padding: 50px;
  141.       display: flex;
  142.       flex-direction: column;
  143.       gap: 20px;
  144.       position: relative;
  145.       align-items: center;
  146.     }
  147.  
  148.     .ticket--end:before {
  149.       transform: rotate(-45deg);
  150.       right: -18px;
  151.       top: -2px;
  152.       margin-top: -16px;
  153.     }
  154.  
  155.     .ticket--end:after {
  156.       transform: rotate(-45deg);
  157.       right: -18px;
  158.       top: 100%;
  159.       margin-top: -16px;
  160.     }
  161.  
  162.     .ticket--end>div:first-child {
  163.       flex: 1;
  164.     }
  165.  
  166.     .ticket--end>div:first-child>img {
  167.       width: 128px;
  168.       padding: 4px;
  169.     }
  170.  
  171.     .ticket--end>div:last-child>img {
  172.       display: block;
  173.       margin: 0 auto;
  174.       filter: brightness(2);
  175.       opacity: 1;
  176.     }
  177.  
  178.     /* Define styles for .ticket--info classes */
  179.     .ticket--info--title {
  180.       text-transform: uppercase;
  181.       color: #757575;
  182.       font-size: 13px;
  183.       line-height: 24px;
  184.       font-weight: 600;
  185.       white-space: nowrap;
  186.       overflow: hidden;
  187.       text-overflow: ellipsis;
  188.     }
  189.  
  190.     .ticket--info--subtitle {
  191.       font-size: 16px;
  192.       line-height: 24px;
  193.       font-weight: 500;
  194.       color: #4872b0;
  195.       /* Updated color */
  196.       white-space: nowrap;
  197.       overflow: hidden;
  198.       text-overflow: ellipsis;
  199.     }
  200.  
  201.     .ticket--info--content {
  202.       font-size: 13px;
  203.       line-height: 24px;
  204.       font-weight: 500;
  205.       white-space: wrap;
  206.       overflow: hidden;
  207.       text-overflow: ellipsis;
  208.       color: #082f3d;
  209.     }
  210.  
  211.     /* Define styles for specific text classes */
  212.     .orange-text {
  213.       color: #A73121;
  214.       font-weight: 500;
  215.       font-size: 19px;
  216.       font-family: 'sans-serif';
  217.     }
  218.  
  219.     .yellow-text {
  220.       color: black;
  221.       font-weight: 400;
  222.       font-size: 20px;
  223.       font-family: 'sans-serif';
  224.     }
  225.  
  226.     .opacity-text {
  227.       font-family: monospace;
  228.       font-size: 14px;
  229.       font-weight: 500;
  230.     }
  231.  
  232.     .date-text {
  233.       font-weight: 500;
  234.       font-size: 14px;
  235.       /* font-style: oblique; */
  236.       /* font-family: fantasy; */
  237.     }
  238.  
  239.     .details-location {
  240.       color: black;
  241.       font-size: 15px;
  242.     }
  243.  
  244.     #dynamic-segment {
  245.       white-space: pre-wrap;
  246.       word-wrap: break-word;
  247.     }
  248.   </style>
  249. </head>
  250.  
  251. <body  fit-content; font-family: 'Open Sans', sans-serif;">
  252.   <div
  253.      flex; justify-content:space-between; align-items: center; gap: 60px; font-family: 'Open Sans', sans-serif;"
  254.    class="ticket">
  255.     <div class="ticket--center">
  256.       <div  flex; flex-direction: column; gap: 20px; padding: 20px 10px 20px 30px ; width: 100%">
  257.         <div>
  258.           <span  flex; flex-direction: column;" class="yellow-text">Event Pass</span>
  259.           <strong class="orange-text">EVENTSPARK</strong>
  260.         </div>
  261.         <div  flex; flex-direction: column;">
  262.           <span class="ticket--info--title opacity-text">Date and time</span>
  263.           <span class="ticket--info--content">{month} {day} {year}</span>
  264.         </div>
  265.         <div class="  flex; flex-direction: column;">
  266.           <span class="ticket--info--title opacity-text">Segment name</span>
  267.           <span id="dynamic-segment" class="ticket--info--content">{segment}</span>
  268.           &lt;!-- script --&gt;
  269.           &lt;!-- [removed]
  270.             const dynamicText = "This is the dynamically generated text.";
  271.               document.getElementById("dynamic-segment")[removed] = dynamicText;
  272.               dynamicSegment.style.whiteSpace = 'pre-wrap';
  273.               dynamicSegment.style.wordWrap = 'break-word';
  274.           [removed] --&gt;
  275.         </div>
  276.         <div>
  277.           <div  flex; flex-direction: column;">
  278.             <span class="ticket--info--title opacity-text">Participant Id</span>
  279.             <span class="ticket--info--content">{p_id}</span>
  280.             <span class="ticket--info--title opacity-text">Participant Email</span>
  281.             <span class="ticket--info--content">{p_email}</span>
  282.           </div>
  283.         </div>
  284.       </div>
  285.     </div>
  286.     <div  flex; flex-direction: column; gap: 10px; padding: 10px; align-items:center;">
  287.         <div  80%; height:fit-content;  ">
  288.           <img   src="{host_logo}" />
  289.  
  290.         </div>
  291.         <div class="flex; flex-direction: column; gap: 10px;">
  292.           <div  flex; flex-direction: column; gap: 10px;">
  293.             <span class="ticket--info--title opacity-text">Location</span>
  294.             <div  flex; flex-direction: column;">
  295.               <span class="ticket--info--subtitle yellow-text">{location}</span>
  296.               <span class="ticket--info--content" id="dynamic-segment"  black;
  297.      font-size: 15px;">{location 2}</span>
  298.             </div>
  299.           </div>
  300.         </div>
  301.     </div>
  302.     <div class="ticket--end">
  303.       <div>
  304.         <img src="{qrcodeUrl}">
  305.       </div>
  306.       <div  flex; flex-direction:column; align-items: center;">
  307.         <div>
  308.           <img
  309.              
  310.            src="https://res.cloudinary.com/dvzj3k20y/image/upload/v1695383055/Screenshot_2023-09-22_at_5.38.56_PM-removebg-preview_qmgznw.png" />
  311.         </div>
  312.         <div>
  313.           <p  'Inclusive Sans', sans-serif; color:#212628; font-size: 12px; margin: 0; font-weight: 100; letter-spacing: 1.5px;">Simplifying Events</p>
  314.         </div>
  315.       </div>
  316.     </div>
  317.   </div>
  318.   <div>
  319.     <p  #4b5563; padding-top: 10px; text-align: center; margin: 0; padding: 0;">
  320.       "Don't forget to bring this ticket with you to the event - it holds the key to unlock more details via the QR
  321.       code!"
  322.     </p>
  323.   </div>
  324. &lt;/body&gt;
  325.  
  326. &lt;/html&gt;

Replies to Re: Re: Re: ticket rss

Title Name Language When
Re: Re: Re: Re: ticket ashraful html5 6 Months ago.

Reply to "Re: Re: Re: ticket"