From d9dd813f4b3e421849df7d999d1efd838d5bab0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Be=C5=82z?= Date: Sun, 28 Jul 2024 19:52:46 +0000 Subject: [PATCH 1/4] Initial commit --- 01/index.html | 116 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 115 insertions(+), 1 deletion(-) 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 + +
+
+
+
+ +
+

© 2024 Marek Bełz

+
+ + +
+ \ No newline at end of file From 1cdb16626904d0cc20a180a30c0fb06b34f1a547 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Be=C5=82z?= Date: Sun, 28 Jul 2024 20:46:31 +0000 Subject: [PATCH 2/4] Task Done --- 02/styles/index.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) 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; From 0bec742bccd42daf44a773f1a9000d40260bff9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Be=C5=82z?= Date: Thu, 1 Aug 2024 19:34:20 +0000 Subject: [PATCH 3/4] Initial commit --- 03/index.html | 2 ++ 03/reset.css | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++ 03/style.css | 67 ++++++++++++++++++++++++++++++++++++++ 04/index.html | 31 ++++++++++++++++++ 04/reset.css | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++ 04/styles.css | 56 ++++++++++++++++++++++++++++++++ 6 files changed, 334 insertions(+) create mode 100644 03/reset.css create mode 100644 03/style.css create mode 100644 04/index.html create mode 100644 04/reset.css create mode 100644 04/styles.css 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 + + + + +
    +
  • HOME
    • +
  • ITEMS + > +
      +
    • Item 1
      • +
    • Item 2 + > +
        +
      • Item 2.1
        • +
      • Item 2.2
        • +
      +
      • +
    +
    • +
  • SETTINGS
    • +
  • CONTACT
    • +
+ + + 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; +} + From 6dcdbe5c4e4663bd73546589a59a016593c38a20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Be=C5=82z?= Date: Thu, 1 Aug 2024 21:51:31 +0000 Subject: [PATCH 4/4] initial commit --- 05/index.html | 60 ++++++++++++++++++++++++++++++++++ 05/reset.css | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++ 05/style.css | 64 ++++++++++++++++++++++++++++++++++++ 3 files changed, 213 insertions(+) create mode 100644 05/index.html create mode 100644 05/reset.css create mode 100644 05/style.css 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

+
    +
  • HOME
    • +
  • CONTACT
    • +
  • ABOUT
    • +
+
+
+ +
+
+
+ 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