-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
33 lines (33 loc) · 3.84 KB
/
index.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
<div style='display:flex; margin:0 auto;align-items:center;justify-content:center;'>
<div style='position:relative;'>
<div style='position:absolute;left:-86.666667px;top:80px;'>
<div style='width: 0;border-bottom: 50px solid #6C6;border-left: 86.666667px solid transparent;border-right: 86.666667px solid transparent;'></div>
<div style='width: 173.33333px;height: 100px;background-color: #6C6;position:relative'>
<div style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;'>
<p style='width:100%;text-align:center;color:#FFF;font-family:arial;font-weight:600;margin:0;margin-bottom:8px;'>Test</p>
<p style='width:100%;text-align:center;color:#FFF;font-family:arial;font-weight:400;margin:0;margin-bottom:4px;'>#333333</p>
<p style='width:100%;text-align:center;color:#FFF;font-family:arial;font-weight:400;margin:0;'>H:222 S:22 L:22</p>
</div>
</div>
<div style='width: 0;border-top: 50px solid #6C6;border-left: 86.666667px solid transparent;border-right: 86.666667px solid transparent;'></div>
<div style='display:flex;align-items:center;justify-content:center;border-bottom: 50px solid #6C6;border-left: 27px solid transparent;border-right: 27px solid transparent;height: 0;width: 90px;position:absolute;top:75px;left:15px;transform: rotate(30deg) translateY(125px);'>
<p style='position:relative;top:25px;color:#FFF;font-size:12px;font-family:arial;text-align:center;'>Permanent Geranium Lake</p>
</div>
<div style='display:flex;align-items:center;justify-content:center;border-bottom: 50px solid #6C6;border-left: 27px solid transparent;border-right: 27px solid transparent;height: 0;width: 90px;position:absolute;top:75px;left:15px;transform: rotate(90deg) translateY(125px);'>
<p style='position:relative;top:25px;color:#FFF;font-size:12px;font-family:arial;text-align:center;'>Permanent Geranium Lake</p>
</div>
<div style='display:flex;align-items:center;justify-content:center;border-bottom: 50px solid #6C6;border-left: 27px solid transparent;border-right: 27px solid transparent;height: 0;width: 90px;position:absolute;top:75px;left:15px;transform: rotate(150deg) translateY(125px);'>
<p style='position:relative;top:25px;color:#FFF;font-size:12px;font-family:arial;text-align:center;'>Permanent Geranium Lake</p>
</div>
<div style='display:flex;align-items:center;justify-content:center;border-bottom: 50px solid #6C6;border-left: 27px solid transparent;border-right: 27px solid transparent;height: 0;width: 90px;position:absolute;top:75px;left:15px;transform: rotate(210deg) translateY(125px);'>
<p style='position:relative;top:25px;color:#FFF;font-size:12px;font-family:arial;text-align:center;'>Permanent Geranium Lake</p>
</div>
<div style='display:flex;align-items:center;justify-content:center;border-bottom: 50px solid #6C6;border-left: 27px solid transparent;border-right: 27px solid transparent;height: 0;width: 90px;position:absolute;top:75px;left:15px;transform: rotate(270deg) translateY(125px);'>
<p style='position:relative;top:25px;color:#FFF;font-size:12px;font-family:arial;text-align:center;'>Permanent Geranium Lake</p>
</div>
<div style='display:flex;align-items:center;justify-content:center;border-bottom: 50px solid #333;border-left: 27px solid transparent;border-right: 27px solid transparent;height: 0;width: 90px;position:absolute;top:75px;left:15px;transform: rotate(330deg) translateY(125px);'>
<p style='position:relative;top:25px;color:#FFF;font-size:12px;font-family:arial;text-align:center;'>Permanent Geranium Lake</p>
</div>
</div>
</div>
</div>