devmentor-pl · webEsperer · Dec 9, 2024 · Dec 9, 2024 · Dec 10, 2024 · Dec 10, 2024
diff --git a/01/style.css b/01/style.css
@@ -20,4 +20,5 @@
     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
@@ -4,13 +4,18 @@
     box-sizing: border-box;
 }
 
+body {
+    display: grid;
+
+}
+
 .a, .b, .c {
     border: 3px solid transparent;
     min-height: 50px;
-
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 50vh;
 }
 
 .a {
@@ -23,4 +28,27 @@
 
 .c {
     border-color: #baffc9;
+    order: 1
+}
+
+@media screen and (min-width: 600px) {
+    body {
+        grid-template-areas: 
+            "a a"
+            "c b";
+        grid-template-columns: minmax(auto, 600px) minmax(auto, 600px);
+        justify-content: center;
+    }
+
+    .a {
+        grid-area: a;
+    }
+
+    .b {
+        grid-area: b;
+    }
+
+    .c {
+        grid-area: c;
+    }
 }
diff --git a/03/images/wild-horse-9057944_1280.jpg b/03/images/wild-horse-9057944_1280.jpg
diff --git a/03/images/wild-horse-9057944_1920.jpg b/03/images/wild-horse-9057944_1920.jpg
diff --git a/03/images/wild-horse-9057944_640.jpg b/03/images/wild-horse-9057944_640.jpg
diff --git a/03/index.html b/03/index.html
@@ -1,16 +1,71 @@
 <!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/reset.css" />
+    <link rel="stylesheet" href="./styles/global.css" />
+    <link rel="stylesheet" href="./styles/mobile.css" />
+    <link
+      rel="stylesheet"
+      href="./styles/tablet.css"
+      media="(min-width: 600px)"
+    />
+    <link
+      rel="stylesheet"
+      href="./styles/desktop.css"
+      media="(min-width: 1200px)"
+    />
+  </head>
+  <body>
+    <main class="t">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
+        voluptatibus, labore maxime consectetur omnis veniam corporis eius
+        dignissimos aut, sequi ex placeat deserunt. Quia optio ratione autem
+        commodi eaque sapiente libero fugit ut non quidem? Hic, ratione. Quidem
+        sed alias veritatis similique non quos enim maiores vero itaque
+        quibusdam, veniam et reiciendis debitis deserunt corrupti possimus
+        aliquam cumque rerum necessitatibus recusandae quod sunt. Vero veniam
+        aut praesentium inventore, exercitationem expedita voluptas? Explicabo
+        recusandae qui laboriosam inventore itaque modi sapiente earum ipsam
+        alias, nulla eligendi, repellat, quas deserunt architecto rem laborum.
+        Nesciunt, id ipsam dolores alias assumenda sequi amet incidunt quis eum,
+        eaque quasi illum modi vel rerum. Magni quos officiis neque
+        reprehenderit quidem officia amet repellendus, repellat praesentium quam
+        doloremque?
+      </p>
+    </main>
+    <header class="p">
+      <picture>
+        <source
+          media="(min-width: 1200px)"
+          srcset="images/wild-horse-9057944_1920.jpg"
+        >
+        <source
+          media="(min-width: 600px)"
+          srcset="images/wild-horse-9057944_1280.jpg"
+        >
+        <source
+          media="(max-width: 599px)"
+          srcset="images/wild-horse-9057944_640.jpg"
+        >
+        <img src="images/wild-horse-9057944_1920.jpg" >
+      </picture>
+    </header>
+    <side class="v">
+      <iframe
+        width="560"
+        height="315"
+        src="https://www.youtube.com/embed/JIm4ibiHyJg?si=eZHqE5zd_fui53w8"
+        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 {
+    display: grid;
+    grid-template-areas: 
+        "p v"
+        "t t";
+    max-width: 1400px;
+    margin: 0 auto;
+}
diff --git a/03/styles/global.css b/03/styles/global.css
@@ -13,14 +13,35 @@
     align-items: center;
 }
 
+.p img {
+    max-width: 100%;
+    height: auto;
+    display: block; 
+}
+
+
 .p {
-    border-color: #ffffba
+    border-color: #ffffba;
+    grid-area: p;
 }
 
 .t {
     border-color: #ffdfba;
+    grid-area: t;
 }
 
 .v {
     border-color: #baffc9;
+    position: relative;
+    height: 0;
+    padding-bottom: calc(100% * 315 / 560);
+    grid-area: v;
+}
+
+.v iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }
diff --git a/03/styles/mobile.css b/03/styles/mobile.css
@@ -0,0 +1,8 @@
+body {
+    display: grid;
+    grid-template-areas: 
+        "p"
+        "t"
+        "v";
+}
+
diff --git a/03/styles/reset.css b/03/styles/reset.css
@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/03/styles/tablet.css b/03/styles/tablet.css
@@ -0,0 +1,8 @@
+body {
+    display: grid;
+    grid-template-areas: 
+        "p t"
+        "v t";
+
+    grid-template-columns: minmax(200px, 50vw) auto;
+}
diff --git a/04/css/desktop.css b/04/css/desktop.css
@@ -0,0 +1,39 @@
+.nav__hamburger {
+    display: none;
+}
+
+.nav__list {
+    display: block;
+    display: flex;
+    gap: 10px;
+}
+
+.nav__item {
+    padding: 5px;
+}
+
+.nav__item--children {
+    position: relative;
+}
+
+.nav__link {
+    border: 1px solid black;
+    padding: 5px 20px ;
+}
+
+.nav__link--dropdown {
+    border: 0;
+}
+
+.nav__list--dropdown {
+    position: absolute;
+    display: block;
+    top: 100%;
+    left: -60px;
+    right: -180px;
+    display: none;
+}
+
+.nav__item:hover > .nav__list--dropdown {
+    display: block;
+}
diff --git a/04/css/global.css b/04/css/global.css
@@ -0,0 +1,3 @@
+body {
+    margin: 10px;
+}
diff --git a/04/css/mobile.css b/04/css/mobile.css
@@ -0,0 +1,48 @@
+nav {
+    background-color: #f4f4f4;
+    padding: 10px 20px;
+}
+
+.nav__hamburger {
+    display: block;
+    height: 20px;
+    width: 30px;
+    border-top: 3px solid black;
+    border-bottom: 3px solid black;
+    float: right;
+}
+
+.nav__hamburger::after {
+    display: block;
+    content: "";
+    height: 3px;
+    background-color: black;
+    position: relative;
+    top: 6px;
+    left: 6px;    
+}
+
+.nav__toggle {
+    display: none;
+}
+
+.nav__list {
+    display: none;
+}
+
+.nav__toggle:checked + .nav__list {
+    display: block;
+}
+
+.nav__list--dropdown {
+    display: block;
+    padding-left: 30px;
+}
+
+.nav__link {
+    text-decoration: none;
+}
+
+.nav__link:hover {
+    text-decoration: underline;
+}
diff --git a/04/css/reset.css b/04/css/reset.css
@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}