diff --git a/01/style.css b/01/style.css index faa3160d..b2ded1cf 100644 --- a/01/style.css +++ b/01/style.css @@ -20,4 +20,6 @@ border: 150px solid #dcdcdc; border-right-color: transparent; border-bottom-color: transparent; -} \ No newline at end of file + shape-outside: polygon(0 0, 0 100%, 100% 0); + margin-right: 20px; +} diff --git a/02/styles/global.css b/02/styles/global.css index a1c785e8..771b70a5 100644 --- a/02/styles/global.css +++ b/02/styles/global.css @@ -1,4 +1,4 @@ -* { + /** { margin: 0; padding: 0; box-sizing: border-box; @@ -23,4 +23,77 @@ .c { border-color: #baffc9; +} */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.a, .b, .c { + border: 3px solid transparent; + min-height: 50px; + display: flex; + justify-content: center; + align-items: center; +} + +.a { + border-color: #ffffba; +} + +.b { + border-color: #ffdfba; +} + +.c { + border-color: #baffc9; +} + +/* Układ dla mniejszych ekranów */ +body { + display: grid; + grid-template-rows: 50vh 50vh 50vh; + grid-template-columns: 1fr; + height: 100vh; +} + +.a { + grid-row: 1 / 2; +} + +.b { + grid-row: 2 / 3; +} + +.c { + grid-row: 3 / 4; +} + +/* Układ dla szerokości powyżej 600px */ +@media (min-width: 600px) { + body { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 50vh 50vh; + max-width: 1200px; + margin: 0 auto; + height: 100vh; + } + + .a { + grid-column: 1 / 3; + grid-row: 1 / 2; + } + + .c { + grid-column: 1 / 2; + grid-row: 2 / 3; + } + + .b { + grid-column: 2 / 3; + grid-row: 2 / 3; + } } \ No newline at end of file diff --git a/03/index.html b/03/index.html index 4a2e35c2..1ab8b33c 100644 --- a/03/index.html +++ b/03/index.html @@ -4,6 +4,7 @@ + devmentor.pl - HTML & CSS: RWD - #03 @@ -11,6 +12,19 @@
T
P
V - +
+ + + + + Sample Image + +
+
+

Wiele linii tekstu, które wypełniają przestrzeń na stronie. Ten tekst jest przykładem treści na stronie, która będzie zmieniać swoje miejsce w zależności od rozmiaru ekranu.

