diff --git a/01/index.html b/01/index.html index 84dbc861..345432a3 100644 --- a/01/index.html +++ b/01/index.html @@ -4,6 +4,9 @@ + devmentor.pl - HTML & CSS: RWD - #01 diff --git a/01/style.css b/01/style.css index faa3160d..052e4eb5 100644 --- a/01/style.css +++ b/01/style.css @@ -10,6 +10,7 @@ min-width: 320px; max-width: 600px; text-align: justify; + } .content::before { @@ -20,4 +21,5 @@ border: 150px solid #dcdcdc; border-right-color: transparent; border-bottom-color: transparent; + shape-outside: polygon(100% 0, 0% 100%, 50% 49%); } \ No newline at end of file diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..5359897d 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -1,26 +1,55 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } -.a, .b, .c { - border: 3px solid transparent; - min-height: 50px; +body { + display: grid; +} - display: flex; - justify-content: center; - align-items: center; +.a, +.b, +.c { + border: 3px solid transparent; + min-height: 50px; + height: 50vh; + display: flex; + justify-content: center; + align-items: center; } .a { - border-color: #ffffba + border-color: #ffffba; } .b { - border-color: #ffdfba; + border-color: #ffdfba; } .c { - border-color: #baffc9; -} \ No newline at end of file + border-color: #baffc9; + order: 1; +} + +@media screen and (min-width: 600px) { + body { + grid-template-areas: + "a-area a-area" + "c-area b-area"; + grid-template-columns: minmax(auto, 600px) minmax(auto, 600px); + justify-content: center; + } + + .a { + grid-area: a-area; + } + + .b { + grid-area: b-area; + } + + .c { + grid-area: c-area; + } +} diff --git a/03/index.html b/03/index.html index 4a2e35c2..dc53e652 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,71 @@ - + + - - + + devmentor.pl - HTML & CSS: RWD - #03 - - - -
T
-
P
- V + + + + + + + + +
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur corrupti itaque at placeat + voluptatum doloribus neque, sunt quibusdam laborum officia in voluptates, odio ipsa tenetur eveniet sint + rerum + distinctio ex. + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est aspernatur esse necessitatibus non iusto + minima dolorum sit omnis expedita rerum cumque quam consequatur, aperiam nisi recusandae neque labore, + cupiditate ipsam!
+
+ + + + headerimage + +
+ + + - \ No newline at end of file diff --git a/03/styles/desktop.css b/03/styles/desktop.css new file mode 100644 index 00000000..8587be75 --- /dev/null +++ b/03/styles/desktop.css @@ -0,0 +1,8 @@ +body{ + display: grid; + grid-template-areas: + "area-p area-v" + "area-t area-t"; + max-width: 1400px; + margin: 0 auto; +} \ No newline at end of file diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..4f14d026 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -7,20 +7,39 @@ .p, .t, .v { border: 3px solid transparent; min-height: 50px; - + display: flex; justify-content: center; align-items: center; } .p { - border-color: #ffffba + border-color: #ffffba; + grid-area: area-p; + line-height: 0; } .t { border-color: #ffdfba; + grid-area: area-t; } .v { border-color: #baffc9; -} \ No newline at end of file + grid-area: area-v; + position: relative; + height: 0; + padding-bottom: calc(100% * 315/560); +} + +.img{ + width: 100%; +} + +.video{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} diff --git a/03/styles/mobile.css b/03/styles/mobile.css new file mode 100644 index 00000000..3d90da80 --- /dev/null +++ b/03/styles/mobile.css @@ -0,0 +1,7 @@ +body{ + display: grid; + grid-template-areas: + "area-p" + "area-t" + "area-v"; +} \ No newline at end of file diff --git a/03/styles/tablet.css b/03/styles/tablet.css new file mode 100644 index 00000000..87f08bb1 --- /dev/null +++ b/03/styles/tablet.css @@ -0,0 +1,9 @@ +body{ + display: grid; + grid-template-areas: + "area-p area-t" + "area-v area-t"; +grid-template-columns: minmax(200px, 50vw) auto; + +} + diff --git a/04/index.html b/04/index.html index e3ca9540..62d69a70 100644 --- a/04/index.html +++ b/04/index.html @@ -5,23 +5,29 @@ devmentor.pl - HTML & CSS: RWD - #04 + + + + -