devmentor-pl · MagdalenaKoltuniak · Dec 30, 2025 · Jan 2, 2026 · Jan 2, 2026 · Jan 3, 2026
diff --git a/01/style.css b/01/style.css
@@ -1,23 +1,24 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
 }
 
 .content {
-    background-color: #fff;
-    min-height: 320px;
-    min-width: 320px;
-    max-width: 600px;
-    text-align: justify;
+	background-color: #fff;
+	min-height: 320px;
+	min-width: 320px;
+	max-width: 600px;
+	text-align: justify;
 }
 
 .content::before {
-    float: left;
-    display: block;
-    content: '';
-    height: 0;
-    border: 150px solid #dcdcdc;
-    border-right-color: transparent;
-    border-bottom-color: transparent;    
-}
+	float: left;
+	display: block;
+	content: '';
+	height: 0;
+	border: 150px solid #dcdcdc;
+	border-right-color: transparent;
+	border-bottom-color: transparent;
+	shape-outside: polygon(0 0, 100% 0, 0 100%);
+}
diff --git a/02/index.html b/02/index.html
@@ -1,16 +1,21 @@
 <!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">
     <title>devmentor.pl - HTML & CSS: RWD - #02</title>
 
     <link rel="stylesheet" href="./styles/global.css">
+    <link rel="stylesheet" href="./styles/mobile.css">
+    <link rel="stylesheet" media="(min-width: 600px)" href="./styles/tablet.css">
 </head>
+
 <body>
     <header class="a">A</header>
     <section class="c">C</section>
     <main class="b">B</main>
 </body>
+
 </html>
diff --git a/02/styles/global.css b/02/styles/global.css
@@ -1,26 +1,28 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
 }
 
