diff --git a/01/index.html b/01/index.html index 194076af..ec43ed54 100644 --- a/01/index.html +++ b/01/index.html @@ -1,12 +1,126 @@ + - - + + devmentor.pl - HTML & CSS BASICS - #01 + - + +
+

+ + + +
+ +
+ +
+

Tytuł dowolny tekst

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, corrupti.

+ +
+ +
Obraz abstrakcyjny
+
+ + + + + + + + + + + + + + + + + + + + + +
The table header
The table body1with two columns1
The table body2with two columns2
The table body3with two columns3
+ + + +
+ +
+ +
+
+
+
+
+
+ + + +
+ + + + \ No newline at end of file diff --git a/02/index.html b/02/index.html index 89650fad..9f554617 100644 --- a/02/index.html +++ b/02/index.html @@ -1,43 +1,94 @@ + - - + + devmentor.pl - HTML & CSS BASICS - #02 - + +
- +
-

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.

+

+ Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that + show to the people who make shows, and on the strength of that one show they decide if they're going + to make more shows. +

- +
-

Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.

+

+ Like you, I used to think the world was this great place where everybody lived by the same standards + I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not + order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing + to play by his rules, then you're gonna have to pay the price. +

- +
-

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.

+

+ You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed + the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, + I don't know exactly when we turned on each other, but I know that seven of us survived the slide... + and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the + snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. +

- +
-

You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.

+

+ You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell + everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the + future when the spacecraft encounters a black hole does the computer call it an 'unknown entry + event'? Why don't they know? If they don't know, that means we never told anyone. And if we never + told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive + logic. +

