swadhin / gellary public

update

swadhinbiswas committed 2 years ago
9faafe7
1 parent d1fc4cd
commit 9faafe7
10 files changed
+362 -5
Showing 10 changed files+362-5
asset/Screenshot from 2024-03-26 02-55-11.pngasset/grid1.pngbackend/html/animationgrid1.cssbackend/html/animationgrid1.htmlbackend/html/creditcard1.htmlbackend/html/imagefrid1.cssbackend/html/imagegrid1.htmlbackend/html/loginpage1.htmlbackend/html/slider1.htmlbackend/html/test.html
▼asset/Screenshot from 2024-03-26 02-55-11.png
+0-0
Binary file not shown.
▼asset/grid1.png
+0-0
Binary file not shown.
▼backend/html/animationgrid1.css
+91-0
@@ -0,0 +1,91 @@
1
+.animated-grid {
2
+ height: 85vh;
3
+ margin-bottom: 200px;
4
+
5
+ display: grid;
6
+ gap: 1rem;
7
+
8
+ /* Explicit grid */
9
+ grid-template-areas:
10
+ 'a b c d'
11
+ 'l 🌟 🌟 e'
12
+ 'k 🌟 🌟 f'
13
+ 'j i h g';
14
+
15
+ grid-template-rows: repeat(4, 25%);
16
+ grid-template-columns: 240px auto auto 240px;
17
+
18
+ --stagger-delay: 100ms;
19
+}
20
+
21
+@keyframes cardEntrance {
22
+ from {
23
+ opacity: 0;
24
+ transform: scale(0.3);
25
+ filter: hue-rotate(180deg);
26
+ }
27
+ to {
28
+ opacity: 1;
29
+ transform: scale(1);
30
+ filter: hue-rotate(0deg);
31
+ }
32
+}
33
+
34
+.card {
35
+ background-color: rgb(36, 243, 147);
36
+ animation: cardEntrance 700ms ease-out;
37
+ animation-fill-mode: backwards;
38
+}
39
+
40
+.card:nth-child(1) {
41
+ grid-area: a;
42
+ animation-delay: calc(1 * var(--stagger-delay));
43
+}
44
+.card:nth-child(2) {
45
+ grid-area: b;
46
+ animation-delay: calc(2 * var(--stagger-delay));
47
+}
48
+.card:nth-child(3) {
49
+ grid-area: c;
50
+ animation-delay: calc(3 * var(--stagger-delay));
51
+}
52
+.card:nth-child(4) {
53
+ grid-area: d;
54
+ animation-delay: calc(4 * var(--stagger-delay));
55
+}
56
+.card:nth-child(5) {
57
+ grid-area: e;
58
+ animation-delay: calc(5 * var(--stagger-delay));
59
+}
60
+.card:nth-child(6) {
61
+ grid-area: f;
62
+ animation-delay: calc(6 * var(--stagger-delay));
63
+}
64
+.card:nth-child(7) {
65
+ grid-area: g;
66
+ animation-delay: calc(7 * var(--stagger-delay));
67
+}
68
+.card:nth-child(8) {
69
+ grid-area: h;
70
+ animation-delay: calc(8 * var(--stagger-delay));
71
+}
72
+.card:nth-child(9) {
73
+ grid-area: i;
74
+ animation-delay: calc(9 * var(--stagger-delay));
75
+}
76
+.card:nth-child(10) {
77
+ grid-area: j;
78
+ animation-delay: calc(10 * var(--stagger-delay));
79
+}
80
+.card:nth-child(11) {
81
+ grid-area: k;
82
+ animation-delay: calc(11 * var(--stagger-delay));
83
+}
84
+.card:nth-child(12) {
85
+ grid-area: l;
86
+ animation-delay: calc(12 * var(--stagger-delay));
87
+}
88
+.card:last-child {
89
+ grid-area: 🌟;
90
+ animation-delay: calc(13 * var(--stagger-delay));
91
+}
0
92
▼backend/html/animationgrid1.html
+20-0
@@ -0,0 +1,20 @@
1
+<head>
2
+ <link rel="stylesheet" href="https://cdn.statically.io/gh/thebdtorrents/cdn/main/animationgrid1.css" />
3
+</head>
4
+
5
+
6
+<section class="animated-grid">
7
+ <div class="card" style="background-image:url('https://pics.craiyon.com/2023-06-14/faeb941619b04c2ebed8865458609139.webp')">1</div>
8
+ <div class="card"style="background-image:url('https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIzLTA5L3Jhd3BpeGVsX29mZmljZV8zMV9jbG9zZV91cF9pbGx1c3RhdGlvbl9vZl9hX3Ntb2tpbmdfdGVlbmFnZXJfcF9iZWVjMDY0MS00ODk3LTQ4ZjktOGYzYS01YTQwODA4ZjQ5OTZfMS5qcGc.jpg')">b</div>
9
+ <div class="card">c</div>
10
+ <div class="card">d</div>
11
+ <div class="card">e</div>
12
+ <div class="card">f</div>
13
+ <div class="card">g</div>
14
+ <div class="card">h</div>
15
+ <div class="card">i</div>
16
+ <div class="card">j</div>
17
+ <div class="card">k</div>
18
+ <div class="card">l</div>
19
+ <div class="card">main</div>
20
+</section>
0
21
▼backend/html/creditcard1.html
+72-0
@@ -0,0 +1,72 @@
1
+
2
+<link rel="preconnect" href="https://fonts.gstatic.com">
3
+<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
4
+<link rel="preconnect" href="https://fonts.gstatic.com">
5
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap" rel="stylesheet">
6
+
7
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
8
+
9
+<link rel="stylesheet" href="https://cdn.statically.io/gh/thebdtorrents/cdn/main/card/creditcard1.css">
10
+
11
+<div class="box">
12
+
13
+
14
+ <div class="mdl">
15
+ <div class="circles">
16
+ <div class="circle circle-1"></div>
17
+ <div class="circle circle-2"></div>
18
+ </div>
19
+
20
+ <div class="card">
21
+
22
+ <form>
23
+ <div class="logo">
24
+ <?xml version="1.0" encoding="UTF-8"?>
25
+ <svg width="48px" height="48px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
26
+ <title>Group</title>
27
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
28
+ <g id="Group" fill="#FFFFFF">
29
+ <circle id="Oval" cx="16" cy="16" r="16"></circle>
30
+ <circle id="Oval" cx="16" cy="48" r="16"></circle>
31
+ <circle id="Oval" cx="48" cy="16" r="16"></circle>
32
+ <circle id="Oval" cx="48" cy="48" r="16"></circle>
33
+ </g>
34
+ </g>
35
+ </svg>
36
+
37
+ </div>
38
+ <div class="card-number">
39
+ <label>Card Number</label>
40
+ <input id="card-number" placeholder="1234 1234 1234 1234" type="text" required maxlength="19">
41
+ <span class="underline"></span>
42
+
43
+ </div>
44
+ <br>
45
+ <div class="group">
46
+ <div class="card-name">
47
+ <label>Card Holder</label>
48
+ <input id="card-name" placeholder="ISRAEL ISRAELI" type="text" required>
49
+ <span class="underline"></span>
50
+
51
+ </div>
52
+ <div class="expiration-date">
53
+ <label>Exp. Date</label>
54
+ <input id="card-exp" placeholder="10/25" type="text" maxlength="5" required>
55
+ <span class="underline"></span>
56
+
57
+ </div>
58
+ <div class="ccv">
59
+ <label>CCV</label>
60
+ <input id="card-ccv" placeholder="123" type="text" maxlength="3" required>
61
+ <span class="underline"></span>
62
+ </div>
63
+
64
+ </div>
65
+ </form>
66
+ </div>
67
+ </div>
68
+
69
+</div>
70
+
71
+
72
+<script src="https://cdn.statically.io/gh/thebdtorrents/cdn/main/card/creditcard1.js"></script>
0
73
▼backend/html/imagefrid1.css
+39-0
@@ -0,0 +1,39 @@
1
+body {
2
+ margin: 0;
3
+}
4
+
5
+.image-grid {
6
+ --gap: 16px;
7
+ --num-cols: 4;
8
+ --row-height: 300px;
9
+
10
+ box-sizing: border-box;
11
+ padding: var(--gap);
12
+
13
+ display: grid;
14
+ grid-template-columns: repeat(var(--num-cols), 1fr);
15
+ grid-auto-rows: var(--row-height);
16
+ gap: var(--gap);
17
+}
18
+
19
+.image-grid > img {
20
+ width: 100%;
21
+ height: 100%;
22
+ object-fit: cover;
23
+}
24
+
25
+.image-grid-col-2 {
26
+ grid-column: span 2;
27
+}
28
+
29
+.image-grid-row-2 {
30
+ grid-row: span 2;
31
+}
32
+
33
+/* Anything udner 1024px */
34
+@media screen and (max-width: 1024px) {
35
+ .image-grid {
36
+ --num-cols: 2;
37
+ --row-height: 200px;
38
+ }
39
+}
0
40
▼backend/html/imagegrid1.html
+15-0
@@ -0,0 +1,15 @@
1
+
2
+<head>
3
+ <link rel="stylesheet" href="https://cdn.statically.io/gh/thebdtorrents/cdn/main/imagefrid1.css" />
4
+</head>
5
+
6
+ <div class="image-grid">
7
+ <img class="image-grid-col-2 image-grid-row-2" src="https://pics.craiyon.com/2023-06-14/faeb941619b04c2ebed8865458609139.webp" alt="architecture">
8
+ <img src="https://img.freepik.com/premium-vector/amazing-virtual-world-digital-art-graphics-science-technology-future-virtual-reality-glasses-metaverse-colorful-planets-space-fantasy-concept-vector-illustrationgenerative-ai_748571-1002.jpg" alt="architecture">
9
+ <img src="https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIzLTA5L3Jhd3BpeGVsX29mZmljZV8zMV9jbG9zZV91cF9pbGx1c3RhdGlvbl9vZl9hX3Ntb2tpbmdfdGVlbmFnZXJfcF9iZWVjMDY0MS00ODk3LTQ4ZjktOGYzYS01YTQwODA4ZjQ5OTZfMS5qcGc.jpg"alt="architecture">
10
+ <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/46ef3f72445533.5ead053854cf3.png" alt="architecture">
11
+ <img src="https://illlustrations.co/static/188160589e999c63c66e0efeaed56ce4/ee604/105-freelancer.png" alt="architecture">
12
+ </div>
13
+
14
+
15
+
0
16
▼backend/html/loginpage1.html
+23-0
@@ -0,0 +1,23 @@
1
+<link rel="stylesheet" href="https://cdn.statically.io/gh/thebdtorrents/cdn/main/loginpage/css/loginpage1.css">
2
+
3
+<div class="ring">
4
+ <i style="--clr:#3b34f9;"></i>
5
+ <i style="--clr:#20b7e1;"></i>
6
+ <i style="--clr:#fffd44;"></i>
7
+ <div class="login">
8
+ <h2>Login</h2>
9
+ <div class="inputBx">
10
+ <input type="text" placeholder="Username">
11
+ </div>
12
+ <div class="inputBx">
13
+ <input type="password" placeholder="Password">
14
+ </div>
15
+ <div class="inputBx">
16
+ <input type="submit" value="Sign in">
17
+ </div>
18
+ <div class="links">
19
+ <a href="#">Forget Password</a>
20
+ <a href="#">Signup</a>
21
+ </div>
22
+ </div>
23
+ </div>
0
24
▼backend/html/slider1.html
+101-0
@@ -0,0 +1,101 @@
1
+<link rel="stylesheet" href="https://cdn.statically.io/gh/thebdtorrents/cdn/main/slider1.css">
2
+
3
+<div class="slider">
4
+ <!-- list Items -->
5
+ <div class="list">
6
+ <div class="item active">
7
+ <img src="https://github.com/HoanghoDev/slider/blob/main/image/img1.png?raw=true">
8
+ <div class="content">
9
+ <p>design</p>
10
+ <h2>Slider 01</h2>
11
+ <p>
12
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, neque?
13
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ex.
14
+ </p>
15
+ </div>
16
+ </div>
17
+ <div class="item">
18
+ <img src="https://github.com/HoanghoDev/slider/blob/main/image/img2.jpg?raw=true">
19
+ <div class="content">
20
+ <p>design</p>
21
+ <h2>Slider 02</h2>
22
+ <p>
23
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, neque?
24
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ex.
25
+ </p>
26
+ </div>
27
+ </div>
28
+ <div class="item">
29
+ <img src="https://github.com/HoanghoDev/slider/blob/main/image/img3.jpg?raw=true">
30
+ <div class="content">
31
+ <p>design</p>
32
+ <h2>Slider 03</h2>
33
+ <p>
34
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, neque?
35
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ex.
36
+ </p>
37
+ </div>
38
+ </div>
39
+ <div class="item">
40
+ <img src="https://github.com/HoanghoDev/slider/blob/main/image/img4.jpg?raw=true">
41
+ <div class="content">
42
+ <p>design</p>
43
+ <h2>Slider 04</h2>
44
+ <p>
45
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, neque?
46
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ex.
47
+ </p>
48
+ </div>
49
+ </div>
50
+ <div class="item">
51
+ <img src="https://github.com/HoanghoDev/slider/blob/main/image/img5.jpg?raw=true">
52
+ <div class="content">
53
+ <p>design</p>
54
+ <h2>Slider 05</h2>
55
+ <p>
56
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, neque?
57
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ex.
58
+ </p>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ <!-- button arrows -->
63
+ <div class="arrows">
64
+ <button id="prev"><</button>
65
+ <button id="next">></button>
66
+ </div>
67
+ <!-- thumbnail -->
68
+ <div class="thumbnail">
69
+ <div class="item active">
70
+ <img src="https://github.com/HoanghoDev/slider/blob/main/image/img1.png?raw=true">
71
+ <div class="content">
72
+ Name Slider
73
+ </div>
74
+ </div>
75
+ <div class="item">
76
+ <img src="https://github.com/HoanghoDev/slider/blob/main/image/img2.jpg?raw=true">
77
+ <div class="content">
78
+ Name Slider
79
+ </div>
80
+ </div>
81
+ <div class="item">
82
+ <img src="https://github.com/HoanghoDev/slider/blob/main/image/img3.jpg?raw=true">
83
+ <div class="content">
84
+ Name Slider
85
+ </div>
86
+ </div>
87
+ <div class="item">
88
+ <img src="https://github.com/HoanghoDev/slider/blob/main/image/img4.jpg?raw=true">
89
+ <div class="content">
90
+ Name Slider
91
+ </div>
92
+ </div>
93
+ <div class="item">
94
+ <img src="https://github.com/HoanghoDev/slider/blob/main/image/img5.jpg?raw=true">
95
+ <div class="content">
96
+ Name Slider
97
+ </div>
98
+ </div>
99
+ </div>
100
+</div>
101
+<script src="https://cdn.statically.io/gh/thebdtorrents/cdn/main/script/slider1.js"></script>
0
102
▼backend/html/test.html
+1-5
@@ -10,11 +10,7 @@
10
10
padding: 0;
11
11
box-sizing: border-box;
12
12
}
13
-
14
- body{
15
- background: #eaeaea;
16
- overflow: hidden;
17
- }
13
+
18
14
19
15
.container{
20
16
position: absolute;
21
17