devmentor-pl · dagmara-opalka · Jul 11, 2024 · Jul 15, 2024 · Jul 18, 2024 · Jul 19, 2024
diff --git a/01/style.css b/01/style.css
@@ -20,4 +20,6 @@
     border: 150px solid #dcdcdc;
     border-right-color: transparent;
     border-bottom-color: transparent;    
-}
+    shape-outside: polygon(0 0, 0 100%, 100% 0);
+    margin-right: 20px;
+}
diff --git a/02/styles/global.css b/02/styles/global.css
@@ -1,4 +1,4 @@
-* {
+ /** {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
@@ -23,4 +23,77 @@
 
 .c {
     border-color: #baffc9;
+} */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.a, .b, .c {
+    border: 3px solid transparent;
+    min-height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.a {
+    border-color: #ffffba;
+}
+
+.b {
+    border-color: #ffdfba;
+}
+
+.c {
+    border-color: #baffc9;
+}
+
+/* Układ dla mniejszych ekranów */
+body {
+    display: grid;
+    grid-template-rows: 50vh 50vh 50vh;
+    grid-template-columns: 1fr;
+    height: 100vh;
+}
+
+.a {
+    grid-row: 1 / 2;
+}
+
+.b {
+    grid-row: 2 / 3;
+}
+
+.c {
+    grid-row: 3 / 4;
+}
+
+/* Układ dla szerokości powyżej 600px */
+@media (min-width: 600px) {
+    body {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: 50vh 50vh;
+        max-width: 1200px;
+        margin: 0 auto;
+        height: 100vh;
+    }
+
+    .a {
+        grid-column: 1 / 3;
+        grid-row: 1 / 2;
+    }
+
+    .c {
+        grid-column: 1 / 2;
+        grid-row: 2 / 3;
+    }
+
+    .b {
+        grid-column: 2 / 3;
+        grid-row: 2 / 3;
+    }
 }
diff --git a/03/index.html b/03/index.html
@@ -4,13 +4,27 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="css/global.css">
     <title>devmentor.pl - HTML & CSS: RWD - #03</title>
 </head>
 <body>
 
     <main class="t">T</main>
     <header class="p">P</header>
     <side class="v">V</side>
-
+        <div class="p">
+            <picture>
+                <source srcset="small.jpg" media="(max-width: 599px)">
+                <source srcset="medium.jpg" media="(min-width: 600px)">
+                <source srcset="large.jpg" media="(min-width: 1200px)">
+                <img src="default.jpg" alt="Sample Image">
+            </picture>
+        </div>
+        <div class="t">
+            <p>Wiele linii tekstu, które wypełniają przestrzeń na stronie. Ten tekst jest przykładem treści na stronie, która będzie zmieniać swoje miejsce w zależności od rozmiaru ekranu.</p>
+        </div>
+        <div class="v">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
+        </div>
 </body>
 </html>
diff --git a/03/styles/global.css b/03/styles/global.css
@@ -7,7 +7,6 @@
 .p, .t, .v {
     border: 3px solid transparent;
     min-height: 50px;
-
     display: flex;
     justify-content: center;
     align-items: center;
@@ -23,4 +22,75 @@
 
 .v {
     border-color: #baffc9;
+}
+body {
+    display: grid;
+    grid-template-rows: auto auto auto;
+    grid-template-columns: 1fr;
+}
+
+.p {
+    grid-row: 1 / 2;
+}
+
+.t {
+    grid-row: 2 / 3;
+}
+
+.v {
+    grid-row: 3 / 4;
+}
+
+/* Tablet */
+@media (min-width: 600px) and (max-width: 1199px) {
+    body {
+        grid-template-rows: auto auto;
+        grid-template-columns: 1fr 1fr;
+        max-width: 100%;
+    }
+
+    .p {
+        grid-column: 1 / 2;
+        grid-row: 1 / 2;
+    }
+
+    .t {
+        grid-column: 2 / 3;
+        grid-row: 1 / 3;
+    }
+
+    .v {
+        grid-column: 1 / 2;
+        grid-row: 2 / 3;
+    }
+}
+
+/* Desktop */
+@media (min-width: 1200px) {
+    body {
+        grid-template-rows: auto auto;
+        grid-template-columns: 1fr 1fr;
+        max-width: 1400px;
+        margin: 0 auto;
+    }
+
+    .p {
+        grid-column: 1 / 2;
+        grid-row: 1 / 2;
+    }
+
+    .v {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2;
+    }
+
+    .t {
+        grid-column: 1 / 3;
+        grid-row: 2 / 3;
+    }
+}
+
+iframe {
+    width: 100%;
+    height: 100%;
 }
diff --git a/04/.devcontainer.code-workspace b/04/.devcontainer.code-workspace
@@ -0,0 +1,35 @@
+{
+  "folders": [
+	{
+		"path": "../.devcontainer"
+	},
+	{
+		"path": "../.git"
+	},
+	{
+		"path": "../.github"
+	},
+	{
+		"path": "../01"
+	},
+	{
+		"path": "../02"
+	},
+	{
+		"path": "../03"
+	},
+	{
+		"path": "."
+	},
+	{
+		"path": "../05"
+	},
+	{
+		"path": "../assets"
+	}
+],
+  "settings": {
+    "liveServer.settings.multiRootWorkspaceName": "04",
+    "liveServer.settings.port": 5502
+  }
+}
diff --git a/04/README.md b/04/README.md
@@ -1,30 +1,30 @@
-> :white_check_mark: *Jeśli będziesz mieć problem z rozwiązaniem tego zadania, poproś o pomoc na odpowiednim kanale na Slacku, tj. `s1e02-html-and-css-basics` (dotyczy [mentee](https://devmentor.pl/mentoring-javascript/)) lub na ogólnodostępnej i bezpłatnej [społeczności na Discordzie](https://devmentor.pl/discord). Pamiętaj, aby treść Twojego wpisu spełniała [odpowiednie kryteria](https://devmentor.pl/jak-prosic-o-pomoc/).*
+> :white_check_mark: _Jeśli będziesz mieć problem z rozwiązaniem tego zadania, poproś o pomoc na odpowiednim kanale na Slacku, tj. `s1e02-html-and-css-basics` (dotyczy [mentee](https://devmentor.pl/mentoring-javascript/)) lub na ogólnodostępnej i bezpłatnej [społeczności na Discordzie](https://devmentor.pl/discord). Pamiętaj, aby treść Twojego wpisu spełniała [odpowiednie kryteria](https://devmentor.pl/jak-prosic-o-pomoc/)._
 
 &nbsp;
 
 # `#04` HTML i CSS: Responsywność
 
-Nadszedł czas na przygotowanie responsywnego menu. 
+Nadszedł czas na przygotowanie responsywnego menu.
 
 Będziemy mieli 2 wersje jego wyglądu:
 
-- **mobilną**: 
-    - elementy menu są umieszczone jeden pod drugim i zajmują całą szerokość okna przeglądarki,
-    - są widoczne dopiero po kliknięciu w ikonę "[hamburgera](https://www.youtube.com/watch?v=Al-0vNJD1JU)" (najlepiej bez użycia JavaScriptu),
-    - im bardziej zagnieżdżone elementy, tym bardziej odsunięte są od lewej krawędzi.
-- **normalną**: 
-    - elementy menu umieszczone są obok siebie w poziomie,
-    - tylko pierwszy poziom widoczny jest od razu,
-    - drugi poziom menu dostępny jest dopiero po najechaniu na rodzica:
-        - elementy występujące w rodzicu wyświetlane są jeden pod drugim,
-        - całość wyświetla się pod rodzicem.
+- **mobilną**:
+  - elementy menu są umieszczone jeden pod drugim i zajmują całą szerokość okna przeglądarki,
+  - są widoczne dopiero po kliknięciu w ikonę "[hamburgera](https://www.youtube.com/watch?v=Al-0vNJD1JU)" (najlepiej bez użycia JavaScriptu),
+  - im bardziej zagnieżdżone elementy, tym bardziej odsunięte są od lewej krawędzi.
+- **normalną**:
+  - elementy menu umieszczone są obok siebie w poziomie,
+  - tylko pierwszy poziom widoczny jest od razu,
+  - drugi poziom menu dostępny jest dopiero po najechaniu na rodzica:
+    - elementy występujące w rodzicu wyświetlane są jeden pod drugim,
+    - całość wyświetla się pod rodzicem.
 
-Sam dobierz wygląd oraz stosowny breakpoint. 
+Sam dobierz wygląd oraz stosowny breakpoint.
 
 Jak skończysz, to opublikuj swoje rozwiązanie za pomocą [GitHub Pages](https://pages.github.com/) i sprawdź, czy strona przechodzi [test na urządzenia mobilne](https://search.google.com/test/mobile-friendly).
 
-
 &nbsp;
-> :no_entry: *Jeśli nie posiadasz materiałów do tego zadania tj. **PDF + wideo, projekt + Code Review**, znajdziesz je na stronie [devmentor.pl](https://devmentor.pl/workshop-html-and-css-rwd/)*
 
-> :arrow_left: [*poprzednie zadanie*](./../03) | [*następne zadanie*](./../05) :arrow_right:
+> :no_entry: _Jeśli nie posiadasz materiałów do tego zadania tj. **PDF + wideo, projekt + Code Review**, znajdziesz je na stronie [devmentor.pl](https://devmentor.pl/workshop-html-and-css-rwd/)_
+
+> :arrow_left: [_poprzednie zadanie_](./../03) | [_następne zadanie_](./../05) :arrow_right:
diff --git a/04/index.html b/04/index.html
@@ -3,28 +3,30 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>devmentor.pl - HTML & CSS: RWD - #04</title>
+    <title>Responsive Menu</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-
     <nav>
-        <ul>
+        <div class="menu-toggle" id="menu-toggle">&#9776;</div>
+        <ul class="menu" id="menu">
+            <li><a href="#">HOME</a></li>
             <li>
-                <a href="#">start</a>
-            </li>
-            <li>
-                <a href="#">oferta</a>
-                <ul>
-                    <li><a href="">strony internetowe</a></li>
-                    <li><a href="">pozycjonowanie stron www</a></li>
+                <a href="#">ITEMS &#9662;</a>
+                <ul class="submenu">
+                    <li><a href="#">Item 1</a></li>
+                    <li>
+                        <a href="#">Item 2 &#9656;</a>
+                        <ul class="submenu">
+                            <li><a href="#">Item 2.1</a></li>
+                            <li><a href="#">Item 2.2</a></li>
+                        </ul>
+                    </li>
                 </ul>
             </li>
-            <li>
-                <a href="#">kontakt</a>
-            </li>
+            <li><a href="#">SETTINGS</a></li>
+            <li><a href="#">CONTACT</a></li>
         </ul>
     </nav>
-
 </body>
 </html>