Skip to content

Commit b69ab40

Browse files
dev-shettydev-shetty
authored
Merge branch 'master' into add-new-feature4
2 parents 54ead3a + e966ae5 commit b69ab40

File tree

5 files changed

+166
-2
lines changed

5 files changed

+166
-2
lines changed

‎UI Snippets/Bouncing ball/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="style.css">
5+
</head>
6+
<body>
7+
<div class="ball"></div>
8+
</body>
9+
</html>

‎UI Snippets/Bouncing ball/style.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
margin: 0;
7+
background-color: #f0f0f0;
8+
}
9+
10+
.ball {
11+
width: 100px;
12+
height: 100px;
13+
background-color: #3498db;
14+
border-radius: 50%;
15+
position: relative;
16+
animation: bounce 2s infinite;
17+
}
18+
19+
@keyframes bounce {
20+
0%, 100% {
21+
top: 0;
22+
}
23+
50% {
24+
top: 200px;
25+
}
26+
}

‎UI Snippets/Magic card/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<div class="card">
11+
Magic Card
12+
</div>
13+
14+
<a href="https://mythrillfiction.com/" target="_blank">Mythrill</a>
15+
</body>
16+
</html>

‎UI Snippets/Magic card/style.css

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
@property --rotate {
2+
syntax: "<angle>";
3+
initial-value: 132deg;
4+
inherits: false;
5+
}
6+
7+
:root {
8+
--card-height: 65vh;
9+
--card-width: calc(var(--card-height) / 1.5);
10+
}
11+
12+
13+
body {
14+
min-height: 100vh;
15+
background: #212534;
16+
display: flex;
17+
align-items: center;
18+
flex-direction: column;
19+
padding-top: 2rem;
20+
padding-bottom: 2rem;
21+
box-sizing: border-box;
22+
}
23+
24+
25+
.card {
26+
background: #191c29;
27+
width: var(--card-width);
28+
height: var(--card-height);
29+
padding: 3px;
30+
position: relative;
31+
border-radius: 6px;
32+
justify-content: center;
33+
align-items: center;
34+
text-align: center;
35+
display: flex;
36+
font-size: 1.5em;
37+
color: rgb(88 199 250 / 0%);
38+
cursor: pointer;
39+
font-family: cursive;
40+
}
41+
42+
.card:hover {
43+
color: rgb(88 199 250 / 100%);
44+
transition: color 1s;
45+
}
46+
.card:hover:before, .card:hover:after {
47+
animation: none;
48+
opacity: 0;
49+
}
50+
51+
52+
.card::before {
53+
content: "";
54+
width: 104%;
55+
height: 102%;
56+
border-radius: 8px;
57+
background-image: linear-gradient(
58+
var(--rotate)
59+
, #5ddcff, #3c67e3 43%, #4e00c2);
60+
position: absolute;
61+
z-index: -1;
62+
top: -1%;
63+
left: -2%;
64+
animation: spin 2.5s linear infinite;
65+
}
66+
67+
.card::after {
68+
position: absolute;
69+
content: "";
70+
top: calc(var(--card-height) / 6);
71+
left: 0;
72+
right: 0;
73+
z-index: -1;
74+
height: 100%;
75+
width: 100%;
76+
margin: 0 auto;
77+
transform: scale(0.8);
78+
filter: blur(calc(var(--card-height) / 6));
79+
background-image: linear-gradient(
80+
var(--rotate)
81+
, #5ddcff, #3c67e3 43%, #4e00c2);
82+
opacity: 1;
83+
transition: opacity .5s;
84+
animation: spin 2.5s linear infinite;
85+
}
86+
87+
@keyframes spin {
88+
0% {
89+
--rotate: 0deg;
90+
}
91+
100% {
92+
--rotate: 360deg;
93+
}
94+
}
95+
96+
a {
97+
color: #212534;
98+
text-decoration: none;
99+
font-family: sans-serif;
100+
font-weight: bold;
101+
margin-top: 2rem;
102+
}

‎client/src/lib/snippets.json

+13-2
Original file line numberDiff line numberDiff line change
@@ -114,18 +114,29 @@
114114
"author":"Rohan"
115115
},
116116
{
117+
"name":"Magic Card",
118+
"codepen-link":"https://codepen.io/Nandan-aghera/pen/WNPNjbW",
119+
"image-link":"https://imagetolink.com/ib/5zU6L3qQWj",
120+
"author":"Nandan"
121+
},
122+
{
117123
"name":"Game Interface",
118124
"codepen-link":"https://codepen.io/Nandan-aghera/pen/LYqYZjv",
119125
"image-link":"https://imagetolink.com/ib/DIWEoDwgGu",
120126
"author":"Nandan"
121127
},
122128
{
123-
124129
"name":"Transportation Booking UI",
125130
"codepen-link":"https://codepen.io/Nandan-aghera/pen/yLZYgwg",
126131
"image-link":"https://imagetolink.com/ib/QLKsJROmte",
127132
"author":"Nandan"
128-
133+
},
134+
{
135+
"name":"Bouncing Ball",
136+
"codepen-link":"https://codepen.io/Nandan-aghera/pen/gOqOXEw",
137+
"image-link":"https://imagetolink.com/ib/3HUDdOQtLY",
138+
"author":"Nandan"
129139
}
130140

141+
131142
]

0 commit comments

Comments
 (0)