61 lines
1.7 KiB
CSS
61 lines
1.7 KiB
CSS
|
/* Sticky footer styles
|
||
|
|
-------------------------------------------------- */
|
||
|
|
html {
|
||
|
|
position: relative;
|
||
|
|
min-height: 100%;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
/* Margin bottom by footer height */
|
||
|
|
margin-bottom: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container {
|
||
|
|
display: grid; /* Set the container as a grid container */
|
||
|
|
grid-template-columns: repeat(3, 1fr); /* Define 3 columns with equal width */
|
||
|
|
grid-gap: 20px; /* Add some gap between grid items */
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-item {
|
||
|
|
background-color: #0060df; /* Add background color */
|
||
|
|
color: #fff; /* Add text color */
|
||
|
|
padding: 20px; /* Add padding */
|
||
|
|
text-align: center; /* Center-align text */
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
display: flex; /* Use flexbox for layout */
|
||
|
|
justify-content: space-between; /* Space between title and links */
|
||
|
|
align-items: center; /* Center vertically */
|
||
|
|
background-color: #0060df; /* Background color for the header */
|
||
|
|
padding: 10px 20px; /* Add padding for spacing */
|
||
|
|
color: #fff; /* Text color */
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 24px; /* Adjust the font size */
|
||
|
|
font-weight: bold; /* Add font weight if desired */
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-links {
|
||
|
|
text-align: right; /* Right-align the links */
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-links a {
|
||
|
|
text-decoration: none; /* Remove underlines from links */
|
||
|
|
color: #fff; /* Link text color */
|
||
|
|
margin-left: 20px; /* Add spacing between links */
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
width: 100%;
|
||
|
|
/* Set the fixed height of the footer here */
|
||
|
|
/* height: 60px; */
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
text-align: center;
|
||
|
|
}
|