Saitama adlı üyeden alıntı: mesajı görüntüle
Daha önce Dikey sunmuştum

Konusu :https://www.r10.net/tasarim-ve-kod-k...ekleyiniz.html
@kozanfirmam; hocamız yatay istemişti işlerim ve yoğunluğumdan unuttuydum ve ona benzer ayarlamaya çalıştım

Kodları
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .development-line {
        height: 5px;
        width: 100%;
        background-color: rgba(239, 239, 239, 1);
        margin-bottom: 60px;
        margin-top: 100px;
        position: relative;
    }

    .prior {
        position: absolute;
        width: 45px;
        height: 45px;
        background-color: white;
        border-radius: 50%;
        background-image: url('../img//icon/left.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        left: 0px;
        top: 1px;
        transform: translate(-50%, -50%);
    }

    .dot-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .dot {
        width: 20px;
        height: 20px;
        background-color: white;
        border: solid 3px rgba(153, 153, 153, 1);
        border-radius: 50%;
        margin: 20px 50px;
        position: relative;
        transition: all 0.3s;
    }

    .dot-container .time {
        line-height: 29px;
        text-align: left;
        font-family: MicrosoftYaHei-Bold;
        font-style: normal;
        font-weight: normal;
        font-size: 24px;
        color: rgba(51, 51, 51, 1);
        transition: all 0.3s;
    }

    .dot-container .title {
        line-height: 19.200000762939453px;
        text-align: left;
        font-family: MicrosoftYaHei;
        font-style: normal;
        font-weight: normal;
        font-size: 16px;
        color: rgba(0, 0, 0, 1);
        transition: all 0.3s;
    }

    .lass {
        position: absolute;
        width: 45px;
        height: 45px;
        background-color: white;
        border-radius: 50%;
        background-image: url('../img//icon/right.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: 0px;
        top: 1px;
        transform: translate(50%, -50%);
    }

    .dots-container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        transform: translate(0%, -50%);
    }
  </style>
</head>
<body>
<div class="development-line">
    <div class="prior"></div>
    <div class="dots-container">
        <div class="dot-container" intro="Araştırma ve geliştirmeye başlayın, gelecek beklenebilir">
            <div class="time">2006</div>
            <div class="dot"></div>
            <div class="title">Şirket Kuruldu</div>
        </div>
        <div class="dot-container" intro="Resmi olarak piyasaya sürüldü, büyük beğeni topladı">
            <div class="time">2007</div>
            <div class="dot"></div>
            <div class="title">Şirket Büyüdü</div>
        </div>
        <div class="dot-container" intro="Alt sistemler oluşturun, çeşitli görevleri tamamlayın ve sistem değerini gerçekleştirin。">
            <div class="time">2008</div>
            <div class="dot"></div>
            <div class="title">Şirket Şube Açtı</div>
        </div>
        <div class="dot-container" intro="Korona yaktı bizi。">
            <div class="time">2021</div>
            <div class="dot"></div>
            <div class="title">Şirket Battı</div>
        </div>
    </div>
</div>
<div id="time" style="font-size: 30px;width: 300px;"></div>
</body>
</html>
wordpress'e göre optimizeli ayarlayamadım ama mantıken en basit örneği ile size yatay zaman çizelgesi yapmayı sundum.
Beğeni ve yorum yaparak beni mutlu edebilirsiniz.
hocam slider tarzında değil sanırım birde resme veya tarihe tıklayınca bilgisi aktif olmuyor