diff --git a/01/index.html b/01/index.html index 84dbc861..7b26ade3 100644 --- a/01/index.html +++ b/01/index.html @@ -1,5 +1,6 @@ + @@ -7,10 +8,29 @@ devmentor.pl - HTML & CSS: RWD - #01 +
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae debitis dignissimos, voluptatem quas, quo aliquid veniam illo itaque doloribus, sequi exercitationem tempore obcaecati cum consectetur blanditiis natus at. Dicta nobis eum provident quasi atque cum eveniet, voluptas adipisci fugit esse. - Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda, laboriosam suscipit ad eligendi rerum fuga esse dignissimos. Quam suscipit ratione vel dolore enim, soluta libero fugit sapiente cumque necessitatibus perferendis tenetur quia ab recusandae. Alias et laboriosam, doloremque at temporibus, expedita provident ipsam qui vitae blanditiis ratione illo. + Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae debitis dignissimos, voluptatem quas, quo + aliquid veniam illo itaque doloribus, sequi exercitationem tempore obcaecati cum consectetur blanditiis natus + at. Dicta nobis eum provident quasi atque cum eveniet, voluptas adipisci fugit esse. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda, laboriosam suscipit ad + eligendi rerum fuga esse dignissimos. Quam suscipit ratione vel dolore enim, soluta libero fugit sapiente cumque + necessitatibus perferendis tenetur quia ab recusandae. Alias et laboriosam, doloremque at temporibus, expedita + provident ipsam qui vitae blanditiis ratione illo. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda, laboriosam suscipit ad + eligendi rerum fuga esse dignissimos. Quam suscipit ratione vel dolore enim, soluta libero fugit sapiente cumque + necessitatibus perferendis tenetur quia ab recusandae. Alias et laboriosam, doloremque at temporibus, expedita + provident ipsam qui vitae blanditiis ratione illo. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda, laboriosam suscipit ad + eligendi rerum fuga esse dignissimos. Quam suscipit ratione vel dolore enim, soluta libero fugit sapiente cumque + necessitatibus perferendis tenetur quia ab recusandae. Alias et laboriosam, doloremque at temporibus, expedita + provident ipsam qui vitae blanditiis ratione illo. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolorem assumenda, laboriosam suscipit ad + eligendi rerum fuga esse dignissimos. Quam suscipit ratione vel dolore enim, soluta libero fugit sapiente cumque + necessitatibus perferendis tenetur quia ab recusandae. Alias et laboriosam, doloremque at temporibus, expedita + provident ipsam qui vitae blanditiis ratione illo.
+ \ No newline at end of file diff --git a/01/style.css b/01/style.css index faa3160d..50687320 100644 --- a/01/style.css +++ b/01/style.css @@ -1,23 +1,25 @@ * { - 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; + 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); + margin: 0 20px 20px 0; } \ No newline at end of file diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..f996ba52 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -1,26 +1,51 @@ * { - 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; +.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; } .b { - border-color: #ffdfba; + border-color: #ffdfba; } .c { - border-color: #baffc9; + border-color: #baffc9; + order: 1; +} +body { + display: grid; +} +@media (min-width: 600px) { + body { + justify-content: center; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-template-columns: minmax(auto, 600px) minmax(auto, 600px); + } + .a { + grid-column: 1 /-1; + } + .b { + grid-column: 2/3; + } + .c { + grid-column: 1/2; + grid-row: 2/3; + } } \ No newline at end of file diff --git a/03/index.html b/03/index.html index 4a2e35c2..e6f3ed10 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,39 @@ + devmentor.pl - HTML & CSS: RWD - #03 + + + + + - -
T
-
P
- V + +
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis saepe corrupti. Porro eum + ipsum saepe mollitia explicabo, assumenda ullam, a nesciunt sed doloremque nostrum quia? Dolor, molestias. + Voluptas inventore consectetur explicabo, ex, voluptatum beatae facilis odit porro numquam modi sit rem animi + esse fuga aperiam, velit quis labore aut quisquam. Fuga necessitatibus consequuntur, dolor suscipit perspiciatis + inventore cum fugit iure ab voluptas magnam accusamus eius odit ipsa? Laudantium qui delectus excepturi quaerat + voluptate expedita quasi quisquam unde dolores minima nostrum officiis doloremque corporis doloribus provident + .
+
+ + + + + mountains + +
+ + \ No newline at end of file diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..c570afc3 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -1,26 +1,42 @@ * { - 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; - - display: flex; - justify-content: center; - align-items: center; +.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; + + line-height: 0; + grid-area: p; } .t { - border-color: #ffdfba; + border-color: #ffdfba; + grid-area: t; } .v { - border-color: #baffc9; + border-color: #baffc9; + position: relative; + height: 0; + padding-bottom: calc(100% * 315 / 560); + grid-area: v; +} +.v iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } \ No newline at end of file diff --git a/03/styles/mobile.css b/03/styles/mobile.css new file mode 100644 index 00000000..38c825bd --- /dev/null +++ b/03/styles/mobile.css @@ -0,0 +1,8 @@ +body { + display: grid; + grid-template-columns: 1fr; + grid-template-areas: + 'p' + 't' + '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..db7b669a --- /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, 50vw) auto; +} \ No newline at end of file diff --git a/04/css/desktop.css b/04/css/desktop.css new file mode 100644 index 00000000..bc9c5bd3 --- /dev/null +++ b/04/css/desktop.css @@ -0,0 +1,26 @@ +.nav__hamburger { + display: none; +} +.nav__list { + display: flex; + justify-content: space-around; +} +.nav__item { + padding: 0.5rem 3rem; +} +.nav__item--children { + position: relative; +} +.nav__list--dropdown { + position: absolute; + display: block; + padding: 2rem 0; + display: none; + top: 100%; + left: 0; + min-width: 400px; +} + +.nav__item:hover .nav__list--dropdown { + display: block; +} \ No newline at end of file diff --git a/04/css/main.css b/04/css/main.css new file mode 100644 index 00000000..97f70869 --- /dev/null +++ b/04/css/main.css @@ -0,0 +1,13 @@ +:root { + --main: rgb(246, 242, 250); + --link-color: rgb(66, 62, 62); + --link-active: #7384; +} +html { + font-family: 'Roboto', sans-serif; + font-size: 62.5%; +} +body { + font-size: 2rem; + text-transform: uppercase; +} \ No newline at end of file diff --git a/04/css/mobile.css b/04/css/mobile.css new file mode 100644 index 00000000..8492ab0a --- /dev/null +++ b/04/css/mobile.css @@ -0,0 +1,53 @@ +.nav { + background-color: var(--main); + padding: 2rem 1rem 2rem 0; +} + +.nav__hamburger { + display: block; + width: 3rem; + height: 2rem; + border-top: 0.3rem solid black; + border-bottom: 0.3rem solid black; + border-radius: 0.2rem; + float: right; +} +.nav__hamburger::after { + content: ''; + display: block; + height: 0.3rem; + background-color: black; + position: relative; + top: 0.5rem; + border-radius: 0.2rem; +} +.nav__toggler { + display: none; +} +.nav__list { + display: none; +} +.nav__list--dropdown { + display: block; + padding-left: 2rem; + font-size: 1.6rem; +} +.nav__item { + padding: 0.5rem; +} +.nav__link { + color: var(--link-color); + padding: 0.5rem 1rem; + transition: all 0.2s ease-in-out; +} + +.nav__link:hover { + background-color: var(--link-active); + border-radius: 2rem; +} +.nav__link:active { + color: var(--link-active); +} +.nav__toggler:checked ~ .nav__list { + display: block; +} \ No newline at end of file diff --git a/04/index.html b/04/index.html index e3ca9540..89b9db8f 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,44 @@ + devmentor.pl - HTML & CSS: RWD - #04 + + + + + + + + - -