parent
83c839195a
commit
b8262e550e
@ -1,35 +1,53 @@
|
|||||||
body {
|
body {
|
||||||
background: black;
|
background: black;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(1em, 20%) repeat(6, 1fr) minmax(1em, 20%);
|
||||||
|
grid-template-rows: max-content auto;
|
||||||
|
color: white;
|
||||||
|
gap: 2em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.head, .main {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(8, 1fr);
|
grid-template-rows: subgrid;
|
||||||
grid-template-rows: repeat(8, 1fr);
|
grid-column: 2/8;
|
||||||
height: 100vh;
|
}
|
||||||
|
|
||||||
|
.head {
|
||||||
|
grid-row: 1/2;
|
||||||
|
grid-template-columns: min-content max-content auto;
|
||||||
|
padding-top: 2em;
|
||||||
|
gap: 1em;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head > .logo > svg {
|
||||||
|
display: block;
|
||||||
|
fill: white;
|
||||||
|
height: auto;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head > .logo {
|
||||||
|
grid-column: 1/2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main h1 {
|
.head > h1 {
|
||||||
grid-column: 3/7;
|
|
||||||
grid-row: 2/3;
|
|
||||||
color: white;
|
color: white;
|
||||||
font-size: clamp(100%, 1rem + 8vw, 200px);
|
grid-column: 2/3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero {
|
.head > ul {
|
||||||
grid-column: 1/-1;
|
grid-column: 3/4;
|
||||||
grid-row: 1/-1;
|
list-style: "";
|
||||||
width: 100%;
|
justify-self: end;
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.head .links a {
|
||||||
fill: white;
|
color: white;
|
||||||
grid-column: 3/7;
|
|
||||||
grid-row: 3/-1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo > svg {
|
.main {
|
||||||
display: block;
|
grid-row: 2/-1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in new issue