devmentor-pl · magdalenagrzesik · Mar 6, 2024 · Mar 12, 2024 · Mar 16, 2024 · Mar 24, 2024
diff --git a/01/index.html b/01/index.html
@@ -4,6 +4,9 @@
     <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">
     <title>devmentor.pl - HTML & CSS: RWD - #01</title>
     <link rel="stylesheet" href="style.css">
 </head>

diff --git a/01/style.css b/01/style.css
@@ -10,6 +10,7 @@
     min-width: 320px;
     max-width: 600px;
     text-align: justify;
+
 }
 
 .content::before {
@@ -20,4 +21,5 @@
     border: 150px solid #dcdcdc;
     border-right-color: transparent;
     border-bottom-color: transparent;    
+    shape-outside: polygon(100% 0, 0% 100%, 50% 49%);
 }
diff --git a/02/styles/global.css b/02/styles/global.css
@@ -1,26 +1,55 @@
 * {
-    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;
+body {
+  display: grid;
+}
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.a,
+.b,
+.c {
+  border: 3px solid transparent;
+  min-height: 50px;
+  height: 50vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .a {
-    border-color: #ffffba
+  border-color: #ffffba;
 }
 
 .b {
-    border-color: #ffdfba;
+  border-color: #ffdfba;
 }
 
 .c {
-    border-color: #baffc9;
-}
+  border-color: #baffc9;
+  order: 1;
+}
+
+@media screen and (min-width: 600px) {
+  body {
+    grid-template-areas:
+      "a-area a-area"
+      "c-area b-area";
+        grid-template-columns: minmax(auto, 600px) minmax(auto, 600px);
+        justify-content: center;
+  }
+
+  .a {
+    grid-area: a-area;
+  }
+
+  .b {
+    grid-area: b-area;
+  }
+
+  .c {
+    grid-area: c-area;
+  }
+}
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">
+    <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>
+    <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">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur corrupti itaque at placeat
+            voluptatum doloribus neque, sunt quibusdam laborum officia in voluptates, odio ipsa tenetur eveniet sint
+            rerum
+            distinctio ex.
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est aspernatur esse necessitatibus non iusto
+            minima dolorum sit omnis expedita rerum cumque quam consequatur, aperiam nisi recusandae neque labore,
+            cupiditate ipsam!</main>
+        <header class="p">
+            <picture>
+                <source
+                    media="(min-width: 1200px)"
+                    srcset="https://picsum.photos/id/527/1500/1000"
+                >
+                <source
+                    media="(min-width: 600px)"
+                    srcset="https://picsum.photos/id/527/900/600"
+                >
+                <img
+                    class="img"
+                    src="https://picsum.photos/id/527/1500/1000"
+                    alt="headerimage"
+                >
+            </picture>
+        </header>
+        <side class="v"><iframe
+                class="video"
+                width="560"
+                height="315"
+                src="https://www.youtube.com/embed/iHDJ_xfW26Y?si=APGLxwiHaoOXj9dj"
+                frameborder="0"
+            ></iframe></side>
+
+    </body>
 
-</body>
 </html>
diff --git a/03/styles/desktop.css b/03/styles/desktop.css
@@ -0,0 +1,8 @@
+body{
+    display: grid;
+    grid-template-areas: 
+    "area-p area-v" 
+    "area-t area-t";
+    max-width: 1400px;
+    margin: 0   auto;
+}
diff --git a/03/styles/global.css b/03/styles/global.css
@@ -7,20 +7,39 @@
 .p, .t, .v {
     border: 3px solid transparent;
     min-height: 50px;
-
+    
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .p {
-    border-color: #ffffba
+    border-color: #ffffba;
+    grid-area: area-p;
+    line-height: 0;
 }
 
 .t {
     border-color: #ffdfba;
+    grid-area: area-t;
 }
 
 .v {
     border-color: #baffc9;
-}
+    grid-area: area-v;
+    position: relative;
+    height: 0;
+    padding-bottom: calc(100% * 315/560);
+}
+
+.img{
+    width: 100%;
+}
+
+.video{
+    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,7 @@
+body{
+    display: grid;
+    grid-template-areas: 
+    "area-p"
+    "area-t"
+    "area-v";
+}
diff --git a/03/styles/tablet.css b/03/styles/tablet.css
@@ -0,0 +1,9 @@
+body{
+    display: grid;
+    grid-template-areas: 
+    "area-p area-t" 
+    "area-v area-t";
+grid-template-columns: minmax(200px, 50vw) auto;
+
+}
+
diff --git a/04/index.html b/04/index.html
@@ -5,23 +5,29 @@
     <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>
+    <link rel="stylesheet" href="./style/reset.css">
+    <link rel="stylesheet" href="./style/style.css">
+    <link rel="stylesheet" href="./style/mobile.css">
+    <link rel="stylesheet" href="./style/tablet.css" media="(min-width: 600px)">
 </head>
 <body>
 
-    <nav>
-        <ul>
-            <li>
-                <a href="#">start</a>
+    <nav class="menu clearfix">
+        <label class="menu__hamburger" for="toggler"></label>
+        <input class="menu__toggler" type="checkbox" name="" id="toggler">
+        <ul class="menu__list">
+            <li class="menu__item">
+                <a href="#" class="menu__link">start</a>
             </li>
-            <li>
-                <a href="#">oferta</a>
-                <ul>
-                    <li><a href="">strony internetowe</a></li>
-                    <li><a href="">pozycjonowanie stron www</a></li>
+            <li class="menu__item menu__item--children">
+                <a href="#" class="menu__link">oferta</a>
+                <ul class="menu__list menu__list--dropdown">
+                    <li class="menu__item menu__item--dropdown"><a href="" class="menu__link menu__link--dropdown">strony internetowe</a></li>
+                    <li class="menu__item menu__item--dropdown"><a href="" class="menu__link menu__link--dropdown">pozycjonowanie stron www</a></li>
                 </ul>
             </li>
-            <li>
-                <a href="#">kontakt</a>
+            <li class="menu__item">
+                <a href="#" class="menu__link">kontakt</a>
             </li>
         </ul>
     </nav>

diff --git a/04/style/mobile.css b/04/style/mobile.css
@@ -0,0 +1,56 @@
+.menu {
+  background-color: var(--main);
+  padding: 20px 40px;
+}
+
+.menu__hamburger {
+  display: block;
+  width: 30px;
+  height: 20px;
+  border-top: 3px solid black;
+  border-bottom: 3px solid black;
+  float: right;
+}
+
+.menu__hamburger::after {
+  content: "";
+  display: block;
+  height: 3px;
+  background-color: black;
+  position: relative;
+  top: 5px;
+  left: 6px;
+}
+
+.menu__toggler {
+  display: none;
+}
+
+.menu__list {
+  display: none;
+}
+
+.menu__list--dropdown{
+    display: block;
+}
+
+.menu__toggler:checked + .menu__list {
+  display: block;
+}
+
+.menu__list--dropdown{
+    padding-left: 30px;
+}
+
+.menu__item {
+    padding: 5px;
+}
+
+.menu__link {
+    text-decoration: none;
+    color: black;
+}
+
+.menu__link:hover {
+    text-decoration: underline;
+}