You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.4 KiB
69 lines
1.4 KiB
6 months ago
|
/* Global Styles */
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
background-color: #f8f9fa;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Navbar */
|
||
|
|
|
||
|
|
|
||
|
|
/* Main Content main */
|
||
|
|
.main {
|
||
|
|
width: 80%; /* Limit the size of the main main */
|
||
|
|
max-width: 600px; /* Restrict the maximum width */
|
||
|
|
margin: 30px auto; /* Center the main horizontally */
|
||
|
|
text-align: center;
|
||
|
|
background-color: white; /* Optional: background for the main */
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 10px;
|
||
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.main h1 {
|
||
|
|
font-size: 1.8em; /* Slightly smaller title font size */
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Categories Section */
|
||
|
|
.categories {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(2, 1fr); /* Two columns */
|
||
|
|
gap: 15px; /* Smaller spacing between items */
|
||
|
|
justify-items: center;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-box {
|
||
|
|
background-color: #d6f5d6;
|
||
|
|
border-radius: 10px;
|
||
|
|
text-align: center;
|
||
|
|
padding: 15px;
|
||
|
|
width: 150px; /* Reduce the size of boxes */
|
||
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-box:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-box img {
|
||
|
|
width: 80px; /* Smaller image */
|
||
|
|
height: 80px;
|
||
|
|
object-fit: cover;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-box h2 {
|
||
|
|
font-size: 1em; /* Reduce font size */
|
||
|
|
color: #333;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|