diff --git a/apps/web-punjab/components/ourSponsors.js b/apps/web-punjab/components/ourSponsors.js
new file mode 100644
index 0000000..323145c
--- /dev/null
+++ b/apps/web-punjab/components/ourSponsors.js
@@ -0,0 +1,15 @@
+import "../style.css";
+
+document.querySelector('#our-sponsors').innerHTML =`
+
+` ;
\ No newline at end of file
diff --git a/apps/web-punjab/index.html b/apps/web-punjab/index.html
index c74c45d..f74e6d6 100644
--- a/apps/web-punjab/index.html
+++ b/apps/web-punjab/index.html
@@ -17,6 +17,7 @@
+
+
diff --git a/apps/web-punjab/package-lock.json b/apps/web-punjab/package-lock.json
index 3145164..f392a2e 100644
--- a/apps/web-punjab/package-lock.json
+++ b/apps/web-punjab/package-lock.json
@@ -8,7 +8,7 @@
"name": "web-punjab",
"version": "0.0.0",
"devDependencies": {
- "vite": "^5.1.4"
+ "vite": "^5.1.5"
}
},
"node_modules/@esbuild/aix-ppc64": {
@@ -700,9 +700,9 @@
}
},
"node_modules/vite": {
- "version": "5.1.4",
- "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.4.tgz",
- "integrity": "sha512-n+MPqzq+d9nMVTKyewqw6kSt+R3CkvF9QAKY8obiQn8g1fwTscKxyfaYnC632HtBXAQGc1Yjomphwn1dtwGAHg==",
+ "version": "5.1.5",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz",
+ "integrity": "sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==",
"dev": true,
"dependencies": {
"esbuild": "^0.19.3",
diff --git a/apps/web-punjab/package.json b/apps/web-punjab/package.json
index 89f803f..0fa2d9b 100644
--- a/apps/web-punjab/package.json
+++ b/apps/web-punjab/package.json
@@ -9,6 +9,6 @@
"preview": "vite preview"
},
"devDependencies": {
- "vite": "^5.1.4"
+ "vite": "^5.1.5"
}
}
diff --git a/apps/web-punjab/public/images/sponsor1.png b/apps/web-punjab/public/images/sponsor1.png
new file mode 100644
index 0000000..c21329c
Binary files /dev/null and b/apps/web-punjab/public/images/sponsor1.png differ
diff --git a/apps/web-punjab/public/images/sponsor2.png b/apps/web-punjab/public/images/sponsor2.png
new file mode 100644
index 0000000..a91a981
Binary files /dev/null and b/apps/web-punjab/public/images/sponsor2.png differ
diff --git a/apps/web-punjab/public/images/sponsor3.png b/apps/web-punjab/public/images/sponsor3.png
new file mode 100644
index 0000000..66842e9
Binary files /dev/null and b/apps/web-punjab/public/images/sponsor3.png differ
diff --git a/apps/web-punjab/public/images/sponsor4.png b/apps/web-punjab/public/images/sponsor4.png
new file mode 100644
index 0000000..b68dd30
Binary files /dev/null and b/apps/web-punjab/public/images/sponsor4.png differ
diff --git a/apps/web-punjab/style.css b/apps/web-punjab/style.css
index 3574965..1f79fde 100644
--- a/apps/web-punjab/style.css
+++ b/apps/web-punjab/style.css
@@ -898,4 +898,65 @@ img {
font-size: var(--small-font-size);
}
}
+
+
+/*=============== SPONSORS ===============*/
+
+.sponsors-container h2{
+ text-align: center;
+ color: var(--third-color);
+ font-size: var(--biggest-font-size);
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+
+.sponsors-container{
+ margin: 80px;
+}
+
+
+@keyframes scroll {
+ 0% {
+ transform: translateX(100%); /* Start from offscreen right */
+ }
+ 100% {
+ transform: translateX(-200%); /* End at normal position */
+ }
+}
+
+.sponsor-list {
+ display: flex;
+ animation: scroll 15s linear infinite;
+ scroll-snap-type: x mandatory;
+}
+
+.sponsor-list img {
+ width: 200px;
+ height: 150px;
+ object-fit: contain;
+ margin-right: 30px;
+}
+
+/* Adjust slide width for smaller screens */
+@media only screen and (max-width: 768px) {
+ .sponsor-list {
+ animation: scroll-mobile 8s linear infinite;
+ }
+
+ @keyframes scroll-mobile {
+ 0% {
+ transform: translateX(100%); /* Start from offscreen right */
+ }
+ 100% {
+ transform: translateX(-700%); /* Change here if it snaps */
+ }
+ }
+
+ .sponsor-list img {
+ flex: 0 0 auto;
+ scroll-snap-align: center;
+ margin-right: 10px;
+ }
+
+}