ora11 end

2025-11-28 17:39:27 +01:00
parent cd29f43d9c
commit 607705447a
2 changed files with 131 additions and 0 deletions
--- a/ora11/grid-puzzle/index.html
+++ b/ora11/grid-puzzle/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Grid</title>
+    <link rel="stylesheet" href="puzzle.css">
+</head>
+<body>
+    <div id="grid">
+        <div id="lavender" class="lavender"></div>
+        <div id="yellow1" class="yellow"></div>
+        <div id="lightgreen1" class="lightgreen"></div>
+        <div id="yellow2" class="yellow"></div>
+        <div id="pink" class="pink"></div>
+        <div id="plum" class="plum"></div>
+        <div id="yellow3" class="yellow"></div>
+        <div id="lightgreen2" class="lightgreen"></div>
+        <div id="coral" class="coral"></div>
+        <div id="lightgreen3" class="lightgreen"></div>
+        <div id="yellow4" class="yellow"></div>
+    </div>
+</body>
+</html>
--- a/ora11/grid-puzzle/puzzle.css
+++ b/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;
+}