diff --git a/01/fireworks-9220290_640.jpg b/01/fireworks-9220290_640.jpg new file mode 100644 index 00000000..0e5bf311 Binary files /dev/null and b/01/fireworks-9220290_640.jpg differ diff --git a/01/index.html b/01/index.html index 194076af..49f420cf 100644 --- a/01/index.html +++ b/01/index.html @@ -1,12 +1,94 @@ - - - - + + + + devmentor.pl - HTML & CSS BASICS - #01 - - - - - \ No newline at end of file + + +
+ + +
+
+

Tytuł artykułu

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Perspiciatis, reprehenderit libero hic rerum facilis dolor autem + alias vero nisi quae illum sapiente iusto optio. Cupiditate quisquam + distinctio enim tempore eos. +

+

Data publikacji: 29.12.2024r

+

Autor: Jan Kowalski

+
+ Opis ilustracji +
Ilustracja do artykułu
+
+ + + + + + + + + + + + + + + + + + + + +
Nagłówek 1Nagłówek 2Nagłówek 3
Dane 1Dane 2Dane 3
Dane 4Dane 5Dane 6
+
+
+

formularz do komentowania,

+ +
+
+

Komentarze

+
+

Autor: Anna Nowak

+

Data: 29.12.2024r

+

Świetny artykuł

+
+
+

Autor: Piotr Wiśniewski

+

Data: 27 grudnia 2024

+

Podoba mi się sposób przedstawienia informacji.

