86 lines
1.4 KiB
CSS
86 lines
1.4 KiB
CSS
:root {
|
|
box-sizing: border-box;
|
|
font-size: calc(.5em + 1vw);
|
|
background-color: var(--color-cream);
|
|
|
|
--color-blue: #005899;
|
|
--color-red: #d12312;
|
|
--color-cream:#eddec3;
|
|
--color-yellow: #f6cf31;
|
|
--color-grey: #ced5dd;
|
|
--color-black: black;
|
|
--color-white: #dddddd;
|
|
}
|
|
|
|
*, ::before,::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
section {
|
|
margin: auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 1fr;
|
|
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
grid-gap: .2em;
|
|
background-color: var(--color-black);
|
|
border: .2rem solid var(--color-black);
|
|
}
|
|
section div {
|
|
border: .1rem solid var(--color-black);
|
|
min-width: 2em;
|
|
min-height: 2em;
|
|
background-color: var(--color-white);
|
|
}
|
|
.square1 {
|
|
grid-column: 1/3;
|
|
background-color: var(--color-grey);
|
|
}
|
|
|
|
.square2 {
|
|
grid-column: 3/5;
|
|
}
|
|
|
|
.square3 {
|
|
grid-column: 5/8;
|
|
background-color: var(--color-yellow);
|
|
}
|
|
.square4 {
|
|
grid-row: 2/8;
|
|
}
|
|
|
|
.square5 {
|
|
grid-column:2/5;
|
|
grid-row:2/10;
|
|
background-color: var(--color-red);
|
|
}
|
|
.square6 {
|
|
grid-column:5/8;
|
|
grid-row: 2/7;
|
|
background-color: var(--color-yellow);
|
|
}
|
|
|
|
.square8 {
|
|
background-color: var(--color-grey);
|
|
}
|
|
|
|
.square11 {
|
|
grid-column: 5/8;
|
|
background-color: var(--color-blue);
|
|
}
|
|
.square13 {
|
|
grid-column: 3/5;
|
|
background-color: var(--color-yellow);
|
|
}
|
|
|
|
.square15 {
|
|
background-color: var(--color-red);
|
|
}
|
|
|
|
.square19 {
|
|
grid-column: 4/7;
|
|
background-color: var(--color-grey);
|
|
} |