devmentor-pl · bartoszdudziak-dev · Dec 17, 2024 · Dec 17, 2024 · Dec 18, 2024 · Dec 18, 2024
diff --git a/01/style.css b/01/style.css
@@ -1,23 +1,25 @@
 * {
-    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(100% 0, 0 100%, 0 0);
+}
diff --git a/02/styles/global.css b/02/styles/global.css
@@ -1,26 +1,54 @@
 * {
-    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;
+  grid-area: A;
 }
 
 .b {
-    border-color: #ffdfba;
+  border-color: #ffdfba;
+  grid-area: B;
 }
 
 .c {
-    border-color: #baffc9;
-}
+  border-color: #baffc9;
+  grid-area: C;
+}
+
+body {
+  display: grid;
+  grid-template-areas:
+    "A"
+    "B"
+    "C";
+}
+
+body > * {
+  height: 50vh;
+}
+
+@media (min-width: 601px) {
+  body {
+    grid-template-areas:
+      "A A"
+      "C B";
+
+    max-width: 1200px;
+    margin-inline: auto;
+  }
+}
diff --git a/03/images/jpg/picture-large.jpg b/03/images/jpg/picture-large.jpg
diff --git a/03/images/jpg/[email protected] b/03/images/jpg/[email protected]
diff --git a/03/images/jpg/[email protected] b/03/images/jpg/[email protected]
diff --git a/03/images/jpg/picture-medium.jpg b/03/images/jpg/picture-medium.jpg
diff --git a/03/images/jpg/[email protected] b/03/images/jpg/[email protected]
diff --git a/03/images/jpg/[email protected] b/03/images/jpg/[email protected]
diff --git a/03/images/jpg/picture-small.jpg b/03/images/jpg/picture-small.jpg
diff --git a/03/images/jpg/[email protected] b/03/images/jpg/[email protected]
diff --git a/03/images/jpg/[email protected] b/03/images/jpg/[email protected]
diff --git a/03/images/webp/picture-large.webp b/03/images/webp/picture-large.webp
diff --git a/03/images/webp/[email protected] b/03/images/webp/[email protected]
diff --git a/03/images/webp/[email protected] b/03/images/webp/[email protected]
diff --git a/03/images/webp/picture-medium.webp b/03/images/webp/picture-medium.webp
diff --git a/03/images/webp/[email protected] b/03/images/webp/[email protected]
diff --git a/03/images/webp/[email protected] b/03/images/webp/[email protected]
diff --git a/03/images/webp/picture-small.webp b/03/images/webp/picture-small.webp
diff --git a/03/images/webp/[email protected] b/03/images/webp/[email protected]
diff --git a/03/images/webp/[email protected] b/03/images/webp/[email protected]
diff --git a/03/index.html b/03/index.html
@@ -1,16 +1,86 @@
 <!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">
