Category: JavaScript

JavaScript Category

2019

09-25

08-25

adius: 2px; } .timeline-item { position: relative; margin-left: 40px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); margin-bottom: 30px; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; } .timeline-item.show { opacity: 1; transform: translateY(0); } .timeline-dot { position: absolute; left: -36px; top: 20px; width: 16px; height: 16px; border-radius: 50%; background-color: white; border: 4px solid #6699cc; z-index: 1; } .timeline-date { font-size: 0.9em; color: #888; margin-bottom: 10px; } .timeline-title { margin: 0 0 10px 0; color: #444; font-size: 1.2em; } .timeline-category { display: inline-block; padding: 3px 8px; background-color: #f0f0f0; border-radius: 10px; font-size: 0.8em; color: #666; margin-bottom: 10px; } .timeline-filter { margin: 20px 0; text-align: center; } .filter-label { margin-right: 10px; color: #666; } .filter-btn { background-color: #f0f0f0; border: none; padding: 5px 12px; margin: 0 5px; border-radius: 15px; cursor: pointer; transition: all 0.3s ease; font-size: 0.9em; } .filter-btn:hover { background-color: #e0e0e0; } .filter-btn.active { background-color: #6699cc; color: white; } @media (min-width: 768px) { .timeline::before { left: 50%; margin-left: -2px; } .timeline-item { width: 45%; margin-left: 0; } .timeline-item:nth-child(even) { margin-left: auto; } .timeline-item:nth-child(odd) .timeline-dot { left: auto; right: -36px; } .timeline-item:nth-child(even) .timeline-dot { left: -36px; } }