devmentor-pl · AlexKry96 · Aug 28, 2025 · Aug 29, 2025 · Aug 29, 2025 · Aug 31, 2025
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( 30% 0%, 100% 0%, 0% 100%, 0% 0%); 
 }
diff --git a/02/styles/global.css b/02/styles/global.css
@@ -4,10 +4,10 @@
     box-sizing: border-box;
 }
 
+
 .a, .b, .c {
     border: 3px solid transparent;
     min-height: 50px;
-
     display: flex;
     justify-content: center;
     align-items: center;
@@ -23,4 +23,21 @@
 
 .c {
     border-color: #baffc9;
+}
+
+
+@media(min-width: 600px) {
+  body {
+    display: grid;
+    max-width: 1200px;
+    margin: 0 auto; 
+    grid-template-rows: 50% 1fr;
+    grid-template-columns: 50% 50%;
+      grid-template-areas:
+      "a a"
+      "c b"; 
+}
+    .a { grid-area: a; }
+    .b { grid-area: b; }
+    .c { grid-area: c; }
 }
diff --git a/03/images/fallback.jpg b/03/images/fallback.jpg
diff --git a/03/images/img-1200x675.jpg b/03/images/img-1200x675.jpg
diff --git a/03/images/img-2000x1125.jpg b/03/images/img-2000x1125.jpg
diff --git a/03/images/img-600x338.jpg b/03/images/img-600x338.jpg
diff --git a/03/index.html b/03/index.html
@@ -4,13 +4,37 @@
     <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="./styles/global.css">
+    <link rel="stylesheet" href="./styles/mobile.css">
+    <link rel="stylesheet" href="./styles/tablet.css">
+    <link rel="stylesheet" href="./styles/desktop.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>
+    <main class="t">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime quod nam consectetur error iure omnis velit asperiores eos voluptates ullam iste totam quaerat labore expedita quidem obcaecati, illum quasi dicta?</main>
+    <header class="p">
+        <picture>
+            <source
+                srcset="./images/img-2000x1125.jpg"
+                media="(min-width: 1200px)"
+            >
+            <source
+                srcset="./images/img-1200x675.jpg"
+                media="(min-width: 600px)"
+            >
+
+            <source
+                srcset="./images/img-600x338.jpg"
+                media="(max-width: 599px)"
+            >
+
+            <img src="./images/fallback.jpg" alt="fallback">
+        </picture>
+    </header>
+    <side class="v">
+        <iframe  src="https://www.youtube.com/embed/sdQGqO9xuao?si=stU8gcrR6vkP_W9t" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+    </side>
 
 </body>
 </html>
diff --git a/03/styles/desktop.css b/03/styles/desktop.css
@@ -0,0 +1,18 @@
+@media (min-width: 1200px) {
+    body {
+        display: grid;
+        min-height: 100vh;
+        max-width: 1400px;
+        margin:  0 auto;
+        grid-template-rows: 1fr 1fr;
+        grid-template-columns: 51% 1fr;
+        grid-template-areas: 
+        "p v"
+        "t t";
+    }
+
+
+    .p { grid-area: p; }
+    .t { grid-area: t; }
+    .v { grid-area: v; }
+}
diff --git a/03/styles/global.css b/03/styles/global.css
@@ -23,4 +23,21 @@
 
 .v {
     border-color: #baffc9;
-}
+    position: relative;
+    width: 100%;
+    padding-top: 56.25%;
+}
+
+.v iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+}
+
+.p img {
+    max-width: 100%;
+    min-height: 100%;
+    height: 50vh;
+}
diff --git a/03/styles/mobile.css b/03/styles/mobile.css
@@ -0,0 +1,22 @@
+@media (max-width: 599px) {
+    body {
+        display: grid;
+        min-height: 100vh;
+        grid-template-rows: auto auto auto;
+        grid-template-columns: 100%;
+        grid-template-areas: 
+        "p"
+        "t"
+        "v";
+    }
+
+
+    .p { grid-area: p; }
+    .t { grid-area: t; }
+    .v { grid-area: v; }
+
+    .v{
+        height: 30vh;
+    }
+
+}
diff --git a/03/styles/tablet.css b/03/styles/tablet.css
@@ -0,0 +1,16 @@
+@media (min-width: 600px) {
+    body {
+        display: grid;
+        min-height: 100vh;
+        grid-template-rows: 1fr 1fr;
+        grid-template-columns: 51% 1fr;
+        grid-template-areas: 
+        "p t"
+        "v t";
+    }
+
+
+    .p { grid-area: p; }
+    .t { grid-area: t; }
+    .v { grid-area: v; }
+}
diff --git a/04/index.html b/04/index.html
@@ -1,30 +1,59 @@
 <!DOCTYPE html>
 <html lang="pl">
