devmentor-pl · code-mike-code · Dec 17, 2024 · Dec 17, 2024 · Dec 18, 2024 · Dec 18, 2024
diff --git a/01/style.css b/01/style.css
@@ -19,5 +19,8 @@
     height: 0;
     border: 150px solid #dcdcdc;
     border-right-color: transparent;
-    border-bottom-color: transparent;    
+    border-bottom-color: transparent;  
+
+    shape-outside: polygon(0 0, 0% 100%, 100% 0);
+    margin-right: 10px;
 }
diff --git a/02/index.html b/02/index.html
@@ -1,16 +1,33 @@
 <!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"
+    >
     <title>devmentor.pl - HTML & CSS: RWD - #02</title>
 
-    <link rel="stylesheet" href="./styles/global.css">
+    <link
+        rel="stylesheet"
+        href="./styles/global.css"
+    >
+    <link
+        rel="stylesheet"
+        media="(min-width: 601px)"
+        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
@@ -4,23 +4,34 @@
     box-sizing: border-box;
 }
 
+body {
+    display: grid;
+    grid-template-areas: 
+    "a-item"
+    "b-item"
+    "c-item";
+}
+
 .a, .b, .c {
     border: 3px solid transparent;
-    min-height: 50px;
+    min-height: 50vh;
 
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .a {
+    grid-area: a-item;
     border-color: #ffffba
 }
 
 .b {
+    grid-area: b-item;
     border-color: #ffdfba;
 }
 
 .c {
+    grid-area: c-item;
     border-color: #baffc9;
 }
diff --git a/02/styles/tablet.css b/02/styles/tablet.css
@@ -0,0 +1,8 @@
+body {
+    margin: 0 auto;
+    max-width: 1200px;
+    display: grid;
+    grid-template-areas: 
+    "a-item a-item"
+    "c-item b-item";
+}
diff --git a/03/img/hero-desktop.jpg b/03/img/hero-desktop.jpg
diff --git a/03/img/hero-mobile.jpg b/03/img/hero-mobile.jpg
diff --git a/03/img/hero-tablet.jpg b/03/img/hero-tablet.jpg
diff --git a/03/index.html b/03/index.html
@@ -1,16 +1,73 @@
 <!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/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">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate nisi quidem, cum officia
+        doloremque provident consectetur beatae aut praesentium quasi eaque laborum ut soluta sint nihil itaque
+        reprehenderit labore. Cumque, quod assumenda! Modi sit repudiandae error pariatur quibusdam non expedita.
+        reprehenderit labore. Cumque, quod assumenda! Modi sit repudiandae error pariatur quibusdam non expedita.
+    </main>
+    <header class="p">
+        <picture>
+            <source srcset="img/hero-mobile.jpg">
+            <source
+                media="(min-width: 600px)"
+                srcset="img/hero-tablet.jpg"
+            >
+            <source
+                media="(min-width: 1200px)"
+                srcset="img/hero-desktop.jpg"
+            >
+            <img
+                src="../img/hero-desktop.jpg"
+                alt="hero-image"
+            >
+        </picture>
+    </header>
+    <side class="v">
+        <iframe
+            src="https://www.youtube.com/embed/Rik3gHT24AM?si=5sXGuaJIOi3iJmsO"
+            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,22 @@
+body {
+    display: grid;
+    max-width: 1400px;
+    margin: 0 auto;
+    grid-template-areas: 
+    "p-picture v-video"
+    "t-text t-text";
+}
+
+ .v {
+    width: 100%;
+    min-height: 100%;
+}
+.p {
+    width: 100%;
+}
+img {
+    width: 100%;
+}
+picture {
+    min-width: 100%;
+}
diff --git a/03/styles/global.css b/03/styles/global.css
@@ -23,4 +23,8 @@
 
 .v {
     border-color: #baffc9;
+}
+img {
+    max-width: 100%;
+    height: auto;
 }
diff --git a/03/styles/mobile.css b/03/styles/mobile.css
@@ -0,0 +1,35 @@
+body {
+    display: grid;
+    grid-template-areas: 
+    "p-picture"
+    "t-text"
+    "v-video";
+}
+
+.t {
+grid-area: t-text;
+}
+.p {
+grid-area: p-picture;
+}
+.v {
+grid-area: v-video;
+}
+
+.v {
+    height: 0;
+    padding-bottom: calc(315 / 560 * 100%);
+    position: relative;
+
+}
+iframe {
+    border: 5px solid red;
+    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,11 @@
+body {
+    /* display: grid; */
+    grid-template-areas: 
+    "p-picture t-text"
+    "v-video t-text";
+}
+
+.p, .v {
+    width: 50vw;
+    min-width: 200px;
+}
diff --git a/04/assets/211607_right_arrow_icon.png b/04/assets/211607_right_arrow_icon.png
diff --git a/04/assets/211607_right_arrow_icon.svg b/04/assets/211607_right_arrow_icon.svg
diff --git a/04/assets/211687_down_arrow_icon.png b/04/assets/211687_down_arrow_icon.png
diff --git a/04/assets/211687_down_arrow_icon.svg b/04/assets/211687_down_arrow_icon.svg
diff --git a/04/css/desktop.css b/04/css/desktop.css
@@ -0,0 +1,33 @@
+.nav__container {
+    /* padding: 20px 0 20px 0; */
+}
+.nav {
+    display: flex;
+    height: 80px;
+}
+.nav__item {
+    padding: 20px 40px 20px 20px;
+    margin-left: 10px;
+}
+.arrow-down {
+    rotate: 0deg;
+    padding: 5px 0 0 10px;
+}
+.nav__dropdown {
+    left: 0;
+    top: 100%;
+}
+.dropdown__item {
+    position: relative;
+    padding: 10px 20px;
+    min-width: 180px;
+}
+.nav__dropdown-second {
+    left: 180px;
+}
+.switcher {
+    display: none;
+}
+.input {
+    display: none;
+}