diff --git a/01/style.css b/01/style.css index faa3160d..8280041d 100644 --- a/01/style.css +++ b/01/style.css @@ -10,6 +10,7 @@ min-width: 320px; max-width: 600px; text-align: justify; + } .content::before { @@ -19,5 +20,7 @@ height: 0; border: 150px solid #dcdcdc; border-right-color: transparent; - border-bottom-color: transparent; + border-bottom-color: transparent; + shape-outside: polygon(0 0, 0% 100%, 100% 0); + margin-right: 1rem; } \ No newline at end of file diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..e6db5116 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -7,7 +7,7 @@ .a, .b, .c { border: 3px solid transparent; min-height: 50px; - + width: 100%; display: flex; justify-content: center; align-items: center; @@ -19,8 +19,39 @@ .b { border-color: #ffdfba; + grid-row-start: 2; } .c { border-color: #baffc9; +} + +body { + display: grid; + grid-template-rows: repeat(3, 50vh); +} + + +@media (min-width: 600px) { + body { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 50vh 50vh; + max-width: 1200px; + margin: 0 auto; + } + + .a { + grid-column: 1 / 3; + grid-row: 1; + } + + .b { + grid-column: 1; + grid-row: 2; + } + + .c { + grid-column: 2; + grid-row: 2; + } } \ No newline at end of file diff --git a/03/assets/cat-desktop.jpg b/03/assets/cat-desktop.jpg new file mode 100644 index 00000000..34d7b83e Binary files /dev/null and b/03/assets/cat-desktop.jpg differ diff --git a/03/assets/cat-mobile.jpg b/03/assets/cat-mobile.jpg new file mode 100644 index 00000000..a7e8ee96 Binary files /dev/null and b/03/assets/cat-mobile.jpg differ diff --git a/03/assets/cat-tablet.jpg b/03/assets/cat-tablet.jpg new file mode 100644 index 00000000..b8e2adbb Binary files /dev/null and b/03/assets/cat-tablet.jpg differ diff --git a/03/assets/cat.jpg b/03/assets/cat.jpg new file mode 100644 index 00000000..087b827c Binary files /dev/null and b/03/assets/cat.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..091844aa 100644 --- a/03/index.html +++ b/03/index.html @@ -4,13 +4,50 @@ + devmentor.pl - HTML & CSS: RWD - #03 +
+ + + + + cat picture + +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore + eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
-
T
-
P
- V + \ No newline at end of file diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..30f42e03 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -7,20 +7,130 @@ .p, .t, .v { border: 3px solid transparent; min-height: 50px; - + width: 100%; display: flex; justify-content: center; align-items: center; } .p { - border-color: #ffffba + border-color: #ffffba; + grid-row-start: 1; } .t { border-color: #ffdfba; + grid-row-start: 2; } .v { border-color: #baffc9; +} + +body { + display: grid; + grid-template-rows: auto auto auto; +} + +.p picture, +.p img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.v iframe { + aspect-ratio: 16 / 9; + width: 100%; + height: 100%; + border: none; +} + + +@media (max-width: 599px) { + body { + display: grid; + grid-template-rows: auto auto auto; + margin: 0 auto; + } + + .p { + grid-row: 1; + } + + .t { + grid-row: 2; + } + + .v { + grid-row: 3; + } + p { + text-align: center; + padding: 2rem; + margin: 1rem; +} +} + + +@media (min-width: 600px) and (max-width: 1199px) { + body { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 50vh 50vh; + margin: 0 auto; + } + + .p { + grid-column: 1; + grid-row: 1; + } + + .v { + grid-column: 1; + grid-row: 2; + } + + .t { + grid-column: 2; + grid-row: 1 / 3; + } + + p { + text-align: center; + padding: 2rem; + margin: 1rem; + } +} + +@media (min-width: 1200px) { + body { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 50vh 50vh; + margin: 0 auto; + max-width: 1400px; + } + + .p{ + grid-column: 1; + grid-row: 1; + } + + .v { + grid-column: 2; + grid-row: 1; + } + + .t { + grid-column: 1 / 3; + grid-row: 2; + } + + p { + text-align: center; + padding: 2rem; + margin: 1rem; + } + } \ No newline at end of file diff --git a/04/.vscode/settings.json b/04/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/04/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/04/index.html b/04/index.html index e3ca9540..13c13b33 100644 --- a/04/index.html +++ b/04/index.html @@ -4,27 +4,30 @@ + + + devmentor.pl - HTML & CSS: RWD - #04 - -