Update style.css

HassanAttwaa · Dec 25, 2024 · bc86b8e · bc86b8e
1 parent ddf0f83
commit bc86b8e
Showing 1 changed file with 63 additions and 44 deletions.
diff --git a/css/style.css b/css/style.css
@@ -164,46 +164,61 @@ section {
     padding: 8px;
 }
 
-/* Certificates Section */
+
+
 /* Certificates Section */
 .certificates {
     background-color: #000016;
+    padding: 100px 50px;  /* Adjusted padding for better spacing */
 }
 
 .certificates .content {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr); /* Start with 5 columns */
     gap: 20px;
     max-width: 1600px;
     margin: 30px auto;
 }
 
-/* First row - 5 cards */
-.card-img:nth-child(-n+5) {
-    flex: 0 0 calc(20% - 16px);
-    max-width: calc(20% - 16px);
+/* Style for all certificate cards */
+.card-img {
+    background-color: #fff;
+    border: 1px solid #fff;
+    overflow: hidden;
+    border-radius: 10px;
+    transition: 0.9s ease;
+    /* Remove any fixed width to allow grid to control sizing */
 }
 
+/* First row - 5 cards (default grid handles this) */
 /* Second row - 4 cards */
-.card-img:nth-child(n+6):nth-child(-n+9) {
-    flex: 0 0 calc(25% - 15px);
-    max-width: calc(25% - 15px);
+.card-img:nth-child(6) {
+    grid-column: 1 / span 3;
+}
+.card-img:nth-child(7) {
+    grid-column: 4 / span 3;
+}
+.card-img:nth-child(8) {
+    grid-column: 7 / span 3;
+}
+.card-img:nth-child(9) {
+    grid-column: 10 / span 3;
 }
 
 /* Third row - 3 cards */
-.card-img:nth-child(n+10):nth-child(-n+12) {
-    flex: 0 0 calc(33.333% - 14px);
-    max-width: calc(33.333% - 14px);
+.card-img:nth-child(10) {
+    grid-column: 1 / span 4;
+}
+.card-img:nth-child(11) {
+    grid-column: 5 / span 4;
+}
+.card-img:nth-child(12) {
+    grid-column: 9 / span 4;
 }
 
-.card-img {
-    background-color: #fff;
-    border: 1px solid #fff;
-    min-width: 200px;
-    overflow: hidden;
-    border-radius: 10px;
-    transition: 0.9s ease;
+/* Hide any cards after the 12th one */
+.card-img:nth-child(n+13) {
+    display: none;
 }
 
 .card-img:hover {
@@ -213,43 +228,47 @@ section {
 .certificate-image img,
 .icdl-image img {
     width: 100%;
+    height: auto;
     display: block;
 }
 
 .card-img-info {
-    padding: 0.2em;
-    font-size: 0.5em;
-    padding-left: 1em;
+    padding: 1em;
+    font-size: 0.8em;
     font-weight: 600;
 }
 
-.img-category {
-    font-size: 10px;
-    color: #000;
-    font-weight: 500;
-    text-decoration: underline;
-}
-
-/* Update responsive styles for certificates */
-@media (max-width: 1023px) {
-    .card-img:nth-child(-n+5),
-    .card-img:nth-child(n+6):nth-child(-n+9),
-    .card-img:nth-child(n+10):nth-child(-n+12) {
-        flex: 0 0 calc(50% - 10px);
-        max-width: calc(50% - 10px);
+/* Responsive design */
+@media (max-width: 1200px) {
+    .certificates {
+        padding: 100px 30px;
+    }
+
+    .certificates .content {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .card-img:nth-child(n) {
+        grid-column: auto / span 1;
     }
 }
 
-@media (max-width: 641px) {
-    .card-img:nth-child(-n+5),
-    .card-img:nth-child(n+6):nth-child(-n+9),
-    .card-img:nth-child(n+10):nth-child(-n+12) {
-        flex: 0 0 100%;
-        max-width: 100%;
+@media (max-width: 640px) {
+    .certificates {
+        padding: 100px 20px;
+    }
+
+    .certificates .content {
+        grid-template-columns: 1fr;
+    }
+
+    .card-img:nth-child(n) {
+        grid-column: 1;
     }
 }
 
 
+
 /* Contact Section */
 .fcontent {
     display: flex;