Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* Styling for sub-panel container */
.sub-panel-container {
display: flex;
flex-direction: column; /* Arrange children vertically */
gap: 10px; /* Space between each sub-panel */
width: 100%; /* Make container full width */
padding: 10px;
box-sizing: border-box;
align-items: flex-start; /* Align children to the start of the container */
}
/* Sub-panel styling */
.sub-panel {
width: 100%; /* Each sub-panel takes full container width */
height: auto; /* Allow height to adjust based on content */
background-color: #ececec;
border: 1px solid #ccc;
display: flex;
justify-content: center; /* Center text inside panel */
align-items: center; /* Center text inside panel */
border-radius: 4px;
cursor: pointer;
transition: transform 0.4s ease-in-out, background-color 0.3s;
}
/* Hover effect for sub-panels */
.sub-panel:hover {
background-color: #ddd;
transform: scale(1.05); /* Slightly enlarge on hover */
}