devmentor-pl · jankowskaweronika · Dec 13, 2024 · Dec 13, 2024 · Dec 13, 2024 · Dec 13, 2024
diff --git a/01/index.html b/01/index.html
@@ -1,16 +1,36 @@
 <!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 - #01</title>
     <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
     <div class="content">
-        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae debitis dignissimos, voluptatem quas, quo aliquid veniam illo itaque doloribus, sequi exercitationem tempore obcaecati cum consectetur blanditiis natus at. Dicta nobis eum provident quasi atque cum eveniet, voluptas adipisci fugit esse.
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda, laboriosam suscipit ad eligendi rerum fuga esse dignissimos. Quam suscipit ratione vel dolore enim, soluta libero fugit sapiente cumque necessitatibus perferendis tenetur quia ab recusandae. Alias et laboriosam, doloremque at temporibus, expedita provident ipsam qui vitae blanditiis ratione illo.
+        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae debitis dignissimos, voluptatem quas, quo
+        aliquid veniam illo itaque doloribus, sequi exercitationem tempore obcaecati cum consectetur blanditiis natus
+        at. Dicta nobis eum provident quasi atque cum eveniet, voluptas adipisci fugit esse.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda, laboriosam suscipit ad
+        eligendi rerum fuga esse dignissimos. Quam suscipit ratione vel dolore enim, soluta libero fugit sapiente cumque
+        necessitatibus perferendis tenetur quia ab recusandae. Alias et laboriosam, doloremque at temporibus, expedita
+        provident ipsam qui vitae blanditiis ratione illo.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda, laboriosam suscipit ad
+        eligendi rerum fuga esse dignissimos. Quam suscipit ratione vel dolore enim, soluta libero fugit sapiente cumque
+        necessitatibus perferendis tenetur quia ab recusandae. Alias et laboriosam, doloremque at temporibus, expedita
+        provident ipsam qui vitae blanditiis ratione illo.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda, laboriosam suscipit ad
+        eligendi rerum fuga esse dignissimos. Quam suscipit ratione vel dolore enim, soluta libero fugit sapiente cumque
+        necessitatibus perferendis tenetur quia ab recusandae. Alias et laboriosam, doloremque at temporibus, expedita
+        provident ipsam qui vitae blanditiis ratione illo.
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda, laboriosam suscipit ad
+        eligendi rerum fuga esse dignissimos. Quam suscipit ratione vel dolore enim, soluta libero fugit sapiente cumque
+        necessitatibus perferendis tenetur quia ab recusandae. Alias et laboriosam, doloremque at temporibus, expedita
+        provident ipsam qui vitae blanditiis ratione illo.
     </div>
 </body>
+
 </html>
diff --git a/01/style.css b/01/style.css
@@ -1,23 +1,25 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
 }
 
 .content {
-    background-color: #fff;
-    min-height: 320px;
-    min-width: 320px;
-    max-width: 600px;
-    text-align: justify;
+	background-color: #fff;
+	min-height: 320px;
+	min-width: 320px;
+	max-width: 600px;
+	text-align: justify;
 }
 
 .content::before {
-    float: left;
-    display: block;
-    content: '';
-    height: 0;
-    border: 150px solid #dcdcdc;
-    border-right-color: transparent;
-    border-bottom-color: transparent;    
+	float: left;
+	display: block;
+	content: '';
+	height: 0;
+	border: 150px solid #dcdcdc;
+	border-right-color: transparent;
+	border-bottom-color: transparent;
+	shape-outside: polygon(0 0, 0% 100%, 100% 0);
+	margin: 0 20px 20px 0;
 }
