-
Notifications
You must be signed in to change notification settings - Fork 238
Zadania ukończone #203
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?
Zadania ukończone #203
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 |
|---|---|---|
|
|
@@ -5,8 +5,122 @@ | |
| <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 BASICS - #01</title> | ||
| <style> | ||
| /* Dodałem ostylowanie, żeby nie oślepnąć od ekranu */ | ||
| body { | ||
| background-color: #767676; | ||
| font-family: sans-serif; | ||
| } | ||
|
|
||
| table, th, td { | ||
| border: 1px solid black; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
|
|
||
| <header> | ||
| <img class="logo" src="" alt="LOGO"> | ||
| <nav class="navbar"> | ||
| <ul class="main-menu"> | ||
| <li><a href="index.html">HOME</a></li> | ||
| <li><a href="index.html">ABOUT ME</a></li> | ||
| <li><a href="#">WORK</a> | ||
| <ul> | ||
| <li><a href="#">PHOTO</a> | ||
| <ul> | ||
| <li><a href="">ICELAND</a></li> | ||
| <li><a href="">ARGENTINA</a></li> | ||
| <li><a href="">POLAND</a></li> | ||
| </ul> | ||
| </li> | ||
| <li><a href="#">DESIGN</a></li> | ||
| <li><a href="#">ANIMATIONS</a></li> | ||
| <li><a href="#">WEB</a></li> | ||
| </ul> | ||
| </li> | ||
| <li><a href="#">CONTACT</a></li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main> | ||
|
|
||
| <article class="article"> | ||
| <h2>Lorem ipsum dolor</h2> | ||
| <img src="" alt="PICTURE"> | ||
|
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. Można też dodać |
||
| <p> | ||
| Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus aspernatur enim nisi quia illo, porro autem, repudiandae impedit error, odit excepturi dolor deleniti aperiam provident non accusamus! Facilis ut ex debitis natus. Similique molestiae modi id eos laboriosam sint repellendus possimus numquam perferendis magnam. Suscipit aliquam tenetur incidunt asperiores itaque deleniti dolor. Corrupti incidunt dolores libero, exercitationem dicta suscipit cum architecto quia. Ex repudiandae laboriosam natus aliquam perspiciatis dignissimos aspernatur! | ||
| </p> | ||
| <address>Author: Marek Bełz | ||
| <time datetime="2024-07-28">28.07.24</time> | ||
| </address> | ||
|
|
||
| <table> | ||
| <caption>Important Table</caption> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">Title-1</th> | ||
| <th scope="col">Title-2</th> | ||
| <th scope="col">Title-3</th> | ||
| <th scope="col">Title-4</th> | ||
| <th scope="col">Title-5</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <th scope="row">Title-1-2</th> | ||
| <td>DATA</td> | ||
| <td>DATA</td> | ||
| <td>DATA</td> | ||
| <td>DATA</td> | ||
| </tr> | ||
| <tr> | ||
| <th scope="row">Title-1-3</th> | ||
| <td>DATA</td> | ||
| <td>DATA</td> | ||
| <td>DATA</td> | ||
| <td>DATA | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </article> | ||
|
|
||
| <section class="comment-section"> | ||
| <form action=""> | ||
| <h5>Comment:</h5> | ||
| <div> | ||
| <textarea placeholder="Comment!" name="comments" id="comments" rows="10" cols="50"></textarea> | ||
| </div> | ||
| <input type="submit"> | ||
| </form> | ||
| <div class="comment-history"> | ||
| <div class="comment" id="last-comment"> | ||
|
Comment on lines
+98
to
+99
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. Każdy komentarz może być |
||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, illo alias. Perferendis, doloremque animi qui voluptates quidem itaque veritatis. Magnam vero cum minus excepturi! Fugiat nihil voluptatem facilis, accusantium ipsam porro possimus cum non quidem beatae dolorum culpa nam sunt. | ||
| </p> | ||
| <address>Author: Marek Bełz | ||
| <time datetime="2024-07-28">28.07.24</time> | ||
| </address> | ||
| </div> | ||
| <div class="comment"> | ||
| <p> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, illo alias. Perferendis, doloremque animi qui voluptates quidem itaque veritatis. Magnam vero cum minus excepturi! Fugiat nihil voluptatem facilis, accusantium ipsam porro possimus cum non quidem beatae dolorum culpa nam sunt. | ||
| </p> | ||
| <address>Author: Marek Bełz | ||
| <time datetime="2024-07-28">28.07.24</time> | ||
| </address> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <footer> | ||
| <p>© 2024 Marek Bełz</p> | ||
| </footer> | ||
|
|
||
|
|
||
| </main> | ||
|
|
||
| </body> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,7 +7,7 @@ | |
| Znacznik label, którego przodkiem jest klasa .ac-container | ||
| (0, 1, 1) | ||
| */ | ||
| ?? { | ||
| .ac-container label { | ||
| height: 30px !important; | ||
| line-height: 21px !important; | ||
| font-size: 12px !important; | ||
|
|
@@ -47,7 +47,7 @@ Zmiana koloru tła po najechaniu przez kursor myszy na znacznik label, | |
| który znajduje się wewnątrze elementu o klasie .ac-container | ||
| (0, 2, 1) | ||
| */ | ||
| ?? { | ||
| .ac-container label:hover { | ||
| background: #fff; | ||
| } | ||
|
|
||
|
|
@@ -61,8 +61,8 @@ i ten brat musi posiadać przodka o klasie .ac-container | |
| to samo co w 1) ale z efektem najechania kursorem na label | ||
| (0, 3, 2) | ||
| */ | ||
| ??, | ||
| ?? { | ||
| .ac-container input:checked + label, | ||
| .ac-container input:checked + label:hover { | ||
| background: #f1f2f3; | ||
| color: #666; | ||
| text-shadow: 0 1px 1px rgba(255,255,255,0.6); | ||
|
|
@@ -89,7 +89,8 @@ którego poprzedni brat jest zaznaczonym inputem (użyj pseudoklasy), | |
| którego przodek to element o klasie .ac-container | ||
| (0, 3, 3) | ||
| */ | ||
| ?? { | ||
| .ac-container input:checked + label:hover:after | ||
| { | ||
| background-image: url(../images/arrow_up.png); | ||
| } | ||
|
|
||
|
|
@@ -126,7 +127,7 @@ Rodzeństwo o typie article, dla elementu input, który jest zaznaczony (użyj p | |
| oraz posiada przodka o klasie .ac-container | ||
| (0, 2, 2) | ||
| */ | ||
| ?? { | ||
| .ac-container input:checked ~ article { | ||
|
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. 👍 |
||
| -webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; | ||
| -moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; | ||
| -o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent;} | ||
|
|
||
| main, article, aside, figure, footer, header, nav, section, details, summary {display: block;} | ||
|
|
||
| html {box-sizing: border-box;} | ||
|
|
||
| *, *:before, *:after {box-sizing: inherit;} | ||
|
|
||
| img {max-width: 100%;} | ||
|
|
||
| ul {list-style: none;} /* we'll restore bullets as needed for content */ | ||
|
|
||
| blockquote, q {quotes: none;} | ||
|
|
||
| blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} | ||
|
|
||
| a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;} | ||
|
|
||
| del {text-decoration: line-through;} | ||
|
|
||
| abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;} | ||
|
|
||
| table {border-collapse: separate; border-spacing: 0; text-align: left;} | ||
| th {font-weight: bold; vertical-align: bottom;} | ||
| td {font-weight: normal; vertical-align: top;} | ||
| td img {vertical-align: top;} | ||
|
|
||
| hr {display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1rem 0; padding: 0;} | ||
|
|
||
| input, select {vertical-align: middle;} | ||
|
|
||
| pre {white-space: pre-line;} | ||
|
|
||
| input[type="radio"] {vertical-align: text-bottom;} | ||
| input[type="checkbox"] {vertical-align: bottom;} | ||
|
|
||
| small {font-size: .8rem;} | ||
|
|
||
| strong {font-weight: bold;} | ||
|
|
||
| sub, sup {font-size: .8rem; line-height: 0; position: relative;} | ||
| sup {top: -0.5rem;} | ||
| sub {bottom: -0.25rem;} | ||
|
|
||
| pre, code, kbd, samp {font-family: monospace, sans-serif;} | ||
|
|
||
| label, input[type=button], input[type=submit], input[type=file], button {cursor: pointer;} | ||
|
|
||
| button, input, select, textarea {margin: 0;} | ||
|
|
||
| ins {background-color: var(--highlight-color); color: #000; text-decoration: none;} | ||
| mark {background-color: var(--highlight-color); color: #000; font-style: italic; font-weight: bold;} | ||
|
|
||
| blockquote {padding: 2rem; border-left: 1px solid #333;} | ||
|
|
||
| .clearfix:after {content: ""; display: table; clear: both;} /* https://css-tricks.com/snippets/css/clear-fix/ */ | ||
|
|
||
| h1, h2, h3, h4, h5, h6 {text-wrap: balance} | ||
|
|
||
| p {text-wrap: pretty;} | ||
|
|
||
| @media (prefers-reduced-motion: no-preference) { | ||
| :has(:target) { | ||
| scroll-behavior: smooth; | ||
| } | ||
| } | ||
|
|
||
| /* ———— END THE GENERIC RESETS ———— */ | ||
|
|
||
| :root { | ||
| --font-system: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* https://css-tricks.com/snippets/css/system-font-stack */ | ||
| --text-color: #333; | ||
| --featured-color: #03f; | ||
| --featured-color-hover: #69f; | ||
| --highlight-color: #fcd700; | ||
| } | ||
|
|
||
| body {font-size: 16px; font-family: var(--font-system); color: var(--text-color);} | ||
|
|
||
| a {color: var(--featured-color);} | ||
| a:hover {color: var(--featured-color-hover);} | ||
|
|
||
| @media screen and (max-width: 480px) { | ||
|
|
||
| } | ||
|
|
||
| @media print { | ||
|
|
||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
|
|
||
|
|
||
| .parent { | ||
| width: 600px; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .child { | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| .child--first { | ||
| width: calc(30% - 20px); | ||
| font-family: 'Source Sans Pro', sans-serif; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| .child--middle { | ||
| width: calc(30% - 20px); | ||
| font-family: 'Source Sans Pro', sans-serif; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .child--last { | ||
| width: 40%; | ||
| font-family: 'Source Sans Pro', sans-serif; | ||
| font-style: Italic; | ||
| } | ||
|
|
||
|
|
||
| .parent--inline-block .child { | ||
| display: inline-block; | ||
| vertical-align: top; | ||
| } | ||
|
|
||
| .parent--inline-block .child:last-child { | ||
| margin-right: 0; | ||
| } | ||
|
|
||
|
|
||
| .parent--float .child { | ||
| float: left; | ||
| } | ||
|
|
||
| .parent--float::after { | ||
| content: ""; | ||
| display: block; | ||
| clear: both; | ||
| } | ||
|
|
||
| .parent--float .child:last-child { | ||
| margin-right: 0; | ||
| } | ||
|
|
||
| .parent--flexbox { | ||
| display: flex; | ||
| } | ||
|
|
||
| .parent--flexbox .child:last-child { | ||
| margin-right: 0; | ||
| } | ||
|
|
||
|
|
||
| @font-face { | ||
| font-family: ; | ||
| src: url(); | ||
| } | ||
|
Comment on lines
+64
to
+67
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. Tutaj zabrakło podłączenia odpowiednich plików. |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| <link rel="stylesheet" href="reset.css"> | ||
| <link rel="stylesheet" href="styles.css"> | ||
| </head> | ||
| <body> | ||
| <ul class="nav"> | ||
| <li class="nav__item">HOME</li> | ||
| <li class="nav__item">ITEMS | ||
| <i>></i> | ||
| <ul class="nav__dropdown"> | ||
| <li class="dropdown__item">Item 1</li> | ||
|
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. Jeśli korzystamy z BEM to zawsze w hierarchii musi być Block (nawet jeśli go nie stylujemy) - tutaj zabrakło |
||
| <li class="dropdown__item">Item 2 | ||
| <i class="arrow-right">></i> | ||
| <ul class="nav__dropdown nav__dropdown-2"> | ||
| <li class="dropdown__item">Item 2.1</li> | ||
| <li class="dropdown__item">Item 2.2</li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| <li class="nav__item">SETTINGS</li> | ||
| <li class="nav__item">CONTACT</li> | ||
| </ul> | ||
| </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.
👍