diff --git a/01/style.css b/01/style.css index faa3160d..3c5e24d8 100644 --- a/01/style.css +++ b/01/style.css @@ -1,23 +1,24 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } .content { - background-color: #fff; - min-height: 320px; - min-width: 320px; - max-width: 600px; - text-align: justify; + background-color: #fff; + min-height: 320px; + min-width: 320px; + max-width: 600px; + text-align: justify; } .content::before { - float: left; - display: block; - content: ''; - height: 0; - border: 150px solid #dcdcdc; - border-right-color: transparent; - border-bottom-color: transparent; -} \ No newline at end of file + float: left; + display: block; + content: ''; + height: 0; + border: 150px solid #dcdcdc; + border-right-color: transparent; + border-bottom-color: transparent; + shape-outside: polygon(0 0, 0% 100%, 100% 0); +} diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..b45140c3 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -1,26 +1,54 @@ * { - 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; + grid-template-areas: + 'A' + 'B' + 'C'; +} + +.a, +.b, +.c { + border: 3px solid transparent; + min-height: 50px; + + display: flex; + justify-content: center; + align-items: center; - display: flex; - justify-content: center; - align-items: center; + height: 50vh; } .a { - border-color: #ffffba + border-color: #ffffba; + grid-area: A; } .b { - border-color: #ffdfba; + border-color: #ffdfba; + grid-area: B; } .c { - border-color: #baffc9; -} \ No newline at end of file + border-color: #baffc9; + grid-area: C; +} + +@media (min-width: 600px) { + body { + margin: 0 auto; + display: grid; + grid-template-areas: + 'A A' + 'C B'; + grid-template-columns: 1fr 1fr; + max-width: 1200px; + justify-content: center; + } +} diff --git a/03/images/image-1200.jpg b/03/images/image-1200.jpg new file mode 100644 index 00000000..d50c6028 Binary files /dev/null and b/03/images/image-1200.jpg differ diff --git a/03/images/image-1400.jpg b/03/images/image-1400.jpg new file mode 100644 index 00000000..adc8aaf6 Binary files /dev/null and b/03/images/image-1400.jpg differ diff --git a/03/images/image-600.jpg b/03/images/image-600.jpg new file mode 100644 index 00000000..642e8194 Binary files /dev/null and b/03/images/image-600.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..97c9c95e 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,57 @@ + + + + devmentor.pl - HTML & CSS: RWD - #03 + - -
T
-
P
- V + +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita velit soluta eaque tempore quaerat error + ratione inventore reprehenderit, dolorum, doloremque impedit nisi nostrum magnam, quae voluptas. + Perferendis, ullam! Omnis odit cum animi temporibus ex laborum accusamus maxime corporis nam, error quisquam + ab officiis, facilis voluptatibus tempora atque laboriosam libero sit veritatis perferendis, soluta + reiciendis magni. Repellat nostrum asperiores, nesciunt placeat maxime ab deleniti vel libero, perferendis + ipsa, voluptatibus voluptas eius expedita odit obcaecati quas omnis corrupti repudiandae. Eaque harum, + voluptatem veritatis tempora fugiat facilis rem nemo quisquam maxime velit numquam aliquid sapiente dolorem, + laborum id dicta debitis quibusdam veniam, hic minus quia accusamus corrupti quas! Tenetur assumenda dolores + doloribus eum, quos officia magnam atque repellendus minus maiores deleniti sapiente libero illum nihil + recusandae asperiores commodi. Velit a quibusdam nobis corrupti nulla culpa dolor dicta accusamus corporis + sequi, nam ratione molestiae aspernatur animi expedita similique doloremque aut atque amet ipsam omnis rem. + Harum numquam veniam laudantium temporibus modi ad officiis quas minima deleniti necessitatibus earum + assumenda, sapiente suscipit, ipsum unde doloribus! Sunt, soluta. Necessitatibus eveniet magni accusamus + modi totam, fuga dolorem, et sed sequi alias ex beatae dignissimos quod corrupti hic consequuntur nisi + facilis temporibus fugiat! Facere id quisquam hic. Sapiente distinctio in hic, impedit libero exercitationem + voluptates porro itaque corporis officiis animi aspernatur, repellendus repudiandae autem. Maxime, alias + illo facere, iusto illum aspernatur quas corrupti quibusdam ab sed odio qui aut autem! Iusto dignissimos + suscipit eaque. Est odio quisquam ipsum possimus quibusdam atque aspernatur vero reiciendis accusamus omnis? + Voluptas, ea aperiam enim provident fugit harum? In sunt vero provident ducimus repellendus eveniet placeat + nisi iure aut harum! Iure eum delectus culpa dolores illum animi quo accusantium porro libero itaque + perferendis pariatur, debitis ipsum facere quod commodi tenetur doloribus, praesentium dolorem doloremque + earum aspernatur natus veniam sunt? Fugit illum vel sapiente.

+
+
+ + + + + + +
+ + + + \ No newline at end of file diff --git a/03/styles/desktop.css b/03/styles/desktop.css new file mode 100644 index 00000000..9be74e75 --- /dev/null +++ b/03/styles/desktop.css @@ -0,0 +1,8 @@ +body { + display: grid; + grid-template-areas: + 'p v' + 't t'; + max-width: 1400px; + margin: 0 auto; +} diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..06d96be4 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -1,26 +1,46 @@ * { - 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; +.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; +} + +.p img { + width: 100%; } .t { - border-color: #ffdfba; + border-color: #ffdfba; + grid-area: t; } .v { - border-color: #baffc9; -} \ No newline at end of file + border-color: #baffc9; + grid-area: v; + height: 0; + padding-bottom: calc(315 / 560 * 100%); + position: relative; +} + +.v iframe { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} diff --git a/03/styles/tablet.css b/03/styles/tablet.css new file mode 100644 index 00000000..d0e3a068 --- /dev/null +++ b/03/styles/tablet.css @@ -0,0 +1,7 @@ +body { + display: grid; + grid-template-areas: + 'p t' + 'v t'; + grid-template-columns: minmax(200px, 50%) auto; +} diff --git a/04/index.html b/04/index.html index e3ca9540..f67ef356 100644 --- a/04/index.html +++ b/04/index.html @@ -1,21 +1,26 @@ + + devmentor.pl - HTML & CSS: RWD - #04 + - -