devmentor-pl · diana12337 · Feb 20, 2024 · Feb 20, 2024 · Feb 20, 2024 · Feb 20, 2024
diff --git a/01/style.css b/01/style.css
@@ -19,5 +19,6 @@
     height: 0;
     border: 150px solid #dcdcdc;
     border-right-color: transparent;
-    border-bottom-color: transparent;    
+    border-bottom-color: transparent;
+    shape-outside: polygon(0 0, 100% 0, 0 100%);
 }
diff --git a/02/styles/global.css b/02/styles/global.css
@@ -4,23 +4,48 @@
     box-sizing: border-box;
 }
 
-.a, .b, .c {
+.a,
+.b,
+.c {
     border: 3px solid transparent;
-    min-height: 50px;
-
+    min-height: 50vh;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .a {
-    border-color: #ffffba
+    border-color: #ffffba;
+    grid-area: element-a;
 }
 
 .b {
     border-color: #ffdfba;
+    grid-area: element-b;
 }
 
 .c {
     border-color: #baffc9;
+    grid-area: element-c;
+}
+
+body {
+    display: grid;
+    grid-template-areas:
+        "element-a"
+        "element-b"
+        "element-c";
+
+}
+
+@media (min-width: 600px) {
+    body {
+        max-width: 1200px;
+       margin-inline: auto;
+        grid-template-areas:
+            "element-a element-a"
+            "element-c element-b"
+           ;
+
+    }
 }
diff --git a/03/images/flower-8036709_1280.jpg b/03/images/flower-8036709_1280.jpg
diff --git a/03/images/flower-8036709_1920.jpg b/03/images/flower-8036709_1920.jpg
diff --git a/03/images/flower-8036709_640.jpg b/03/images/flower-8036709_640.jpg
diff --git a/03/index.html b/03/index.html
@@ -1,16 +1,53 @@
 <!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/global.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>
+    <div class="container">
+        <main class="text">
+            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto porro repellat autem quasi quia
+                magnam nostrum aperiam impedit quidem quas odit illo incidunt dignissimos id placeat, asperiores libero
+                ducimus dolore.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis tenetur libero deleniti
+                sit veritatis voluptatum praesentium expedita, quae ipsum repudiandae dicta quasi ex magnam eius, beatae
+                id, aliquid assumenda laboriosam!Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem autem
+                cupiditate sequi, nisi ad harum unde. Odio fugiat itaque voluptate pariatur maiores earum rerum sit
+                reiciendis, voluptas dicta omnis aperiam.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni
+                eaque repudiandae deleniti. Tempore sapiente a rem, molestias quibusdam porro beatae mollitia facilis
+                nam? Enim inventore error velit amet ea obcaecati.Lorem ipsum dolor, sit amet consectetur adipisicing
+                elit. Eius vero sed totam quo fuga harum fugiat quis cupiditate, cum laborum. Iste, at repellendus porro
+                laboriosam vel obcaecati quis exercitationem animi!Lorem</p>
+        </main>
+        <header class="picture">
+            <picture>
+                <source srcset="images\flower-8036709_1280.jpg"
+                media="(min-width: 1200px)">
+                <source srcset="images\flower-8036709_640.jpg" 
+                media="(min-width: 600px)">
+                <source srcset="images\flower-8036709_640.jpg"
+                media="(max-width: 599px)">
+
+                <img src="images\flower-8036709_1920.jpg" alt="img-flower" />
 
+
+
+            </picture>
+        </header>
+        <side class="video"><iframe width="560" height="315"
+                src="https://www.youtube.com/embed/p3_xN2Zp1TY?si=OCI3Q-4Uf70FwUlQ" title="YouTube video player"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen></iframe></side>
+    </div>
 </body>
+
 </html>
diff --git a/03/styles/desktop.css b/03/styles/desktop.css
@@ -0,0 +1,13 @@
+.container {
+    max-width: 1400px;
+    margin-inline: auto;
+    grid-template-areas: 
+    "picture-element video-element"
+    "text-element text-element";
+    grid-template-columns: 
+    50vw
+    auto;
+
+
+
+}
diff --git a/03/styles/global.css b/03/styles/global.css
@@ -4,7 +4,7 @@
     box-sizing: border-box;
 }
 
-.p, .t, .v {
+.picture, .text, .video {
     border: 3px solid transparent;
     min-height: 50px;
 
@@ -13,14 +13,51 @@
     align-items: center;
 }
 
-.p {
-    border-color: #ffffba
+.picture {
+    grid-area: picture-element;
+
+
+}
+img {
+    width: 100%;
+    height: auto;
+}
+.text {
+    grid-area: text-element;
+}
+
+.video {
+    grid-area: video-element;
+    height: 0;
+    padding-bottom: calc(315 / 560 * 100%);
+    position: relative;
+
 }
+iframe {
+    border: 1px solid red;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+  right: 0;
+    height: 100%;
+    width: 100%;
+}
+
+
 
-.t {
-    border-color: #ffdfba;
+.container {
+    display: grid;
+    grid-template-areas: 
+    "picture-element"
+    "text-element"
+    "video-element";
+
+
+
+
+
 }
 
-.v {
-    border-color: #baffc9;
-}
+
+
diff --git a/03/styles/reset.css b/03/styles/reset.css
@@ -0,0 +1,46 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+    box-sizing: border-box;
+  }
+  /*
+    2. Remove default margin
+  */
+  * {
+    margin: 0;
+  }
+  /*
+    Typographic tweaks!
+    3. Add accessible line-height
+    4. Improve text rendering
+  */
+  body {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+  /*
+    5. Improve media defaults
+  */
+  img, picture, video, canvas, svg {
+    display: block;
+
+  }
+  /*
+    6. Remove built-in form typography styles
+  */
+  input, button, textarea, select {
+    font: inherit;
+  }
+  /*
+    7. Avoid text overflows
+  */
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
+  /*
+    8. Create a root stacking context
+  */
+  #root, #__next {
+    isolation: isolate;
+  }
diff --git a/03/styles/tablet.css b/03/styles/tablet.css
@@ -0,0 +1,13 @@
+
+.container {
+
+    grid-template-areas: 
+    "picture-element text-element"
+    "video-element text-element";
+
+    grid-template-columns: 
+    minmax(200px, calc(100vh - 50%))
+    auto;
+
+
+}
diff --git a/04/desktop.css b/04/desktop.css
@@ -0,0 +1,36 @@
+button {
+    display: none;
+}
+
+.navbar {
+    display: block;
+    align-items: center;
+}
+
+nav ul {
+    display: flex;
+}
+
+.navbar__list--bottom {
+    position: absolute;
+    display: block;
+    background-color: #3d3d3d;
+    z-index: 1;
+}
+
+.first-list {
+    position: relative;
+}
+
+.navbar__list--align-margin {
+    margin-left: 0;
+    padding: 10px;
+}
+
+.second-list:hover .navbar__list--bottom {
+    display: block;
+}
+
+.navbar__list--bottom {
+    display: none;
+}
diff --git a/04/global.css b/04/global.css
@@ -0,0 +1,77 @@
+body {
+    text-align: center;
+    font-size: 1.2rem;
+}
+
+.main-nav {
+    background-color: #3d3d3d;
+    min-height: 60px;
+}
+
+ul li {
+    list-style-type: none;
+}
+
+nav ul li {
+    min-width: 200px;
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+}
+
+.navbar a {
+    text-decoration: none;
+    color: white;
+}
+
+.navbar {
+    display: none;
+    padding: 20px;
+}
+
+.hamburger-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: center;
+}
+
+.hamburger-menu__element {
+    width: 30px;
+    height: 2.5px;
+    background-color: rgb(248, 247, 247);
+}
+
+button {
+    border: none;
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+button:focus .first-child {
+    transform: translateY(6px) rotate(-140deg);
+}
+
+button:focus .last-child {
+    transform: translateY(-7px) rotate(140deg);
+}
+
+button:focus .middle-child {
+    transform: rotate(140deg);
+}
+
+button:focus+.navbar {
+    display: block;
+}
+
+.navbar__list--align-margin {
+    margin-left: 20px;
+}
+
+.navbar ul li {
+    text-align: left;
+}