diff --git a/01/style.css b/01/style.css index faa3160d..dec974bd 100644 --- 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); } \ No newline at end of file diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..0c4c8d46 100644 --- 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; + } } \ No newline at end of file diff --git a/03/img/autumn_1280.jpg b/03/img/autumn_1280.jpg new file mode 100644 index 00000000..11ec4ae2 Binary files /dev/null and b/03/img/autumn_1280.jpg differ diff --git a/03/img/autumn_1920.jpg b/03/img/autumn_1920.jpg new file mode 100644 index 00000000..6561b4e4 Binary files /dev/null and b/03/img/autumn_1920.jpg differ diff --git a/03/img/autumn_640.jpg b/03/img/autumn_640.jpg new file mode 100644 index 00000000..13b03d29 Binary files /dev/null and b/03/img/autumn_640.jpg differ diff --git a/03/img/autumn_800.jpg b/03/img/autumn_800.jpg new file mode 100644 index 00000000..572976ec Binary files /dev/null and b/03/img/autumn_800.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..5cb8a5e5 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,44 @@ + devmentor.pl - HTML & CSS: RWD - #03 + + + - -
T
-
P
- V +
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.
+ + +
+ + + + + + Rails + +
+ + + + + + \ No newline at end of file diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..b6e48f6f 100644 --- 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; -} \ No newline at end of file + 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 index e3ca9540..5e1510ba 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,46 @@ + devmentor.pl - HTML & CSS: RWD - #04 + + + + + + + + + - -