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

Logo

+ +
+
+ + +
+
+
+

Tytuł artykułu

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga doloribus + illum + recusandae cumque? Voluptatum blanditiis corporis atque, alias magni dignissimos cumque, cupiditate + minus odio dolorem minima repellendus, molestias quia. Nisi?

+ + +
+ +
opis zdjecia
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Dane uzytkowników
LP.NazwaUżytkownikProfilOcena
1AlfaUser-1Pełny4+
2BetaUser-2Niepełny3
+
+
+
+ +

+ +

+ + +
+ + +
+
+

Jan Kowalski

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde iusto ipsa architecto recusandae + libero atque quisquam placeat necessitatibus laborum similique. +

+

25 listopada 2024

+
+
+

Jan Kowalski

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde iusto ipsa architecto recusandae + libero atque quisquam placeat necessitatibus laborum similique. +

+

25 listopada 2024

+
+
+

Jan Kowalski

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde iusto ipsa architecto recusandae + libero atque quisquam placeat necessitatibus laborum similique. +

+

25 listopada 2024

+
+
+ +
+
+ + + + \ No newline at end of file diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..7851971e 100644 --- a/02/styles/index.css +++ b/02/styles/index.css @@ -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 label:hover::before, +.ac-container input:checked + label:hover{ background: #f1f2f3; color: #666; text-shadow: 0 1px 1px rgba(255,255,255,0.6); @@ -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 label:hover::after { background-image: url(../images/arrow_up.png); } @@ -126,7 +126,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 { -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; diff --git a/03/assets/fonts/SourceSansPro-Bold.otf b/03/assets/fonts/SourceSansPro-Bold.otf new file mode 100644 index 00000000..98dbee74 Binary files /dev/null and b/03/assets/fonts/SourceSansPro-Bold.otf differ diff --git a/03/assets/fonts/SourceSansPro-It.otf b/03/assets/fonts/SourceSansPro-It.otf new file mode 100644 index 00000000..2d627d9c Binary files /dev/null and b/03/assets/fonts/SourceSansPro-It.otf differ diff --git a/03/assets/fonts/SourceSansPro-Regular.otf b/03/assets/fonts/SourceSansPro-Regular.otf new file mode 100644 index 00000000..bdcfb27a Binary files /dev/null and b/03/assets/fonts/SourceSansPro-Regular.otf differ diff --git a/03/index.html b/03/index.html index 0c018343..ba833dcc 100644 --- a/03/index.html +++ b/03/index.html @@ -1,13 +1,17 @@ + devmentor.pl - HTML & CSS BASICS - #03 + + + - +
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
@@ -17,7 +21,7 @@ Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
-
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
@@ -35,4 +39,5 @@ 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..de14d420 --- /dev/null +++ b/03/main.css @@ -0,0 +1,43 @@ +@font-face { + font-family: 'SOURCE SANS PRO'; + src: url('./assets/fonts/SourceSansPro-Bold.otf') format('opentype'); + src: url('./assets/fonts/SourceSansPro-Regular.otf') format('opentype'); + font-style: normal; + font-weight: bold; +} +.parent { + border: 3px solid gold; + min-width: 600px; + outline-color: green; + padding: 20px; +} +.child--first { + width: 30%; + margin-right: 10px; + font-family: 'SOURCE SANS PRO'; +} +.child--middle { + width: 30%; + margin-right: 10px; + font-family: 'SOURCE SANS PRO'; + font-weight: bold; +} +.child--last{ + width: calc(40% - 30px); + font-family: 'SOURCE SANS PRO'; + font-style: italic; +} +.parent--inline-block > .child { + display: inline-block; +} +.parent--float > .child { + float: left; +} +.clearfix::after { + content: ""; + clear: both; +} +.parent--flexbox { + display: flex; + justify-content: start; +} \ No newline at end of file diff --git a/03/reset.css b/03/reset.css new file mode 100644 index 00000000..9943a66c --- /dev/null +++ b/03/reset.css @@ -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 { + +} \ No newline at end of file diff --git a/04/assets/211607_right_arrow_icon.png b/04/assets/211607_right_arrow_icon.png new file mode 100644 index 00000000..5620f8af Binary files /dev/null and b/04/assets/211607_right_arrow_icon.png differ diff --git a/04/assets/211607_right_arrow_icon.svg b/04/assets/211607_right_arrow_icon.svg new file mode 100644 index 00000000..42db626f --- /dev/null +++ b/04/assets/211607_right_arrow_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/04/assets/211687_down_arrow_icon.png b/04/assets/211687_down_arrow_icon.png new file mode 100644 index 00000000..aa07270c Binary files /dev/null and b/04/assets/211687_down_arrow_icon.png differ diff --git a/04/assets/211687_down_arrow_icon.svg b/04/assets/211687_down_arrow_icon.svg new file mode 100644 index 00000000..37813543 --- /dev/null +++ b/04/assets/211687_down_arrow_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/04/index.html b/04/index.html new file mode 100644 index 00000000..b784d557 --- /dev/null +++ b/04/index.html @@ -0,0 +1,43 @@ + + + + + + + task-04 + + + + + + + + + + + \ No newline at end of file diff --git a/04/main.css b/04/main.css new file mode 100644 index 00000000..bdbee7bb --- /dev/null +++ b/04/main.css @@ -0,0 +1,106 @@ +:root { + --color-alfa: rgb(143, 143, 143); + --color-beta: rgb(64, 66, 67); + --color-nav-item: rgb(245, 240, 240); + --color-gold: rgb(255, 215, 0); + --color-black: rgb(51, 51, 51); +} +.nav__container { + padding: 20px 0 20px 0; +} +.nav { + background: var(--color-nav-item); + display: flex; +} +.nav__item { + background-color: var(--color-nav-item); + padding: 20px; + margin-left: 10px; + position: relative; + cursor: pointer; + transition: background-color .3s; + text-transform: uppercase; + font-weight: bold; + letter-spacing: 1px; +} +.nav__item > a { + text-decoration: none; + color: var(--color-black); +} +.nav__item:hover > a { + color: var(--color-gold); +} +.dropdown__item > a { + text-decoration: none; + color: var(--color-alfa); +} +.dropdown__item:hover > a { + color: var(--color-gold); +} +.nav__item > img { + position: absolute; + width: 20px; + height: 20px; +} +.nav__item:hover > img { + filter: invert(90%) sepia(23%) saturate(6155%) hue-rotate(359deg) brightness(106%) contrast(105%); +} +.dropdown__item > img { + position: absolute; + width: 20px; + height: 20px; + right: 5px; + filter: invert(61%) sepia(1%) saturate(1804%) hue-rotate(317deg) brightness(93%) contrast(93%); +} +.dropdown__item:hover > img { + filter: invert(90%) sepia(23%) saturate(6155%) hue-rotate(359deg) brightness(106%) contrast(105%); +} +.nav__item::before { + content: ''; + width: 100%; + height: 4px; + color: var(--color-gold); + background-color: var(--color-gold); + position: absolute; + left: 0; + top: 0; + transform: scaleX(0); + transition: transform .4s ease-in-out; +} +.nav__item:hover { + background-color: var( --color-alfa); + color: var(--color-gold); + +} +.nav__item:hover::before { + transform: scaleX(1); +} +.dropdown { + color: var(--color-alfa); +} +.nav__dropdown { + display: none; + padding: 20px 0 20px 0; + position: absolute; + left: 0; +} +.dropdown__item { + background: var(--color-beta); + padding: 10px 20px; + min-width: 180px; +} +.dropdown__item:hover { + color: var(--color-gold); +} +.nav__item:hover > .nav__dropdown { + display: block; +} +.nav__dropdown-second { + display: none; + position: absolute; + top: 50%; + left: 180px; +} +.dropdown__item:hover > .nav__dropdown-second { + display: block; +} diff --git a/04/reset.css b/04/reset.css new file mode 100644 index 00000000..9943a66c --- /dev/null +++ b/04/reset.css @@ -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 { + +} \ No newline at end of file diff --git a/05/css/main.css b/05/css/main.css new file mode 100644 index 00000000..fc64a1c2 --- /dev/null +++ b/05/css/main.css @@ -0,0 +1,78 @@ +.container, .content, .content__item { + border: 3px solid; + border-radius: 8px; + /* padding: 5px; + margin: 5px; */ +} +.container { + border-color: green; + padding: 5px; + margin: 6px; +} +.content { + border-color: royalblue; + margin: 0 auto; + max-width: 1200px; + display: flex; +} +.content__item { + min-height: 50px; + border-color: gold; + background-color: gold; +} + + + + +.header__container { + justify-content: space-between; + padding: 5px 0 5px 0; +} +.header__logo { + text-align: center; + min-width: 200px; +} +.nav__container { + text-align: center; + min-width: 400px; +} + + + + +.main__container { + padding: 10px 0 10px 0; +} +.main__container > .section__content:first-child{ + margin-right: 10px; +} +.section__content { + width: 50%; + min-height: 400px; +} + + +.section__container { + padding: 10px; + justify-content: space-between; +} +.article__content { + width: 33%; + min-height: 300px; + margin-right: 15px; +} +.article__content:last-child { + margin-right: 0; +} + + + + +.footer__container { + justify-content: center; + padding: 5px; + min-height: 100px; +} +.footer__copyrigts { + width: 300px; +} diff --git a/05/css/reset.css b/05/css/reset.css new file mode 100644 index 00000000..9943a66c --- /dev/null +++ b/05/css/reset.css @@ -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 { + +} \ No newline at end of file diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..bcc52bec --- /dev/null +++ b/05/index.html @@ -0,0 +1,46 @@ + + + + + + + task-05 + + + + + + + + +
+
+ + +
+
+ +
+
+
sec-con
+
sec-con +
+
+
+
+
+
artykuł
+
artykuł
+
artykuł
+
+
+ + + + + + \ No newline at end of file