diff --git a/01/style.css b/01/style.css index faa3160d..513a6972 100644 --- a/01/style.css +++ b/01/style.css @@ -19,5 +19,8 @@ height: 0; border: 150px solid #dcdcdc; border-right-color: transparent; - border-bottom-color: transparent; + border-bottom-color: transparent; + + shape-outside: polygon(100% 0, 0 0, 0 100%); + margin-right: 10px; } \ No newline at end of file diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..dc94bc9c 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -2,11 +2,17 @@ margin: 0; padding: 0; box-sizing: border-box; + background-color: rgb(51, 50, 50); +} + +body { + display: grid; + grid-template-columns: 1fr; } .a, .b, .c { border: 3px solid transparent; - min-height: 50px; + min-height: 50vh; display: flex; justify-content: center; @@ -14,7 +20,7 @@ } .a { - border-color: #ffffba + border-color: #ffffba ; } .b { @@ -23,4 +29,28 @@ .c { border-color: #baffc9; + order: 1; +} + +@media (min-width: 600px) { + + body { + margin: auto; + grid-template-columns: 1fr 1fr ; + max-width: 1200px; + } + + .a { + grid-column-start: 1; + grid-column-end: 3; + } + + .b { + order: 3; + } + + + + + } \ No newline at end of file diff --git a/03/assets/ship-8170663_1280-desktop.jpg b/03/assets/ship-8170663_1280-desktop.jpg new file mode 100644 index 00000000..553d9e07 Binary files /dev/null and b/03/assets/ship-8170663_1280-desktop.jpg differ diff --git a/03/assets/ship-8170663_1280-mobile.jpg b/03/assets/ship-8170663_1280-mobile.jpg new file mode 100644 index 00000000..4ad936e0 Binary files /dev/null and b/03/assets/ship-8170663_1280-mobile.jpg differ diff --git a/03/assets/ship-8170663_1280-tablet.jpg b/03/assets/ship-8170663_1280-tablet.jpg new file mode 100644 index 00000000..e2567a1f Binary files /dev/null and b/03/assets/ship-8170663_1280-tablet.jpg differ diff --git a/03/assets/ship-8170663_1280.jpg b/03/assets/ship-8170663_1280.jpg new file mode 100644 index 00000000..553d9e07 Binary files /dev/null and b/03/assets/ship-8170663_1280.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..c23089d6 100644 --- a/03/index.html +++ b/03/index.html @@ -5,12 +5,37 @@ devmentor.pl - HTML & CSS: RWD - #03 + + + + -
T
-
P
- V +
+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis quaerat accusantium porro error dicta consequuntur iure facere exercitationem, nisi earum consequatur, fugit velit autem molestiae ex rerum! Unde soluta aperiam repellat, in repellendus voluptates cum corporis quia sint alias illo, at accusamus nisi tempore, libero maxime. Vero, veritatis impedit laudantium natus magni temporibus debitis perspiciatis culpa ratione! Quae voluptatibus hic ut natus quidem molestias consequatur quibusdam autem quaerat eaque. Eaque ullam magni iure reprehenderit explicabo, omnis impedit corporis tempore consequuntur reiciendis illum dolore sunt possimus blanditiis id deleniti. Nobis eaque, in tempore, maxime commodi, repudiandae minus exercitationem voluptates labore nihil molestias porro blanditiis culpa quod cum. Aperiam dolorem consequuntur quaerat iure earum accusamus recusandae doloribus modi rerum laudantium eligendi corporis repellendus in quam enim facere, optio incidunt fuga obcaecati deleniti dolore vel officiis ratione neque. Tempora magni temporibus ullam officiis saepe minus voluptate facere. Adipisci id omnis ut provident eum.

+
+ +
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/03/styles/desktop.css b/03/styles/desktop.css new file mode 100644 index 00000000..b83c0362 --- /dev/null +++ b/03/styles/desktop.css @@ -0,0 +1,9 @@ +body { + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; +} + +.t { + grid-row: 2 / 3; + grid-column: 1 / 3; +} \ No newline at end of file diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..f9ec9604 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -4,6 +4,13 @@ box-sizing: border-box; } +body { + display: grid; + max-width: 1400px; + margin: auto; +} + + .p, .t, .v { border: 3px solid transparent; min-height: 50px; @@ -14,7 +21,7 @@ } .p { - border-color: #ffffba + border-color: #e2321a } .t { diff --git a/03/styles/mobile.css b/03/styles/mobile.css new file mode 100644 index 00000000..069751b7 --- /dev/null +++ b/03/styles/mobile.css @@ -0,0 +1,34 @@ + +body { + grid-template-columns: 1fr; +} + +.p, .t, .v { + max-width: 100vw; +} + +.p { + order: -1; + +} + +img { + max-width: 100%; + max-height: 100%; +} + +.v { + height: 0; + padding-bottom: calc(315 / 560 *100%) ; + position: relative; + width: 100%; + height: 100%; +} + +iframe { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; +} \ No newline at end of file diff --git a/03/styles/tablet.css b/03/styles/tablet.css new file mode 100644 index 00000000..d816187e --- /dev/null +++ b/03/styles/tablet.css @@ -0,0 +1,15 @@ +body { + grid-template-columns: 51vw 1fr; + grid-template-rows: 50vh 50vh; +} + +.t { + grid-row: 1 / 3; + grid-column: 2 / 3; +} + +.p , .v { + min-width: 200px; + max-width: 50vw ; +} + diff --git a/04/index.html b/04/index.html index e3ca9540..46b16c74 100644 --- a/04/index.html +++ b/04/index.html @@ -5,24 +5,46 @@ devmentor.pl - HTML & CSS: RWD - #04 + + -