devmentor-pl · MichalNowakowski-dev · Aug 5, 2023 · Aug 5, 2023 · Nov 4, 2024
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, 0 100%, 100% 0);
+}
diff --git a/02/styles/global.css b/02/styles/global.css
@@ -1,26 +1,49 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  display: grid;
+  grid-template-areas:
+    "a"
+    "b"
+    "c";
 }
 
-.a, .b, .c {
-    border: 3px solid transparent;
-    min-height: 50px;
+.a,
+.b,
+.c {
+  border: 3px solid transparent;
+  min-height: 50px;
+  height: 50vh;
 
-    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;
+}
+
+@media screen and (min-width: 600px) {
+  body {
+    grid-template-areas:
+      "a a"
+      "c b";
+    grid-template-columns: repeat(2, minmax(auto, 600px));
+    justify-content: center;
+  }
+}
diff --git a/03/images/img-large.jpg b/03/images/img-large.jpg
diff --git a/03/images/img-medium.jpg b/03/images/img-medium.jpg
diff --git a/03/images/img-small.jpg b/03/images/img-small.jpg
diff --git a/03/index.html b/03/index.html
@@ -1,16 +1,47 @@
 <!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" />
+  </head>
+  <body>
+    <main class="t">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, natus
+      dolore. Officiis placeat, saepe vero omnis quibusdam sed? Nemo excepturi
+      deleniti illo, officia repellendus placeat vero repudiandae omnis quis
+      odio. Perferendis saepe ullam facere amet accusamus quasi sed nesciunt
+      deserunt, voluptatem consequatur ex nostrum dolorem asperiores neque
+      exercitationem. Nulla quia explicabo recusandae tenetur architecto omnis
+      tempora ratione, reprehenderit officiis molestiae! Dicta tempore omnis
+      ullam deserunt mollitia doloremque quia modi repudiandae quaerat ipsum,
+      repellendus, fuga ut impedit magnam dolorum harum nemo optio porro quis
+      consectetur et odio! Deserunt nobis magnam nihil! Officiis quas obcaecati
+      excepturi alias ipsa eveniet quisquam quo sequi sunt cumque laudantium
+      totam dolor corporis quod dolore, vel consequuntur cum porro illo tempora.
+      Voluptatem nostrum in sequi vero iusto. Autem sequi, consectetur porro
+      incidunt totam et dicta facere perspiciatis explicabo veniam, rem
+      laudantium. Molestiae sequi vero optio excepturi illum numquam in
+      blanditiis reprehenderit, tenetur vitae ducimus illo unde corporis.
+    </main>
+    <header class="p">
+      <picture>
+        <source media="(min-width: 1200px)" srcset="./images/img-large.jpg" />
+        <source media="(min-width: 600px)" srcset="./images/img-medium.jpg" />
+        <source srcset="./images/img-small.jpg" />
+        <img src="./images/img-large.jpg" alt="picture" />
+      </picture>
+    </header>
+    <side class="v"
+      ><iframe
+        src="https://www.youtube.com/embed/PkDf5gnEUq0"
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen
+      ></iframe
+    ></side>
+  </body>
+</html>
diff --git a/03/styles/global.css b/03/styles/global.css
@@ -1,26 +1,75 @@
 * {
-    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;
+body {
+  display: grid;
+  grid-template-areas:
+    "p"
+    "t"
+    "v";
+  /* overflow: hidden; */
+}
+
+.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: #1f1f1b;
+  grid-area: p;
+  line-height: 0;
+  object-fit: cover;
+  object-position: center;
 }
 
 .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;
+}
+
+.p img {
+  max-width: 100%;
+}
+iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+@media screen and (min-width: 600px) {
+  body {
+    grid-template-areas:
+      "p t"
+      "v t";
+    grid-template-columns: minmax(200px, 50vw);
+  }
+}
+@media screen and (min-width: 1200px) {
+  body {
+    grid-template-areas:
+      "p v"
+      "t t";
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+}
diff --git a/04/index.html b/04/index.html
@@ -1,30 +1,36 @@
 <!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>
-                </ul>
-            </li>
+    <link rel="stylesheet" href="./styles/reset.css" />
+    <link rel="stylesheet" href="./styles/desktop.css" />
+    <link rel="stylesheet" href="./styles/mobile.css" />
+  </head>
+  <body>
+    <input type="checkbox" id="toggle-menu" class="toggle-menu" />
+    <label for="toggle-menu" class="hamburger">☰</label>
+
+    <nav class="menu">
+      <ul class="menu-list">
+        <li><a href="#">Element 1</a></li>
+        <li>
+          <a href="#">Element 2</a>
+          <ul class="submenu">
+            <li><a href="#">Podmenu 1</a></li>
             <li>
-                <a href="#">kontakt</a>
+              <a href="#">Podmenu 2</a>
+              <ul class="submenu">
+                <li><a href="#">Zagnieżdżony element 1</a></li>
+                <li><a href="#">Zagnieżdżony element 2</a></li>
+              </ul>
             </li>
-        </ul>
+          </ul>
+        </li>
+        <li><a href="#">Element 3</a></li>
+      </ul>
     </nav>
-
-</body>
-</html>
+  </body>
+</html>
diff --git a/04/styles/desktop.css b/04/styles/desktop.css
@@ -0,0 +1,58 @@
+.menu {
+  width: 100%;
+}
+
+.menu-list {
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+}
+
+.menu-list > li {
+  position: relative;
+}
+
+.menu-list a {
+  display: block;
+  padding: 10px 15px;
+  text-decoration: none;
+  color: #333;
+}
+
+.submenu {
+  list-style: none;
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 100%;
+  background-color: #fff;
+  padding: 10px 0;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.submenu li {
+  position: relative;
+}
+
+.submenu li a {
+  padding: 10px 15px;
+  white-space: nowrap;
+}
+
+.menu-list > li:hover > .submenu,
+.submenu li:hover > .submenu {
+  display: block;
+}
+
+.toggle-menu {
+  display: none;
+}
+
+.hamburger {
+  display: none;
+  cursor: pointer;
+  font-size: 24px;
+  padding: 10px;
+  background: #333;
+  color: #fff;
+}