-
Notifications
You must be signed in to change notification settings - Fork 192
training done #164
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
training done #164
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,26 @@ | ||
| * { | ||
| 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; | ||
| } | ||
| 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); | ||
| margin-right: 20px; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,16 @@ | ||
| <!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"> | ||
| <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" /> | ||
| <title>devmentor.pl - HTML & CSS: RWD - #02</title> | ||
|
|
||
| <link rel="stylesheet" href="./styles/global.css"> | ||
| </head> | ||
| <body> | ||
| <link rel="stylesheet" href="./styles/global.css" /> | ||
| </head> | ||
| <body> | ||
| <header class="a">A</header> | ||
| <section class="c">C</section> | ||
| <main class="b">B</main> | ||
| </body> | ||
| </html> | ||
| </body> | ||
| </html> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,48 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
| body { | ||
| display: grid; | ||
| grid-template-areas: | ||
| "a" | ||
| "b" | ||
| "c"; | ||
| } | ||
| @media (min-width: 600px) { | ||
| body { | ||
| grid-template-areas: | ||
| "a a" | ||
| "c b"; | ||
| } | ||
| } | ||
|
|
||
| .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; | ||
| height: 50svh; | ||
| max-width: 1200px; | ||
| } | ||
|
|
||
| .a { | ||
| border-color: #ffffba | ||
| border-color: #ffffba; | ||
| grid-area: a; | ||
| /* justify-self: center; */ | ||
| } | ||
|
|
||
| .b { | ||
| border-color: #ffdfba; | ||
| border-color: #ffdfba; | ||
| grid-area: b; | ||
| } | ||
|
|
||
| .c { | ||
| border-color: #baffc9; | ||
| } | ||
| border-color: #baffc9; | ||
| grid-area: c; | ||
| } | ||
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,54 @@ | ||
| <!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"> | ||
| <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" /> | ||
| <title>devmentor.pl - HTML & CSS: RWD - #03</title> | ||
| </head> | ||
| <body> | ||
|
|
||
| <main class="t">T</main> | ||
| <header class="p">P</header> | ||
| <side class="v">V</side> | ||
|
|
||
| </body> | ||
| </html> | ||
| </head> | ||
| <body> | ||
| <main class="t"> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur sapiente | ||
| fugit ipsum nulla autem exercitationem quas sed doloremque quibusdam iste | ||
| porro eos, repellat sequi quae expedita voluptatum ut facilis deserunt nam | ||
| quo rem? Quibusdam maiores consequatur tempora asperiores voluptas, ex | ||
| eligendi ullam totam nostrum ipsum voluptate deleniti ipsam doloribus sed. | ||
| Placeat recusandae iure, ullam iste beatae eveniet suscipit impedit, hic | ||
| perferendis sunt nulla quibusdam dolor maiores exercitationem quisquam | ||
| voluptates? Amet modi doloribus reiciendis. Libero assumenda, ea nemo, | ||
| tempore eum debitis sit omnis explicabo provident, perspiciatis dolores | ||
| similique! Voluptate porro ex quasi ab, iure et accusantium minima | ||
| adipisci commodi, omnis explicabo! Dignissimos ab, recusandae maiores | ||
| dolorem minus consectetur repellendus, tenetur deleniti corrupti nostrum | ||
| accusantium beatae repellat quas maxime voluptates! Qui, ipsum maxime. | ||
| Suscipit laboriosam repellat esse officiis aut at totam maiores doloremque | ||
| recusandae quae commodi nam deserunt, aliquid veritatis dolore blanditiis | ||
| error et sit unde, ea neque quod eveniet corrupti quaerat? Hic quaerat | ||
| deleniti inventore sint eum ipsa illo nesciunt soluta ut possimus, neque | ||
| accusamus doloremque cupiditate adipisci, ullam nobis animi voluptatibus | ||
| saepe libero beatae voluptate quam. Ducimus cumque fugiat qui similique | ||
| animi rerum sequi itaque! Assumenda quis veniam quibusdam aut. Laudantium, | ||
| quas qui. Totam, illo ipsam aperiam consequatur in obcaecati! | ||
| </main> | ||
| <header class="p"> | ||
| <picture> | ||
| <source srcset="./img/img-600.jpg" media="(max-width: 600px)" /> | ||
| <source srcset="./img/img-1200.jpg" media="(max-width: 1200px)" /> | ||
| <source srcset="./img/img-1900.jpg" media="(min-width: 1201px)" /> | ||
| <img src="./img/img-1900.jpg" alt="lake in the mountains" /> | ||
| </picture> | ||
| </header> | ||
| <div class="v"> | ||
| <iframe | ||
| src="https://www.youtube.com/embed/Gf5rSeTKpj4?si=-phDBkDhypmss-GY&mute=1" | ||
| 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> | ||
| </div> | ||
| </body> | ||
| </html> | ||
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,62 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
| body { | ||
| display: grid; | ||
| grid-template-areas: | ||
| "p" | ||
| "t" | ||
| "v"; | ||
| } | ||
|
|
||
| .p, .t, .v { | ||
| border: 3px solid transparent; | ||
| min-height: 50px; | ||
| @media (min-width: 600px) { | ||
| body { | ||
| grid-template-areas: | ||
| "p t" | ||
| "v t"; | ||
| } | ||
| } | ||
| @media (min-width: 1200px) { | ||
| body { | ||
| display: grid; | ||
| grid-template-areas: | ||
| "p v" | ||
| "t t"; | ||
| } | ||
| } | ||
| .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; | ||
| } | ||
| img { | ||
| max-width: 100%; | ||
| height: auto; | ||
| } | ||
|
|
||
| iframe { | ||
| width: 100%; | ||
| min-width: 200px; | ||
| aspect-ratio: 16/8; | ||
| } | ||
| .t { | ||
| border-color: #ffdfba; | ||
| border-color: #ffdfba; | ||
| grid-area: t; | ||
| } | ||
|
|
||
| .v { | ||
| border-color: #baffc9; | ||
| } | ||
| border-color: #baffc9; | ||
| grid-area: v; | ||
| } | ||
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,60 @@ | ||
| <!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"> | ||
| <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" | ||
| href="./styles/mobile.css" | ||
| media="(max-width: 700px)" | ||
| /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="./styles/desktop.css" | ||
| media="(min-width: 701px)" | ||
| /> | ||
| <title>devmentor.pl - HTML & CSS: RWD - #04</title> | ||
| </head> | ||
| <body> | ||
|
|
||
| <nav> | ||
| <ul> | ||
| <li> | ||
| <a href="#">start</a> | ||
| </head> | ||
| <body> | ||
| <nav class="navbar"> | ||
| <div class="navbar__logo"> | ||
| <img | ||
| class="navbar__logo-img" | ||
| src="./assets/logo.png" | ||
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Uwaga na wielkość liter. Plik graficzny ma zapisane rozszerzone WIELKIMI literami. Na systema UNIX (linux, macos) ma to znaczenie. |
||
| alt="NG Dev logo" | ||
| /> | ||
| </div> | ||
| <!-- Hamburger toggle --> | ||
| <input type="checkbox" id="navbar__hamburger-toggle" /> | ||
| <label for="navbar__hamburger-toggle" class="navbar__hamburger"> | ||
| ☰ | ||
| </label> | ||
| <!-- --> | ||
| <ul class="navbar__list"> | ||
| <li class="navbar__list-item"> | ||
| <a class="navbar__link" href="#">start</a> | ||
| </li> | ||
| <li class="navbar__list-item navbar__list-item--sublist"> | ||
| <a class="navbar__link" href="#">oferta</a> | ||
| <ul class="navbar__list--sublist"> | ||
| <li class="navbar__list-item"> | ||
| <a class="navbar__link navbar__link--sublink" href="" | ||
| >strony internetowe</a | ||
| > | ||
| </li> | ||
| <li> | ||
| <a href="#">oferta</a> | ||
| <ul> | ||
| <li><a href="">strony internetowe</a></li> | ||
| <li><a href="">pozycjonowanie stron www</a></li> | ||
| </ul> | ||
| <li class="navbar__list-item"> | ||
| <a class="navbar__link navbar__link--sublink" href="" | ||
| >pozycjonowanie stron www</a | ||
| > | ||
| </li> | ||
| <li> | ||
| <a href="#">kontakt</a> | ||
| </li> | ||
| </ul> | ||
| </ul> | ||
| </li> | ||
| <li class="navbar__list-item"> | ||
| <a class="navbar__link" href="#">kontakt</a> | ||
| </li> | ||
| </ul> | ||
|
Owner
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||
| </nav> | ||
|
|
||
| </body> | ||
| </html> | ||
| </body> | ||
| </html> | ||
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.
👍