Estoy haciendo una timeline en codepen basasdo en otro pen. Lo personalicé hasta lo más mínimo por el CSS pero no estoy dando con el peque detalle para que los "puntos" de la línea me queden alineados con los textos.
Yo estoy aprendiendo CSS y ya lo entiendo bastante, pero sinceramente no he podido alinear estos elementos; logré hacerlo responsive, animarlo y hacerle unos efectos hover que despues se los quité porque no me servían.
Les dejo el ejemplo a ver si me pueden dar una luz.
body {
background: #000;
}
/*animacion*/
@-webkit-keyframes fadeInUp{
0%{
opacity: 0;
-webkit-transform: translateY(80px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fadeInUp{
0%{
opacity: 0;
transform: translateY(80px);
}
100%{
opacity: 1;
transform: translateY(0);
}
}
/* ESTRUCTURA DEL TIMELINE
Colores Azul: 132D46
verde: 176E10
Impresion de entrada CSS3
Validacion W3School
*/
h1{
font-size:60px;
text-align:center;
}
.timeline{
position:relative;
margin:0px auto;
padding:0px 0;
width:1000px;
box-sizing:border-box;
}
/*Linea*/
.timeline:before{
content: '';
position:absolute;
left:50%;
width:3px;
height:100%;
background:#176E10;
}
.timeline ul{
padding:0;
margin: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;
padding-top: 30px;
}
.timeline ul li:nth-child(even){
float:right;
text-align:left;
clear:both;
}
.content{
padding-bottom:20px;
}
.timeline ul li:nth-child(odd):before
{
content:'';
position:absolute;
width:10px;
height:10px;
top:24px;
right:-6px;
background:#176E10;
border-radius:50%;
box-shadow:0 0 0 3px #fff;
}
.timeline ul li:nth-child(even):before
{
content:'';
position:absolute;
width:10px;
height:10px;
top:24px;
left:-4px;
background:#fff;
border-radius:50%;
box-shadow:0 0 0 3px #176E10;
}
.timeline ul li h3{
padding:0;
margin:0;
color:rgba(233,33,99,1);
font-weight:600;
}
.timeline ul li p{
margin:10px 0 0;
padding:0;
font-size:20px;
font-family: 'Roboto', sans-serif;
font-style: italic;
font-weight:300;
color: #fff;
-webkit-animation:fadeInUp 6s;
animation:fadeInUp 4s;
}
.timeline ul li .time h4{
margin:0;
position: relative;
padding:10;
font-size:50px;
font-family: 'Roboto', sans-serif;
font-style: italic;
-webkit-animation:fadeInUp 4s;
animation:fadeInUp 7s;
}
.timeline ul li:nth-child(odd) .time
{
position:absolute;
top:12px;
right:-165px;
margin:0;
padding:8px 16px;
background:;
color:#176E10;
border-radius:18px;
box-shadow:0 0 0 0px;
}
.timeline ul li:nth-child(even) .time
{
position:absolute;
top:12px;
left:-165px;
margin:0;
padding:8px 16px;
background:;
color:#176E10;
border-radius:18px;
box-shadow:0 0 0 0px rgba(233,33,99,0.3);
}
@media(max-width:1000px)
{
.timeline{
width:100%;
}
}
@media(max-width:767px){
.timeline{
width:100%;
padding-bottom:0;
}
h1{
font-size:40px;
text-align:center;
}
.timeline:before{
left:20px;
height:100%;
}
.timeline ul li:nth-child(odd),
.timeline ul li:nth-child(even)
{
width:100%;
text-align:left;
padding-left:50px;
padding-bottom:50px;
}
.timeline ul li:nth-child(odd):before,
.timeline ul li:nth-child(even):before
{
top:-18px;
left:16px;
}
.timeline ul li:nth-child(odd) .time,
.timeline ul li:nth-child(even) .time{
top:-30px;
left:50px;
right:inherit;
}
}
<body>
<div class="timeline">
<ul>
<li>
<div class="content">
<p>Texto descriptivo en el parrafo</p>
</div>
<div class="time">
<h4>1990</h4>
</div>
</li>
<li>
<div class="content">
<p>Texto descriptivo en el parrafo</p>
</div>
<div class="time">
<h4>1995</h4>
</div>
</li>
<li>
<div class="content">
<p>Texto descriptivo en el parrafo
</p>
</div>
<div class="time">
<h4>2000</h4>
</div>
</li>
<li>
<div class="content">
<p>Texto descriptivo en el parrafo</p>
</div>
<div class="time">
<h4>2005</h4>
</div>
</li>
<li>
<div class="content">
<p>Texto descriptivo en el parrafo</p>
</div>
<div class="time">
<h4>2017</h4>
</div>
</li>
<li>
<div class="content">
<p>Texto descriptivo en el parrafo</p>
</div>
<div class="time">
<h4>2021</h4>
</div>
</li>
<div style="clear:both;"></div>
</ul>
</div>
</body>
Necesito poder alinear horizontalmente los h4
con los párrafos, utilizo text-
e item-
align
pero no pasa nada.