diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..c6f9a448 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vscode/settings.json diff --git a/01/style.css b/01/style.css index faa3160d..a5044c7b 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..ac68502e 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; } +body { + grid-template-areas: + "a" + "b" + "c"; +} +.a, +.b, +.c { + border: 3px solid transparent; + min-height: 50px; + height: 50vh; -.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"; +} + +@media screen and (min-width: 600px) { + body { + display: grid; + grid-template-areas: + "a a" + "c b"; + max-width: 1200px; + margin: 0 auto; + } +} diff --git a/03/assets/img.jpg b/03/assets/img.jpg new file mode 100644 index 00000000..78be5f30 Binary files /dev/null and b/03/assets/img.jpg differ diff --git a/03/assets/img1200.jpg b/03/assets/img1200.jpg new file mode 100644 index 00000000..9d07e918 Binary files /dev/null and b/03/assets/img1200.jpg differ diff --git a/03/assets/img300.jpg b/03/assets/img300.jpg new file mode 100644 index 00000000..1fd8bd80 Binary files /dev/null and b/03/assets/img300.jpg differ diff --git a/03/assets/img600.jpg b/03/assets/img600.jpg new file mode 100644 index 00000000..ebb1e91d Binary files /dev/null and b/03/assets/img600.jpg differ diff --git a/03/index.html b/03/index.html index 4a2e35c2..f81148d3 100644 --- a/03/index.html +++ b/03/index.html @@ -1,16 +1,73 @@ - - - - + + + + + + + + devmentor.pl - HTML & CSS: RWD - #03 - - - -
T
-
P
- V - - - \ No newline at end of file + + +
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga porro + voluptas suscipit voluptatibus. Corrupti dolore asperiores ex distinctio + iusto iste! Lorem ipsum dolor sit amet consectetur, adipisicing elit. + Fuga porro voluptas suscipit voluptatibus. Corrupti dolore asperiores ex + distinctio iusto iste! Lorem ipsum dolor sit amet consectetur, + adipisicing elit. Fuga porro voluptas suscipit voluptatibus. Corrupti + dolore asperiores ex distinctio iusto iste! +

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga porro + voluptas suscipit voluptatibus. Corrupti dolore asperiores ex distinctio + iusto iste! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga + porro voluptas suscipit voluptatibus. Corrupti dolore asperiores ex + distinctio iusto iste! Lorem ipsum dolor sit amet consectetur, adipisicing + elit. Fuga porro voluptas suscipit voluptatibus. Corrupti dolore + asperiores ex distinctio iusto iste! Lorem ipsum dolor sit amet + consectetur, adipisicing elit. Fuga porro voluptas suscipit voluptatibus. + Corrupti dolore asperiores ex distinctio iusto iste! +

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga porro + voluptas suscipit voluptatibus. Corrupti dolore asperiores ex distinctio + iusto iste! Lorem ipsum dolor sit amet consectetur, adipisicing elit. + Fuga porro voluptas suscipit voluptatibus. Corrupti dolore asperiores ex + distinctio iusto iste! Lorem ipsum dolor sit amet consectetur, + adipisicing elit. Fuga porro voluptas suscipit voluptatibus. Corrupti + dolore asperiores ex distinctio iusto iste! +

+
+
+ + + + + Fallback image + +
+ + + diff --git a/03/styles/desktop.css b/03/styles/desktop.css new file mode 100644 index 00000000..0203c7d3 --- /dev/null +++ b/03/styles/desktop.css @@ -0,0 +1,18 @@ +/* desktop */ +body { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-areas: + "p v" + "t t"; +} +.p { + grid-area: p; +} +.v { + grid-area: v; +} +.t { + grid-area: t; +} diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..f8dd9ab5 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -1,26 +1,29 @@ * { - 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: #ff00bb; + aspect-ratio: 4/3; } .t { - border-color: #ffdfba; + border-color: #ffdfba; } .v { - border-color: #baffc9; -} \ No newline at end of file + border-color: #baffc9; +} diff --git a/03/styles/mobile.css b/03/styles/mobile.css new file mode 100644 index 00000000..9c321ce2 --- /dev/null +++ b/03/styles/mobile.css @@ -0,0 +1,25 @@ +/* mobile css */ +img { + display: block; +} +picture, +picture img { + max-width: 100%; + width: 100%; + height: auto; /* Zachowuje proporcje obrazu */ + aspect-ratio: 4/3; +} +side { + display: block; + height: 0; + padding-bottom: calc(315 / 560 * 100%); + position: relative; + width: 100%; /* domyślnie */ +} +iframe { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 100%; +} diff --git a/03/styles/tablet.css b/03/styles/tablet.css new file mode 100644 index 00000000..54349d00 --- /dev/null +++ b/03/styles/tablet.css @@ -0,0 +1,18 @@ +/* tablet */ +body { + display: grid; + grid-template-areas: + "p t" + "v t"; + grid-template-columns: minmax(200px, 50%) 1fr; + gap: 1rem; +} +.p { + grid-area: p; +} +.v { + grid-area: v; +} +.t { + grid-area: t; +} diff --git a/04/index.html b/04/index.html index e3ca9540..79c3ddbb 100644 --- a/04/index.html +++ b/04/index.html @@ -1,30 +1,48 @@ - - - - + + + + + + + + + + + devmentor.pl - HTML & CSS: RWD - #04 - - - + + - - - \ No newline at end of file + + diff --git a/04/styles/desktop.css b/04/styles/desktop.css new file mode 100644 index 00000000..4124ae9c --- /dev/null +++ b/04/styles/desktop.css @@ -0,0 +1,22 @@ +nav > ul { + display: flex; +} +nav input + ul { + flex-direction: row; +} +.hamburger { + display: none; +} +.menu-item { + position: relative; +} +.menu-dropdown { + display: none; + left: 0; + top: 0; + padding-top: 40px; + position: absolute; +} +.menu-dropdown li { + min-width: 250px; +} diff --git a/04/styles/global.css b/04/styles/global.css new file mode 100644 index 00000000..6e94d833 --- /dev/null +++ b/04/styles/global.css @@ -0,0 +1,43 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +body { + font-family: "Montserrat", sans-serif; +} +ul { + background-color: rgb(241, 234, 223); + display: flex; + list-style: none; +} +.menu { + padding: 20px 10px; +} +li { + padding: 10px; +} +.menu-item { + cursor: pointer; +} +.menu-item a { + color: rgb(113, 111, 111); + display: inline-block; + height: 100%; + text-decoration: underline; + text-underline-offset: 5px; + width: 100%; +} +.menu-item a:hover { + text-decoration: none; +} +.menu-dropdown li { + padding-left: 20px; +} +.menu-item:hover > .menu-dropdown { + display: block; +} +.menu-dropdown { + margin-top: 30px; + padding: 10px; +} diff --git a/04/styles/mobile.css b/04/styles/mobile.css new file mode 100644 index 00000000..542fce01 --- /dev/null +++ b/04/styles/mobile.css @@ -0,0 +1,40 @@ +nav > ul li input:checked + ul { + display: block; +} +nav > ul { + display: none; +} +nav input { + display: none; +} +nav input:checked + ul { + display: flex; + flex-direction: column; +} + +.menu-dropdown { + display: none; +} + +.hamburger { + background: transparent; + border: 0; + border-top: 5px solid rgb(113, 111, 111); + cursor: pointer; + height: 35px; + position: relative; + width: 40px; +} +.hamburger::before, +.hamburger::after { + border-top: 5px solid rgb(113, 111, 111); + content: ""; + left: 0; + position: absolute; + top: 0; + transform: translateY(10px); + width: 100%; +} +.hamburger::after { + transform: translateY(25px); +} diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..cc124545 --- /dev/null +++ b/05/index.html @@ -0,0 +1,44 @@ + + + + + + + + + #05 HTML i CSS: Responsywność + + +
+
+ + + + +
+
+
+
+
+
1
+
2
+
+
+
+
+
1
+
2
+
3
+
+
+ + + diff --git a/05/styles/desktop.css b/05/styles/desktop.css new file mode 100644 index 00000000..c1597fc3 --- /dev/null +++ b/05/styles/desktop.css @@ -0,0 +1,30 @@ +.hamburger-menu { + display: none; +} +.desktop-menu { + display: block; + min-width: 300px; + min-height: 50px; + background-color: #ffca18; +} +.header__container { + justify-content: space-between; +} +.container { + max-width: 1000px; + margin: 4px auto; + padding: 10px 0; +} +header, +section { + margin-bottom: 8px; +} +.section__container { + flex-direction: row; +} +.section__container > article:first-of-type { + order: 1; +} +.section__container > div:first-of-type { + order: 1; +} diff --git a/05/styles/global.css b/05/styles/global.css new file mode 100644 index 00000000..c2ad74a7 --- /dev/null +++ b/05/styles/global.css @@ -0,0 +1,16 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} +.container { + border: 5px solid #04a7f3; +} +header, +section, +footer { + border: 5px solid #0dd144; +} +header input { + display: none; +} diff --git a/05/styles/mobile.css b/05/styles/mobile.css new file mode 100644 index 00000000..a2b313eb --- /dev/null +++ b/05/styles/mobile.css @@ -0,0 +1,73 @@ +.container { + margin: 2px; + width: 100%; + display: flex; +} +nav { + display: none; + position: absolute; + top: 100%; +} +header input:checked + nav { + display: block; + height: 300px; + width: 100%; + background-color: #d40a9b; +} +.header__container { + justify-content: end; + align-items: center; + gap: 30px; + position: relative; +} +.logo { + min-height: 50px; + width: 150px; + background-color: #ffca18; + margin: 5px; +} +.hamburger-menu { + background: transparent; + border: 0; + border-top: 5px solid rgb(113, 111, 111); + cursor: pointer; + height: 35px; + position: relative; + width: 40px; +} +.hamburger-menu::before, +.hamburger-menu::after { + border-top: 5px solid rgb(113, 111, 111); + content: ""; + left: 0; + position: absolute; + top: 0; + transform: translateY(10px); + width: 100%; +} +.hamburger-menu::after { + transform: translateY(25px); +} +article { + width: 100%; + min-height: 300px; + background-color: #ffca18; +} +.section__container { + flex-direction: column; + gap: 12px; +} +.section__container div { + width: 100%; + min-height: 200px; + background-color: #ffca18; +} +.footer__container { + justify-content: center; +} +.footer__container div { + background-color: #ffca18; + width: 120px; + min-height: 40px; + margin: 5px; +}