-
Notifications
You must be signed in to change notification settings - Fork 105
/
omriluz_heavy-emu-75.html
60 lines (57 loc) · 4.09 KB
/
omriluz_heavy-emu-75.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
<!-- From Uiverse.io by omriluz - Tags: simple, tooltip, icon, animation, hover effect, css -->
<div class="flex h-screen items-center justify-center">
<div
class="group relative flex h-40 w-40 items-center justify-center rounded-full border-[3px] border-purple-900 bg-gradient-to-bl from-amber-300 to-purple-500"
>
<div
class="absolute inset-0 z-10 flex flex-col items-center justify-center text-center"
>
<span class="rounded-lg bg-white/50 p-2 text-xl font-bold text-gray-600"
>Uiverse.io</span
>
</div>
<svg
class="absolute left-8 top-6 aspect-square w-10 text-amber-600 transition-all duration-1000 group-hover:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="currentColor"
version="1.1"
id="Capa_1"
viewBox="0 0 45.973 45.973"
xml:space="preserve"
>
<g>
<g>
<path
d="M43.454,18.443h-2.437c-0.453-1.766-1.16-3.42-2.082-4.933l1.752-1.756c0.473-0.473,0.733-1.104,0.733-1.774 c0-0.669-0.262-1.301-0.733-1.773l-2.92-2.917c-0.947-0.948-2.602-0.947-3.545-0.001l-1.826,1.815 C30.9,6.232,29.296,5.56,27.529,5.128V2.52c0-1.383-1.105-2.52-2.488-2.52h-4.128c-1.383,0-2.471,1.137-2.471,2.52v2.607 c-1.766,0.431-3.38,1.104-4.878,1.977l-1.825-1.815c-0.946-0.948-2.602-0.947-3.551-0.001L5.27,8.205 C4.802,8.672,4.535,9.318,4.535,9.978c0,0.669,0.259,1.299,0.733,1.772l1.752,1.76c-0.921,1.513-1.629,3.167-2.081,4.933H2.501 C1.117,18.443,0,19.555,0,20.935v4.125c0,1.384,1.117,2.471,2.501,2.471h2.438c0.452,1.766,1.159,3.43,2.079,4.943l-1.752,1.763 c-0.474,0.473-0.734,1.106-0.734,1.776s0.261,1.303,0.734,1.776l2.92,2.919c0.474,0.473,1.103,0.733,1.772,0.733 s1.299-0.261,1.773-0.733l1.833-1.816c1.498,0.873,3.112,1.545,4.878,1.978v2.604c0,1.383,1.088,2.498,2.471,2.498h4.128 c1.383,0,2.488-1.115,2.488-2.498v-2.605c1.767-0.432,3.371-1.104,4.869-1.977l1.817,1.812c0.474,0.475,1.104,0.735,1.775,0.735 c0.67,0,1.301-0.261,1.774-0.733l2.92-2.917c0.473-0.472,0.732-1.103,0.734-1.772c0-0.67-0.262-1.299-0.734-1.773l-1.75-1.77 c0.92-1.514,1.627-3.179,2.08-4.943h2.438c1.383,0,2.52-1.087,2.52-2.471v-4.125C45.973,19.555,44.837,18.443,43.454,18.443z M22.976,30.85c-4.378,0-7.928-3.517-7.928-7.852c0-4.338,3.55-7.85,7.928-7.85c4.379,0,7.931,3.512,7.931,7.85 C30.906,27.334,27.355,30.85,22.976,30.85z"
></path>
</g>
</g>
</svg>
<svg
class="absolute left-[7px] top-[50px] aspect-square w-10 rotate-45 text-amber-400 transition-all duration-1000 group-hover:rotate-[225deg]"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="currentColor"
version="1.1"
id="Capa_1"
viewBox="0 0 576.048 576.047"
xml:space="preserve"
>
<g>
<g>
<path
d="M491.103,215.312c-8.841-24.651-22.222-47.73-39.651-67.984l41.965-73.324L368.537,2.532l-41.965,73.324 c-26.307-4.777-52.972-4.618-78.703,0.245L205.384,3.135L81.035,75.571l42.485,72.966c-8.394,9.89-16.105,20.572-22.807,32.28 c-6.683,11.677-11.989,23.736-16.282,36.013L0,217.154l0.529,143.909l84.45-0.318c8.822,24.68,22.194,47.711,39.636,67.979 l-41.965,73.32l124.878,71.473l41.965-73.324c26.292,4.768,52.954,4.648,78.672-0.264l42.501,72.979l124.349-72.434l-42.487-72.93 c8.394-9.932,16.138-20.633,22.821-32.311c6.701-11.707,11.989-23.779,16.298-36.043l84.4-0.303l-0.529-143.909L491.103,215.312z M413.733,359.967c-39.734,69.426-128.229,93.496-197.655,53.762s-93.495-128.23-53.761-197.655 c39.734-69.425,128.229-93.495,197.654-53.761C429.397,202.047,453.468,290.542,413.733,359.967z"
></path>
</g>
</g>
</svg>
<div
class="absolute h-full w-full bg-gradient-to-br from-amber-300 to-purple-500 opacity-0 group-hover:opacity-90 rounded-none group-hover:rounded-[100px] right-0 group-hover:-right-[50%] blur-md group-hover:blur-none z-40 transition-all duration-1000 flex justify-center items-center"
>
<span class="rounded-lg bg-white/50 p-2 text-xl font-bold text-gray-600"
>Let's Create!</span
>
</div>
</div>
</div>