-
Notifications
You must be signed in to change notification settings - Fork 0
/
violet.html
105 lines (95 loc) · 3.26 KB
/
violet.html
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* border radius: top left top right bottom right bottom left*/
/* padding: +down +right +down +right*/
body {
background: forestGreen;
}
#TopLeft {
position: absolute;
background: mediumPurple;
border: .25em solid violet;
border-radius: 4vw 14vw 28vw 21vw;
/* border radius: top left top right bottom right bottom left */
float: left;
margin-top: 11%;
margin-left: 21%;
padding: 9vw 13vw 11.5vw 15vw;
/* padding: +down +right +down +right */
}
#TopRight {
background: blueViolet;
border: .5em indigo solid;
border-radius: 26vw 17vw 29vw 5vw;
/* border radius: top left top right bottom right bottom left */
margin-top: 26%;
margin-right: 24%;
margin-left: 47%;
margin-bottom: 0;
padding: 19vw 4vw 3.25vw 10vw;
/* padding: +down +right +down +right */
}
#LowerRight {
background: darkViolet;
border: .5em solid purple;
border-radius: 10vw 350vw 50vw 250vw;
/* border radius: top left top right bottom right bottom left */
margin-top: -1%;
margin-right: 22%;
margin-left: 45%;
padding: 9vw 18vw 8vw 6.5vw;
/* padding: +down +right +down +right */
}
#CLeft {
position: absolute;
float: left;
background: indigo;
border: .2em solid blue;
border-radius: 350em 6em 320em 3em;
/* border radius: top left top right bottom right bottom left*/
margin-top: -13%;
margin-bottom: 60%;
margin-left: 41.5%;
padding: 5.5vw 0.55vw 13vw 2.5vw;
/* padding: +down +right +down +right */
}
#LowerLeft {
position: absolute;
background: darkViolet;
border: .25em solid purple;
border-radius: 480vw 4vw 455vw 5vw;
/* border radius: top left top right bottom right bottom left*/
float: left;
margin-top: -26%;
margin-right: 23%;
margin-left: 33%;
padding: 6.25vw 8.5vw 8.25vw 7vw;
/* padding: +down +right +down +right */
}
#CRight {
float: right;
position: absolute;
background: indigo;
border: .25em solid blue;
border-radius: 55em 850em 87em 850em;
/* border radius: top left top right bottom right bottom left*/
margin-top: 30%;
margin-right: 11.5%;
margin-bottom: 24%;
margin-left: 45.25%;
padding: 3.5vw 3.5vw 7.25vw 15.25vw;
/* padding: +down +right +down +right */
}
</style>
</head>
<body>
<div id="TopLeft"></div>
<div id="CRight"></div>
<div id="TopRight"></div>
<div id="LowerRight"></div>
<div id="CLeft"></div>
<div id="LowerLeft"></div>
</body>
</html>