1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flexozyme</title>
</head>
<!-- The black 180deg in the conic gradient ensures the colorful part of the gradient spans a 90deg arc -->
<body style="height:100vh;margin:0;display:flex">
<div style="flex:2;background-image:conic-gradient(from 270deg at 100% 100%,red,orange,black 180deg)"></div>
<div style="flex:1;display:flex;flex-direction:column">
<div style="flex:2;background-image:conic-gradient(at 0% 100%,orange,yellow,black 180deg)"></div>
<div style="flex:1;display:flex;flex-direction:row-reverse">
<div style="flex:2;background-image:conic-gradient(from 90deg at 0% 0%,yellow,green,black 180deg)"></div>
<div style="flex:1;display:flex;flex-direction:column-reverse">
<div style="flex:2;background-image:conic-gradient(from 180deg at 100% 0%,green,blue,black 180deg)"></div>
<div style="flex:1;display:flex">
<div style="flex:2;background-image:conic-gradient(from 270deg at 100% 100%,blue,purple,black 180deg)"></div>
<div style="flex:1;display:flex;flex-direction:column">
<div style="flex:2;background-image:conic-gradient(at 0% 100%,purple,red,black 180deg)"></div>
<div style="flex:1;display:flex;flex-direction:row-reverse">
<div style="flex:2;background-image:conic-gradient(from 90deg at 0% 0%,red,orange,black 180deg)"></div>
<div style="flex:1;display:flex;flex-direction:column-reverse">
<div style="flex:2;background-image:conic-gradient(from 180deg at 100% 0%,orange,yellow,black 180deg)"></div>
<div style="flex:1;display:flex">
<div style="flex:2;background-image:conic-gradient(from 270deg at 100% 100%,yellow,green,black 180deg)"></div>
<div style="flex:1;display:flex;flex-direction:column">
<div style="flex:2;background-image:conic-gradient(at 0% 100%,green,blue,black 180deg)"></div>
<div style="flex:1;display:flex;flex-direction:row-reverse">
<div style="flex:2;background-image:conic-gradient(from 90deg at 0% 0%,blue,purple,black 180deg)"></div>
<div style="flex:1;display:flex;flex-direction:column-reverse">
<div style="flex:2;background-image:conic-gradient(from 180deg at 100% 0%,purple,red,black 180deg)"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
