API tools faq
paste
redhunter

Milestone

redhunter
Nov 16th, 2025 (edited)
297
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.14 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.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Timeline</title>
  8.     <!-- Bootstrap CSS -->
  9.     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  10.     <style>
  11.         body {
  12.             background-color: #f8f9fa;
  13.             padding: 40px 0;
  14.         }
  15.  
  16.         .timeline-container {
  17.             max-width: 800px;
  18.             margin: 0 auto;
  19.             position: relative;
  20.             padding: 20px 0;
  21.         }
  22.  
  23.         /* Vertical line connecting all milestones */
  24.         .timeline-container::before {
  25.             content: '';
  26.             position: absolute;
  27.             left: 50%;
  28.             top: 0;
  29.             bottom: 0;
  30.             width: 4px;
  31.             background: linear-gradient(to bottom, #007bff, #28a745);
  32.             transform: translateX(-50%);
  33.         }
  34.  
  35.         .timeline-item {
  36.             position: relative;
  37.             margin-bottom: 40px;
  38.             display: flex;
  39.             align-items: center;
  40.         }
  41.  
  42.         /* Alternate left and right positioning */
  43.         .timeline-item:nth-child(odd) {
  44.             flex-direction: row;
  45.         }
  46.  
  47.         .timeline-item:nth-child(even) {
  48.             flex-direction: row-reverse;
  49.         }
  50.  
  51.         .timeline-content {
  52.             width: 45%;
  53.             background: white;
  54.             border: 2px solid #dee2e6;
  55.             border-radius: 8px;
  56.             padding: 20px;
  57.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  58.             transition: transform 0.3s ease, box-shadow 0.3s ease;
  59.         }
  60.  
  61.         .timeline-content:hover {
  62.             transform: translateY(-5px);
  63.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  64.         }
  65.  
  66.         .timeline-year {
  67.             font-size: 1.5rem;
  68.             font-weight: bold;
  69.             color: #007bff;
  70.             margin-bottom: 10px;
  71.         }
  72.  
  73.         .timeline-year.now {
  74.             color: #28a745;
  75.         }
  76.  
  77.         .timeline-description {
  78.             color: #495057;
  79.             line-height: 1.6;
  80.         }
  81.  
  82.         .timeline-description a {
  83.             color: #007bff;
  84.             text-decoration: none;
  85.             font-weight: 500;
  86.         }
  87.  
  88.         .timeline-description a:hover {
  89.             text-decoration: underline;
  90.         }
  91.  
  92.         .timeline-image {
  93.             width: 100%;
  94.             max-width: 100%;
  95.             height: auto;
  96.             border-radius: 6px;
  97.             margin-top: 15px;
  98.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  99.         }
  100.  
  101.         /* Dot on the timeline */
  102.         .timeline-dot {
  103.             position: absolute;
  104.             left: 50%;
  105.             width: 20px;
  106.             height: 20px;
  107.             background: #007bff;
  108.             border: 4px solid white;
  109.             border-radius: 50%;
  110.             transform: translateX(-50%);
  111.             z-index: 1;
  112.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  113.         }
  114.  
  115.         .timeline-item:last-child .timeline-dot {
  116.             background: #28a745;
  117.             animation: dotPulse 2s ease-in-out infinite;
  118.             box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
  119.         }
  120.  
  121.         @keyframes dotPulse {
  122.             0% {
  123.                 transform: translateX(-50%) scale(1);
  124.                 box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
  125.             }
  126.  
  127.             50% {
  128.                 transform: translateX(-50%) scale(1.2);
  129.                 box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
  130.             }
  131.  
  132.             100% {
  133.                 transform: translateX(-50%) scale(1);
  134.                 box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
  135.             }
  136.         }
  137.  
  138.         /* Current timeline (2025) - Glowing pulsing border */
  139.         .timeline-item:last-child .timeline-content {
  140.             border: 3px solid #28a745;
  141.             background: linear-gradient(135deg, #ffffff 0%, #f0fff4 100%);
  142.             animation: pulseGlow 2s ease-in-out infinite;
  143.         }
  144.  
  145.         @keyframes pulseGlow {
  146.             0% {
  147.                 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5),
  148.                     0 0 20px rgba(40, 167, 69, 0.3),
  149.                     0 0 30px rgba(40, 167, 69, 0.2);
  150.                 border-color: #28a745;
  151.             }
  152.  
  153.             50% {
  154.                 box-shadow: 0 0 20px rgba(40, 167, 69, 0.8),
  155.                     0 0 30px rgba(40, 167, 69, 0.5),
  156.                     0 0 40px rgba(40, 167, 69, 0.3);
  157.                 border-color: #20c997;
  158.             }
  159.  
  160.             100% {
  161.                 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5),
  162.                     0 0 20px rgba(40, 167, 69, 0.3),
  163.                     0 0 30px rgba(40, 167, 69, 0.2);
  164.                 border-color: #28a745;
  165.             }
  166.         }
  167.  
  168.         .timeline-item:last-child .timeline-content:hover {
  169.             transform: translateY(-5px);
  170.             animation: pulseGlow 1.5s ease-in-out infinite;
  171.         }
  172.  
  173.         /* Responsive design */
  174.         @media (max-width: 768px) {
  175.             .timeline-container::before {
  176.                 left: 30px;
  177.             }
  178.  
  179.             .timeline-item {
  180.                 flex-direction: row !important;
  181.                 padding-left: 60px;
  182.             }
  183.  
  184.             .timeline-content {
  185.                 width: 100%;
  186.             }
  187.  
  188.             .timeline-dot {
  189.                 left: 30px;
  190.             }
  191.         }
  192.  
  193.         .page-header {
  194.             text-align: center;
  195.             margin-bottom: 50px;
  196.         }
  197.  
  198.         .page-header h1 {
  199.             color: #343a40;
  200.             font-weight: 600;
  201.         }
  202.     </style>
  203.     </style>
  204. </head>
  205.  
  206. <body>
  207.     <div class="container">
  208.         <div class="page-header">
  209.             <h1>Our Timeline</h1>
  210.         </div>
  211.  
  212.         <div class="timeline-container">
  213.             <!-- 1990 -->
  214.             <div class="timeline-item">
  215.                 <div class="timeline-content">
  216.                     <div class="timeline-year">1990</div>
  217.                     <div class="timeline-description">
  218.                         We make something <a href="#" target="_blank">(learn more)</a>
  219.                     </div>
  220.                 </div>
  221.                 <div class="timeline-dot"></div>
  222.             </div>
  223.  
  224.             <!-- 1995 -->
  225.             <div class="timeline-item">
  226.                 <div class="timeline-content">
  227.                     <div class="timeline-year">1995</div>
  228.                     <div class="timeline-description">
  229.                         Something happens
  230.                     </div>
  231.                 </div>
  232.                 <div class="timeline-dot"></div>
  233.             </div>
  234.  
  235.             <!-- 1997 -->
  236.             <div class="timeline-item">
  237.                 <div class="timeline-content">
  238.                     <div class="timeline-year">1997</div>
  239.                     <div class="timeline-description">
  240.                         Something else
  241.                     </div>
  242.                     <img src="https://akcdn.detik.net.id/community/media/visual/2025/11/17/aneka-wajah-meme-terkenal-dan-aslinya-sekarang-1763339453838_169.png"
  243.                         alt="1997 Event" class="timeline-image">
  244.                 </div>
  245.                 <div class="timeline-dot"></div>
  246.             </div>
  247.  
  248.             <!-- 2020 -->
  249.             <div class="timeline-item">
  250.                 <div class="timeline-content">
  251.                     <div class="timeline-year">2020</div>
  252.                     <div class="timeline-description">
  253.                         Something bad happens
  254.                     </div>
  255.                 </div>
  256.                 <div class="timeline-dot"></div>
  257.             </div>
  258.  
  259.             <!-- 2025 (now) -->
  260.             <div class="timeline-item">
  261.                 <div class="timeline-content">
  262.                     <div class="timeline-year now">2025 (now)</div>
  263.                     <div class="timeline-description">
  264.                         We are here
  265.                     </div>
  266.                 </div>
  267.                 <div class="timeline-dot"></div>
  268.             </div>
  269.         </div>
  270.     </div>
  271.  
  272.     <!-- Bootstrap JS (optional, for any interactive features) -->
  273.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  274. </body>
  275.  
  276. </html>
Advertisement
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!