Skip to content

Commit 491fb9e

Browse files
mukundan-13mukundan-13
authored
Merge branch 'master' into mukundan-13-patch-6
2 parents eeeea02 + 6c32242 commit 491fb9e

File tree

181 files changed

+12906
-607
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

181 files changed

+12906
-607
lines changed

‎3D Rotation Square/Screencast from 31-10-23 07:12:05 PM IST.webm ‎3D Rotation Square/Screencast from 31-10-23 07_12_05 PM IST.webm

File renamed without changes.

‎3D card flip animation/index.html

+267
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
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+
<meta author="mohit" content="https://github.com/mohit2404" />
7+
<title>3D card flip transition with pure css Joker Art</title>
8+
<link rel="stylesheet" href="styles.css" media="all" />
9+
</head>
10+
<body>
11+
<main class="main">
12+
<div class="card-container">
13+
<input class="input" type="checkbox" id="flip" />
14+
<label class="label" for="flip"></label>
15+
<div class="the-card">
16+
<!-- front side of card -->
17+
<div class="card-box-front">
18+
<div class="cb-top">
19+
<div class="name">
20+
<span>J</span>
21+
<span>O</span>
22+
<span>K</span>
23+
<span>E</span>
24+
<span>R</span>
25+
</div>
26+
<div class="upper-part">
27+
<div class="triangle">
28+
<span class="t-circle"></span>
29+
</div>
30+
<div class="upper-circle"></div>
31+
<div class="lower-circle"></div>
32+
<div class="outer-circle">
33+
<div class="inner-circle"></div>
34+
</div>
35+
<div class="up-box">
36+
<span></span>
37+
<span></span>
38+
<span></span>
39+
<span></span>
40+
<span></span>
41+
<span></span>
42+
<span></span>
43+
<span></span>
44+
<span></span>
45+
<span></span>
46+
</div>
47+
</div>
48+
<div class="top-left-side">
49+
<div class="tls-top"></div>
50+
<div class="tls-left"></div>
51+
<div class="tls-right"></div>
52+
53+
<div class="bls-bottom"></div>
54+
<div class="bls-right"></div>
55+
<div class="bls-left">
56+
<span class="dot"></span>
57+
</div>
58+
</div>
59+
<div class="top-right-side">
60+
<div class="trs-top"></div>
61+
<div class="trs-left"></div>
62+
<div class="trs-right"></div>
63+
64+
<div class="brs-bottom"></div>
65+
<div class="brs-right"></div>
66+
<div class="brs-left">
67+
<span class="dot"></span>
68+
</div>
69+
</div>
70+
71+
<div class="middle-left-side">
72+
<div class="mls-top"></div>
73+
<div class="mls-left"></div>
74+
<div class="mls-right"></div>
75+
76+
<div class="mlsb-top"></div>
77+
<div class="mlsb-left">
78+
<span class="span3"></span>
79+
<span class="span2"></span>
80+
<span class="span1"></span>
81+
</div>
82+
<div class="mlsb-right"></div>
83+
</div>
84+
<div class="middle-right-side">
85+
<div class="mrs-top"></div>
86+
<div class="mrs-left">
87+
<span class="span"></span>
88+
</div>
89+
<div class="mrs-right"></div>
90+
91+
<div class="mrsb-top"></div>
92+
<div class="mrsb-left"></div>
93+
<div class="mrsb-right"></div>
94+
<div class="triangle">
95+
<span class="t-circle"></span>
96+
</div>
97+
</div>
98+
99+
<div class="mouth1">
100+
<div class="right"></div>
101+
<div class="r-middle"></div>
102+
<div class="m-line"></div>
103+
<div class="l-middle"></div>
104+
<div class="left"></div>
105+
</div>
106+
</div>
107+
<div class="cb-bottom">
108+
<div class="name">
109+
<span>J</span>
110+
<span>O</span>
111+
<span>K</span>
112+
<span>E</span>
113+
<span>R</span>
114+
</div>
115+
<div class="upper-part">
116+
<div class="triangle">
117+
<span class="t-circle"></span>
118+
</div>
119+
<div class="upper-circle"></div>
120+
<div class="lower-circle"></div>
121+
<div class="outer-circle">
122+
<div class="inner-circle"></div>
123+
</div>
124+
<div class="up-box">
125+
<span></span>
126+
<span></span>
127+
<span></span>
128+
<span></span>
129+
<span></span>
130+
<span></span>
131+
<span></span>
132+
<span></span>
133+
<span></span>
134+
<span></span>
135+
</div>
136+
</div>
137+
<div class="top-left-side">
138+
<div class="tls-top"></div>
139+
<div class="tls-left"></div>
140+
<div class="tls-right"></div>
141+
142+
<div class="bls-bottom"></div>
143+
<div class="bls-right"></div>
144+
<div class="bls-left">
145+
<span class="dot"></span>
146+
</div>
147+
</div>
148+
<div class="top-right-side">
149+
<div class="trs-top"></div>
150+
<div class="trs-left"></div>
151+
<div class="trs-right"></div>
152+
153+
<div class="brs-bottom"></div>
154+
<div class="brs-right"></div>
155+
<div class="brs-left">
156+
<span class="dot"></span>
157+
</div>
158+
</div>
159+
160+
<div class="middle-left-side">
161+
<div class="mls-top"></div>
162+
<div class="mls-left"></div>
163+
<div class="mls-right"></div>
164+
165+
<div class="mlsb-top"></div>
166+
<div class="mlsb-left">
167+
<span class="span3"></span>
168+
<span class="span2"></span>
169+
<span class="span1"></span>
170+
</div>
171+
<div class="mlsb-right"></div>
172+
</div>
173+
<div class="middle-right-side">
174+
<div class="mrs-top"></div>
175+
<div class="mrs-left">
176+
<span class="span"></span>
177+
</div>
178+
<div class="mrs-right"></div>
179+
180+
<div class="mrsb-top"></div>
181+
<div class="mrsb-left"></div>
182+
<div class="mrsb-right"></div>
183+
<div class="triangle">
184+
<span class="t-circle"></span>
185+
</div>
186+
</div>
187+
188+
<div class="mouth1">
189+
<div class="right"></div>
190+
<div class="r-middle"></div>
191+
<div class="m-line"></div>
192+
<div class="l-middle"></div>
193+
<div class="left"></div>
194+
</div>
195+
</div>
196+
</div>
197+
198+
<!-- back side of card -->
199+
<div class="card-box-back">
200+
<div class="bg1"></div>
201+
<div class="bg2">
202+
<div class="line"></div>
203+
<div class="line"></div>
204+
<div class="line"></div>
205+
<div class="line"></div>
206+
<div class="line"></div>
207+
<div class="line"></div>
208+
<div class="line"></div>
209+
<div class="line"></div>
210+
<div class="line"></div>
211+
<div class="line"></div>
212+
<div class="line"></div>
213+
<div class="line"></div>
214+
<div class="line"></div>
215+
<div class="line"></div>
216+
<div class="line"></div>
217+
<div class="line"></div>
218+
<div class="line"></div>
219+
</div>
220+
<div class="bg-1"></div>
221+
<div class="bg-1-dotted-circle">
222+
<div class="row"></div>
223+
<div class="row"></div>
224+
<div class="row"></div>
225+
<div class="row"></div>
226+
<div class="row"></div>
227+
<div class="row"></div>
228+
<div class="row"></div>
229+
<div class="row"></div>
230+
<div class="row"></div>
231+
<div class="row"></div>
232+
<div class="row"></div>
233+
<div class="row"></div>
234+
</div>
235+
<div class="bg-2"></div>
236+
<div class="bg-2-dotted-circle">
237+
<div class="row"></div>
238+
<div class="row"></div>
239+
<div class="row"></div>
240+
<div class="row"></div>
241+
<div class="row"></div>
242+
<div class="row"></div>
243+
<div class="row"></div>
244+
<div class="row"></div>
245+
<div class="row"></div>
246+
<div class="row"></div>
247+
<div class="row"></div>
248+
<div class="row"></div>
249+
<div class="row"></div>
250+
</div>
251+
<div class="circle">
252+
<img
253+
src="https://avatars.githubusercontent.com/u/109670799?v=4"
254+
alt="logo"
255+
/>
256+
</div>
257+
<div class="content">
258+
<strong>Mohit</strong>
259+
<p>If you have any suggestions please please let me know</p>
260+
<a class="id-link" href="https://github.com/mohit2404">Profile</a>
261+
</div>
262+
</div>
263+
</div>
264+
</div>
265+
</main>
266+
</body>
267+
</html>

0 commit comments

Comments
 (0)