Add files via upload

KaBreaK · Jul 26, 2024 · 9227d7c · 9227d7c
1 parent a604ec6
commit 9227d7c
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 0 deletions.
diff --git a/img1.png b/img1.png
diff --git a/imgopen.png b/imgopen.png
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Moja Strona</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="container"></div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const container = document.getElementById('container');
+
+    // Funkcja do pobierania danych z pliku JSON
+    async function fetchTexts() {
+        try {
+            const response = await fetch('text.json'); // Załaduj dane z pliku JSON
+            const texts = await response.json();
+            createSquares(texts);
+        } catch (error) {
+            console.error('Błąd podczas pobierania danych:', error);
+        }
+    }
+
+    // Funkcja do tworzenia kwadratów z tekstem
+    function createSquares(textArray) {
+        textArray.forEach(text => {
+            const square = document.createElement('div');
+            square.classList.add('square');
+            square.textContent = text;
+            container.appendChild(square);
+        });
+    }
+
+    // Wywołanie funkcji pobierającej dane z JSON
+    fetchTexts();
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,34 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f4f4f4;
+}
+
+#container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(512px, 1fr));
+    gap: 10px;
+    width: 90%;
+    margin-top: 100%;
+}
+.square {
+    display: flex;
+    background-image: url(img1.png);
+    background-size: cover;
+    background-position: center center;
+    border: 2px solid #ddd;
+    border-radius: 5px;
+    padding: 20px;
+    height: 350px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: end;
+}
+
+.square:hover {
+    background-color: #f0f0f0;
+}
diff --git a/text.json b/text.json
@@ -0,0 +1,22 @@
+[
+    "Lorem ipsum dolor sit amet",
+    "Consectetur adipiscing elit",
+    "Sed do eiusmod tempor incididunt",
+    "Ut labore et dolore magna aliqua",
+    "Ut enim ad minim veniam",
+    "Quis nostrud exercitation ullamco",
+    "Laboris nisi ut aliquip ex ea commodo",
+    "Duis aute irure dolor in reprehenderit",
+    "In voluptate velit esse cillum",
+    "Dolore eu fugiat nulla pariatur",
+    "Excepteur sint occaecat cupidatat non",
+    "Proident, sunt in culpa qui officia",
+    "Delectus aut odit aut fugit",
+    "Nulla pariatur exercitation ullamco laboris nisi",
+    "Ut aliquip ex ea commodo consequat",
+    "Duis aute irure dolor in reprehenderit",
+    "Voluptate velit esse cillum dolore eu fugiat nulla pariatur",
+    "Excepteur sint occaecat cupidatat non proident",
+    "Sunt in culpa qui officia deserunt mollit anim id est laborum"
+
+]