107 lines
1.4 KiB
CSS
107 lines
1.4 KiB
CSS
.coral{
|
|
background-color: coral;
|
|
}
|
|
|
|
.lavender{
|
|
background-color: lavender;
|
|
}
|
|
|
|
.lightgreen{
|
|
background-color: lightgreen;
|
|
}
|
|
|
|
.pink{
|
|
background-color: pink;
|
|
}
|
|
|
|
.yellow{
|
|
background-color: yellow;
|
|
}
|
|
|
|
.plum{
|
|
background-color: plum;
|
|
}
|
|
|
|
#grid > div::before{
|
|
content: attr(class);
|
|
}
|
|
|
|
body{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100vh;
|
|
justify-content: center;
|
|
margin: 0;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
#grid{
|
|
aspect-ratio: 4 / 5;
|
|
border: 4px solid #555;
|
|
box-sizing: border-box;
|
|
height: 50vh;
|
|
background-color: #ddd;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"A A A B" /* 1. sor*/
|
|
"C C D E" /*2. sor*/
|
|
"F . G E" /*3. sor*/
|
|
"F H H E" /*4. sor*/
|
|
"I J J K"; /*5.sor*/
|
|
grid-template-columns: repeat(4, 1fr); /* 4 fele osztja az oszlopokat*/
|
|
grid-template-rows: repeat(5, 1fr);
|
|
gap: 4px;
|
|
padding: 4px;
|
|
}
|
|
|
|
#grid > div{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.5em;
|
|
border: 2px solid #555;
|
|
}
|
|
|
|
#lavender{
|
|
grid-area: A;
|
|
}
|
|
|
|
#yellow1{
|
|
grid-area: B;
|
|
}
|
|
|
|
#lightgreen1{
|
|
grid-area: C;
|
|
}
|
|
|
|
#yellow2{
|
|
grid-area: D;
|
|
}
|
|
|
|
#pink{
|
|
grid-area: E;
|
|
}
|
|
|
|
#plum{
|
|
grid-area: F;
|
|
}
|
|
|
|
#yellow3{
|
|
grid-area: G;
|
|
}
|
|
|
|
#lightgreen2{
|
|
grid-area: H;
|
|
}
|
|
|
|
#coral{
|
|
grid-area: I;
|
|
}
|
|
|
|
#lightgreen3{
|
|
grid-area: J;
|
|
}
|
|
|
|
#yellow4{
|
|
grid-area: K;
|
|
} |