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.
52 lines
980 B
52 lines
980 B
3 months ago
|
/* General styles for the body and container */
|
||
|
|
body, html {
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background-color: #f0f0f0; /* Optional: background color */
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-container {
|
||
|
|
display: grid;
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
grid-template-columns: 1fr auto 1fr;
|
||
|
|
grid-template-rows: 1fr auto 1fr;
|
||
|
|
"heading . signature"
|
||
|
|
"buttons logo ."
|
||
|
|
"nav nav nav"
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-item img {
|
||
|
|
max-width: 25vw; /* Image width occupies 25% of the viewport width */
|
||
|
|
max-height: 25vh; /* Image height occupies 25% of the viewport height */
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
grid-area: buttons;
|
||
|
|
background-color: aqua;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav {
|
||
|
|
grid-area: nav;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heading {
|
||
|
|
grid-area: heading;
|
||
|
|
font-size: 18px;
|
||
|
|
background-color: firebrick;
|
||
|
|
}
|
||
|
|
|
||
|
|
.signature {
|
||
|
|
grid-area: signature;
|
||
|
|
font-size: 18px;
|
||
|
|
background-color: mediumpurple;
|
||
|
|
}
|