74 lines
1.5 KiB
CSS
74 lines
1.5 KiB
CSS
body {
|
|
margin: 0;
|
|
}
|
|
|
|
div.columns {
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
div.columns > div {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
div.columns > div:nth-child(1) {
|
|
background-color: pink;
|
|
}
|
|
div.columns > div:nth-child(1)::before {
|
|
content: "pink";
|
|
}
|
|
div.columns > div:nth-child(2) {
|
|
background-color: #ffdfc0;
|
|
}
|
|
div.columns > div:nth-child(2)::before {
|
|
content: "#ffdfc0";
|
|
}
|
|
div.columns > div:nth-child(3) {
|
|
background-color: #f5ffc0;
|
|
}
|
|
div.columns > div:nth-child(3)::before {
|
|
content: "#f5ffc0";
|
|
}
|
|
div.columns > div:nth-child(4) {
|
|
background-color: #cbffc0;
|
|
}
|
|
div.columns > div:nth-child(4)::before {
|
|
content: "#cbffc0";
|
|
}
|
|
div.columns > div:nth-child(5) {
|
|
background-color: #c0ffdf;
|
|
}
|
|
div.columns > div:nth-child(5)::before {
|
|
content: "#c0ffdf";
|
|
}
|
|
div.columns > div:nth-child(6) {
|
|
background-color: #c0f5ff;
|
|
}
|
|
div.columns > div:nth-child(6)::before {
|
|
content: "#c0f5ff";
|
|
}
|
|
div.columns > div:nth-child(7) {
|
|
background-color: #c0cbff;
|
|
}
|
|
div.columns > div:nth-child(7)::before {
|
|
content: "#c0cbff";
|
|
}
|
|
div.columns > div:nth-child(8) {
|
|
background-color: #dfc0ff;
|
|
}
|
|
div.columns > div:nth-child(8)::before {
|
|
content: "#dfc0ff";
|
|
}
|
|
div.columns > div:nth-child(9) {
|
|
background-color: #ffc0f5;
|
|
}
|
|
div.columns > div:nth-child(9)::before {
|
|
content: "#ffc0f5";
|
|
}
|
|
div.columns > div:nth-child(10) {
|
|
background-color: pink;
|
|
}
|
|
div.columns > div:nth-child(10)::before {
|
|
content: "pink";
|
|
}/*# sourceMappingURL=color-transition.css.map */ |