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 =` +
+

Our Sponsors

+ +
+` ; \ 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; + } + +}