+
+
+ +
\ No newline at end of file diff --git a/03/styles/global.css b/03/styles/global.css index 7773d9b7..2c128872 100644 --- a/03/styles/global.css +++ b/03/styles/global.css @@ -7,7 +7,6 @@ .p, .t, .v { border: 3px solid transparent; min-height: 50px; - display: flex; justify-content: center; align-items: center; @@ -23,4 +22,75 @@ .v { border-color: #baffc9; +} +body { + display: grid; + grid-template-rows: auto auto auto; + grid-template-columns: 1fr; +} + +.p { + grid-row: 1 / 2; +} + +.t { + grid-row: 2 / 3; +} + +.v { + grid-row: 3 / 4; +} + +/* Tablet */ +@media (min-width: 600px) and (max-width: 1199px) { + body { + grid-template-rows: auto auto; + grid-template-columns: 1fr 1fr; + max-width: 100%; + } + + .p { + grid-column: 1 / 2; + grid-row: 1 / 2; + } + + .t { + grid-column: 2 / 3; + grid-row: 1 / 3; + } + + .v { + grid-column: 1 / 2; + grid-row: 2 / 3; + } +} + +/* Desktop */ +@media (min-width: 1200px) { + body { + grid-template-rows: auto auto; + grid-template-columns: 1fr 1fr; + max-width: 1400px; + margin: 0 auto; + } + + .p { + grid-column: 1 / 2; + grid-row: 1 / 2; + } + + .v { + grid-column: 2 / 3; + grid-row: 1 / 2; + } + + .t { + grid-column: 1 / 3; + grid-row: 2 / 3; + } +} + +iframe { + width: 100%; + height: 100%; } \ No newline at end of file diff --git a/04/.devcontainer.code-workspace b/04/.devcontainer.code-workspace new file mode 100644 index 00000000..403a07aa --- /dev/null +++ b/04/.devcontainer.code-workspace @@ -0,0 +1,35 @@ +{ + "folders": [ + { + "path": "../.devcontainer" + }, + { + "path": "../.git" + }, + { + "path": "../.github" + }, + { + "path": "../01" + }, + { + "path": "../02" + }, + { + "path": "../03" + }, + { + "path": "." + }, + { + "path": "../05" + }, + { + "path": "../assets" + } +], + "settings": { + "liveServer.settings.multiRootWorkspaceName": "04", + "liveServer.settings.port": 5502 + } +} diff --git a/04/README.md b/04/README.md index d0b06b8c..9f29294d 100644 --- a/04/README.md +++ b/04/README.md @@ -1,30 +1,30 @@ -> :white_check_mark: *Jeśli będziesz mieć problem z rozwiązaniem tego zadania, poproś o pomoc na odpowiednim kanale na Slacku, tj. `s1e02-html-and-css-basics` (dotyczy [mentee](https://devmentor.pl/mentoring-javascript/)) lub na ogólnodostępnej i bezpłatnej [społeczności na Discordzie](https://devmentor.pl/discord). Pamiętaj, aby treść Twojego wpisu spełniała [odpowiednie kryteria](https://devmentor.pl/jak-prosic-o-pomoc/).* +> :white_check_mark: _Jeśli będziesz mieć problem z rozwiązaniem tego zadania, poproś o pomoc na odpowiednim kanale na Slacku, tj. `s1e02-html-and-css-basics` (dotyczy [mentee](https://devmentor.pl/mentoring-javascript/)) lub na ogólnodostępnej i bezpłatnej [społeczności na Discordzie](https://devmentor.pl/discord). Pamiętaj, aby treść Twojego wpisu spełniała [odpowiednie kryteria](https://devmentor.pl/jak-prosic-o-pomoc/)._   # `#04` HTML i CSS: Responsywność -Nadszedł czas na przygotowanie responsywnego menu. +Nadszedł czas na przygotowanie responsywnego menu. Będziemy mieli 2 wersje jego wyglądu: -- **mobilną**: - - elementy menu są umieszczone jeden pod drugim i zajmują całą szerokość okna przeglądarki, - - są widoczne dopiero po kliknięciu w ikonę "[hamburgera](https://www.youtube.com/watch?v=Al-0vNJD1JU)" (najlepiej bez użycia JavaScriptu), - - im bardziej zagnieżdżone elementy, tym bardziej odsunięte są od lewej krawędzi. -- **normalną**: - - elementy menu umieszczone są obok siebie w poziomie, - - tylko pierwszy poziom widoczny jest od razu, - - drugi poziom menu dostępny jest dopiero po najechaniu na rodzica: - - elementy występujące w rodzicu wyświetlane są jeden pod drugim, - - całość wyświetla się pod rodzicem. +- **mobilną**: + - elementy menu są umieszczone jeden pod drugim i zajmują całą szerokość okna przeglądarki, + - są widoczne dopiero po kliknięciu w ikonę "[hamburgera](https://www.youtube.com/watch?v=Al-0vNJD1JU)" (najlepiej bez użycia JavaScriptu), + - im bardziej zagnieżdżone elementy, tym bardziej odsunięte są od lewej krawędzi. +- **normalną**: + - elementy menu umieszczone są obok siebie w poziomie, + - tylko pierwszy poziom widoczny jest od razu, + - drugi poziom menu dostępny jest dopiero po najechaniu na rodzica: + - elementy występujące w rodzicu wyświetlane są jeden pod drugim, + - całość wyświetla się pod rodzicem. -Sam dobierz wygląd oraz stosowny breakpoint. +Sam dobierz wygląd oraz stosowny breakpoint. Jak skończysz, to opublikuj swoje rozwiązanie za pomocą [GitHub Pages](https://pages.github.com/) i sprawdź, czy strona przechodzi [test na urządzenia mobilne](https://search.google.com/test/mobile-friendly). -   -> :no_entry: *Jeśli nie posiadasz materiałów do tego zadania tj. **PDF + wideo, projekt + Code Review**, znajdziesz je na stronie [devmentor.pl](https://devmentor.pl/workshop-html-and-css-rwd/)* -> :arrow_left: [*poprzednie zadanie*](./../03) | [*następne zadanie*](./../05) :arrow_right: +> :no_entry: _Jeśli nie posiadasz materiałów do tego zadania tj. **PDF + wideo, projekt + Code Review**, znajdziesz je na stronie [devmentor.pl](https://devmentor.pl/workshop-html-and-css-rwd/)_ + +> :arrow_left: [_poprzednie zadanie_](./../03) | [_następne zadanie_](./../05) :arrow_right: diff --git a/04/index.html b/04/index.html index e3ca9540..83862a2c 100644 --- a/04/index.html +++ b/04/index.html @@ -3,28 +3,30 @@ - - devmentor.pl - HTML & CSS: RWD - #04 + Responsive Menu + - - \ No newline at end of file diff --git a/04/styles/styles.css b/04/styles/styles.css new file mode 100644 index 00000000..c0d34bc1 --- /dev/null +++ b/04/styles/styles.css @@ -0,0 +1,93 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +nav { + background-color: #fff; + border-bottom: 1px solid #ccc; + position: relative; +} + +.menu { + list-style: none; + padding: 0; + margin: 0; + display: flex; + justify-content: space-around; +} + +.menu li { + position: relative; +} + +.menu a { + display: block; + padding: 15px 20px; + text-decoration: none; + color: #000; +} + +.menu .submenu { + display: none; + position: absolute; + top: 100%; + left: 0; + background-color: #333; + padding: 0; +} + +.menu .submenu li { + width: 200px; +} + +.menu .submenu a { + color: #fff; + padding: 10px; +} + +.menu li:hover > .submenu { + display: block; +} + +.menu .submenu .submenu { + left: 100%; + top: 0; +} + +.menu-toggle { + display: none; + font-size: 24px; + padding: 15px; + cursor: pointer; +} + +@media (max-width: 768px) { + .menu { + display: none; + flex-direction: column; + width: 100%; + } + + .menu-toggle { + display: block; + } + + .menu li { + width: 100%; + } + + .menu .submenu { + position: static; + } + + .menu li:hover > .submenu { + display: block; + padding-left: 20px; + } + + #menu-toggle:checked + .menu { + display: flex; + } +} \ No newline at end of file diff --git a/05/css/desktop.css b/05/css/desktop.css new file mode 100644 index 00000000..abdc546a --- /dev/null +++ b/05/css/desktop.css @@ -0,0 +1,43 @@ +body { + +} +.blue { + max-width: 1000px; + margin: 0 auto; + +} + +.header-container { + display: flex; + justify-content: space-between; +} + +.logo { + margin: 0; +} + +.menu { + position: static; +} + + +.green ul { + display: flex; +} + +.label, .switcher { + display: none; +} + +.article { + display: flex; + justify-content: space-between; +} + +.menu .items li { + margin-right: 20px; +} + +.menu .items li:last-child { + margin-right: 0; +} \ No newline at end of file diff --git a/05/css/mobile.css b/05/css/mobile.css new file mode 100644 index 00000000..569976da --- /dev/null +++ b/05/css/mobile.css @@ -0,0 +1,56 @@ +body { +} + +.green { + border: 3px solid green; +} + + +.green ul { + display: none; +} + + +.green input:checked + ul { + display: block; +} + +.blue { + border: 3px solid blue; + position: relative; +} + +.yellow { + border: 3px solid yellow; + min-height: 50px; +} + +.logo { + width: 50%; + margin: 0 auto; +} + + +.text, .text3, .text2 { + border: 1px solid yellow; + width: 100%; + +} + +.menu { + position: absolute; + top: 0; + right: 0; +} + +.footer { + display: flex; + width: 100%; + margin: 0 auto; + display: flex; +} + +.yellow.footer { + width: 50%; +} + diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..a527e558 --- /dev/null +++ b/05/index.html @@ -0,0 +1,70 @@ + + + + + + Document + + + + +
+
+ +

logo

+ +
+
+
+
+

text text text text text + text text text text text ext text text text text + text text text text textext text text text text + text text text text textext text text text text + text text text text textext text text text text + text text text text text +

+

ext text text text text + text text text text textext text text text text + text text text text textext text text text text + text text text text text

+ +
+
+
+
+

text text text text text + text text text text text ext text text text text + text text text text textext text text text text + text text text text textext text text text text + text text text text textext text text text text + text text text text text +

+

ext text text text text + text text text text textext text text text text + text text text text textext text text text text + text text text text text

+

ext text text text text + text text text text textext text text text text + text text text text textext text text text text + text text text text text

+
+
+
+

logo

+ + \ No newline at end of file