From RidgeRun Developer Wiki
body {
font-family: Arial, sans-serif;
}
.main-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
padding: 0 0 2rem;
}
ul {
list-style: none;
padding-left: 5px;
}
ul li {
margin-bottom: 10px;
}
.box {
margin-bottom: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 10px;
background-color: #dbeeff;
transition: box-shadow 0.2s ease-in-out;
}
.box:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.box-shake {
animation: bounce 1s 3;
}
@keyframes bounce {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.box-title {
color: #fff;
padding: 1rem;
display: block;
margin: 0;
position: relative;
font-size: 20px;
border-radius: 10px 10px 0 0;
}
.box-content {
margin: 1rem;
}
.intro-section {
grid-column: span 3;
padding: 0 0 2rem 0;
background-color: #ffffff;
margin-top: 1rem;
}
.card {
background-color: #ffffff;
padding: 1rem;
margin: 1rem;
border-radius: 10px;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease-in-out;
}
.card:hover {
transform: scale(1.05);
}
.platforms-container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 cards in a row */
gap: 20px;
margin:20px;
}
.platform-card {
display: flex;
flex-direction: column;
background-color: #ffffff;
padding:0 20px 0;
margin: 0 0 1rem;
height: 100%; /* Ensures the card takes full height */
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease-in-out;
}
.platform-card img {
width: 100%;
height: auto;
}
/* Responsive design for smaller screens */
@media (max-width: 1024px) {
.platforms-container {
grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
}
}
@media (max-width: 600px) {
.platforms-container {
grid-template-columns: 1fr; /* 1 card per row */
}
}
.platform-card ul {
list-style: none;
text-align: left;
}
.platform-card:hover {
transform: scale(1.05);
}
.platform-header {
display: block;
width: 100%;
height: 15%;
padding-top: 10%;
padding-bottom: 10%;
position: relative;
}
.platform-header img {
width: 100%;
height: 100%;
object-fit: contain;
}