Timeline en CSS sencillo

¿Cómo diseñar un timeline con CSS? responsive fácilmente

Timeline en CSS sencillo

¿Cómo diseñar un timeline con CSS? responsive fácilmente

Para crear una linea de tiempo con CSS usaremos las seudoclases selectivas impares y no impares odd y even, veamos una aplicación o ejemplo práctico.

Diseñar una linea de tiempo con css requiere del dominio de Hojas de Estilos no muy avanzado, pero que si conozcas las propiedades de trabajar con Pseudoclases

Veamos el Código CSS de un timeline en CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LINEA DE TIEMPO CON CSS</title>
</head>
<body>
    <style>
    .timeline{
        margin-top: 40px;
        margin-bottom: 40px;
        position: relative;
    }
    .timeline:before{
        content: '';
        position: absolute;
        left: 50%;
        width: 2px;
        height: 100%;
        background: #6658ea
    }
    .content{ border: #6658ea 1px solid; padding: 20px; border-radius: 20px; color: royalblue;}
    .timeline ul{ margin: 0; padding: 0}
    .timeline ul li{ 
        list-style: none;
        position: relative;
        width: 50%;
        padding: 20px 40px;
        box-sizing: border-box;
    }
    
    .timeline ul li:nth-child(odd){
        float: left;
        text-align: right;
        clear: both;
    }
    .timeline ul li:nth-child(odd)::before{
        content: '';
        position: absolute;
        top: 40px;
        right: -14px;
        width: 20px;
        height: 20px;
        background: white;
        border: 2px solid #6658ea;
        border-radius: 50%
    }
    .timeline ul li:nth-child(odd)::after{
        content: '';
        position: absolute;
        border-style: solid;
        width: 0;
        height: 0;
        top: 44px;
        right: 25px;
        border-width: 10px 0 10px 15px;
        border-color: transparent transparent transparent #6658ea;
    }

    .timeline ul li:nth-child(even){
        float: right;
        text-align: left;
        clear: both;
    }
   
   
    .timeline ul li:nth-child(even)::before{
        content: '';
        position: absolute;
        top: 40px;
        left: -10px;
        width: 20px;
        height: 20px;
        background: white;
        border: 2px solid #6658ea;
        border-radius: 50%
    }
    .timeline ul li:nth-child(even)::after{
        content: '';
        position: absolute;
        border-style: solid;
        width: 0;
        height: 0;
        top: 44px;
        left: 25px;
        border-width: 10px 15px 10px 0px;
        border-color: transparent #6658ea transparent transparent;
    }
    @media all and (max-width: 768px) {
        .timeline:before{
            left: 0%;
        }
        .timeline ul li{ 
            width: 100%;
        }
        .timeline ul li:nth-child(odd){
            float: right;
            text-align: left;
        }
        .timeline ul li:nth-child(odd)::before{
            left: -10px;
        }
        .timeline ul li:nth-child(odd)::after{
            left: 25px;
            border-width: 10px 15px 10px 0px;
            border-color: transparent #6658ea transparent transparent;
        }
        
    }
    
    </style>
    <div class="timeline">
        <ul>
          <li>
            <div class="content">
              <h2>REQUERIMIENTOS ESPECÍFICOS</h2>
              
              <p> <span>Día 1 </span></p>
              
              <p>Es una <strong>lista de las características</strong> con las cuales se desarrollará su página web y que son acordadas entre Ud. y el equipo de desarrollo web. Dónde se valida la viabilidad de cada una de las características.</p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem at provident esse eaque similique molestias hic laborum ratione tempore! Explicabo consequuntur cum eius tempora expedita harum ipsam illum similique pariatur?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur beatae maiores quaerat. Harum ut odio cum vero ex beatae vel at expedita debitis praesentium unde laudantium veritatis quisquam, possimus atque!
            </div>
          </li>
          <li>
            <div class="content">
              <h2>RECOLECCIÓN DE LA INFORMACIÓN</h2>
              <p> <span>Del día 2 hasta el dia 4</span></p>
              <p>Etapa que permite <strong>juntar toda la información</strong> de la empresa, donde participa activamente el representante de la empresa, puesto que debe proporcionar elementos como: El Manual de Imagen Corporativa, El logotipo en sus formatos vectoriales, Una redacción adecuada de cada sección que desea en su página web, Recursos multimedia como imágenes de muy buena calidad, videos, pdf, etc. Algunas sugerencias de diseño web</p>
            </div>
          </li>
          <li>
            <div class="content">
              <h2>BOSQUEJOS</h2>
              <p> <span>Del día 5 hasta el dia 7</span></p>
              <p>Son <strong>diseños tentativos</strong> de como se verá su página web, es aqui donde se realizan todas las posibles modificaciones hasta llegar a un diseño final aprobado por Ud. El cuál servirá de guía para continuar con el desarrollo.</p>
            </div>
          </li>
      
          <li>
            <div class="content">
              <h2>ORGANIZACIÓN DE LOS RECURSOS</h2>
              <p> <span>Del día 8 hasta el dia 9</span></p>
              <p>El redactor web <strong>organiza los textos</strong> mediante una redacción acorde con el rubro de la empresa basándose en la lista de requerimientos, de igual forma el diseñador gráfico <strong>prepara y optimiza los elementos gráficos</strong> que se incluirán en el sitio web.</p>
            </div>
          </li>
          
          <li>
            <div class="content">
              <h2>BASE DE DATOS</h2>
              <p> <span>Del día 10 hasta el dia 11</span></p>
      
              <p>Empieza el desarrollo web con la <strong>implementación de una base de datos</strong>. Esto le permitirá gestionar algunas secciones en su página web como: publicar un post, insertar o actualizar sus servicios o productos, actualizar los datos de contacto, etc. Depende de los requerimientos acordados.</p>
            </div>
          </li>
          <li>
            <div class="content">
              <h2>DESARROLLO BACKEND</h2>
              <p> <span>Del día 12 hasta el dia 17</span></p>
      
              <p>Es uno de las etapas más importantes porque definen la dinámica de su sitio web, la seguridad, la rápidez, la arquitectura de Urls, el respaldo de información. <strong>Es el motor de su página web</strong>. </p>
            </div>
          </li>
          <li>
            <div class="content">
              <h2>DISEÑO FRONTEND</h2>
              <p> <span>Del día 18 hasta el dia 23</span></p>
      
              <p>El profesional de esta área, maqueta o <strong>diseña la parte visual de su página web</strong>, impregna sus conocimientos de UX/UI para obtener un sitio web rápido, amigable, simple y fácil de navegar. Cónoce mucho la combinación de colores, distribución de contenidos, etc. </p>
            </div>
          </li>
          <li>
            <div class="content">
              <h2>TESTING Y SUBSANACIÓN</h2>
              <p> <span>Del día 24 hasta el dia 25</span></p>
      
              <p>Son <strong>pruebas para encontrar posibles errores</strong> como enlaces rotos, uso de demasiados recursos que hacen lenta la carga de su página web, imágenes pesadas, textos no congruentes, faltas ortográficas, etc. Que deben ser subsanadas.</p>
            </div>
          </li>
          <li>
            <div class="content">
              <h2>PUBLICACIÓN EN INTERNET</h2>
              <p> <span>Día 26</span></p>
      
              <p>Consiste en <strong>colocar su página web en internet</strong> mediante el registro de un dominio y el almacenamiento de los recursos de su página web en un servidor web. De igual forma tambien se realiza un testing pero en linea.</p>
            </div>
          </li>
          <li>
            <div class="content">
              <h2>ENTREGA</h2>
              <p> <span>Día 27</span></p>
              <p>Finalmente se proporciona la <strong>información para que Ud. pueda administrar su sitio web</strong> además de una capacitación en el uso del sistema. También se le entregará la información de las fechas de renovación de los servicios de hosting y dominio. </p>
            </div>
          </li>
      
          <div style="clear: both"></div>
        </ul>
      </div>
      
      </div>
      
</body>
</html>

 

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 97 veces | Publicado hace 1 mes

Curso Diseño Web con Bootstrap 4.5

Mira el temario del curso en el siguiente link

VER EL CURSO

CÓDIGO FUENTE CSS

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021