-
Notifications
You must be signed in to change notification settings - Fork 0
/
textbox-with-circle.html
119 lines (100 loc) · 8.16 KB
/
textbox-with-circle.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<div style="width: 300px; height: 500px; position: relative; overflow: visible; margin-top: 50px;">
<!-- Top border except where the circle overlaps -->
<div style="position: absolute; top: 0; left: 0; height: 3px; width: calc(50% - 33px); background-color: #D73F09;"></div>
<div style="position: absolute; top: 0; right: 0; height: 3px; width: calc(50% - 33px); background-color: #D73F09;"></div>
<!-- Side and bottom borders -->
<div style="position: absolute; top: 0; left: 0; width: 3px; height: 100%; background-color: #D73F09;"></div>
<div style="position: absolute; top: 0; right: 0; width: 3px; height: 100%; background-color: #D73F09;"></div>
<div style="position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background-color: #D73F09;"></div>
<!-- Circle with space around it -->
<div style="position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; background-color: #D73F09; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
<div style="width: 55px; height: 55px; background-color: white; border-radius: 50%; border: 3px solid #dc4405; display: flex; align-items: center; justify-content: center;">
<p style="margin: 0; font-size: 12px;">Part 26</p>
</div>
</div>
</div>
<div style="width: 300px; height: 500px; position: relative; overflow: visible; margin-top: 50px;">
<!-- Top border except where the circle overlaps -->
<div style="position: absolute; top: 0; left: 0; height: 3px; width: 48%; background-color: #D73F09;">
<p style="font-size: 0;"> </p>
</div>
<div style="position: absolute; top: 0; left: 110px; height: 3px; width: 48%; background-color: white;">
<p style="font-size: 0;"> </p>
</div>
<div style="position: absolute; top: 0; left: 110px; height: 3px background-color: white;">
<p style="font-size: 0;"> </p>
</div>
<div style="position: absolute; top: 0; right: 0; height: 3px; width: 50%; background-color: #D73F09;">
<p style="font-size: 0;"> </p>
</div>
<!-- Side and bottom borders -->
<div style="position: absolute; top: 0; left: 0; width: 3px; height: 100%; background-color: #D73F09;">
<p style="font-size: 0;"> </p></div>
<div style="position: absolute; top: 0; right: 0; width: 3px; height: 100%; background-color: #D73F09;">
<p style="font-size: 0;"> </p></div>
<div style="position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background-color: #D73F09;"> <p style="font-size: 0;"> </p></div>
<!-- <div style="position: relative; top: -28px; left: 50%; margin-left: -30px; width: 60px; height: 60px; background-color: #D73F09; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
<div style="width: 55px; height: 55px; background-color: white; border-radius: 50%; border: 3px solid #dc4405; display: flex; align-items: center; justify-content: center;">
<p style="margin: 0; font-size: 12px;">Part 26</p>
</div>
</div>
-->
<div style="position: relative; top: -28px; left: 50%; margin-left: -30px; width: 60px; height: 60px; background-color: #D73F09; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
<!-- Existing circle with a thicker border for the white gap -->
<div style="width: 55px; height: 55px; background-color: white; border-radius: 50%; border: 8px solid white; display: flex; align-items: center; justify-content: center;">
<div style="width: 55px; height: 55px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid #dc4405;">
<p style="margin: 0; font-size: 12px;">Part 26</p>
</div>
</div>
</div>
</div>
<div style="width: 300px; height: 500px; position: relative; overflow: visible; margin-top: 50px;">
<!-- Top border except where the circle overlaps -->
<div style="position: absolute; top: 0; left: 0; height: 3px; width: calc(50% - 33px); background-color: #D73F09;"></div>
<div style="position: absolute; top: 0; right: 0; height: 3px; width: calc(50% - 33px); background-color: #D73F09;"></div>
<!-- Side and bottom borders -->
<div style="position: absolute; top: 0; left: 0; width: 3px; height: 100%; background-color: #D73F09;"></div>
<div style="position: absolute; top: 0; right: 0; width: 3px; height: 100%; background-color: #D73F09;"></div>
<div style="position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background-color: #D73F09;"></div>
<!-- Circle with space around it -->
<div style="position: absolute; top: -36px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; background-color: #D73F09; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
<div style="width: 55px; height: 55px; background-color: white; border-radius: 50%; border: 3px solid #dc4405; display: flex; align-items: center; justify-content: center;">
<p style="margin: 0; font-size: 12px;">Part 26</p>
</div>
</div>
</div>
<div style="width: 300px; height: 500px; border: 16px solid orange; border-radius: 50px 50px 0 0; position: relative; overflow: hidden;">
<div style="position: absolute; top: -25px; right: 20px; width: 50px; height: 50px; background-color: orange; border-radius: 50%;">
<!-- Circle content can go here -->
</div>
<!-- Your content here -->
</div>
<div style="width: 300px; height: 500px; border: 16px solid orange; border-radius: 50px 50px 0 0; position: relative; overflow: hidden;">
<div style="position: absolute; top: 0; right: 20px; width: 50px; height: 50px; background-color: orange; border-radius: 50%; z-index: 2;">
<!-- Circle content can go here -->
</div>
<!-- Your content here -->
</div>
<div style="width: 300px; height: 500px; position: relative; overflow: visible; margin-top: 50px;">
<div style="padding: 15px; text-align: justify;">
<p>Lorem ipsum dolor sit amet, pri magna noster melius cu, legimus argumentum at eos. No nostrud numquam duo, quando ignota sensibus mei in, malis percipit sea an. Sit no quot exerci denique, eu nec harum feugiat, apeirian indoctum vituperata ne nec. Qui putent putant intellegam id. Pro at pertinacia reformidans.</p>
<p>Omnium consulatu moderatius cu sed, eum dicta sensibus forensibus ei. Per nobis postea disputando cu, usu te probo habemus petentium. Prima nemore reformidans mei id, te eum ludus verear debitis. Eum cetero numquam an. Ius vide adipiscing et. Sumo nostrud at mea, tollit nostrud utroque est te, eu qui partem euismod senserit.</p>
</div>
<div style="position: absolute; top: -31.5px; left: 50%; width: 60px; height: 60px; background-color: #d73f09; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
<div style="width: 55px; height: 55px; background-color: white; border-radius: 50%; border: 3px solid #dc4405; display: flex; align-items: center; justify-content: center;">
<p style="margin: 0; font-size: 12px;">Part 26</p>
</div>
</div>
</div>
<div style="width: 300px; height: 500px; border: 3px solid #D73F09; position: relative; overflow: visible; margin-top: 50px;">
<div style="position: absolute; top: -36px; left: 50%; width: 60px; height: 60px; background-color: #d73f09; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
<div style="width: 55px; height: 55px; background-color: white; border-radius: 50%; border: 4px solid #dc4405; display: flex; align-items: center; justify-content: center;">
<p style="margin: 0; font-size: 12px;">Part 26</p>
</div>
</div>
</div>
<div style="width: 300px; height: 500px; border: 3px solid #D73F09; position: relative; overflow: visible; margin-top: 50px;">
<div style="position: absolute; top: -36px; left: 50%; width: 60px; height: 60px; background-color: white; border-radius: 50%; border: 3px solid #dc4405; display: flex; align-items: center; justify-content: center;">
<p style="margin: 0; font-size: 12px;">Part 26</p>
</div>
</div>