145 lines
2.8 KiB
CSS
145 lines
2.8 KiB
CSS
|
html, body {
|
||
|
|
font-family: 'Orbitron', sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
background-color: #333;
|
||
|
|
text-align: center;
|
||
|
|
color: white;
|
||
|
|
overflow-x: hidden; /* Prevent horizontal scrolling */
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
min-height: 100vh;
|
||
|
|
padding: 1.25em;
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
header {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-bottom: 1.875em;
|
||
|
|
width: 100%; /* Ensure header takes full width */
|
||
|
|
padding: 0 1em; /* Add horizontal padding */
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo-container {
|
||
|
|
width: 80%;
|
||
|
|
max-width: 44em;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center; /* Center logo inside the container */
|
||
|
|
margin: 0 auto; /* Center container itself */
|
||
|
|
}
|
||
|
|
|
||
|
|
.mainlogo, .sublogo {
|
||
|
|
max-width: 100%; /* Scale down if necessary */
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 2em;
|
||
|
|
margin-top: 1em;
|
||
|
|
margin-bottom: 0.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: 1.6em;
|
||
|
|
margin-top: 1em;
|
||
|
|
margin-bottom: 0.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
main {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 2em;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon-link {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 1.875em; /* 30px / 16px = 1.875em */
|
||
|
|
border-radius: 0.9375em; /* 15px / 16px = 0.9375em */
|
||
|
|
transition: transform 0.3s;
|
||
|
|
width: 15em; /* 250px / 16px = 15.625em */
|
||
|
|
height: 15em; /* 250px / 16px = 15.625em */
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon img {
|
||
|
|
width: 6.25em; /* 100px / 16px = 6.25em */
|
||
|
|
height: 6.25em; /* 100px / 16px = 6.25em */
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon p {
|
||
|
|
margin-top: 1.25em; /* 20px / 16px = 1.25em */
|
||
|
|
font-size: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon:hover {
|
||
|
|
transform: scale(1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon.red {
|
||
|
|
background: linear-gradient(145deg, #f25555, #c91e1e);
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon.orange {
|
||
|
|
background: linear-gradient(145deg, #f2b06f, #fc771e);
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon.blue {
|
||
|
|
background: linear-gradient(145deg, #1a94b8, #2c67f2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon.green {
|
||
|
|
background: linear-gradient(145deg, #74D680, #378B29);
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon.yellow {
|
||
|
|
background: linear-gradient(145deg, #fcf06c, #fcea2a);
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon.purple {
|
||
|
|
background: linear-gradient(145deg, #c29ae0, #8459a5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.app-icon.contact {
|
||
|
|
background: linear-gradient(145deg, #ffffff, #dbdbdb);
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive Styles */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.logo-container {
|
||
|
|
width: 90%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mainlogo, .sublogo {
|
||
|
|
max-width: 90%; /* Scale down logo */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.logo-container {
|
||
|
|
width: 95%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mainlogo, .sublogo {
|
||
|
|
max-width: 80%; /* Scale down more for smaller screens */
|
||
|
|
}
|
||
|
|
}
|