Merge pull request #21 from rishavranjan943/main

discord link
IIITKalyaniFOSC · Jun 24, 2024 · 2aa8c23 · 2aa8c23
2 parents 3344466 + 9f1c7b2
commit 2aa8c23
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 17 deletions.
diff --git a/src/components/Discord/Discord.css b/src/components/Discord/Discord.css
@@ -2,27 +2,17 @@
     position: relative;
     width: 100%;
     height: 100%;
+    /* Ensure it covers the full viewport height */
+    overflow: hidden;
 }
 
 
-.star-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url('../../assets/images/discord/stars.svg');
-    background-size: cover;
-    background-repeat: repeat;
-    opacity: 0.9;
-    z-index: 2;
-}
-
 .bottom-overlay {
     position: absolute;
     bottom: 25%;
     left: 37%;
     width: 27%;
-    height: 23%;
+    height: 21%;
     cursor: pointer;
+    z-index: 3;
 }
diff --git a/src/components/Discord/Discord.jsx b/src/components/Discord/Discord.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import Bgimage from '../../assets/images/discord/JOIN2.png';
+import stars from '../../assets/images/discord/stars.svg'
 import './Discord.css';
 
 function Discord() {
@@ -22,14 +23,21 @@ function Discord() {
 
     return (
         <div className="section">
-            <div className="star-background" style={{ transform: `translate(${bgPosition.x}px, ${bgPosition.y}px)` }}></div>
-            <img src={Bgimage} alt="" className='img-background' />
+            <div className="relative w-screen flex items-start justify-center" style={{
+                backgroundImage: `url(${stars})`,
+                backgroundPosition: `${50 + bgPosition.x}% ${50 + bgPosition.y}%`,
+                backgroundSize: 'cover',
+            }}>
+            <img src={Bgimage} alt="Join Discord" className="img-background" />
+
             <a
                 href="https://discord.gg/UHwPBzy7UF"
                 className="bottom-overlay"
                 target="_blank"
                 rel="noopener noreferrer"
-            ></a>
+            >
+            </a>
+            </div>
         </div>
     );
 }