+ \ No newline at end of file diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..5755c25c 100644 --- a/02/styles/index.css +++ b/02/styles/index.css @@ -7,11 +7,11 @@ 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; - font-family: 'Open Sans','Arial Narrow',Arial,sans-serif !important; + font-family: 'Open Sans', 'Arial Narrow', Arial, sans-serif !important; padding: 5px 20px; position: relative; z-index: 20; @@ -19,18 +19,18 @@ Znacznik label, którego przodkiem jest klasa .ac-container height: 30px; cursor: pointer; color: #777; - text-shadow: 1px 1px 1px rgba(255,255,255,0.8); + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); line-height: 33px; font-size: 19px; background: #fff; - background: -moz-linear-gradient(top,#fff 1%,#eaeaea 100%); - background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#fff),color-stop(100%,#eaeaea)); - background: -webkit-linear-gradient(top,#fff 1%,#eaeaea 100%); - background: -o-linear-gradient(top,#fff 1%,#eaeaea 100%); - background: -ms-linear-gradient(top,#fff 1%,#eaeaea 100%); - background: linear-gradient(top,#fff 1%,#eaeaea 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#eaeaea',GradientType=0 ); - box-shadow: 0 0 0 1px rgba(155,155,155,0.3),1px 0 0 rgba(255,255,255,0.9) inset,0 2px 2px rgba(0,0,0,0.1); + background: -moz-linear-gradient(top, #fff 1%, #eaeaea 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #fff), color-stop(100%, #eaeaea)); + background: -webkit-linear-gradient(top, #fff 1%, #eaeaea 100%); + background: -o-linear-gradient(top, #fff 1%, #eaeaea 100%); + background: -ms-linear-gradient(top, #fff 1%, #eaeaea 100%); + background: linear-gradient(top, #fff 1%, #eaeaea 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#eaeaea', GradientType=0); + box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3), 1px 0 0 rgba(255, 255, 255, 0.9) inset, 0 2px 2px rgba(0, 0, 0, 0.1); font-size: 12px; height: 30px; line-height: 20px; @@ -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,19 +61,19 @@ 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 label:checked+label, +.ac-container label:checked+label:hover { background: #f1f2f3; color: #666; - text-shadow: 0 1px 1px rgba(255,255,255,0.6); - box-shadow: 0 0 0 1px rgba(155,155,155,0.3),0 2px 2px rgba(0,0,0,0.1); + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); + box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3), 0 2px 2px rgba(0, 0, 0, 0.1); height: 30px; line-height: 21px; font-size: 13px; } .ac-container label:hover:after, -.ac-container input:checked + label:hover:after { +.ac-container input:checked+label:hover:after { content: ''; position: absolute; width: 24px; @@ -89,7 +89,7 @@ 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); } @@ -98,17 +98,17 @@ którego przodek to element o klasie .ac-container } .ac-container article { - background: rgba(255,255,255,0.5); + background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; height: 0; position: relative; z-index: 10; - -webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; - -moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; - -o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; - -ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear; - transition: height 0.3s ease-in-out,box-shadow 0.6s linear; + -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; + -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; + -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; + -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear; + transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container article p { @@ -117,7 +117,7 @@ którego przodek to element o klasie .ac-container line-height: 23px; font-size: 10px; padding: 20px; - text-shadow: 1px 1px 1px rgba(255,255,255,0.8); + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); font: normal normal 12px 'Open Sans'; } @@ -126,23 +126,23 @@ 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) */ -?? { - -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; - -ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear; - transition: height 0.5s ease-in-out,box-shadow 0.1s linear; - box-shadow: 0 0 0 1px rgba(155,155,155,0.3); +.ac-container input:checked~article { + -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; + -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear; + transition: height 0.5s ease-in-out, box-shadow 0.1s linear; + box-shadow: 0 0 0 1px rgba(155, 155, 155, 0.3); } -.ac-container input:checked ~ article.ac-small { +.ac-container input:checked~article.ac-small { height: 140px; } -.ac-container input:checked ~ article.ac-medium { +.ac-container input:checked~article.ac-medium { height: 180px; } -.ac-container input:checked ~ article.ac-large { +.ac-container input:checked~article.ac-large { height: 230px; } \ No newline at end of file diff --git a/03/fonts/SourceSansPro-Bold.otf b/03/fonts/SourceSansPro-Bold.otf new file mode 100644 index 00000000..98dbee74 Binary files /dev/null and b/03/fonts/SourceSansPro-Bold.otf differ diff --git a/03/fonts/SourceSansPro-It.otf b/03/fonts/SourceSansPro-It.otf new file mode 100644 index 00000000..2d627d9c Binary files /dev/null and b/03/fonts/SourceSansPro-It.otf differ diff --git a/03/fonts/SourceSansPro-Regular.otf b/03/fonts/SourceSansPro-Regular.otf new file mode 100644 index 00000000..bdcfb27a Binary files /dev/null and b/03/fonts/SourceSansPro-Regular.otf differ diff --git a/03/fonts/fs/SourceSansPro-Bold.woff b/03/fonts/fs/SourceSansPro-Bold.woff new file mode 100644 index 00000000..9b48002b Binary files /dev/null and b/03/fonts/fs/SourceSansPro-Bold.woff differ diff --git a/03/fonts/fs/SourceSansPro-Bold.woff2 b/03/fonts/fs/SourceSansPro-Bold.woff2 new file mode 100644 index 00000000..75e49e88 Binary files /dev/null and b/03/fonts/fs/SourceSansPro-Bold.woff2 differ diff --git a/03/fonts/fs/SourceSansPro-It.woff b/03/fonts/fs/SourceSansPro-It.woff new file mode 100644 index 00000000..a5c47a32 Binary files /dev/null and b/03/fonts/fs/SourceSansPro-It.woff differ diff --git a/03/fonts/fs/SourceSansPro-It.woff2 b/03/fonts/fs/SourceSansPro-It.woff2 new file mode 100644 index 00000000..9b7b2b29 Binary files /dev/null and b/03/fonts/fs/SourceSansPro-It.woff2 differ diff --git a/03/fonts/fs/SourceSansPro-Regular.woff b/03/fonts/fs/SourceSansPro-Regular.woff new file mode 100644 index 00000000..dab14f02 Binary files /dev/null and b/03/fonts/fs/SourceSansPro-Regular.woff differ diff --git a/03/fonts/fs/SourceSansPro-Regular.woff2 b/03/fonts/fs/SourceSansPro-Regular.woff2 new file mode 100644 index 00000000..3f890f7e Binary files /dev/null and b/03/fonts/fs/SourceSansPro-Regular.woff2 differ diff --git a/03/index.html b/03/index.html index 0c018343..b61b77a7 100644 --- a/03/index.html +++ b/03/index.html @@ -1,19 +1,34 @@ + - - + + devmentor.pl - HTML & CSS BASICS - #03 + + + - +
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
-
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
@@ -35,4 +50,5 @@ Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure? + \ No newline at end of file diff --git a/03/style/index.css b/03/style/index.css new file mode 100644 index 00000000..de25d1c9 --- /dev/null +++ b/03/style/index.css @@ -0,0 +1,67 @@ +@font-face { + font-family: 'SourceSansPro'; + src: url('./../fonts/fs/SourceSansPro-Bold.woff2') format('woff2'), + url('./../fonts/fs/SourceSansPro-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'SourceSansPro'; + src: url('./../fonts/fs/SourceSansPro-Regular.woff2') format('woff2'), + url('./../fonts/fs/SourceSansPro-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'SourceSansPro'; + src: url('./../fonts/fs/SourceSansPro-It.woff2') format('woff2'), + url('./../fonts/fs/SourceSansPro-It.woff') format('woff'); + font-weight: normal; + font-style: italic; +} + +.parent { + width: 600px; + padding: 20px; + font-family: 'SourceSansPro'; +} + +.parent--inline-block {} + +.parent--float { + font-weight: bold; +} + +.parent--flexbox { + font-style: italic; +} + +.parent--inline-block .child { + display: inline-block; + white-space: wrap; +} + +.parent--float::after { + content: ""; + display: block; + clear: both; +} + +.parent--float .child { + float: left; +} + +.parent--flexbox { + display: flex; +} + +.child--first, .child--middle { + width: calc(30% - 10px); + margin-right: 10px; +} + +.child--last { + width: 40%; +} \ No newline at end of file diff --git a/04/index.html b/04/index.html new file mode 100644 index 00000000..24c4b4c7 --- /dev/null +++ b/04/index.html @@ -0,0 +1,90 @@ + + + + + + + Document + + + + + + + + + + + + \ No newline at end of file diff --git a/04/style/index.css b/04/style/index.css new file mode 100644 index 00000000..1ca161e8 --- /dev/null +++ b/04/style/index.css @@ -0,0 +1,94 @@ +body { + background: #F4F4F4; +} + +.menu { + background-color: #fff; + display: flex; + margin: 20px; + font-size: 18px; + font-family: "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; +} + +.home_font-color { + color: #009AE1; +} + +.menu__item { + padding: 15px 20px; + border-top: 4px solid transparent; +} + +.menu__item:hover { + border-top-color: #009AE1; + color: #009AE1; +} + +.menu__dropdown { + position: relative; +} + +.menu__dropdown::after { + content: '>'; + position: absolute; + right: 2px; + top: 13px; + transform: rotate(90deg); +} + +.menu__dropdown:hover>.dropdown { + display: block; +} + +.dropdown { + position: absolute; + background-color: #333333; + top: 100%; + left: 0; + min-width: 200px; + display: none; +} + +.dropdown__item { + padding: 10px 20px; +} + +.menu__dropdown-right { + position: relative; +} + +.menu__dropdown-right::after { + content: '>'; + position: absolute; + right: 2px; + top: 13px; + color: #fff; +} + +.menu__dropdown-right:hover>.dropdown-right { + display: block; +} + + +.dropdown__link { + color: #fff; + text-decoration: none; +} + +.dropdown-right { + position: absolute; + background-color: #333333; + left: 100%; + top: 0; + min-width: 200px; + display: none; +} + +.dropdown-right__item { + padding: 10px 20px; +} + +.dropdown-right__link { + color: #fff; + text-decoration: none; +} \ No newline at end of file diff --git a/04/style/reset.css b/04/style/reset.css new file mode 100644 index 00000000..fa48d93d --- /dev/null +++ b/04/style/reset.css @@ -0,0 +1,114 @@ +/* https://github.com/alex-e-leon/reset-css-complete */ + +/* General reset */ +html, body, div, span, applet, object, iframe, +input, button, select, optgroup, textarea, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + background: none; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + /* line-height is set by :root */ + line-height: inherit; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +a { + color: inherit; + text-decoration: none; +} + +s, u { + text-decoration: none; +} + +select { + appearance: none; + -webkit-appearance: none; +} + +input[type="submit"], +button { + width: auto; + overflow: visible; + cursor: pointer; + line-height: inherit; + color: inherit; + + /* Corrects inability to style clickable `input` types in iOS */ + appearance: none; +} + +button::-moz-focus-inner { + /* Remove excess padding and border in Firefox 4+ */ + border: 0; + padding: 0; +} + +/* safari requires some special resets for input type="search" */ +input[type="search"] { + -webkit-appearance: textfield; +} +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* ie 11 has it's own magic font-size rules for sub and sup */ +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + sub, sup {font-size:120%;} +} + +/* some sensible global styles */ +:root { + /* prevents mobile browsers from sometimes scaling text */ + text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +/* sets box-sizing back to the sane border-box for all elements */ +*, +*::before, +*::after { + box-sizing: border-box; +} diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..f6b1891f --- /dev/null +++ b/05/index.html @@ -0,0 +1,49 @@ + + + + + + + Document + + + + + + +
+
+

+ +
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/05/style/styl.css b/05/style/styl.css new file mode 100644 index 00000000..567e3554 --- /dev/null +++ b/05/style/styl.css @@ -0,0 +1,65 @@ +.green { + border: 5px solid #0ED145; + margin: 5px 0; +} + +.green--header .blue { + display: flex; + justify-content: space-between; + padding: 5px 0; +} + +.green--main .orange { + min-height: 200px; +} + +.blue { + border: 5px solid #00A8F3; + max-width: 1000px; + margin: 5px auto; +} + +.orange { + background-color: #FFCA18; + min-height: 50px; +} + +.orange--logo { + width: 150px; + margin: 0; +} + +.orange--nav { + width: 450px; +} + +.green--main .blue { + display: flex; + justify-content: space-between; + padding: 5px 0; +} + +.green--main .orange { + width: 49%; +} + +.green--section .blue { + display: flex; + justify-content: space-around; + padding: 10px 0; +} + +.green--section .orange { + width: 30%; + min-height: 300px; +} + +.green--footer .blue { + display: flex; + justify-content: center; +} + +.green--footer .orange { + width: 100px; + margin: 5px 0; +} \ No newline at end of file