-
Notifications
You must be signed in to change notification settings - Fork 238
resolved tasks 1-5 #207
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?
resolved tasks 1-5 #207
Changes from all commits
515e253
9af3460
84f13a3
4783512
3521093
e2803b0
3e2ec23
432b6e5
c6b3dbf
0ef9506
5ad7542
4345d5b
c4992f7
9699c4e
06c1890
61178b7
4ee1ff7
242be2b
c914dae
52f27e7
62fe56a
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,16 +5,13 @@ | |
| <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 - #03</title> | ||
|
|
||
| <link rel="stylesheet" href="styles/style.css"> | ||
| </head> | ||
| <body> | ||
|
|
||
| <section class="parent parent--inline-block"> | ||
| <div class="child child--first"> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.</div> | ||
| <div class="child child--middle"> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!</div> | ||
| <div class="child child--last"> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?</div> | ||
| <div class="child child--first">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.</div><div class="child child--middle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!</div><div class="child child--last">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?</div> | ||
|
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ć komentarze, aby było to bardziej czytelne tj. W takim wypadku zawartość komentarze nie jest interpretowana przez przeglądarkę. |
||
| </section> | ||
|
|
||
| <section class="parent parent--float"> | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
|
|
||
| @font-face { | ||
| font-family: 'Source Sans Pro'; | ||
| src: url('fonts/sourcesanspro-regular-webfont.woff2') format('woff2'), | ||
| url('fonts/sourcesanspro-regular-webfont.woff') format('woff'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
|
|
||
| } | ||
|
|
||
|
|
||
|
|
||
| .parent { | ||
| width: 600px; | ||
| padding: 20px; | ||
|
|
||
| } | ||
|
|
||
| .parent--inline-block div { | ||
| display: inline-block; | ||
|
|
||
| } | ||
|
|
||
| .parent--float div { | ||
| float: left; | ||
| } | ||
|
|
||
| .parent--float::after { | ||
| content: ''; | ||
| display: block; | ||
| clear: both; | ||
| } | ||
|
|
||
| .parent--flexbox { | ||
| display: flex; | ||
| } | ||
|
|
||
| .child { | ||
|
|
||
| margin-right: 10px; | ||
| font-family: 'Source Sans Pro'; | ||
| } | ||
|
|
||
| .child--first, .child--middle { | ||
| max-width: calc(30% - 10px); | ||
| } | ||
|
|
||
| .child--first { | ||
| font-style: normal; | ||
| } | ||
|
|
||
| .child--middle { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .child--last { | ||
| /* max-width: calc(40% - 10px); */ | ||
| max-width: 40%; | ||
|
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. 👍 |
||
| margin-right: 0; | ||
| font-style: italic; | ||
| } | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| <!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="./style.css"> | ||
| </head> | ||
| <body> | ||
| <nav class="navbar"> | ||
| <ul class="navbar__list"> | ||
|
|
||
| <li class="navbar__element"> | ||
| <a href="" class="navbar__link">HOME</a> | ||
| </li> | ||
|
|
||
| <li class="navbar__element navbar__element--dropdown"> | ||
| <a href="" class="navbar__link">ITEMS</a> | ||
| <ul class="navbar__dropdown dropdown"> | ||
|
|
||
| <li class="dropdown__item"> | ||
| <a href="" class="dropdown__link">Item 1</a> | ||
| </li> | ||
|
|
||
| <li class="dropdown__item dropdown__item--children"> | ||
|
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. 👍 |
||
| <a href="" class="dropdown__link">Item 2</a> | ||
| <ul class="dropdown__dropdown2 dropdown2"> | ||
|
|
||
| <li class="dropdown2__item"> | ||
| <a href="" class="dropdown2__link">Item 2.1</a> | ||
| </li> | ||
|
|
||
| <li class="dropdown2__item"> | ||
| <a href="" class="dropdown2__link">Item 2.2</a> | ||
| </li> | ||
|
|
||
| </ul> | ||
| </li> | ||
| </ul> | ||
|
|
||
| </li> | ||
|
|
||
| <li class="navbar__element"> | ||
| <a href="" class="navbar__link">SETTINGS</a> | ||
| </li> | ||
|
|
||
| <li class="navbar__element"> | ||
| <a href="" class="navbar__link">CONTACT</a> | ||
| </li> | ||
|
|
||
| </ul> | ||
| </nav> | ||
|
|
||
| </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.
👍