diff --git a/01/index.html b/01/index.html index 194076af..d6354f2e 100644 --- a/01/index.html +++ b/01/index.html @@ -5,8 +5,122 @@ devmentor.pl - HTML & CSS BASICS - #01 + - + +
+ + +
+ +
+ +
+

Lorem ipsum dolor

+ PICTURE +

+ 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! +

+
Author: Marek Bełz + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Important Table
Title-1Title-2Title-3Title-4Title-5
Title-1-2DATADATADATADATA
Title-1-3DATADATADATADATA +
+
+ +
+
+
Comment:
+
+ +
+ +
+
+
+

+ 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. +

+
Author: Marek Bełz + +
+
+
+

+ 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. +

+
Author: Marek Bełz + +
+
+
+
+ + + + +
+ \ No newline at end of file diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..28413d43 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 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 { -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/index.html b/03/index.html index 0c018343..7893e2db 100644 --- a/03/index.html +++ b/03/index.html @@ -5,6 +5,8 @@ devmentor.pl - HTML & CSS BASICS - #03 + + diff --git a/03/reset.css b/03/reset.css new file mode 100644 index 00000000..4f6eb3cb --- /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 { + +} diff --git a/03/style.css b/03/style.css new file mode 100644 index 00000000..91dd2633 --- /dev/null +++ b/03/style.css @@ -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(); +} \ No newline at end of file diff --git a/04/index.html b/04/index.html new file mode 100644 index 00000000..4ec16a37 --- /dev/null +++ b/04/index.html @@ -0,0 +1,31 @@ + + + + + + Document + + + + + + + + diff --git a/04/reset.css b/04/reset.css new file mode 100644 index 00000000..4f6eb3cb --- /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 { + +} diff --git a/04/styles.css b/04/styles.css new file mode 100644 index 00000000..2395b5ec --- /dev/null +++ b/04/styles.css @@ -0,0 +1,56 @@ +body { + background-color: #F6F6F6; +} + +.nav { + background-color: white; + display: flex; + margin: 10px; +} + + +.nav__item { + + cursor: pointer; + position: relative; + text-align: center; + padding: 20px; +} + + +.nav__item:hover { + color: #0aa5ec; + border-top: 3px solid #0aa5ec ; +} + +/* .nav__item--no-space { + margin-left: 0; + } */ + +.nav__item:hover > .nav__dropdown { + display: block; +} + +.dropdown__item:hover > .nav__dropdown { + display: block; +} + +.nav__dropdown { + display: none; + padding-top: 20px; + position: absolute; + left: 0; +} + +.nav__dropdown-2 { + transform: translate(190px, -51px); +} + + .dropdown__item { + text-align: left; + background: #333333; + color: white; + padding: 9px 20px; + min-width: 190px; +} + diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..7c0a3d9a --- /dev/null +++ b/05/index.html @@ -0,0 +1,60 @@ + + + + + + + + Document + + + +
+
+

LOGO

+ +
+
+ +
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti officiis non delectus consequuntur? Cupiditate magnam minus libero. Laudantium nulla animi earum facere quibusdam nobis accusantium eos placeat minus omnis, architecto error cumque adipisci unde nostrum natus provident similique porro eligendi voluptatum asperiores eius commodi velit recusandae. Corrupti doloribus asperiores vel? +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti officiis non delectus consequuntur? Cupiditate magnam minus libero. Laudantium nulla animi earum facere quibusdam nobis accusantium eos placeat minus omnis, architecto error cumque adipisci unde nostrum natus provident similique porro eligendi voluptatum asperiores eius commodi velit recusandae. Corrupti doloribus asperiores vel? +
+
+
+ +
+
+
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas in deserunt et. Voluptate cumque sed aliquid, aspernatur qui earum accusamus! +
+
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas in deserunt et. Voluptate cumque sed aliquid, aspernatur qui earum accusamus! +
+
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas in deserunt et. Voluptate cumque sed aliquid, aspernatur qui earum accusamus! +
+
+
+ +
+
+
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio nulla temporibus veniam eos? Porro perspiciatis eveniet inventore nobis, dolorem quisquam. +
+
+
+ + + + + + \ No newline at end of file diff --git a/05/reset.css b/05/reset.css new file mode 100644 index 00000000..4f6eb3cb --- /dev/null +++ b/05/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 { + +} diff --git a/05/style.css b/05/style.css new file mode 100644 index 00000000..37c5d15b --- /dev/null +++ b/05/style.css @@ -0,0 +1,64 @@ +.row { + outline: 3px solid; + outline-color: green; + margin: 10px auto; + padding: 5px; +} + +.container { + outline: 3px solid blue; + width: 1000px; + margin: 5px auto; +} + +.item { + border: 3px solid orange; +} + + + +.header__container { + display: flex; + justify-content: space-between; + padding: 5px 0; +} + +.header__menu { + display: flex; +} + +.menu__item { + margin-left: 10px; +} + +.content_container { + display: flex; + justify-content: space-between; + padding: 10px 0; +} + +.content__item { + max-width: 495px; +} + +.extra__container { + display: flex; + justify-content: space-evenly; + padding: 0 5px; +} + +.extra__item { + margin: 10px 5px; +} + +.footer__container { + min-height: 100px; + display: flex; + justify-content: center; + align-items: center; +} + +.footer__item { + max-width: 50%; + +} \ No newline at end of file