-.a, .b, .c {
-    border: 3px solid transparent;
-    min-height: 50px;
+.a,
+.b,
+.c {
+	border: 3px solid transparent;
+	min-height: 50px;
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .a {
-    border-color: #ffffba
+	border-color: #ffffba;
 }
 
 .b {
-    border-color: #ffdfba;
+	border-color: #ffdfba;
 }
 
 .c {
-    border-color: #baffc9;
+	border-color: #baffc9;
 }
diff --git a/02/styles/mobile.css b/02/styles/mobile.css
@@ -0,0 +1,23 @@
+body {
+	display: grid;
+	grid-template-areas:
+		'a-top'
+		'a-middle'
+		'a-bottom';
+	grid-template-rows:
+		50vh
+		50vh
+		50vh;
+}
+
+.a {
+	grid-area: a-top;
+}
+
+.b {
+	grid-area: a-middle;
+}
+
+.c {
+	grid-area: a-bottom;
+}
diff --git a/02/styles/tablet.css b/02/styles/tablet.css
@@ -0,0 +1,23 @@
+body {
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows:
+		50vh
+		50vh;
+	grid-template-areas:
+		'a-top a-top'
+		'a-bottom a-middle';
+	max-width: 1200px;
+	margin: 0 auto;
+}
+
+.a {
+	grid-area: a-top;
+}
+
+.b {
+	grid-area: a-middle;
+}
+
+.c {
+	grid-area: a-bottom;
+}
diff --git a/03/img/fog-8519078_1280.jpg b/03/img/fog-8519078_1280.jpg
diff --git a/03/img/fog-8519078_640.jpg b/03/img/fog-8519078_640.jpg
diff --git a/03/index.html b/03/index.html
@@ -1,16 +1,39 @@
 <!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">
+
+    <link rel="stylesheet" href="./styles/global.css">
+    <link rel="stylesheet" href="./styles/mobile.css">
+    <link rel="stylesheet" media="(min-width: 600px)" href="./styles/tablet.css">
+    <link rel="stylesheet" media="(min-width: 1200px)" 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">
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, eaque? Unde quam praesentium esse
+            saepe minima veritatis, aspernatur officia eligendi perspiciatis aliquam. Expedita vitae repellat natus
+            officia eligendi molestiae rem quaerat reprehenderit unde, placeat sequi voluptatem itaque, illo magnam.
+            Iure, necessitatibus totam odio obcaecati accusantium perferendis excepturi, laboriosam deserunt provident
+            sequi officiis nulla dolor culpa dicta quae maxime? Quaerat, animi.</p>
+    </main>
+    <header class="p">
+        <picture>
+            <source srcset="./img/fog-8519078_1280.jpg" media="(min-width: 1200px)">
+            <source srcset="./img/fog-8519078_640.jpg">
+            <img src="./img/fog-8519078_640.jpg" alt="zimowy las we mgle">
+        </picture>
+    </header>
+    <side class="v"><iframe width="560" height="315" src="https://www.youtube.com/embed/gTUmod-Kkx0?si=YSWhlSxLFy2CSpYv"
+            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,7 @@
+body {
+	grid-template-areas:
+		'P V'
+		'T T';
+	grid-template-columns: 1fr 1fr;
+	max-width: 1400px;
+}
diff --git a/03/styles/mobile.css b/03/styles/mobile.css
@@ -0,0 +1,46 @@
+body {
+	display: grid;
+	grid-template-areas:
+		'P'
+		'T'
+		'V';
+}
+
+.p {
+	grid-area: P;
+	position: relative;
+	height: 0;
+	padding-bottom: calc(3 / 4 * 100%);
+}
+
+.p picture,
+.p img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.p img {
+	object-fit: cover;
+}
+
+.t {
+	grid-area: T;
+}
+
+.v {
+	grid-area: V;
+	position: relative;
+	height: 0;
+	padding-bottom: calc(315 / 560 * 100%);
+}
+
+.v iframe {
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 100%;
+	width: 100%;
+}
diff --git a/03/styles/tablet.css b/03/styles/tablet.css
@@ -0,0 +1,7 @@
+body {
+	grid-template-columns: minmax(200px, 50vw) auto;
+	grid-template-areas:
+		'P T'
+		'V T';
+	margin: 0 auto;
+}
diff --git a/04/index.html b/04/index.html
@@ -1,30 +1,40 @@
 <!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">
+    <link rel="stylesheet" href="./styles/reset.css">
+    <link rel="stylesheet" href="./styles/normalize.css">
+    <link rel="stylesheet" href="./styles/mobile.css">
+    <link rel="stylesheet" media="(min-width: 768px)" href="./styles/desktop.css">
     <title>devmentor.pl - HTML & CSS: RWD - #04</title>
 </head>
+
 <body>
-    
+
     <nav>
-        <ul>
-            <li>
-                <a href="#">start</a>
+        <button class="burger-icon"></button>
+        <ul class="nav">
+            <li class="nav__item">
+                <a class="nav__link nav__link--start" 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>
+            <li class="nav__item nav__item--dropdown">
+                <a class="nav__link" href="#">oferta</a>
+                <ul class="nav__dropdown">
+                    <li class="dropdown__item"><a class="nav__link nav__link--dropdown" href="">strony internetowe</a>
+                    </li>
+                    <li class="dropdown__item"><a class="nav__link nav__link--dropdown" href="">pozycjonowanie stron
+                            www</a></li>
                 </ul>
             </li>
-            <li>
-                <a href="#">kontakt</a>
+            <li class="nav__item">
+                <a class="nav__link" href="#">kontakt</a>
             </li>
         </ul>
     </nav>
 
 </body>
+
 </html>
diff --git a/04/styles/desktop.css b/04/styles/desktop.css
@@ -0,0 +1,68 @@
+.burger-icon {
+	display: none;
+}
+
+.nav {
+	flex-direction: row;
+	margin: 5px;
+	background-color: transparent;
+	transform: translateX(0);
+}
+
+.nav__item {
+	margin-left: 50px;
+}
+
+.nav__link {
+	color: var(--color-default);
+	border-top: 3px solid transparent;
+	transition: color 0.3s, border-top-color 0.3s;
+}
+
+.nav__item:hover > .nav__link {
+	color: var(--color-active);
+	border-top-color: var(--color-active);
+}
+
+.nav__link--start {
+	color: var(--color-active);
+}
+
+.nav__item--dropdown > .nav__link::after {
+	transform: rotate(-90deg);
+	transition: transform 0.3s ease;
+}
+
+.nav__item--dropdown:hover > .nav__link::after {
+	transform: rotate(90deg);
+}
+
+.nav__dropdown {
+	display: none;
+	position: absolute;
+	top: 100%;
+	left: 0;
+	margin-left: 0;
+	background-color: var(--color-default);
+	min-width: 270px;
+}
+
+.nav__item--dropdown:hover > .nav__dropdown {
+	display: block;
+}
+
+.dropdown__item {
+	position: relative;
+}
+
+.nav__link--dropdown {
+	display: block;
+	padding: 10px 20px;
+	color: var(--color-dropdown-text);
+	text-decoration: none;
+	text-transform: capitalize;
+}
+
+.nav__link--dropdown:hover {
+	color: var(--color-active);
+}