+  <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 - #03</title>
-</head>
-<body>
-
-    <main class="t">T</main>
-    <header class="p">P</header>
-    <side class="v">V</side>
-
-</body>
-</html>
+    <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"
+    />
+  </head>
+  <body>
+    <main class="t">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi dolorem
+      fugiat, harum, quibusdam soluta dolor recusandae tenetur consequuntur
+      omnis mollitia veniam eius in beatae praesentium fuga exercitationem ipsum
+      reprehenderit repellendus perferendis hic. Consectetur voluptas ipsa
+      obcaecati adipisci hic, distinctio aliquid voluptate? Omnis nesciunt
+      incidunt nisi culpa expedita dolorum consequuntur a totam alias impedit
+      labore praesentium laborum quis suscipit iusto eveniet, hic commodi
+      mollitia porro nam eum error recusandae ipsa. Repudiandae, eius possimus?
+      Sit quam animi aspernatur delectus alias rem repellat, sequi sunt dolorum
+      quo mollitia voluptate nemo. Tenetur excepturi modi delectus, aut saepe
+      facilis at, fugit sit autem id hic.
+    </main>
+    <header class="p">
+      <picture>
+        <source
+          media="(min-width: 1200px)"
+          srcset="
+            ./images/webp/picture-large.webp    1000w,
+            ./images/jpg/picture-large.jpg      1000w,
+            ./images/webp/[email protected] 1200w,
+            ./images/jpg/[email protected]   1200w,
+            ./images/webp/[email protected] 1600w,
+            ./images/jpg/[email protected]   1600w
+          "
+        />
+        <source
+          media="(min-width: 600px)"
+          srcset="
+            ./images/webp/picture-medium.webp    1000w,
+            ./images/jpg/picture-medium.jpg      1000w,
+            ./images/webp/[email protected] 1200w,
+            ./images/jpg/[email protected]   1200w,
+            ./images/webp/[email protected] 1600w,
+            ./images/jpg/[email protected]   1600w
+          "
+        />
+        <source
+          srcset="
+            ./images/webp/picture-small.webp    1000w,
+            ./images/jpg/picture-small.jpg      1000w,
+            ./images/webp/[email protected] 1200w,
+            ./images/jpg/[email protected]   1200w,
+            ./images/webp/[email protected] 1600w,
+            ./images/jpg/[email protected]   1600w
+          "
+        />
+        <img
+          src="./images/jpg/picture-small.jpg"
+          alt="Majestic lion lying on the rock"
+        />
+      </picture>
+    </header>
+    <side class="v"
+      ><iframe
+        src="https://www.youtube.com/embed/O02GFZrZg3E?si=lMyg7MrL5_VLEdGF"
+        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,8 @@
+body {
+  grid-template-areas:
+    "P V"
+    "T T";
+
+  width: min(1400px, 100%);
+  margin-inline: auto;
+}
diff --git a/03/styles/global.css b/03/styles/global.css
@@ -1,26 +1,53 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-.p, .t, .v {
-    border: 3px solid transparent;
-    min-height: 50px;
+.p,
+.t,
+.v {
+  border: 3px solid transparent;
+  min-height: 50px;
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .p {
-    border-color: #ffffba
+  border-color: #ffffba;
+  grid-area: P;
 }
 
 .t {
-    border-color: #ffdfba;
+  border-color: #ffdfba;
+  grid-area: T;
 }
 
 .v {
-    border-color: #baffc9;
-}
+  border-color: #baffc9;
+  grid-area: V;
+
+  height: 0;
+  padding-bottom: calc(315 / 560 * 100%);
+  position: relative;
+  width: 100%;
+}
+
+body {
+  display: grid;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+iframe {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
diff --git a/03/styles/mobile.css b/03/styles/mobile.css
@@ -0,0 +1,6 @@
+body {
+  grid-template-areas:
+    "P"
+    "T"
+    "V";
+}
diff --git a/03/styles/tablet.css b/03/styles/tablet.css
@@ -0,0 +1,7 @@
+body {
+  grid-template-areas:
+    "P T"
+    "V T";
+
+  grid-template-columns: minmax(200px, 50%) 1fr;
+}
diff --git a/04/index.html b/04/index.html
@@ -1,30 +1,51 @@
 <!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">
+  <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>
-</head>
-<body>
-
-    <nav>
-        <ul>
-            <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>
+    <link rel="stylesheet" href="./styles/index.css" />
+  </head>
+  <body>
+    <header>
+      <nav class="nav">
+        <label class="hamburger" for="menu-switcher"></label>
+        <input class="hamburger-checkbox" type="checkbox" id="menu-switcher" />
+        <ul class="nav__menu">
+          <li class="nav__item">
+            <a class="nav__link" href="#home">Home</a>
+          </li>
+          <li class="nav__item nav__item--dropdown">
+            <span class="nav__link"
+              >Items<span class="arrow arrow-down"></span>
+            </span>
+            <ul class="nav__submenu nav__submenu--down">
+              <li class="nav__item">
+                <a class="nav__link" href="#item1">Item 1</a>
+              </li>
+              <li class="nav__item nav__item--dropdown">
+                <span class="nav__link">Item 2</span
+                ><span class="arrow arrow-right"></span>
+                <ul class="nav__submenu nav__submenu--right">
+                  <li class="nav__item">
+                    <a class="nav__link" href="#item2.1">Item 2.1</a>
+                  </li>
+                  <li class="nav__item">
+                    <a class="nav__link" href="#item2.2">Item 2.2</a>
+                  </li>
                 </ul>
-            </li>
-            <li>
-                <a href="#">kontakt</a>
-            </li>
+              </li>
+            </ul>
+          </li>
+          <li class="nav__item">
+            <a class="nav__link" href="#settings">Settings</a>
+          </li>
+          <li class="nav__item">
+            <a class="nav__link" href="#contact">Contact</a>
+          </li>
         </ul>
-    </nav>
-
-</body>
-</html>
+      </nav>
+    </header>
+  </body>
+</html>