tatvilweb/css/timeline.css

73 lines
1.7 KiB
CSS
Executable File

:root {
/* Paleta de el tiempo */
--color-primario: #F5F5F5;
--color-hover: #1E3A5F;
--color-secundario: #A1A1A1;
--color-fondo: #0D0D0D;
--color-texto: #E5E5E5;
--blanco-puro: #FFFFFF;
--sombra: rgba(47, 58, 86, 0.15);
--color-tarjeta: #1A1A1A;
--color-acento: #a4d7f4;
--gray: #acb3bf;
--color-borde: rgba(95, 174, 219, 0.3);
--color-cabecera: rgba(0,0,0,0.80);
--bg-vs: #1e1e1e; /* Fondo principal */
--bg-nav: #252526; /* Fondo de barra de navegación */
--bg-card: #2d2d2d; /* Fondo de tarjetas/secciones */
--keyword: #aaffff; /* Azul grisaceo */
--string: #ce9178; /* Naranja/Salmón (textos) */
--comment: #6a9955; /* Verde (comentarios) */
--var-name: #9cdcfe; /* Azul claro (variables) */
--text: #d4d4d4; /* Gris claro (texto normal) */
--border-editor: #3e3e42; /* Color de bordes y líneas */
}
.timeline {
position: relative;
max-width: 800px;
margin: auto;
padding: 40px 0;
}
.timeline h2 {
text-align: center;
margin-bottom: 40px;
}
.timeline::before {
content: "";
position: absolute;
left: 50%;
width: 4px;
height: 100%;
background: #ddd;
transform: translateX(-50%);
}
.timeline-item {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.timeline-item:nth-child(odd) {
flex-direction: row-reverse;
}
.timeline-date {
width: 45%;
text-align: right;
font-weight: bold;
}
.timeline-item:nth-child(odd) .timeline-date {
text-align: left;
}
.timeline-content {
width: 45%;
background: var(--color-tarjeta);
padding: 15px;
border-radius: 6px;
}