Tasks completed #172
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,24 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .content { | ||
| 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; | ||
| shape-outside: polygon(0 0, 0% 100%, 100% 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 |
|---|---|---|
| @@ -1,26 +1,46 @@ | ||
| * { | ||
| 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; | ||
|
|
||
| height: 50vh; | ||
| } | ||
|
|
||
| .a { | ||
| border-color: #ffffba; | ||
| grid-area: A; | ||
| } | ||
|
|
||
| .b { | ||
| border-color: #ffdfba; | ||
| grid-area: B; | ||
| } | ||
|
|
||
| .c { | ||
| border-color: #baffc9; | ||
| grid-area: C; | ||
| } | ||
|
|
||
| @media (min-width: 600px) { | ||
| body { | ||
| margin: 0 auto; | ||
| display: grid; | ||
| grid-template-areas: | ||
| 'A A' | ||
| 'C B'; | ||
| grid-template-columns: 1fr 1fr; | ||
|
Comment on lines
+47
to
+50
Owner
There was a problem hiding this comment. Zwróć uwagę, że nie zgadza się kolejność na mobilce ;) |
||
| max-width: 1200px; | ||
| justify-content: center; | ||
| } | ||
| } | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,16 +1,57 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="pl"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <link rel="stylesheet" href="./styles/global.css"> | ||
| <link rel="stylesheet" media="(min-width: 600px)" href="./styles/tablet.css"> | ||
| <link rel="stylesheet" media="(min-width: 1200px)" href="./styles/desktop.css"> | ||
| <title>devmentor.pl - HTML & CSS: RWD - #03</title> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <main class="t"> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita velit soluta eaque tempore quaerat error | ||
| ratione inventore reprehenderit, dolorum, doloremque impedit nisi nostrum magnam, quae voluptas. | ||
| Perferendis, ullam! Omnis odit cum animi temporibus ex laborum accusamus maxime corporis nam, error quisquam | ||
| ab officiis, facilis voluptatibus tempora atque laboriosam libero sit veritatis perferendis, soluta | ||
| reiciendis magni. Repellat nostrum asperiores, nesciunt placeat maxime ab deleniti vel libero, perferendis | ||
| ipsa, voluptatibus voluptas eius expedita odit obcaecati quas omnis corrupti repudiandae. Eaque harum, | ||
| voluptatem veritatis tempora fugiat facilis rem nemo quisquam maxime velit numquam aliquid sapiente dolorem, | ||
| laborum id dicta debitis quibusdam veniam, hic minus quia accusamus corrupti quas! Tenetur assumenda dolores | ||
| doloribus eum, quos officia magnam atque repellendus minus maiores deleniti sapiente libero illum nihil | ||
| recusandae asperiores commodi. Velit a quibusdam nobis corrupti nulla culpa dolor dicta accusamus corporis | ||
| sequi, nam ratione molestiae aspernatur animi expedita similique doloremque aut atque amet ipsam omnis rem. | ||
| Harum numquam veniam laudantium temporibus modi ad officiis quas minima deleniti necessitatibus earum | ||
| assumenda, sapiente suscipit, ipsum unde doloribus! Sunt, soluta. Necessitatibus eveniet magni accusamus | ||
| modi totam, fuga dolorem, et sed sequi alias ex beatae dignissimos quod corrupti hic consequuntur nisi | ||
| facilis temporibus fugiat! Facere id quisquam hic. Sapiente distinctio in hic, impedit libero exercitationem | ||
| voluptates porro itaque corporis officiis animi aspernatur, repellendus repudiandae autem. Maxime, alias | ||
| illo facere, iusto illum aspernatur quas corrupti quibusdam ab sed odio qui aut autem! Iusto dignissimos | ||
| suscipit eaque. Est odio quisquam ipsum possimus quibusdam atque aspernatur vero reiciendis accusamus omnis? | ||
| Voluptas, ea aperiam enim provident fugit harum? In sunt vero provident ducimus repellendus eveniet placeat | ||
| nisi iure aut harum! Iure eum delectus culpa dolores illum animi quo accusantium porro libero itaque | ||
| perferendis pariatur, debitis ipsum facere quod commodi tenetur doloribus, praesentium dolorem doloremque | ||
| earum aspernatur natus veniam sunt? Fugit illum vel sapiente.</p> | ||
| </main> | ||
| <header class="p"> | ||
| <picture> | ||
| <source srcset="./images/image-1400.jpg" media="(min-width: 1200px)"> | ||
| <source srcset="./images/image-1200.jpg" media="(min-width: 600px)"> | ||
| <source srcset="./images/image-600.jpg"> | ||
| <img src="./images/image-1400.jpg"> | ||
| </picture> | ||
| </header> | ||
| <side class="v"> | ||
| <iframe src="https://www.youtube.com/embed/7UBj0fkQApA?si=N6A9r5UUICFVmgJz" | ||
| title="YouTube video player" frameborder="0" | ||
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | ||
| referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> | ||
| </side> | ||
|
|
||
|
|
||
| </body> | ||
|
|
||
| </html> | ||
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,8 @@ | ||
| body { | ||
| display: grid; | ||
| grid-template-areas: | ||
| 'p v' | ||
| 't t'; | ||
| max-width: 1400px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
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,26 +1,46 @@ | ||
| * { | ||
| 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 { | ||
| border-color: #ffffba; | ||
| grid-area: p; | ||
| } | ||
|
|
||
| .p img { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .t { | ||
| border-color: #ffdfba; | ||
| grid-area: t; | ||
| } | ||
|
|
||
| .v { | ||
| border-color: #baffc9; | ||
| grid-area: v; | ||
| height: 0; | ||
| padding-bottom: calc(315 / 560 * 100%); | ||
| position: relative; | ||
| } | ||
|
|
||
| .v iframe { | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
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,7 @@ | ||
| body { | ||
| display: grid; | ||
| grid-template-areas: | ||
| 'p t' | ||
| 'v t'; | ||
| grid-template-columns: minmax(200px, 50%) auto; | ||
| } | ||
|
|
||
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,115 @@ | ||
| *, | ||
| ::before, | ||
| ::after { | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| nav { | ||
| background-color: rgb(79, 79, 79); | ||
| display: grid; | ||
| grid-template-columns: auto 1fr; | ||
| } | ||
|
|
||
| nav label { | ||
|
Owner
There was a problem hiding this comment. Pamiętaj, że lepiej jest stylować po klasach (nie musi to być BEM). |
||
| background-color: rgb(200, 200, 200); | ||
| display: block; | ||
| width: 40px; | ||
| height: 40px; | ||
| border: 1px solid rgb(100, 100, 100); | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| margin: 10px; | ||
| } | ||
|
|
||
| nav label::before { | ||
| content: ''; | ||
| display: block; | ||
| width: 70%; | ||
| height: 30%; | ||
| border-top: 3px solid rgb(100, 100, 100); | ||
| border-bottom: 1.5px solid rgb(100, 100, 100); | ||
| position: relative; | ||
| top: 20%; | ||
| left: 15%; | ||
| } | ||
|
|
||
| nav label::after { | ||
| content: ''; | ||
| display: block; | ||
| width: 70%; | ||
| height: 30%; | ||
| border-top: 1.5px solid rgb(100, 100, 100); | ||
| border-bottom: 3px solid rgb(100, 100, 100); | ||
| position: relative; | ||
| top: 20%; | ||
| left: 15%; | ||
| } | ||
|
|
||
| nav input { | ||
| display: none; | ||
| } | ||
|
|
||
| nav a { | ||
| text-decoration: none; | ||
| color: rgb(200, 200, 200); | ||
| display: block; | ||
| padding: 1em 1em; | ||
| border-bottom: 1px solid rgb(90, 90, 90); | ||
| } | ||
|
|
||
| nav a:hover { | ||
| background-color: rgb(200, 200, 200); | ||
| color: rgb(79, 79, 79); | ||
| } | ||
|
|
||
| nav ul { | ||
| display: none; | ||
| list-style-type: none; | ||
| } | ||
|
|
||
| nav input:checked + ul { | ||
| display: block; | ||
| } | ||
|
|
||
| nav ul > li ul { | ||
|
Owner
There was a problem hiding this comment. Zdecydowanie łatwiej i czytelniej użyć odpowiedniej klasy :P |
||
| display: block; | ||
| } | ||
|
|
||
| nav ul { | ||
| background-color: rgb(100, 100, 100); | ||
| } | ||
|
|
||
| nav li > ul a { | ||
| padding-left: 2em; | ||
| } | ||
|
|
||
| @media (min-width: 630px) { | ||
| nav { | ||
| display: flex; | ||
| justify-content: center; | ||
| font-size: 1.3em; | ||
| } | ||
| nav label { | ||
| display: none; | ||
| } | ||
|
|
||
| nav input:checked + ul, | ||
| nav > ul { | ||
| display: flex; | ||
| flex-direction: row; | ||
| position: relative; | ||
| column-gap: 2em; | ||
| padding: 0 2em; | ||
| } | ||
|
|
||
| nav ul li ul { | ||
| display: none; | ||
| } | ||
|
|
||
| nav ul li:hover ul { | ||
| display: block; | ||
| position: absolute; | ||
| } | ||
| } | ||
Oops, something went wrong.
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.
👍