CSS ?? ??? ????? HTML ? CSS ? ???? JavaScript? ???? ????. 2. ?? ? ??? ???? ??? ? HTML? ??????. 3. ????? ?? ???? ???? :: pseudo element ??; 4. Flexbox ???? ? ??? ???? ??? ???? ??? ??? ??????. 5. ? ??? ?? ?? ???? ??????. 6. ??? ??? ?? ?? ? ???? ???? ??? ???? ???? ?? ???? ?? ?? ??? ??????. ????? ???? ??? ?? ?? ?? ??? ???? ?? ??? ?????.

CSS? ?? ??? ??? ?? ???? ????? ????? ???? ?? ?????. JavaScript? ???? ???? - html ? css. ??? ?? ??? ???? ?? ???? ?? ?? ??? ???? ??? ??? ????.

1. ?? HTML ??

???? ? ?? ?? ??? ???? ??? ??? ??????. ? ???? ??, ?? ? ???? ?????.

 <div class = "?? ??">
  <div class = "?? ??-???">
    <div class = "?? ?? ??"> 2023 </div>
    <div class = "?? ?? ???">
      <H3> ???? ?? </h3>
      <p> ??? ? ?? ?? ??? ??????. </p>
    </div>
  </div>

  <div class = "?? ??-???">
    <div class = "?? ?? ??"> 2024 </div>
    <div class = "?? ?? ???">
      <H3> ?? ? </h3>
      <p> 5 ??? 20 ?? ???? ??????. </p>
    </div>
  </div>

  <div class = "?? ??-???">
    <div class = "?? ?? ??"> 2025 </div>
    <div class = "?? ?? ???">
      <H3> ??? ??? </h3>
      <p>? ? ????? ?? ??????. </p>
    </div>
  </div>
</div>

2. ?? ?? ? ????? ?? CS

????? ?? ?? (? ::before )? ???? ?? ?? ????. ?? ??? ?? ? ??? ??????.

 . ?? ?? {
  ?? : ??;
  ?? ?? : 800px;
  ?? : 0 Auto;
  ?? : 20px 0;
}

/ * ??? */
.Timeline :: ?? {
  ???: '';
  ?? : ??;
  ?? : 0;
  ?? : 0;
  ?? : 4px;
  ?? : #007bff;
  ?? : 50%;
  ?? : translatex (-50%);
}

.TIMELINE-ITEM {
  ?? : ??;
  ?? ?? : 30px;
  ????? : Flex;
  ??? ??? : ?? ??;
  ?? ?? : ??;
}

/ * ?? ??/??? ??? ???? */
.Timeline-item : nth-Child (??) .Timeline-fontent {
  ?? : 1;
  ?? ??? : 50px;
  ??? ?? : ????.
}

.Timeline-item : nth-Child (??) .Timeline-fontent {
  ?? : 2;
  ?? ?? : 50px;
  ??? ?? : ??;
}

. ?? ?? ??? {
  ?? ?? : ???;
  ?? : #333;
  ?? : 8px 12px;
  ?? : #007bff;
  ?? : ??;
  Border-Radius : 6px;
}

3. ?? ?? ?? ?? (??)

?? ::before ? .timeline-item ???? ??? ?? ??? ????.

 .timeline-item :: ?? {
  ???: '';
  ?? : ??;
  ?? : 20px;
  ?? : 20px;
  ?? : ??;
  ??? : 4px ?? #007bff;
  ??-???? : 50%;
  ?? : 50%;
  ?? : 50%;
  ?? : ?? (-50%, -50%);
  z- ??? : 1;
}

4. ?? ? ???

?? ????? ??? ??? ?? ?? ??? ??? ?????.

 @Media (max-width : 768px) {
  .Timeline :: ?? {
    ?? : 30px;
  }

  .TIMELINE-ITEM {
    ??? ?? : ?;
    ?? ?? : Flex-Start;
  }

  .timeline-item :: ?? {
    ?? : 30px;
  }

  . ?? ?? ???,
  . ?? ?? ??? {
    ?? ?? : 50px;
    ??? ?? : ??;
  }

  . ?? ?? ??? {
    ??-? : 10px;
  }
}

?? ?

• ?? position: relative .timeline-item ?? ??? ???? ????????.
• left: 50% ???? ???? ??? ????? transform .
• ?? ?? ??? ?? flex-direction: row , ??? ? ????? ??? ?? ?? ? ????.
• ??? ?? JavaScript? ???? ??? ????? (? : ???? ??? ?)? ?? ? ? ????.

????? ????, ?? ?? ? Flexbox? ??? ?????. CSS? ?? ??? ???? ???? ???? ?? ??? ?? ? ????.

? ??? CSS? ?? ??? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!