Zaman sekarang ni ada ke lagi orang mencatat diari di blog (blog peribadi maupun umum) (?)
Contoh:
Diari
Isnin 20.02.23
Di antara 1:00 - 6:00 PAGI
Bangun tidur, sembahyang Subuh. - Lps sembahyang sambung tidur.
Di antara 7:00 - 12:00 TENGAH HARI
Dlm perjalanan g kerja, hujan lebat. Air-cond takda, wiper rosak - berhenti tepi jalan hingga hujan reda (hampir 1 jam).
Di antara 1:00 - 6:00 PETANG
Balik krj singgah warung d simpang jln prt ulu, beli buah pisang. 10 inggit penuh beg plastik.
Di antara 7:00 - 12:00 MALAM
Makan nasi lauk sambal sardin ditambah ulam Pegaga cecah sambal belacan. Lada sambal guna Cili Merah. Phh, pedas menyengat.
PERINGATAN
Ubat gigi dah habis. Betulkan wiper.
NOTA
Bla bla bla. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
Lihat teks HTML
<div class="labu">
<div class="hbt">
Isnin 20.02.23 </div>
<div class="timeline">
<div class="bks kiri">
<div class="tkandungan">
<span style="font: 14px Sans-serif; color: #111;">Di antara 1:00 - 6:00 PAGI</span>
<p>
Bangun tidur, sembahyang Subuh. - Lps sembahyang sambung tidur. </p>
</div>
</div>
<div class="bks kanan">
<div class="tkandungan">
<span style="font: 14px Sans-serif; color: #111;">Di antara 7:00 - 12:00 TENGAH HARI</span>
<p>
Dlm perjalanan g kerja, hujan lebat. Air-cond takda, wiper rosak - berhenti tepi jalan hingga hujan reda (hampir 1 jam). </p>
</div>
</div>
<div class="bks kiri">
<div class="tkandungan">
<span style="font: 14px Sans-serif; color: #111;">Di antara 1:00 - 6:00 PETANG</span>
<p>
Balik krj singgah warung d simpang jln prt ulu, beli buah pisang. 10 inggit penuh beg plastik. </p>
</div>
</div>
<div class="bks kanan">
<div class="tkandungan">
<span style="font: 14px Sans-serif; color: #111;">Di antara 7:00 - 12:00 MALAM</span>
<p>
Makan nasi lauk sambal sardin ditambah ulam Pegaga cecah sambal belacan. Lada sambal guna Cili Merah. Phh, pedas menyengat. </p>
</div>
</div>
<div class="bks kiri">
<div class="tkandungan" style="background: #fce5cd;">
<span style="font: 14px Sans-serif; color: #111;">PERINGATAN</span>
<p>
Ubat gigi dah habis. Betulkan wiper. </p>
</div>
</div>
<div class="bks kanan">
<div class="tkandungan">
<span style="font: 14px Sans-serif; color: #111;">NOTA</span>
<p>
Bla bla bla. Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.<br/><br/>Bla bla Bla .. </p>
</div>
</div>
</div>
</div>
<style>
.labu * {
box-sizing: border-box;
}
.labu {
background: #444;
font: 15px Helvetica, sans-serif;
padding-top: 1px;
border-radius: 10px;
width: 100%;
}
.hbt {
background: #323232;
font: large Georgia;
color: #fff;
padding: 5px;
margin: 10px 10px 20px 10px;
border-radius: 6px;
text-align: center;
}
.timeline {
position: relative;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 3px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -2px;
}
.bks {
line-height: 1.2em;
padding: 10px;
position: relative;
background-color: inherit;
width: 50%;
}
.bks::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
right: -7px;
background-color: #f3f3f3;
border: 4px solid #f9cb9c;
top: 10px;
border-radius: 50%;
z-index: 1;
}
.kiri {
left: 0;
}
.kanan {
left: 50%;
}
.kanan::after {
left: -8px;
}
.tkandungan {
font: 15px Cherry Cream Soda;
color: #b45f06;
padding: 6px;
background: #fff;
position: relative;
border-radius: 6px;
}
@media screen and (max-width: 600px) {
.timeline::after {
left: 17px;
}
.bks {
width: 100%;
padding-left: 30px;
padding-right: 10px;
}
.kiri::after, .kanan::after {
left: 8px;
top: 10px;
}
.kanan {
left: 0%;
}
}
</style>
Tutup
Ulasan