Skip to content

Commit 5c33370

Browse files
nidhi8404nidhi8404
authored
Merge branch 'master' into design/bus
2 parents bf4bc5c + 89f2e7c commit 5c33370

File tree

204 files changed

+13321
-743
lines changed

Some content is hidden

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

204 files changed

+13321
-743
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎3D Earth/Untitled video - Made with Clipchamp.mp4

3.75 MB
Binary file not shown.

‎3D Earth/index.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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+
<title>Correct 3D Animated Spherical Earth</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
height: 100vh;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
background-color: #000;
15+
overflow: hidden;
16+
perspective: 1000px;
17+
}
18+
19+
.scene {
20+
width: 300px;
21+
height: 300px;
22+
position: relative;
23+
transform-style: preserve-3d;
24+
animation: rotate 20s linear infinite;
25+
}
26+
27+
.globe {
28+
width: 100%;
29+
height: 100%;
30+
border-radius: 50%;
31+
position: absolute;
32+
transform-style: preserve-3d;
33+
background: url('https://eoimages.gsfc.nasa.gov/images/imagerecords/57000/57735/land_ocean_ice_cloud_2048.jpg');
34+
background-size: 200%;
35+
}
36+
37+
.globe::before {
38+
content: '';
39+
position: absolute;
40+
top: 0;
41+
left: 0;
42+
width: 100%;
43+
height: 100%;
44+
border-radius: 50%;
45+
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.4) 80%);
46+
}
47+
48+
.hemisphere {
49+
position: absolute;
50+
width: 100%;
51+
height: 100%;
52+
border-radius: 50%;
53+
overflow: hidden;
54+
transform-style: preserve-3d;
55+
}
56+
57+
.front { transform: translateZ(1px); }
58+
.back { transform: rotateY(180deg) translateZ(1px); }
59+
60+
@keyframes rotate {
61+
0% { transform: rotateY(0deg); }
62+
100% { transform: rotateY(360deg); }
63+
}
64+
</style>
65+
</head>
66+
<body>
67+
<div class="scene">
68+
<div class="globe">
69+
<div class="hemisphere front"></div>
70+
<div class="hemisphere back"></div>
71+
</div>
72+
</div>
73+
</body>
74+
</html>

‎3D Flipping Card Component/images/chip.png

29.5 KB
Loading

‎3D Flipping Card Component/images/logo.png

5.14 KB
Loading

‎3D Flipping Card Component/index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Flipping Card</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<section>
13+
<div class="container">
14+
<div class="card front-face">
15+
<header>
16+
<span class="logo">
17+
<img src="images/logo.png" alt="">
18+
<h5>mastercard</h5>
19+
</span>
20+
<img src="images/chip.png" alt="" class="chip">
21+
</header>
22+
23+
<div class="card-details">
24+
<div class="name-number">
25+
<h6>Card Number</h6>
26+
<div class="number">1000 2000 0002 0001</div>
27+
<div class="name">Ayush Agrawal</div>
28+
</div>
29+
30+
<div class="valid-date">
31+
<div class="validity">
32+
<h6>VALID</h6>
33+
<h6>THRU</h6>
34+
</div>
35+
<div class="date">08/26</div>
36+
</div>
37+
</div>
38+
</div>
39+
40+
<div class="card back-face">
41+
<h6>For customer service call +977 4343 3433 or email at [email protected]</h6>
42+
<span class="magnetic-strip"></span>
43+
<div class="signature"><i>056</i></div>
44+
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique cum unde labore sed molestiae placeat molestias enim error praesentium, quo temporibus facilis rerum quos nesciunt? Libero doloremque natus consectetur. Animi libero magni numquam soluta nobis. Deserunt incidunt quos hic, nesciunt dolorum facere in, expedita, asperiores accusamus iusto amet quo ullam.</h5>
45+
</div>
46+
</div>
47+
</section>
48+
</body>
49+
50+
</html>

