Skip to content

Commit f237fa2

Browse files
4n1rudh44n1rudh4
authored
Merge pull request #19 from 4n1rudh4/main
UPDATE GALLERY COMPONENT
2 parents 235e2a1 + a84b1ba commit f237fa2

File tree

3 files changed

+253
-1
lines changed

3 files changed

+253
-1
lines changed

‎vriddhi/src/app/Components/Gallery/gallery.css

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
:root {
6+
--foreground-rgb: 0, 0, 0;
7+
--background-start-rgb: 214, 219, 220;
8+
--background-end-rgb: 255, 255, 255;
9+
}
10+
11+
@media (prefers-color-scheme: dark) {
12+
:root {
13+
--foreground-rgb: 255, 255, 255;
14+
--background-start-rgb: 0, 0, 0;
15+
--background-end-rgb: 0, 0, 0;
16+
}
17+
}
18+
19+
body {
20+
color: rgb(var(--foreground-rgb));
21+
background: linear-gradient(to bottom,
22+
transparent,
23+
rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
24+
}
25+
26+
.custom-gradient {
27+
background-color: rgba(17, 26, 33, 255);
28+
background: linear-gradient(180deg, #111A21 14.58%, rgba(255, 255, 255, 0.00) 100%);
29+
mix-blend-mode: multiply;
30+
31+
}
32+
33+
.linear {
34+
background: linear-gradient(180deg, #111A21 14.58%, rgba(17, 26, 33, 0.00) 100%);
35+
}
36+
37+
.tc {
38+
background: linear-gradient(180deg, rgba(17, 26, 33, 0.00) 14.58%, #111A21 100%);
39+
}
40+
41+
.bg1 {
42+
background-color: #D9D9D9;
43+
}
44+
45+
/* Define a custom scroll animation */
46+
47+
@keyframes pulseScroll {
48+
49+
0%,
50+
100% {
51+
transform: translateY(0);
52+
}
53+
54+
50% {
55+
transform: translateY(-5px);
56+
}
57+
}
58+
59+
/* Apply the pulse scroll behavior to the chat container */
60+
.custom-scroll-pulse {
61+
animation: pulseScroll 2s infinite;
62+
63+
}
64+
65+
.sc-bg {
66+
scrollbar-width: thin;
67+
scrollbar-color: #293c4b #757777;
68+
}
69+
70+
.gallery-top {
71+
position: relative;
72+
top: 1.7rem;
73+
}
74+
75+
76+
77+
.background-color {
78+
background-color: #111A21;
79+
}
80+
81+
@media (max-width: 1075px) {
82+
.size-1075-1-3 {
83+
width: 13rem;
84+
height: 12rem;
85+
}
86+
87+
.size-1075-2 {
88+
width: 12rem;
89+
height: 8rem;
90+
}
91+
92+
.g1 {
93+
gap: 3rem;
94+
}
95+
}
96+
97+
@media (max-width: 885px) {
98+
.size-885-1-3 {
99+
width: 9rem;
100+
height: 8rem;
101+
}
102+
103+
.size-885-2 {
104+
width: 9rem;
105+
height: 7rem;
106+
}
107+
108+
.g2 {
109+
gap: 2rem;
110+
}
111+
112+
.height {
113+
height: 32rem;
114+
}
115+
}
116+
117+
@media (max-width: 675px) {
118+
.size-675-1-3 {
119+
width: 7rem;
120+
height: 6rem;
121+
}
122+
123+
.size-675-2 {
124+
width: 7rem;
125+
height: 6rem;
126+
}
127+
128+
.g3 {
129+
gap: 2rem;
130+
}
131+
132+
.g-675-2 {
133+
gap: 1rem;
134+
}
135+
136+
137+
138+
}
139+
140+
@media (max-width: 452px) {
141+
.size-555-1-3 {
142+
width: 5rem;
143+
height: 4.5rem;
144+
}
145+
146+
.font-size {
147+
width: 21rem;
148+
height: 5rem;
149+
font-size: 1.6rem;
150+
}
151+
152+
.size-555-2 {
153+
width: 5rem;
154+
height: 4.5rem;
155+
}
156+
157+
.g4 {
158+
gap: 1.33rem;
159+
}
160+
161+
.g-452-2 {
162+
gap: 1.4rem;
163+
margin-left: 0.3rem;
164+
}
165+
166+
167+
168+
}
169+
170+
@media (max-width: 375px) {
171+
.size-375-1-3 {
172+
width: 4rem;
173+
height: 3.5rem;
174+
}
175+
176+
.size-555-2 {
177+
width: 4rem;
178+
height: 3.5rem;
179+
}
180+
181+
.g5 {
182+
gap: 0.4rem;
183+
}
184+
185+
.g-375-2 {
186+
gap: 1.6rem;
187+
margin-left: 0.4rem;
188+
}
189+
190+
.gallery-top-modified {
191+
position: relative;
192+
z-index: 50;
193+
}
194+
195+
.font-size-1 {
196+
width: 17rem;
197+
height: 3rem;
198+
font-size: 1.3rem;
199+
}
200+
201+
}

‎vriddhi/src/app/Components/Gallery/gallery.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
2+
import "../Gallery/gallery.css"
3+
4+
5+
export default function Gallery() {
6+
return (
7+
<div id="container" className=" w-full background-color relative z-10 ">
8+
<div id="head"
9+
className="gallery-top-modified gallery-top flex w-[29rem] h-[7rem] mx-auto flex-col justify-center font-size font-size-1 flex-shrink-0 text-white text-center font-nidus-sans text-4xl font-normal leading-10 uppercase color ">
10+
Gallery</div>
11+
<div id="main" className="w-[92%] mx-auto flex flex-col items-center justify-center h-[38rem] z-20 relative">
12+
<div id="top" className="w-full h-[12.6875rem] up-675 up-375 up-452 flex-shrink-0 linear z-40 relative" ></div>
13+
<div id="chat-container" className="w-full mt-[-9rem] z-30 relative mb-[-11rem] height overflow-y-auto custom-scroll-pulse sc-bg ">
14+
<div id="center" className="flex flex-col items-center justify-center">
15+
<div id="rectangles" className="grid grid-cols-3 gap-20 g1 g2 g3 g4 g5 ">
16+
17+
<div id="c1" className="grid grid-cols-1 gap-6 ">
18+
<div className=" w-[17rem] h-[16rem] size-1075-1-3 size-885-1-3 size-675-1-3 size-555-1-3 flex-shrink-0 bg1 "></div>
19+
<div className=" w-[17rem] h-[16rem] size-1075-1-3 size-885-1-3 size-675-1-3 size-555-1-3 flex-shrink-0 bg1 "></div>
20+
<div className=" w-[17rem] h-[16rem] size-1075-1-3 size-885-1-3 size-675-1-3 size-555-1-3 flex-shrink-0 bg1 "></div>
21+
<div className=" w-[17rem] h-[16rem] size-1075-1-3 size-885-1-3 size-675-1-3 size-555-1-3 flex-shrink-0 bg1 "></div>
22+
<div className=" w-[17rem] h-[16rem] size-1075-1-3 size-885-1-3 size-675-1-3 size-555-1-3 flex-shrink-0 bg1 "></div>
23+
<div className=" w-[17rem] h-[16rem] size-1075-1-3 size-885-1-3 size-675-1-3 size-555-1-3 flex-shrink-0 bg1 "></div>
24+
</div>
25+
<div id="c2" className="grid grid-cols-1 mt-[3rem] gap-[1px] g-675-2 g-452-2 g-375-2 ">
26+
<div className=" w-[17rem] h-[10rem] size-1075-2 size-885-2 size-675-2 size-555-2 flex-shrink-0 bg1 "></div>
27+
<div className=" w-[17rem] h-[10rem] size-1075-2 size-885-2 size-675-2 size-555-2 flex-shrink-0 bg1 "></div>
28+
<div className=" w-[17rem] h-[10rem] size-1075-2 size-885-2 size-675-2 size-555-2 flex-shrink-0 bg1 "></div>
29+
<div className=" w-[17rem] h-[10rem] size-1075-2 size-885-2 size-675-2 size-555-2 flex-shrink-0 bg1 "></div>
30+
<div className=" w-[17rem] h-[10rem] size-1075-2 size-885-2 size-675-2 size-555-2 flex-shrink-0 bg1 "></div>
31+
<div className=" w-[17rem] h-[10rem] size-1075-2 size-885-2 size-675-2 size-555-2 flex-shrink-0 bg1 "></div>
32+
</div>
33+
<div id="c3" className="grid grid-cols-1 gap-6 ">
34+
<div className=" w-[17rem] h-[16rem] size-1075-1-3 size-885-1-3 size-675-1-3 size-555-1-3 flex-shrink-0 bg1 "></div>
35+
<div className=" w-[17rem] h-[16rem] size-1075-1-3 size-885-1-3 size-675-1-3 size-555-1-3 flex-shrink-0 bg1 "></div>
36+
<div className=" w-[17rem] h-[16rem] size-1075-1-3 size-885-1-3 size-675-1-3 size-555-1-3 flex-shrink-0 bg1 "></div>
37+
<div className=" w-[17rem] h-[16rem] size-1075-1-3 size-885-1-3 size-675-1-3 size-555-1-3 flex-shrink-0 bg1 "></div>
38+
<div className=" w-[17rem] h-[16rem] size-1075-1-3 size-885-1-3 size-675-1-3 size-555-1-3 flex-shrink-0 bg1 "></div>
39+
<div className=" w-[17rem] h-[16rem] size-1075-1-3 size-885-1-3 size-675-1-3 size-555-1-3 flex-shrink-0 bg1 "></div>
40+
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
<div id="bottom" className="w-full h-[12.6875rem] flex-shrink-0 tc z-30 relative" ></div>
46+
47+
</div>
48+
</div>
49+
)
50+
}

‎vriddhi/src/app/page.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,14 @@ import Contact from "./Components/Contact/page"
1010
import Tournaments from '../tournaments/tournaments'
1111
import About from './components/About'
1212
import Team from './components/Team'
13-
13+
import Gallery from './Components/Gallery/gallery';
1414
export default function Home() {
1515
return (
1616
<>
1717
<Hero/>
1818
<Tournaments/>
1919
<Score/>
20+
<Gallery/>
2021
<About/>
2122
<Team/>
2223
<Contact/>

0 commit comments

Comments
 (0)