+
 <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">
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0"
+    >
+    <meta
+        http-equiv="X-UA-Compatible"
+        content="ie=edge"
+    >
+    <link
+        rel="stylesheet"
+        href="./styles/reset.css"
+    >
+    <link
+        rel="stylesheet"
+        href="./styles/mobile.css"
+    >
+    <link
+        rel="stylesheet"
+        href="./styles/descktop.css"
+    >
     <title>devmentor.pl - HTML & CSS: RWD - #04</title>
 </head>
+
 <body>
-
-    <nav>
-        <ul>
-            <li>
-                <a href="#">start</a>
-            </li>
+
+    <nav class="nav">
+
+        <input
+            type="checkbox"
+            id="menu-toggle"
+            class="menu-toggle"
+        >
+
+        <label
+            for="menu-toggle"
+            class="menu-icon"
+        >&#9776;</label>
+
+        <ul class="menu">
+            <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>
+                <ul class="submenu">
+                    <li><a href="#">strony internetowe</a></li>
+                    <li><a href="#">pozycjonowanie stron www</a></li>
                 </ul>
             </li>
-            <li>
-                <a href="#">kontakt</a>
-            </li>
+            <li><a href="#">kontakt</a></li>
         </ul>
     </nav>
 
 </body>
+
 </html>
diff --git a/04/styles/descktop.css b/04/styles/descktop.css
@@ -0,0 +1,47 @@
+@media (min-width: 801px) {
+    .menu-toggle {
+        display: none;
+    }
+
+    .menu-icon {
+        display: none;
+  } 
+
+    .menu {
+        display: flex; 
+        justify-content: flex-end;
+        gap: 20px; 
+
+
+} 
+
+    .menu li {
+        display: flex;
+        position: relative; 
+}
+
+    .menu li a {
+        display: flex;
+        padding: 10px 15px;
+        color: #fff;
+        background: #333;
+ }
+
+    .submenu {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        background: #444;
+        width: 200px;
+  }
+
+    .submenu li a {
+        padding: 0.75rem;
+  }
+
+
+    .menu li:hover > .submenu {
+        display: block;
+  }
+}
diff --git a/04/styles/mobile.css b/04/styles/mobile.css
@@ -0,0 +1,50 @@
+.nav {
+  background: #333;
+  color: white;
+  position: relative;
+}
+
+
+.menu-icon {
+    display: block;
+    font-size: 2rem;
+    padding: 1rem;
+    cursor: pointer;
+    color: white;
+}
+
+@media(max-width: 800px) {
+    .menu-toggle {
+        display: none;
+    }
+
+
+    .menu {
+        display: none;
+        flex-direction: column;
+    }
+
+
+    .menu-toggle:checked ~ .menu {
+        display: flex;
+    }
+
+
+    .menu li a {
+        display: flex;
+        padding: 1rem;
+        border-bottom: 1px solid #444;
+        font-size: 2rem;
+        justify-content: center;
+    }
+
+
+    .submenu {
+        display: none;
+        padding-left: 1rem;
+    }
+
+    .menu li:focus-within > .submenu {
+        display: block;
+    }
+}