diff --git a/01/style.css b/01/style.css index faa3160d..f3e715be 100644 --- a/01/style.css +++ b/01/style.css @@ -20,4 +20,6 @@ border: 150px solid #dcdcdc; border-right-color: transparent; border-bottom-color: transparent; + + shape-outside: polygon( 30% 0%, 100% 0%, 0% 100%, 0% 0%); } \ No newline at end of file diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..f13dcc5c 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -4,10 +4,10 @@ box-sizing: border-box; } + .a, .b, .c { border: 3px solid transparent; min-height: 50px; - display: flex; justify-content: center; align-items: center; @@ -23,4 +23,21 @@ .c { border-color: #baffc9; +} + + +@media(min-width: 600px) { + body { + display: grid; + max-width: 1200px; + margin: 0 auto; + grid-template-rows: 50% 1fr; + grid-template-columns: 50% 50%; + grid-template-areas: + "a a" + "c b"; +} + .a { grid-area: a; } + .b { grid-area: b; } + .c { grid-area: c; } } \ No newline at end of file diff --git a/03/images/fallback.jpg b/03/images/fallback.jpg new file mode 100644 index 00000000..1945c210 Binary files /dev/null and b/03/images/fallback.jpg differ diff --git a/03/images/img-1200x675.jpg b/03/images/img-1200x675.jpg new file mode 100644 index 00000000..b7dcfd8a Binary files /dev/null and b/03/images/img-1200x675.jpg differ diff --git a/03/images/img-2000x1125.jpg b/03/images/img-2000x1125.jpg new file mode 100644 index 00000000..feb20593 Binary files /dev/null and b/03/images/img-2000x1125.jpg differ diff --git a/03/images/img-600x338.jpg b/03/images/img-600x338.jpg new file mode 100644 index 00000000..f1159173 Binary files /dev/null and b/03/images/img-600x338.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..93480899 100644 --- a/03/index.html +++ b/03/index.html @@ -4,13 +4,37 @@ + + + + devmentor.pl - HTML & CSS: RWD - #03 -
T
-
P
- V +
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime quod nam consectetur error iure omnis velit asperiores eos voluptates ullam iste totam quaerat labore expedita quidem obcaecati, illum quasi dicta?
+
+ + + + + + + fallback + +
+ + + \ No newline at end of file diff --git a/03/styles/desktop.css b/03/styles/desktop.css new file mode 100644 index 00000000..7f6d1dbb --- /dev/null +++ b/03/styles/desktop.css @@ -0,0 +1,18 @@ +@media (min-width: 1200px) { + body { + display: grid; + min-height: 100vh; + max-width: 1400px; + margin: 0 auto; + grid-template-rows: 1fr 1fr; + grid-template-columns: 51% 1fr; + grid-template-areas: + "p v" + "t t"; + } + + + .p { grid-area: p; } + .t { grid-area: t; } + .v { grid-area: v; } +} \ No newline at end of file diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..ac8fc74d 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -23,4 +23,21 @@ .v { border-color: #baffc9; -} \ No newline at end of file + position: relative; + width: 100%; + padding-top: 56.25%; +} + +.v iframe { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; +} + +.p img { + max-width: 100%; + min-height: 100%; + height: 50vh; +} diff --git a/03/styles/mobile.css b/03/styles/mobile.css new file mode 100644 index 00000000..b01fa611 --- /dev/null +++ b/03/styles/mobile.css @@ -0,0 +1,22 @@ +@media (max-width: 599px) { + body { + display: grid; + min-height: 100vh; + grid-template-rows: auto auto auto; + grid-template-columns: 100%; + grid-template-areas: + "p" + "t" + "v"; + } + + + .p { grid-area: p; } + .t { grid-area: t; } + .v { grid-area: v; } + + .v{ + height: 30vh; + } + +} \ No newline at end of file diff --git a/03/styles/tablet.css b/03/styles/tablet.css new file mode 100644 index 00000000..5224bb87 --- /dev/null +++ b/03/styles/tablet.css @@ -0,0 +1,16 @@ +@media (min-width: 600px) { + body { + display: grid; + min-height: 100vh; + grid-template-rows: 1fr 1fr; + grid-template-columns: 51% 1fr; + grid-template-areas: + "p t" + "v t"; + } + + + .p { grid-area: p; } + .t { grid-area: t; } + .v { grid-area: v; } +} \ No newline at end of file diff --git a/04/index.html b/04/index.html index e3ca9540..449e137b 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,59 @@ + - - + + + + + devmentor.pl - HTML & CSS: RWD - #04 + - -