diff --git a/01/style.css b/01/style.css index faa3160d..253afccb 100644 --- a/01/style.css +++ b/01/style.css @@ -20,4 +20,5 @@ border: 150px solid #dcdcdc; border-right-color: transparent; border-bottom-color: transparent; + shape-outside: polygon(0 0, 0% 100%, 100% 0%); } \ No newline at end of file diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..a7fdcb2b 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -4,17 +4,30 @@ box-sizing: border-box; } + +html, body { + height: 100%; +} + +body { + display: grid; + grid-template-columns: 100%; + grid-template-rows: 50% 50% 50%; + margin: 0; +} + + .a, .b, .c { border: 3px solid transparent; min-height: 50px; - + width: 100%; display: flex; justify-content: center; align-items: center; } .a { - border-color: #ffffba + border-color: #ffffba; } .b { @@ -23,4 +36,46 @@ .c { border-color: #baffc9; +} + + +.a { + grid-row: 1; +} + +.b { + grid-row: 2; +} + +.c { + grid-row: 3; +} + + +@media (min-width: 600px) { + body { + grid-template-columns: 50% 50%; + grid-template-rows: auto auto; + max-width: 1200px; + margin: 0 auto; + } + + .a { + grid-column: span 2; + } + + .b, .c { + height: 100%; + } + + + .c { + grid-column: 1; + grid-row: 2; + } + + .b { + grid-column: 2; + grid-row: 2; + } } \ No newline at end of file diff --git a/03/img/borowiki.jpg b/03/img/borowiki.jpg new file mode 100644 index 00000000..c86b347d Binary files /dev/null and b/03/img/borowiki.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..fe77262e 100644 --- a/03/index.html +++ b/03/index.html @@ -5,12 +5,23 @@ devmentor.pl - HTML & CSS: RWD - #03 + +
+ + + + picture + +
-
T
-
P
- V - +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias voluptas rerum obcaecati, sed labore illum consectetur eum corrupti eius neque aut odio sunt, a ab illo molestiae asperiores sapiente harum!

+
+ + + + \ No newline at end of file diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..8de3dbca 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -4,17 +4,30 @@ box-sizing: border-box; } +html, body { + height: 100%; + font-family: Arial, sans-serif; +} + +body { + display: grid; + grid-template-columns: 100%; + grid-template-rows: auto auto auto; + max-width: 100%; + height: auto; +} + .p, .t, .v { border: 3px solid transparent; min-height: 50px; - + padding: 10px; display: flex; justify-content: center; align-items: center; } .p { - border-color: #ffffba + border-color: #ffffba; } .t { @@ -23,4 +36,77 @@ .v { border-color: #baffc9; +} + +iframe { + width: 100%; + height: auto; +} + +img { + max-width: 100%; +} + + +@media (min-width: 600px) and (max-width: 1199px) { + body { + grid-template-columns: 50% 50%; + grid-template-rows: auto auto; + grid-template-areas: + "p t" + "v t"; + max-width: 100%; + height: auto; + } + + .p { + grid-area: p; + min-width: 200px; + + } + + .t { + grid-area: t; + + } + + .v { + grid-area: v; + min-width: 200px; + + } +} + + +@media (min-width: 1200px) { + body { + grid-template-columns: 50% 50%; + grid-template-rows: auto auto; + grid-template-areas: + "p v" + "t t"; + max-width: 1400px; + align-items: center; /* Wyśrodkowanie pionowe */ + margin: 0 auto; + } + .v { + position: relative; /* Stosujemy pozycjonowanie względne */ + padding-bottom: 56.25%; /* 16:9 proporcje, 9 / 16 = 0.5625 */ + height: 0; /* Ustawiamy wysokość na zero, żeby działał padding */ + overflow: hidden; /* Ukrywamy wszelkie nadmiarowe elementy */ + } + + .v iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; /* iframe wypełnia cały kontener i zachowuje proporcje */ + } + + .t { + grid-area: t; + grid-column: span 2; + max-width: 100%; + } } \ No newline at end of file diff --git a/04/index.html b/04/index.html index e3ca9540..73db5892 100644 --- a/04/index.html +++ b/04/index.html @@ -4,27 +4,24 @@ - devmentor.pl - HTML & CSS: RWD - #04 + Responsive Menu + + + -