+
+
+
+ +
+ + diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..253b466c 100644 --- a/02/styles/index.css +++ b/02/styles/index.css @@ -1,45 +1,52 @@ /*Acco*/ .ac-container { - max-width: 400px; + max-width: 400px; } /* Znacznik label, którego przodkiem jest klasa .ac-container (0, 1, 1) */ -?? { - height: 30px !important; - line-height: 21px !important; - font-size: 12px !important; - font-family: 'Open Sans','Arial Narrow',Arial,sans-serif !important; - padding: 5px 20px; - position: relative; - z-index: 20; - display: block; - height: 30px; - cursor: pointer; - color: #777; - 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); - font-size: 12px; - height: 30px; - line-height: 20px; +.ac-container label { + height: 30px !important; + line-height: 21px !important; + font-size: 12px !important; + font-family: 'Open Sans', 'Arial Narrow', Arial, sans-serif !important; + padding: 5px 20px; + position: relative; + z-index: 20; + display: block; + height: 30px; + cursor: pointer; + color: #777; + 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); + font-size: 12px; + height: 30px; + line-height: 20px; } .ac-container { - width: 100%; - margin: 10px auto 30px auto; - text-align: left; + width: 100%; + margin: 10px auto 30px auto; + text-align: left; } /* @@ -47,8 +54,8 @@ 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) */ -?? { - background: #fff; +.ac-container label:hover { + background: #fff; } /* @@ -61,26 +68,25 @@ 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) */ -??, -?? { - 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); - height: 30px; - line-height: 21px; - font-size: 13px; +.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); + 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 { - content: ''; - position: absolute; - width: 24px; - height: 24px; - right: 13px; - top: 7px; - background: transparent url(../images/arrow_down.png) no-repeat center center; + content: ''; + position: absolute; + width: 24px; + height: 24px; + right: 13px; + top: 7px; + background: transparent url(../images/arrow_down.png) no-repeat center center; } /* @@ -89,36 +95,36 @@ którego poprzedni brat jest zaznaczonym inputem (użyj pseudoklasy), którego przodek to element o klasie .ac-container (0, 3, 3) */ -?? { - background-image: url(../images/arrow_up.png); +.ac-container input:checked + label:hover:after { + background-image: url(../images/arrow_up.png); } .ac-container input { - display: none; + display: none; } .ac-container article { - 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; + 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; } .ac-container article p { - font-style: normal; - color: #777; - line-height: 23px; - font-size: 10px; - padding: 20px; - text-shadow: 1px 1px 1px rgba(255,255,255,0.8); - font: normal normal 12px 'Open Sans'; + font-style: normal; + color: #777; + line-height: 23px; + font-size: 10px; + padding: 20px; + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); + font: normal normal 12px 'Open Sans'; } /* @@ -126,23 +132,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 { - height: 140px; + height: 140px; } .ac-container input:checked ~ article.ac-medium { - height: 180px; + height: 180px; } .ac-container input:checked ~ article.ac-large { - height: 230px; -} \ No newline at end of file + height: 230px; +} 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/index.html b/03/index.html index 0c018343..0eb8dfab 100644 --- a/03/index.html +++ b/03/index.html @@ -1,38 +1,53 @@ - - - - + + + + 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. Delectus, iure?
+
+ 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? +
-
- 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?
+
+ 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? +
-
- 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?
+
+ 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? +
- - \ No newline at end of file + + diff --git a/03/main.css b/03/main.css new file mode 100644 index 00000000..ef498f48 --- /dev/null +++ b/03/main.css @@ -0,0 +1,59 @@ +@font-face { + font-family: 'Source Sans PRO'; + src: url(fonts/SourceSansPro-Bold.otf) format('opentype'); + font-style: normal; + font-weight: bold; +} + +@font-face { + font-family: 'Source Sans PRO'; + src: url(fonts/SourceSansPro-It.otf) format('opentype'); + font-style: italic; + font-weight: normal; +} +@font-face { + font-family: 'Source Sans PRO'; + src: url(fonts/SourceSansPro-Regular.otf) format('opentype'); + font-style: normal; + font-weight: normal; +} + +.parent--float { + font-weight: bold; +} +.parent--flexbox { + font-style: italic; +} + +.parent { + width: 600px; + padding: 20px; + font-family: 'Source Sans PRO'; +} + +.parent--inline-block .child { + display: inline-block; +} + +.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%; +} diff --git a/04/assets/index.html b/04/assets/index.html new file mode 100644 index 00000000..9cf4cd0e --- /dev/null +++ b/04/assets/index.html @@ -0,0 +1,42 @@ + + + + + + Document + + + + + + + diff --git a/04/assets/main.css b/04/assets/main.css new file mode 100644 index 00000000..eb84c0f5 --- /dev/null +++ b/04/assets/main.css @@ -0,0 +1,96 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +ul { + list-style: none; +} +a { + text-decoration: none; + display: block; +} +/* Main menu */ +.menu { + background-color: #fff; + font-family: 'Courier New', Courier, monospace; + font-size: 16px; + font-weight: bold; + white-space: nowrap; +} +.menu__list { + display: flex; +} +.menu__link, +.menu__item--parent { + padding: 15px 20px; +} +.menu__link { + color: black; +} +.menu__link--drop { + color: #fff; + padding: 15px 20px; +} +.marker { + margin-left: 100px; + font-size: 12px; +} +.arrow { + display: inline-block; + transform: rotate(90deg) translateY(-50%); + position: absolute; + right: 10px; + font-size: 12px; +} + +.menu__item { + border-top: 5px solid transparent; + position: relative; +} + +.menu__item:hover { + border-top-color: #336699; +} +.menu__item:hover > a, .menu__item:hover{ + color: lightblue; +} + +.menu__item--parent { + cursor: default; + position: relative; +} +.menu__item--parent { + cursor: default; + position: relative; +} +/* Drop-down */ +.menu__sublist { + display: none; + position: absolute; + background-color: #444; + color: #ffff; + + min-width: 205px; +} + +.menu__item:hover > .menu__sublist { + display: block; +} + +.sublist__link { + color: #fff; +} +.menu__sublist--bottom { + left: 0; + top: 100%; +} +.menu__sublist--right { + left: 100%; + top: 0; +} + +.menu__item--parent:hover > .menu__sublist { + display: block; +} + diff --git a/04/assets/reset.css b/04/assets/reset.css new file mode 100644 index 00000000..af944401 --- /dev/null +++ b/04/assets/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +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; + 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: 1; +} +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; +} \ No newline at end of file diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..75137eca --- /dev/null +++ b/05/index.html @@ -0,0 +1,39 @@ + + + + + + Document + + + + + +
+
+

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + + + diff --git a/05/main.css b/05/main.css new file mode 100644 index 00000000..bb1bd343 --- /dev/null +++ b/05/main.css @@ -0,0 +1,58 @@ +.green { + width: 100%; + border: 5px solid green; + margin: 10px; + padding: 5px 0; +} +.blue { + max-width: 1000px; + border: 5px solid blue; + margin: 0 auto; + padding: 5px 0; +} +.orange { + background-color: orange; + min-height: 50px; +} + +.green--main .orange { + min-height: 400px; +} + +.green--header .blue { + display: flex; + justify-content: space-between; + padding-top: 2px; + padding-bottom: 5px; +} +.orange--logo { + width: 160px; +} +.orange--nav { + width: 300px; +} +.green--main .blue { + display: flex; + justify-content: space-between; +} + +.green--main .orange { + width: 48%; +} + +.green--section .blue { + display: flex; + justify-content: space-around; +} + +.green--section .orange { + width: 30%; + min-height: 300px; +} +.green--footer .blue { + display: flex; + justify-content: center; +} +.green--footer .orange { + width: 100px; +} diff --git a/05/reset.css b/05/reset.css new file mode 100644 index 00000000..af944401 --- /dev/null +++ b/05/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +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; + 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: 1; +} +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; +} \ No newline at end of file