all changes done in sponser section

Can be easily merged
AvantikaSharma2307 · Apr 19, 2024 · d654530 · d654530
1 parent 7175845
commit d654530
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 33 deletions.
diff --git a/src/Sections/Card.css b/src/Sections/Card.css
@@ -1,42 +1,113 @@
 .card {
-    width: 250px;
-    height: 200px;
-    background-color:white;
-    border-radius: 10px;
-    border-color: beige;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
-    padding: 20px;
-    text-align: center;
+  width: 200px; /* Default width */
+  height: 200px; /* Default height */
+  background-color: white;
+  border-radius: 10px;
+  border-color: beige;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  text-align: center;
+  transition: opacity 0.5s ease;
+  opacity: 0;
+}
+
+.card h2 {
+  margin-top: 0;
+  color: #333333;
+}
+
+.card p {
+  color: #666666;
+}
+
+.card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+}
+
+.img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+
+
+  @media (max-width: 640px) {
+    .sm\:grid-cols-2 {
+      grid-template-columns: 1fr;
+    }
+  }
+  .card {
+    transition: opacity 0.5s ease;
+    opacity: 0;
   }
 
-  .card h2 {
-    margin-top: 0;
-    color: #333333;
+  .appear {
+    opacity: 1;
   }
 
-  .card p {
-    color: #666666;
+
+
+
+@media screen and (max-width: 640px) {
+  .card {
+    width: 50%;
+    height:100px;
+    max-height: 100%;
+    padding:3px;
   }
-  .img {
+
+.card img {
     width: 100%;
     height: auto;
-    display: block;
-  }
-  .card:hover {
-    transform: scale(1.05); 
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
+    max-height: 100%;
+    object-fit: contain;
+    padding-top: 12px;
   }
-  @media (max-width: 640px) {
-    .sm\:grid-cols-1 {
-      grid-template-columns: 1fr;
-    }
+
+
+ .grid-container {
+  display: grid;
+  grid-template-columns: repeat(2, 3fr);
+  grid-gap:5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   }
+}
+@media screen and (max-width:440px) {
   .card {
-    transition: opacity 0.5s ease;
-    opacity: 0;
+    width: 100%;
+    height:50px;
+    max-height: 100%;
+    padding:3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
+
+.card img {
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+    object-fit: contain;
+    padding-top:1px;
+  }
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    grid-gap:1px;
 
-  .appear {
-    opacity: 1;
+    }
+
+}
+@media screen and (min-width:650px) and (max-width:750px) {
+  .card img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    padding-top:8vh;
   }
-  
+}
diff --git a/src/Sections/Sponsors.tsx b/src/Sections/Sponsors.tsx
@@ -37,11 +37,11 @@ export const Sponsors = () => {
     <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
       <div className="">
         <h2 className="text-white text-3xl font-bold mb-20 text-center mt-20" id="sponsors">Our Sponsors</h2>
-        <div className="p-4 rounded-lg shadow-lg grid sm:grid-cols-1 md:grid-cols-4 gap-20" ref={sponsorRef}>
-          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={devtron} className='img pt-12'></img></div>
-          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={microsoft} className='img pt-12'></img></div>
-          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={tata} className='img h-36'></img></div>
-          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={epam}  className='img h-36'></img></div>
+        <div className="p-4 rounded-lg shadow-lg grid sm:grid-cols-2 md:grid-cols-4 gap-20 grid-container" ref={sponsorRef}>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={devtron} className='img md:pt-12'></img></div>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={microsoft} className='img md:pt-12'></img></div>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={tata} className='img h-36 md:pt-4'></img></div>
+          <div className={`card ease-in-out ${isVisible ? 'appear' : ''}`}><img src={epam}  className='img h-36 md:pt-2'></img></div>
         </div>
       </div>
     </div>