ora11 end

ora11/grid-puzzle/puzzle.css

@@ -0,0 +1,107 @@
+.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;
+}