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.
