Как создать данную дорожную карту?

Question

[Tramplin333]

я пытаюсь создать дорожную карту как на фото но почему то не получается

Comments

[Рональд Макдональд]

Код?

[Ankhena]

Тут куча примеров https://codepen.io/search/pens?q=timeline

но почему то не получается

Начните с ширины чтоль, уже получше будет

[Tramplin333]

Рональд Макдональд,

<div class="map" id="map">

         <div class="tittle">
            <h5 class="map_tittle "></h5>
            <h2 class="map_tittle-text w7"></h2>
         </div>
         <div class="content-1">
            <h2 class="map_data"><li>2020</li></h2>
            <ul class="map_ul">
               <li class="map_li"><span></span> </li>
               <li class="map_li"><span></span> </li>
               <li class="map_li"><span> </span></li>
               <li class="map_li"><span></span> </li>
               <li class="map_li"><span></span> </li>
            </ul>
         </div>
         <div class="content-2">
            <ul class="map_ul">
               <li class="map_li"><span></span> </li>
               <li class="map_li"><span></span> </li>
               <li class="map_li"><span></span></li>
               <li class="map_li"><span></span></li>
               <li class="map_li"><span></span></li>
            </ul>
            <h2 class="map_data"><li>2021</li> </h2>
         </div>
         <div class="content-3">
            <h2 class="map_data"><li>2022</li> </h2>
            <ul class="map_ul">
               <li class="map_li"><span></span></li>
               <li class="map_li"><span></span></li>
               <li class="map_li"><span></span></li>
               <li class="map_li"><span></span></li>
            </ul>
         </div>
      </div>

.map{
   width: 1023px;
   height: 941px;
   justify-content:center;
   margin-top: 15rem;
}
.map .container{
   display: flex;
   flex-direction: column;
}

.map .tittle{
   width: 533px;
   height: 146px;
   margin: 0 auto;
   text-align: center;
   
}
.map_tittle {
   text-transform: uppercase;
   color: #02A4FC;
}
.map .container{
   display: flex;
   justify-content: space-around;
}

.map .content-1 {
   display: flex;
   flex-direction: row;
   width: 690px;
   height: 190px;
   align-items: center;
   justify-content: space-between;
   background-position: center;
}
.content-1 li{
   list-style-type: disc;
   color: #02A4FC;
}
.content-2 li{
   list-style-type: disc;
   color: #02A4FC;
}
.content-3 li{
   list-style-type: disc;
   color:rgba(255, 103, 130, 1);
}

.map .content-2 {
   display: flex;
   flex-direction: row;
   width: 690px;
   height: 190px;
   align-items: center;
   justify-content: space-between;
}

.map .content-3 {
   display: flex;
   flex-direction: row;
   width: 690px;
   height: 190px;
   align-items: center;
   justify-content: space-between;
}
.map_data .content-1{
   position:absolute;
   width: 120px;
   height: 59px;
   text-align: left;
   
}
.map_ul {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 440px;
   height: 150px;
   padding-left: 50px;
   background: #0F182B;
   border-radius: 5px;
   padding: 30px;
}
.map_li {
   list-style-type: disc;
   color: #0286FF;
}
.map_li span{
   color: white;
   align-items: center;
   font-size: 16px;
   font-weight: 400;

}

[Ankhena]

Tramplin333,
0. Простыня кода - очень хорошо, но в голове компилировать не удобно. Делайте песочницы на сервисах типа jsfiddle.net

1.

<h2 class="map_data"><li>2020</li></h2>

Это что за конструкция из тегов?
Всегда если что-то идет не по плану, начинайте с проверки валидатором.

2. Дальше я написала - начните с ширины. На скрине видно, что темные блоки занимают меньше половины ширины родителя. У вас 690 и 440.
И я бы сделала общую обертку, чтобы было кому рисовать вертикальную палку.

3. Используйте одинаковые классы для блоков и nth-child, если блоки идут поочередно.

4. Дальше подумайте, зачем вы пишете space-between, если на скрине явно видно, что никакого space-between там в помине нет.

Ссылку с примерами реализаций смотрите выше.

Answer 1

[idelgujin]

Необходимо использовать псевдокласс :nth-child(odd) для четных строк, и :nth-child(even) для нечётных. А дальше уже внутри каждой строки ориентировать элементы с помощью flexbox