devmentor-pl · Chasemoose · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 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(320px 0, 0 320px);
 }
diff --git a/02/styles/global.css b/02/styles/global.css
@@ -4,6 +4,18 @@
     box-sizing: border-box;
 }
 
+body {
+    display: grid;
+    grid-template-areas: 
+        "a"
+        "b"
+        "c";
+    grid-template-rows: 
+        50vh
+        50vh
+        50vh;
+}
+
 .a, .b, .c {
     border: 3px solid transparent;
     min-height: 50px;
@@ -14,13 +26,27 @@
 }
 
 .a {
-    border-color: #ffffba
+    border-color: #ffffba;
+    grid-area: a;
 }
 
 .b {
     border-color: #ffdfba;
+    grid-area: b;
 }
 
 .c {
     border-color: #baffc9;
+    grid-area: c;
+}
+
+
+@media (min-width: 600px) {
+    body {
+        grid-template-areas: 
+        "a a"
+        "c b";
+        max-width: 1200px;
+        margin: 0 auto;
+    }
 }
diff --git a/03/img/autumn_1280.jpg b/03/img/autumn_1280.jpg
diff --git a/03/img/autumn_1920.jpg b/03/img/autumn_1920.jpg
diff --git a/03/img/autumn_640.jpg b/03/img/autumn_640.jpg
diff --git a/03/img/autumn_800.jpg b/03/img/autumn_800.jpg
diff --git a/03/index.html b/03/index.html
@@ -1,16 +1,44 @@
 <!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">
     <title>devmentor.pl - HTML & CSS: RWD - #03</title>
+
+    <link rel="stylesheet" href="./styles/global.css">
 </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. Debitis fugiat recusandae, accusantium
+        nulla est fugit amet facilis, maxime nemo optio autem sunt vel ab possimus accusamus earum! Quae quo aliquam
+        optio illum ducimus a molestias eum rerum nemo odio. Repellat dolor corporis sint ipsa corrupti dolores ab,
+        itaque optio adipisci officia expedita totam amet nemo temporibus. Quo, quis nulla ex fuga totam neque
+        accusantium necessitatibus maxime fugiat eius, magni, beatae libero quos perspiciatis earum facilis? Culpa
+        nostrum, maiores vero quidem blanditiis iusto quo provident facere ab eos. Ad, delectus, rerum inventore
+        praesentium perferendis molestiae veniam obcaecati sunt libero officiis optio.</main>
+
+
+    <header class="p">
+        <picture>
+            <source srcset="./img/autumn_1920.jpg" media="(min-width:1200px)">
+            <source srcset="./img/autumn_1280.jpg" media="(min-width:600px)">
+            <source srcset="./img/autumn_640.jpg" media="(max-width:599px)">
+
+            <img src="./img/autumn_1920.jpg" alt="Rails">
+        </picture>
+    </header>
+
+
+    <side class="v">
+        <iframe class="video" src="https://www.youtube.com/embed/ifVVc8xTas0?si=6RdvC_QySJJAOUwT"
+            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,76 @@
 * {
-    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";
+}
+
+.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: #ffffba;
+	grid-area: p;
+    width: 100%;
 }
 
+
 .t {
-    border-color: #ffdfba;
+	border-color: #ffdfba;
+	grid-area: t;
 }
 
 .v {
-    border-color: #baffc9;
-}
+    grid-area: v;
+	border-color: #baffc9;
+    height: 0;
+	padding-top: 56.25%;
+	position: relative;
+}
+
+.video {
+	position: absolute;
+	left: 0;
+	top: 0;
+	height: 100%;
+	width: 100%;
+}
+
+img {
+	max-width: 100%;
+}
+
+@media (min-width: 600px) {
+	body {
+		grid-template-areas:
+			"p t"
+			"v t";
+		grid-template-columns: minmax(200px, 50vw) auto;
+	}
+}
+
+@media (min-width: 1200px) {
+	body {
+		grid-template-areas:
+		"p v"
+		"t t";
+		grid-template-columns: 50% 50%;
+		max-width: 1400px;
+		margin: 0 auto;
+	}
+}
diff --git a/04/index.html b/04/index.html
@@ -1,30 +1,46 @@
 <!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">
     <title>devmentor.pl - HTML & CSS: RWD - #04</title>
+    <script src="https://kit.fontawesome.com/09db2cc640.js" crossorigin="anonymous"></script>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="./style.css">
+
 </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>
+
+    <nav class="nav__menu">
+        <ul class="nav__menu-list">
+            <li class="nav__menu--list-item bars-icon">
+                <a href="#"><i class="fa-solid fa-bars"></i></a>
+                <ul class="nav__first-menu">
+                    <li class="nav__menu--list-item">
+                        <a href="#">start</a>
+                    </li>
+                    <li class="nav__menu--list-item submenu">
+                        <a href="#">oferta <i class="fa-solid fa-chevron-down"></i></a>
+                        <ul class="nav__menu-dropdown">
+                            <li class="nav__menu--list-item dropdown"><a href="">strony internetowe</a></li>
+                            <li class="nav__menu--list-item dropdown"><a href="">pozycjonowanie stron www</a></li>
+                        </ul>
+                    </li>
+                    <li class="nav__menu--list-item">
+                        <a href="#">kontakt</a>
+                    </li>
                 </ul>
             </li>
-            <li>
-                <a href="#">kontakt</a>
-            </li>
         </ul>
     </nav>
 
 </body>
+
 </html>
diff --git a/04/style.css b/04/style.css
@@ -0,0 +1,116 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font-family: "Montserrat", sans-serif;
+	font-weight: 400;
+	font-size: 16px;
+}
+
+.nav__menu {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	background-color: rgb(78, 143, 228);
+}
+
+.nav__menu-list {
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	margin: 0;
+	list-style: none;
+	flex-basis: 100%;
+}
+
+.nav__menu--list-item {
+	display: none;
+	justify-content: center;
+	align-items: center;
+	height: 50px;
+	min-width: 150px;
+	text-transform: uppercase;
+	flex-basis: 100%;
+}
+
+.bars-icon {
+	display: flex;
+	position: relative;
+}
+
+.nav__menu--list-item a {
+	text-decoration: none;
+	color: #fff;
+	transition: color 0.3s;
+}
+
+.nav__menu--list-item a:hover {
+	color: #d3bcbc;
+}
+
+.submenu {
+	position: relative;
+}
+
+.nav__menu-dropdown {
+	position: absolute;
+	top: 50px;
+	left: 0;
+	width: 100%;
+	display: none;
+}
+
+.submenu:hover .nav__menu-dropdown {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+.dropdown {
+	background-color: rgb(95, 174, 177);
+	font-size: 0.8rem;
+	text-align: center;
+}
+
+.nav__first-menu {
+	position: absolute;
+	top: 100%;
+	background-color: rgb(78, 143, 228);
+	width: 100%;
+}
+
+.bars-icon:hover .nav__menu--list-item {
+	display: flex;
+}
+
+.fa-chevron-down {
+	font-size: 0.8rem;
+	margin-left: 5px;
+}
+
+@media (min-width: 768px) {
+	.nav__menu-list {
+		display: flex;
+		flex-wrap: nowrap;
+		justify-content: center;
+	}
+
+	.nav__menu--list-item {
+		display: flex;
+		max-width: 150px;
+	}
+
+	.nav__first-menu {
+		display: flex;
+		justify-content: center;
+		top: 0;
+	}
+
+	.fa-bars {
+		display: none;
+	}
+}