diff --git a/01/style.css b/01/style.css index faa3160d..7a11647a 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; -} \ 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(100% 0, 0 100%, 0 0); +} diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..50c5160d 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; +.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; } .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; +} + +body { + display: grid; + grid-template-areas: + "A" + "B" + "C"; +} + +body > * { + height: 50vh; +} + +@media (min-width: 601px) { + body { + grid-template-areas: + "A A" + "C B"; + + max-width: 1200px; + margin-inline: auto; + } +} diff --git a/03/images/jpg/picture-large.jpg b/03/images/jpg/picture-large.jpg new file mode 100644 index 00000000..116e60d6 Binary files /dev/null and b/03/images/jpg/picture-large.jpg differ diff --git a/03/images/jpg/picture-large@x2.jpg b/03/images/jpg/picture-large@x2.jpg new file mode 100644 index 00000000..6965ec1b Binary files /dev/null and b/03/images/jpg/picture-large@x2.jpg differ diff --git a/03/images/jpg/picture-largex@3.jpg b/03/images/jpg/picture-largex@3.jpg new file mode 100644 index 00000000..d6096e17 Binary files /dev/null and b/03/images/jpg/picture-largex@3.jpg differ diff --git a/03/images/jpg/picture-medium.jpg b/03/images/jpg/picture-medium.jpg new file mode 100644 index 00000000..34ae921d Binary files /dev/null and b/03/images/jpg/picture-medium.jpg differ diff --git a/03/images/jpg/picture-medium@x2.jpg b/03/images/jpg/picture-medium@x2.jpg new file mode 100644 index 00000000..6f8c0f62 Binary files /dev/null and b/03/images/jpg/picture-medium@x2.jpg differ diff --git a/03/images/jpg/picture-medium@x3.jpg b/03/images/jpg/picture-medium@x3.jpg new file mode 100644 index 00000000..7811e15e Binary files /dev/null and b/03/images/jpg/picture-medium@x3.jpg differ diff --git a/03/images/jpg/picture-small.jpg b/03/images/jpg/picture-small.jpg new file mode 100644 index 00000000..f0814244 Binary files /dev/null and b/03/images/jpg/picture-small.jpg differ diff --git a/03/images/jpg/picture-small@x2.jpg b/03/images/jpg/picture-small@x2.jpg new file mode 100644 index 00000000..d33fbf89 Binary files /dev/null and b/03/images/jpg/picture-small@x2.jpg differ diff --git a/03/images/jpg/picture-small@x3.jpg b/03/images/jpg/picture-small@x3.jpg new file mode 100644 index 00000000..ed66d980 Binary files /dev/null and b/03/images/jpg/picture-small@x3.jpg differ diff --git a/03/images/webp/picture-large.webp b/03/images/webp/picture-large.webp new file mode 100644 index 00000000..eba0ae27 Binary files /dev/null and b/03/images/webp/picture-large.webp differ diff --git a/03/images/webp/picture-large@x2.webp b/03/images/webp/picture-large@x2.webp new file mode 100644 index 00000000..1558604a Binary files /dev/null and b/03/images/webp/picture-large@x2.webp differ diff --git a/03/images/webp/picture-large@x3.webp b/03/images/webp/picture-large@x3.webp new file mode 100644 index 00000000..567e6a65 Binary files /dev/null and b/03/images/webp/picture-large@x3.webp differ diff --git a/03/images/webp/picture-medium.webp b/03/images/webp/picture-medium.webp new file mode 100644 index 00000000..e55b37d1 Binary files /dev/null and b/03/images/webp/picture-medium.webp differ diff --git a/03/images/webp/picture-medium@x2.webp b/03/images/webp/picture-medium@x2.webp new file mode 100644 index 00000000..f32bdc3a Binary files /dev/null and b/03/images/webp/picture-medium@x2.webp differ diff --git a/03/images/webp/picture-medium@x3.webp b/03/images/webp/picture-medium@x3.webp new file mode 100644 index 00000000..98bd849f Binary files /dev/null and b/03/images/webp/picture-medium@x3.webp differ diff --git a/03/images/webp/picture-small.webp b/03/images/webp/picture-small.webp new file mode 100644 index 00000000..3cb4373e Binary files /dev/null and b/03/images/webp/picture-small.webp differ diff --git a/03/images/webp/picture-small@x2.webp b/03/images/webp/picture-small@x2.webp new file mode 100644 index 00000000..14a5cf5d Binary files /dev/null and b/03/images/webp/picture-small@x2.webp differ diff --git a/03/images/webp/picture-small@x3.webp b/03/images/webp/picture-small@x3.webp new file mode 100644 index 00000000..596a6d4e Binary files /dev/null and b/03/images/webp/picture-small@x3.webp differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..0457da6b 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,86 @@ - - - - + + + + devmentor.pl - HTML & CSS: RWD - #03 - - - -
T
-
P
- V - - - \ No newline at end of file + + + + + + +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi dolorem + fugiat, harum, quibusdam soluta dolor recusandae tenetur consequuntur + omnis mollitia veniam eius in beatae praesentium fuga exercitationem ipsum + reprehenderit repellendus perferendis hic. Consectetur voluptas ipsa + obcaecati adipisci hic, distinctio aliquid voluptate? Omnis nesciunt + incidunt nisi culpa expedita dolorum consequuntur a totam alias impedit + labore praesentium laborum quis suscipit iusto eveniet, hic commodi + mollitia porro nam eum error recusandae ipsa. Repudiandae, eius possimus? + Sit quam animi aspernatur delectus alias rem repellat, sequi sunt dolorum + quo mollitia voluptate nemo. Tenetur excepturi modi delectus, aut saepe + facilis at, fugit sit autem id hic. +
+
+ + + + + Majestic lion lying on the rock + +
+ + + diff --git a/03/styles/desktop.css b/03/styles/desktop.css new file mode 100644 index 00000000..a1e98d03 --- /dev/null +++ b/03/styles/desktop.css @@ -0,0 +1,8 @@ +body { + grid-template-areas: + "P V" + "T T"; + + width: min(1400px, 100%); + margin-inline: auto; +} diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..cf844c01 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -1,26 +1,53 @@ * { - 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; } .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; + width: 100%; +} + +body { + display: grid; +} + +img { + max-width: 100%; + display: block; +} + +iframe { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; +} diff --git a/03/styles/mobile.css b/03/styles/mobile.css new file mode 100644 index 00000000..dc547eaf --- /dev/null +++ b/03/styles/mobile.css @@ -0,0 +1,6 @@ +body { + grid-template-areas: + "P" + "T" + "V"; +} diff --git a/03/styles/tablet.css b/03/styles/tablet.css new file mode 100644 index 00000000..e81869d1 --- /dev/null +++ b/03/styles/tablet.css @@ -0,0 +1,7 @@ +body { + grid-template-areas: + "P T" + "V T"; + + grid-template-columns: minmax(200px, 50%) 1fr; +} diff --git a/04/index.html b/04/index.html index e3ca9540..69429f4b 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,51 @@ - - - - + + + + devmentor.pl - HTML & CSS: RWD - #04 - - - - + + + diff --git a/04/styles/index.css b/04/styles/index.css new file mode 100644 index 00000000..eba3793f --- /dev/null +++ b/04/styles/index.css @@ -0,0 +1,240 @@ +:root { + --bg-color: #f6f6f6; + + --primary-color: #ffffff; + --secondary-color: #333333; + + --accent-color-primary: #66c2ed; + --accent-color-secondary: #6a6b65; +} + +*, +*::after, +*::before { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; + color: inherit; +} + +body { + background-color: var(--bg-color); + min-height: 100dvh; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} + +/* Multi Level Dropdown Menu */ +.nav { + background-color: var(--primary-color); + box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); + padding: 1rem; +} + +.nav__menu { + display: none; + flex-direction: column; + /* gap: 0.5rem; */ +} + +.nav__menu > .nav__item { + border-bottom: 0.5px solid var(--accent-color-secondary); +} + +.nav__menu > .nav__item:first-child .nav__link { + color: var(--accent-color-primary); +} + +.nav__item > .nav__link { + text-transform: uppercase; +} + +.nav__link { + color: var(--secondary-color); + padding: 0.5rem 1rem; + + display: block; + font-size: 0.75rem; + + transition: color 0.2s ease-out; +} + +.nav__item:hover > .nav__link { + color: var(--accent-color-primary); +} + +.nav__item--dropdown { + cursor: pointer; + position: relative; +} + +.nav__submenu--down, +.nav__submenu--right { + margin-inline-start: 2rem; +} + +.nav__submenu .nav__link { + text-transform: none; + color: var(--accent-color-secondary); + padding: 0.5rem 1rem; +} + +.nav__item--dropdown:hover > .nav__submenu { + display: block; +} + +/* HAMBURGER ICON */ +.hamburger { + display: block; + width: 30px; + height: 24px; + border: 0; + border-top: 4px solid var(--accent-color-secondary); + background: transparent; + position: relative; + transition: 0.3s transform linear; + cursor: pointer; +} + +.hamburger::before, +.hamburger::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-top: 4px solid var(--accent-color-secondary); + transform: translateY(4px); +} + +.hamburger::after { + transform: translateY(12px); + transition: 0.3s transform linear; +} + +.hamburger-checkbox:checked + .nav__menu { + display: flex; +} + +.hamburger-checkbox:checked + .nav__menu { + margin-top: 1rem; +} + +.hamburger-checkbox { + display: none; +} + +/* BREAKPOINT */ +@media (min-width: 600px) { + .hamburger, + .hamburger-checkbox { + display: none; + } + + header { + padding: 1rem 2rem; + } + + .nav { + padding: 0; + } + + .nav__menu { + display: flex; + flex-direction: row; + gap: 1rem; + } + + .nav__link { + padding: 1rem; + } + + .nav__submenu { + display: none; + position: absolute; + width: 10rem; + text-transform: none; + background-color: var(--secondary-color); + } + + .nav__submenu--down { + left: 0; + top: 100%; + } + + .nav__submenu--right { + left: 100%; + top: 0; + } + + .nav__submenu--down, + .nav__submenu--right { + margin-inline-start: 0; + } + + .arrow { + position: absolute; + width: 0; + height: 0; + transform: translateY(-50%); + transition: border-color 0.2s ease-out; + } + + .arrow-down { + right: 0; + top: 50%; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 6px solid var(--secondary-color); + } + + .arrow-right { + right: 1rem; + top: 50%; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: 4px solid var(--accent-color-secondary); + } + + .nav__menu > .nav__item--dropdown::before { + content: ""; + position: absolute; + top: 0; + height: 2px; + width: 100%; + background-color: var(--accent-color-primary); + opacity: 0; + transition: opacity 0.2s ease-out; + } + + .nav__menu > .nav__item--dropdown:hover::before { + opacity: 1; + } + + .nav__item--dropdown:hover .arrow-down { + border-top-color: var(--accent-color-primary); + } + + .nav__item--dropdown .nav__submenu > .nav__item:hover .arrow-right { + border-left-color: var(--primary-color); + } + + .nav__item--dropdown .nav__item:hover > .nav__link { + color: var(--primary-color); + } + + .nav__menu > .nav__item { + border-bottom: none; + } + + .hamburger-checkbox:checked + .nav__menu { + margin-top: 0rem; + } +} diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..269faf23 --- /dev/null +++ b/05/index.html @@ -0,0 +1,46 @@ + + + + + + Layout + + + +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + diff --git a/05/styles/index.css b/05/styles/index.css new file mode 100644 index 00000000..7d42ac41 --- /dev/null +++ b/05/styles/index.css @@ -0,0 +1,158 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body, +main { + display: grid; + gap: 10px; +} + +body { + min-height: 100dvh; + grid-template-rows: auto 1fr auto; + grid-template-columns: minmax(0, 1fr); +} + +main { + place-items: center; +} + +.fullWidth { + border: 5px solid green; + width: 100%; + padding: 5px; +} + +.container { + border: 5px solid blue; + width: min(1000px, 100%); + margin-inline: auto; +} + +nav { + padding-block: 5px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.section-1 { + display: grid; + grid-template-columns: 1fr; + /* grid-template-columns: repeat(2, 1fr); */ + gap: 10px; + padding-block: 10px; + height: 250px; +} + +.section-2 { + display: grid; + grid-template-columns: 1fr; + height: 250px; + gap: 20px; + padding: 20px; +} + +footer { + min-height: 100px; +} + +.section-3 { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +/* Content */ +.content { + background-color: orange; +} + +.logo { + width: min(200px, 100%); + height: 50px; +} +.menu { + position: relative; +} + +.menu-content { + background-color: red; + width: min(300px, 50vw); + height: 60px; + display: none; + position: absolute; + right: 0; + top: 50px; +} + +.info { + height: 50px; + width: 200px; +} + +/* HAMBURGER ICON */ +.hamburger { + margin-right: 20px; + display: block; + width: 30px; + height: 24px; + border: 0; + border-top: 4px solid black; + background: transparent; + position: relative; + cursor: pointer; +} + +.hamburger::before, +.hamburger::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-top: 4px solid black; + transform: translateY(4px); +} + +.hamburger::after { + transform: translateY(12px); + transition: 0.3s transform linear; +} + +.hamburger-checkbox:checked + .menu-content { + display: block; +} + +.hamburger-checkbox { + display: none; +} + +@media (min-width: 768px) { + .hamburger { + display: none; + } + + .menu { + display: block; + } + + .section-1 { + grid-template-columns: repeat(2, 1fr); + } + + .section-2 { + grid-template-columns: repeat(3, 1fr); + } + + .menu-content { + /* width: 100%; */ + height: 60px; + display: block; + position: static; + } +}