Linked List with Icons
body{ background-color: #fffdd0; /* cream background */}
/* Reset list styles completely */
.linked-list-icons ul {
list-style: none !important; /* force remove bullets */
margin: 0;
padding: 0;
}
.linked-list-icons ul li {
list-style: none !important; /* force remove bullets */
}
/* Each row (ul) */
.linked-list-icons ul.row {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin: 0 0 20px;
}
/* Each item (li) */
.linked-list-icons ul.row li {
flex: 1 1 18%; /* 5 items per row */
text-align: center;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin: 0 5px;
padding: 24px 14px;
transition: all 0.3s ease;
}
/* Hover effect */
.linked-list-icons ul.row li:hover {
background: #f9fafb;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* Anchor styling */
.linked-list-icons ul.row li a.relatedContainer {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: #1f2937;
}
/* Icon styling */
.linked-list-icons ul.row li span[class^="icon-"] {
font-size: 36px; /* bigger icons */
margin-bottom: 12px;
color: #0ea5e9; /* accent color */
}
/* Text styling */
.linked-list-icons ul.row li .list-text {
font-size: 1.4rem; /* increased font size */
font-weight: 600;
line-height: 1.6;
}
/* Responsive: stack items on smaller screens */
@media (max-width: 768px) {
.linked-list-icons ul.row {
flex-wrap: wrap;
}
.linked-list-icons ul.row li {
flex: 1 1 45%; /* 2 per row on tablets */
margin-bottom: 12px;
}
}
@media (max-width: 480px) {
.linked-list-icons ul.row li {
flex: 1 1 100%; /* single column on phones */
}
}