‎3D Flipping Card Component/style.css

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
font-family: "Poppins", sans-serif;
7+
box-sizing: border-box;
8+
}
9+
10+
section {
11+
position: relative;
12+
min-height: 100vh;
13+
width: 100%;
14+
background-color: #121321;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
color: white;
19+
perspective: 1000px;
20+
}
21+
22+
section::before {
23+
content: '';
24+
position: absolute;
25+
height: 240px;
26+
width: 240px;
27+
border-radius: 50%;
28+
background: linear-gradient(90deg, #9c27b0, #f3f5f5);
29+
transform: translate(-150px, -100px);
30+
}
31+
32+
section::after {
33+
content: '';
34+
position: absolute;
35+
height: 240px;
36+
width: 240px;
37+
border-radius: 50%;
38+
background: linear-gradient(90deg, #9c27b0, #f3f5f5);
39+
transform: translate(150px, 100px);
40+
}
41+
42+
.container {
43+
height: 230px;
44+
width: 380px;
45+
position: relative;
46+
z-index: 10;
47+
transition: 0.6s;
48+
transform-style: preserve-3d;
49+
}
50+
51+
.container:hover{
52+
transform: rotateY(180deg);
53+
}
54+
55+
.container .card {
56+
position: absolute;
57+
background-color: rgb(255, 255, 255, 0.1);
58+
height: 100%;
59+
width: 100%;
60+
backdrop-filter: blur(25px);
61+
border-radius: 30px;
62+
box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.25);
63+
border: 1px solid rgb(255, 255, 255, 0.1);
64+
padding: 25px;
65+
backface-visibility: hidden;
66+
}
67+
68+
.front-face .logo {
69+
display: flex;
70+
align-items: center;
71+
gap: 12px;
72+
}
73+
74+
.front-face header {
75+
display: flex;
76+
align-items: center;
77+
justify-content: space-between;
78+
}
79+
80+
.front-face .logo img {
81+
width: 50px;
82+
}
83+
84+
.front-face .logo h5 {
85+
font-size: 18px;
86+
font-weight: 400;
87+
}
88+
89+
.front-face .chip {
90+
width: 50px;
91+
}
92+
93+
.front-face .card-details {
94+
display: flex;
95+
justify-content: space-between;
96+
align-items: flex-end;
97+
margin-top: 50px;
98+
}
99+
100+
.name-number h6 {
101+
font-size: 10px;
102+
font-weight: 400;
103+
}
104+
105+
.name-number .number {
106+
font-size: 18px;
107+
font-weight: 400;
108+
}
109+
110+
.name-number .name {
111+
font-size: 16px;
112+
font-weight: 400;
113+
margin-top: 20px;
114+
}
115+
116+
.valid-date {
117+
display: flex;
118+
justify-content: center;
119+
align-items: center;
120+
gap: 4px;
121+
}
122+
123+
.valid-date .validity {
124+
line-height: 6px;
125+
}
126+
127+
.valid-date .validity h6 {
128+
font-size: 8px;
129+
}
130+
131+
.valid-date .date {
132+
font-size: 14px;
133+
}
134+
135+
.card.back-face {
136+
border: none;
137+
padding: 20px 25px 25px 25px;
138+
transform: rotateY(180deg);
139+
}
140+
141+
.back-face h6 {
142+
font-size: 8px;
143+
font-weight: 400;
144+
}
145+
146+
.back-face .magnetic-strip {
147+
position: absolute;
148+
top: 36px;
149+
left: 0px;
150+
height: 45px;
151+
width: 100%;
152+
background-color: black;
153+
}
154+
155+
.back-face .signature {
156+
margin-top: 60px;
157+
background: repeating-linear-gradient(white, white 3px, #bebebe 0px, #bebebe 9px);
158+
width: 85%;
159+
height: 30px;
160+
border-radius: 6px;
161+
position: relative;
162+
display: flex;
163+
align-items: center;
164+
justify-content: flex-end;
165+
}
166+
167+
.signature i {
168+
color: black;
169+
margin-right: -30px;
170+
font-size: 12px;
171+
font-weight: 500;
172+
background-color: white;
173+
padding: 4px 6px;
174+
border-radius: 4px;
175+
z-index: -1;
176+
}
177+
178+
.back-face h5 {
179+
font-size: 8px;
180+
font-weight: 400;
181+
margin-top: 15px;
182+
}

0 commit comments

Comments
 (0)