diff --git a/css/style.css b/css/style.css index 0c7a341..82f5cd2 100644 --- 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;