zadanie domowe bez zadania 5 #152
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/)._ | ||
|
|
||
| | ||
|
|
||
| # `#04` HTML i CSS: Responsywność | ||
|
|
||
| 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. | ||
|
|
||
| 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: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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%; | ||
| } | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="pl"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| <link rel="stylesheet" href="css/mobile.css"> | ||
| <link rel="stylesheet" href="css/desktop.css" media="screen and (min-width:800px)"> | ||
| </head> | ||
| <body> | ||
| <header class="green"> | ||
| <div class="blue header-container"> | ||
|
|
||
| <h1 class="yellow logo">logo</h1> | ||
| <nav class="menu yellow"> | ||
| <label class="label" for="menu-switcher">menu</label> | ||
| <input class="switcher" type="checkbox" id="menu-switcher"> | ||
| <ul class="items"> | ||
| <li> | ||
| <a href="#">start</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">portfolio</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">contact</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </header> | ||
| <section class="green"> | ||
| <article class="blue article"> | ||
| <p class="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 | ||
| </p> | ||
| <p class="text2"> 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 </p> | ||
|
|
||
| </article> | ||
|
Owner
There was a problem hiding this comment. Za elementem |
||
| <section class="green"> | ||
| <article class="blue article"> | ||
| <p class="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 | ||
| </p> | ||
| <p class="text2"> 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 </p> | ||
| <p class="text3"> 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 </p> | ||
| </article> | ||
| </section> | ||
| <article class="blue footer"> | ||
| <h1 class="yellow footer">logo</h1> | ||
|
Owner
There was a problem hiding this comment. Brakuje zamknięcia dla
Owner
There was a problem hiding this comment. Zwróć uwagę, że teraz jeden zielony jest zagnieżdżony w drugim:
|
||
| </body> | ||
| </html> | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