diff --git a/02/styles/global.css b/02/styles/global.css
@@ -1,26 +1,51 @@
 * {
-    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;
+.a,
+.b,
+.c {
+	border: 3px solid transparent;
+	min-height: 50px;
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 50vh;
 }
 
 .a {
-    border-color: #ffffba
+	border-color: #ffffba;
 }
 
 .b {
-    border-color: #ffdfba;
+	border-color: #ffdfba;
 }
 
 .c {
-    border-color: #baffc9;
+	border-color: #baffc9;
+	order: 1;
+}
+body {
+	display: grid;
+}
+@media (min-width: 600px) {
+	body {
+		justify-content: center;
+		grid-template-columns: repeat(2, 1fr);
+		grid-template-rows: repeat(2, 1fr);
+		grid-template-columns: minmax(auto, 600px) minmax(auto, 600px);
+	}
+	.a {
+		grid-column: 1 /-1;
+	}
+	.b {
+		grid-column: 2/3;
+	}
+	.c {
+		grid-column: 1/2;
+		grid-row: 2/3;
+	}
 }
diff --git a/03/index.html b/03/index.html
@@ -1,16 +1,39 @@
 <!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/reset.css">
+    <link rel="stylesheet" href="./styles/global.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">T</main>
-    <header class="p">P</header>
-    <side class="v">V</side>
+
+    <main class="t">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis saepe corrupti. Porro eum
+        ipsum saepe mollitia explicabo, assumenda ullam, a nesciunt sed doloremque nostrum quia? Dolor, molestias.
+        Voluptas inventore consectetur explicabo, ex, voluptatum beatae facilis odit porro numquam modi sit rem animi
+        esse fuga aperiam, velit quis labore aut quisquam. Fuga necessitatibus consequuntur, dolor suscipit perspiciatis
+        inventore cum fugit iure ab voluptas magnam accusamus eius odit ipsa? Laudantium qui delectus excepturi quaerat
+        voluptate expedita quasi quisquam unde dolores minima nostrum officiis doloremque corporis doloribus provident
+        .</main>
+    <header class="p">
+        <picture>
+            <source media="(min-width:1200px)" srcset="img/jeremy-bishop-dR_q93lfaTw-unsplash1920.jpg">
+            <source media="(min-width:600px)" srcset="img/jeremy-bishop-dR_q93lfaTw-unsplash1200.jpg">
+            <source srcset="img/jeremy-bishop-dR_q93lfaTw-unsplash600.jpg">
+            <img src="./img/jeremy-bishop-dR_q93lfaTw-unsplash1920.jpg" alt="mountains">
+        </picture>
+    </header>
+    <side class="v"><iframe width="560" height="315" src="https://www.youtube.com/embed/EOAPMhaCtuw"
+            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,42 @@
 * {
-    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;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.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;
+
+	line-height: 0;
+	grid-area: p;
 }
 
 .t {
-    border-color: #ffdfba;
+	border-color: #ffdfba;
+	grid-area: t;
 }
 
 .v {
-    border-color: #baffc9;
+	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-columns: 1fr;
+	grid-template-areas:
+		'p'
+		't'
+		'v';
+}
diff --git a/03/styles/tablet.css b/03/styles/tablet.css
@@ -0,0 +1,7 @@
+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,26 @@
+.nav__hamburger {
+	display: none;
+}
+.nav__list {
+	display: flex;
+	justify-content: space-around;
+}
+.nav__item {
+	padding: 0.5rem 3rem;
+}
+.nav__item--children {
+	position: relative;
+}
+.nav__list--dropdown {
+	position: absolute;
+	display: block;
+	padding: 2rem 0;
+	display: none;
+	top: 100%;
+	left: 0;
+	min-width: 400px;
+}
+
+.nav__item:hover .nav__list--dropdown {
+	display: block;
+}
diff --git a/04/css/main.css b/04/css/main.css
@@ -0,0 +1,13 @@
+:root {
+	--main: rgb(246, 242, 250);
+	--link-color: rgb(66, 62, 62);
+	--link-active: #7384;
+}
+html {
+	font-family: 'Roboto', sans-serif;
+	font-size: 62.5%;
+}
+body {
+	font-size: 2rem;
+	text-transform: uppercase;
+}
diff --git a/04/css/mobile.css b/04/css/mobile.css
@@ -0,0 +1,53 @@
+.nav {
+	background-color: var(--main);
+	padding: 2rem 1rem 2rem 0;
+}
+
+.nav__hamburger {
+	display: block;
+	width: 3rem;
+	height: 2rem;
+	border-top: 0.3rem solid black;
+	border-bottom: 0.3rem solid black;
+	border-radius: 0.2rem;
+	float: right;
+}
+.nav__hamburger::after {
+	content: '';
+	display: block;
+	height: 0.3rem;
+	background-color: black;
+	position: relative;
+	top: 0.5rem;
+	border-radius: 0.2rem;
+}
+.nav__toggler {
+	display: none;
+}
+.nav__list {
+	display: none;
+}
+.nav__list--dropdown {
+	display: block;
+	padding-left: 2rem;
+	font-size: 1.6rem;
+}
+.nav__item {
+	padding: 0.5rem;
+}
+.nav__link {
+	color: var(--link-color);
+	padding: 0.5rem 1rem;
+	transition: all 0.2s ease-in-out;
+}
+
+.nav__link:hover {
+	background-color: var(--link-active);
+	border-radius: 2rem;
+}
+.nav__link:active {
+	color: var(--link-active);
+}
+.nav__toggler:checked ~ .nav__list {
+	display: block;
+}