Иногда нужно показать на сайте последовательность действий или цепочку (хронологию) событий. Для этого подойдет следующая верстка на HTML и CSS:
Скачать архив
Содержание архива:
1 день
Сегодня я ничего не делал
2 день
Сегодня я опять ничего не делал
3 день
Сегодня я опять ничего не делал
4 день
Сегодня я опять ничего не делал
5 день
Сегодня я опять ничего не делал
6 день
Сегодня я опять ничего не делал
7 день
Сегодня я опять ничего не делал
8 день
Сегодня я опять ничего не делал
9 день
Сегодня я опять ничего не делал
10 день
Сегодня я опять ничего не делал
11 день
Сегодня я опять ничего не делал
12 день
Сегодня я опять ничего не делал
13 день
Сегодня я опять ничего не делал
14 день
Сегодня я опять ничего не делал
15 день
Сегодня я опять ничего не делал
16 день
Сегодня я опять ничего не делал
17 день
Сегодня я опять ничего не делал
18 день
Сегодня я опять ничего не делал
19 день
Сегодня я опять ничего не делал
#arroe_block ol{margin:0;list-style:none;padding:0;--hue:1;--unit:1rem} #arroe_block p{line-height:1.3} #arroe_block .event-date{margin:0 0 .25rem;font-weight:700} #arroe_block .event-description{margin:0} #arroe_block li{--height:7rem;position:relative;display:block;background-color:hsl(calc(var(--hue)*360/20),90%,65%);border-color:hsl(calc(var(--hue)*360/20),90%,65%);padding:1rem;margin:2rem 0} #arroe_block li::before{content:"";background-color:inherit;position:absolute;display:block;width:var(--unit);height:var(--unit);top:100%;left:calc(50% - (var(--unit)/2))} #arroe_block li::after{content:"";position:absolute;display:block;top:calc(100% + var(--unit));left:calc(50% - (var(--unit)));border:var(--unit) solid transparent;border-top-color:inherit} #arroe_block li:last-child::before,#arroe_block li:last-child::after{content:none} #arroe_block li:nth-child(20n+1){--hue:1} #arroe_block li:nth-child(20n+2){--hue:2} #arroe_block li:nth-child(20n+3){--hue:3} #arroe_block li:nth-child(20n+4){--hue:4} #arroe_block li:nth-child(20n+5){--hue:5} #arroe_block li:nth-child(20n+6){--hue:6} #arroe_block li:nth-child(20n+7){--hue:7} #arroe_block li:nth-child(20n+8){--hue:8} #arroe_block li:nth-child(20n+9){--hue:9} #arroe_block li:nth-child(20n+10){--hue:10} #arroe_block li:nth-child(20n+11){--hue:11} #arroe_block li:nth-child(20n+12){--hue:12} #arroe_block li:nth-child(20n+13){--hue:13} #arroe_block li:nth-child(20n+14){--hue:14} #arroe_block li:nth-child(20n+15){--hue:15} #arroe_blockli:nth-child(20n+16){--hue:16} #arroe_block li:nth-child(20n+17){--hue:17} #arroe_block li:nth-child(20n+18){--hue:18} #arroe_block li:nth-child(20n+19){--hue:19} #arroe_block li:nth-child(20n+20){--hue:20} @media (min-width: 550px) and (max-width: 899px) { #arroe_block li{margin:1rem;width:calc(50% - 4rem);float:left;min-height:var(--height)} #arroe_block li:nth-child(4n+3),#arroe_block li:nth-child(4n+4){float:right} #arroe_block li:nth-child(4n+1)::before{top:calc(var(--height)/2 + var(--unit)/2);left:100%} #arroe_block li:nth-child(4n+1)::after{top:calc(var(--height)/2);left:calc(100% + (var(--unit)));border:var(--unit) solid transparent;border-left-color:inherit} #arroe_block li:nth-child(4n+3)::before{top:calc(var(--height)/2 + var(--unit)/2);left:-1rem} #arroe_block li:nth-child(4n+3)::after{top:calc(var(--height)/2);left:-3rem;border:var(--unit) solid transparent;border-right-color:inherit} } @media (min-width: 900px) and (max-width: 1199px) { #arroe_block li{margin:1rem;width:calc(33.33% - 4rem);float:left;min-height:7rem} #arroe_block li:nth-child(6n+4),#arroe_block li:nth-child(6n+5),#arroe_block li:nth-child(6n+6){float:right} #arroe_block li:nth-child(6n+1)::before,#arroe_block li:nth-child(6n+2)::before{top:calc(var(--height)/2 + var(--unit)/2);left:100%} #arroe_block li:nth-child(6n+1)::after,#arroe_block li:nth-child(6n+2)::after{top:3.5rem;left:calc(100% + (var(--unit)));border:var(--unit) solid transparent;border-left-color:inherit} #arroe_block li:nth-child(6n+4)::before,#arroe_block li:nth-child(6n+5)::before{top:calc(var(--height)/2 + var(--unit)/2);left:-1rem} #arroe_block li:nth-child(6n+4)::after,#arroe_block li:nth-child(6n+5)::after{top:calc(var(--height)/2);left:-3rem;border:var(--unit) solid transparent;border-right-color:inherit} } @media (min-width: 1200px) { #arroe_block ol{max-width:1600px;margin:0 auto} #arroe_block li{margin:1rem;width:calc(25% - 4rem);float:left;min-height:7rem} #arroe_block li:nth-child(8n+5),#arroe_block li:nth-child(8n+6),#arroe_block li:nth-child(8n+7),#arroe_block li:nth-child(8n+8){float:right} #arroe_block li:nth-child(8n+1)::before,#arroe_block li:nth-child(8n+2)::before,#arroe_block li:nth-child(8n+3)::before{top:calc(var(--height)/2 + var(--unit)/2);left:100%} #arroe_block li:nth-child(8n+1)::after,#arroe_block li:nth-child(8n+2)::after,#arroe_block li:nth-child(8n+3)::after{top:calc(var(--height)/2);left:calc(100% + (var(--unit)));border:var(--unit) solid transparent;border-left-color:inherit} #arroe_block li:nth-child(8n+5)::before,#arroe_block li:nth-child(8n+6)::before,#arroe_block li:nth-child(8n+7)::before{top:calc(var(--height)/2 + var(--unit)/2);left:-1rem} #arroe_block li:nth-child(8n+5)::after,#arroe_block li:nth-child(8n+6)::after,#arroe_block li:nth-child(8n+7)::after{top:calc(var(--height)/2);left:-3rem;border:var(--unit) solid transparent;border-right-color:inherit} }
Комментарии ()