diff --git a/01/style.css b/01/style.css index faa3160d..4ba5e257 100644 --- a/01/style.css +++ b/01/style.css @@ -19,5 +19,6 @@ height: 0; border: 150px solid #dcdcdc; border-right-color: transparent; - border-bottom-color: transparent; + border-bottom-color: transparent; + shape-outside: polygon(0 0, 300px 0, 0 300px); } \ No newline at end of file diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..99023f50 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -4,13 +4,18 @@ box-sizing: border-box; } +body { + display: grid; +} + .a, .b, .c { border: 3px solid transparent; min-height: 50px; - + height: 50vh; display: flex; justify-content: center; align-items: center; + width: 100%; } .a { @@ -19,8 +24,36 @@ .b { border-color: #ffdfba; + grid-row: 2 / 3; } .c { border-color: #baffc9; +} + +@media (min-width: 601px) { + + body { + grid-template-areas: + "a a" + "c b"; + justify-items: center; + } + + .a { + grid-area: a; + } + + .b { + grid-area: b; + } + + .c { + grid-area: c; + } + + .a, .b, .c { + max-width: 1200px; + + } } \ No newline at end of file diff --git a/03/assets/pumpkins-8338100_1920--smaller.jpg b/03/assets/pumpkins-8338100_1920--smaller.jpg new file mode 100644 index 00000000..fb72704f Binary files /dev/null and b/03/assets/pumpkins-8338100_1920--smaller.jpg differ diff --git a/03/assets/pumpkins-8338100_1920.jpg b/03/assets/pumpkins-8338100_1920.jpg new file mode 100644 index 00000000..ec2b53ce Binary files /dev/null and b/03/assets/pumpkins-8338100_1920.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..6fcfc027 100644 --- a/03/index.html +++ b/03/index.html @@ -5,12 +5,22 @@ devmentor.pl - HTML & CSS: RWD - #03 + -
T
-
P
- V +
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, sit ipsum nostrum aliquam aliquid suscipit fugiat quasi similique cumque, magni velit porro. Assumenda deleniti delectus quo ipsam, et, exercitationem temporibus quidem dolore dolorem pariatur laborum perspiciatis soluta. Error, nihil eligendi! Quae illo quam ducimus laudantium adipisci reiciendis, dolores fugit eum, optio itaque accusamus omnis repellendus ex natus alias qui, nesciunt temporibus? Ab sed perspiciatis cupiditate nostrum nesciunt adipisci omnis beatae ad voluptates, placeat id optio ratione magni, dolore unde modi laborum non corporis laudantium, quam nulla amet eum similique delectus. Quibusdam, corrupti ipsa. Veritatis perferendis magni reiciendis excepturi, vitae dolorum?
+
+ + + pumpkins photo + +
+ + + \ No newline at end of file diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..96162e1d 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -4,6 +4,10 @@ box-sizing: border-box; } +body { + display: grid; +} + .p, .t, .v { border: 3px solid transparent; min-height: 50px; @@ -14,7 +18,7 @@ } .p { - border-color: #ffffba + border-color: #ffffba; } .t { @@ -23,4 +27,110 @@ .v { border-color: #baffc9; + height: 0; + padding-bottom: 56.25%; + position: relative; + width: 100%; +} + +img { + max-width: 100%; + height: auto; +} + +iframe { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; +} + +@media (max-width: 599px) { + + body { + grid-template-areas: + "p" + "t" + "v"; + } + + .p { + grid-area: p; + } + + .t { + grid-area: t; + } + + .v { + grid-area: v; + } +} + + +@media (min-width: 600px) and (max-width: 1199px) { + + body { + grid-template-areas: + "p t" + "v t"; + } + + .p { + grid-area: p; + } + + .t { + grid-area: t; + } + + .v { + grid-area: v; + } + + .p, .t, .v { + min-width: 200px; + max-width: 50vw; + } + + +} + +@media (min-width: 1200px) { + + body { + grid-template-areas: + "p v" + "t t"; + justify-items: center; + max-width: 1400px; + margin: 0 auto; + } + + .p { + grid-area: p; + height: 0; + padding-bottom: 56.25%; + position: relative; + width: 100%; + } + + .t { + grid-area: t; + } + + .v { + grid-area: v; + } + picture { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; + overflow: hidden; + } + + } \ No newline at end of file diff --git a/04/desktop.css b/04/desktop.css new file mode 100644 index 00000000..407657e0 --- /dev/null +++ b/04/desktop.css @@ -0,0 +1,69 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.navbar { + width: 100%; + background-color: grey; + font-family: 'Courier New', Courier, monospace; + font-weight: 500; + color: white; +} + +.navbar__container { + display: flex; + align-items: center; + justify-content: space-between; + height: 70px; + max-width: 1200px; + margin: 0 auto; + padding: 0 25px; +} + +.menu-toggle { + display: none; +} + + +.navbar__list { + font-size: 16px; + line-height: 20px; + list-style: none; + display: flex; +} + +.link { + text-decoration: none; + color: #333; + color: white; + padding: 27px 25px; +} + +.link:hover { + color: skyblue; +} + +.navbar__dropdown { + display: none; + position: absolute; + top: 70px; + list-style: none; + background-color: darkgray; +} + +.navbar__element--dropdown:hover > .navbar__dropdown { + display: block; +} + +.navbar__link--last { + padding-right: 0; +} + +.dropdown__link { + text-decoration: none; + display: block; + padding: 10px 10px; + color: white; +} \ No newline at end of file diff --git a/04/index.html b/04/index.html index e3ca9540..9d07124a 100644 --- a/04/index.html +++ b/04/index.html @@ -4,26 +4,50 @@ + + + devmentor.pl - HTML & CSS: RWD - #04 -