From a611a184760ec1f5cc693cf03bbc366c523f5f1f Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Wed, 10 Dec 2025 00:07:44 +0100 Subject: [PATCH 01/10] Task01 Done - HTML Semantic Structure --- 01/index.html | 312 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 309 insertions(+), 3 deletions(-) diff --git a/01/index.html b/01/index.html index 194076af..1a2d0765 100644 --- a/01/index.html +++ b/01/index.html @@ -1,12 +1,318 @@ + - - + + devmentor.pl - HTML & CSS BASICS - #01 + - + +
+ + + + Logo Uczelni XYZ + + +
+ +
+
+
+

Otwarta Rekrutacja!

+

+ Autor: Rektor Uczelni XYZ + +

+
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque dolores possimus tenetur. Expedita + atque unde explicabo odio, doloremque libero suscipit iure dicta veniam aliquid a consectetur ut + harum assumenda corrupti.lorem Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius + suscipit excepturi aliquam, magni molestias incidunt ipsam ad, odit commodi veritatis debitis, + sapiente natus deserunt temporibus ipsum eveniet sunt nisi hic! Lorem ipsum dolor sit amet + consectetur adipisicing elit. Quo voluptatem laboriosam magnam dolor molestias minus! Nam, odit. + Adipisci reprehenderit totam ad excepturi sint quas quidem, aliquid exercitationem aspernatur + mollitia sit!

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, doloremque perspiciatis aliquid + vitae cum nulla error distinctio dicta blanditiis animi possimus totam rem porro praesentium omnis + nam aspernatur necessitatibus culpa. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, + deserunt. Est quam labore dolor hic placeat veritatis nisi. Rerum sint maxime impedit ad, omnis quod + nisi reprehenderit rem dolores! Voluptates? Lorem, ipsum dolor sit amet consectetur adipisicing + elit. Quasi atque repudiandae dicta quas suscipit tenetur iste pariatur eveniet fugiat voluptate + itaque enim nobis ratione, accusantium cumque voluptatum aut fuga non?

+
+ Wykres słupkowy +
Wykres przedstawia liczby przyjmowanych studentów w latach 2020-2026
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tabela oplat rekrutacji
Tryb studiówStopień studiówOpłata rektutacyjna
StacjonarneI stopień80zł
StacjonarneII stopień120zł
ZaoczneI stopień100zł
ZaoczneII stopień140zł
+
+
+
Tagi
+
+
+
+
    +
  1. +
    +
    + + + +

    + + Awatar użytkownika + Łukasz + + skomentował + +

    +
    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim voluptas saepe necessitatibus + et ipsa dolores dolore sint dignissimos illum atque itaque adipisci sapiente alias, aliquid + fugit, animi cupiditate nam aut.

    +
    +
  2. +
    +
    + + + +

    + + Awatar użytkownika + Kasia + + skomentowała + +

    +
    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim voluptas saepe necessitatibus + et ipsa dolores dolore sint dignissimos illum atque itaque adipisci sapiente alias, aliquid + fugit, animi cupiditate nam aut.

    +
    +
  3. +
    +
    + + + +

    + + Awatar użytkownika + Bartek + + skomentował + +

    +
    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim voluptas saepe necessitatibus + et ipsa dolores dolore sint dignissimos illum atque itaque adipisci sapiente alias, aliquid + fugit, animi cupiditate nam aut.

    +
    +
    4. +
+
+

+ +

+

+ +

+

+ + +

+

+ +

+
+
+
+ + + + \ No newline at end of file From 61382bd5226444f9aac8c91c165ef8dc965f6351 Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Wed, 10 Dec 2025 00:10:46 +0100 Subject: [PATCH 02/10] Task01 Table fix --- 01/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/01/index.html b/01/index.html index 1a2d0765..04693c99 100644 --- a/01/index.html +++ b/01/index.html @@ -146,7 +146,7 @@

Otwarta Rekrutacja!

> From 8cd343036092efe3acaa4b5f25e8fe43b947c09b Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Wed, 10 Dec 2025 19:34:03 +0100 Subject: [PATCH 03/10] Task02 Done - CSS selectors added --- 02/index.html | 66 +++++++++++++++++++++++++++++++++++++-------- 02/styles/index.css | 66 ++++++++++++++++++++++----------------------- 2 files changed, 88 insertions(+), 44 deletions(-) diff --git a/02/index.html b/02/index.html index 89650fad..a6e97968 100644 --- a/02/index.html +++ b/02/index.html @@ -1,43 +1,87 @@ + - - + + 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..b1c7a241 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; @@ -44,29 +44,29 @@ Znacznik label, którego przodkiem jest klasa .ac-container /* Zmiana koloru tła po najechaniu przez kursor myszy na znacznik label, -który znajduje się wewnątrze elementu o klasie .ac-container +który znajduje się wewnątrz elementu o klasie .ac-container (0, 2, 1) */ -?? { +.ac-container label:hover { background: #fff; } /* Te same style CSS dla dwóch selektorów: 1) -znacznik label, którego poprzedni brat jest znaznaczonym inputem (użyj pseudoklasy), +znacznik label, którego poprzedni brat jest zaznaczonym inputem (użyj pseudoklasy), i ten brat musi posiadać przodka o klasie .ac-container (0, 2, 2) 2) 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); - 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; @@ -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,13 +126,13 @@ 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 { From 0444027dd7ab46387f502492ebcf5de97bd39bd0 Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Thu, 11 Dec 2025 20:25:23 +0100 Subject: [PATCH 04/10] Task03 Inline block, FlexBox added --- 03/index.html | 19 +++++++++++-- 03/style/style.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 85 insertions(+), 3 deletions(-) create mode 100644 03/style/style.css diff --git a/03/index.html b/03/index.html index 0c018343..dbe81a7e 100644 --- a/03/index.html +++ b/03/index.html @@ -1,13 +1,25 @@ + - - + + + devmentor.pl - HTML & CSS BASICS - #03 + - +
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
@@ -35,4 +47,5 @@ Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
+ \ No newline at end of file diff --git a/03/style/style.css b/03/style/style.css new file mode 100644 index 00000000..47c7611d --- /dev/null +++ b/03/style/style.css @@ -0,0 +1,69 @@ +@font-face { + font-family: 'Source Sans Pro'; + src: url(source-sans-pro/SourceSansPro-Regular.otf) format('opentype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url(source-sans-pro/SourceSansPro-Bold.otf) format('opentype'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Source Sans Pro'; + src: url(source-sans-pro/SourceSansPro-Italic.otf) format('opentype'); + font-weight: normal; + font-style: italic; +} + + +.parent { + box-sizing: border-box; + width: 600px; + margin: 20px; +} + +.child { + font-family: 'Source Sans Pro', sans-serif; +} + + +.child--first { + width: calc(30% - 5px); + font-weight: normal; + font-size: normal; +} + +.child--middle { + width: calc(30% - 10px); + font-weight: bold; +} + +.child--last { + width: calc(40% - 5px); + font-style: italic; +} + + +.parent--inline-block { + font-size: 0; +} + +.parent--inline-block .child { + display: inline-block; + font-size: 16px; + vertical-align: top; +} + +.parent--inline-block .child--first, +.parent--inline-block .child--middle { + margin-right: 10px; +} + +.parent--flexbox { + display: flex; + gap: 10px; +} \ No newline at end of file From 2052aee64c15b012da4c40df32c95f794d7afb73 Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Fri, 12 Dec 2025 17:55:59 +0100 Subject: [PATCH 05/10] Css styling float added --- 03/style/style.css | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/03/style/style.css b/03/style/style.css index 47c7611d..87acbf6d 100644 --- a/03/style/style.css +++ b/03/style/style.css @@ -59,10 +59,22 @@ } .parent--inline-block .child--first, -.parent--inline-block .child--middle { +.parent--inline-block .child--middle, +.parent--float .child--first, +.parent--float .child--middle { margin-right: 10px; } +.parent--float .child { + float: left; +} + +.parent--float::after { + content: ''; + display: block; + clear: both; +} + .parent--flexbox { display: flex; gap: 10px; From 5af6f364799534f57bb76cb03cea6be23b71538e Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Sat, 13 Dec 2025 17:41:13 +0100 Subject: [PATCH 06/10] Task04 CSS & HTML Structure + positioning --- 04/index.html | 46 +++++++ 04/styles/menu.css | 35 ++++++ 04/styles/reset.css | 299 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 380 insertions(+) create mode 100644 04/index.html create mode 100644 04/styles/menu.css create mode 100644 04/styles/reset.css diff --git a/04/index.html b/04/index.html new file mode 100644 index 00000000..bdcf2737 --- /dev/null +++ b/04/index.html @@ -0,0 +1,46 @@ + + + + + + + + + Menu + + + +
+ +
+ + + \ No newline at end of file diff --git a/04/styles/menu.css b/04/styles/menu.css new file mode 100644 index 00000000..969527a2 --- /dev/null +++ b/04/styles/menu.css @@ -0,0 +1,35 @@ +:root { + --primary-color-light: #F7F7F7; + --primary-color-dark: #333333; + --secondary-color: #009AE1; +} + +.dropdown-menu__list-item, +.dropdown-menu__sublist-item { + text-transform: capitalize; +} + +.header { + position: absolute; + inset: 0; + margin: auto; + width: fit-content; + height: fit-content; +} + +.nav__list, +.dropdown-menu__list, +.dropdown-menu__sublist { + display: flex; +} + +.dropdown-menu__list, +.dropdown-menu__sublist { + flex-direction: column; +} + +.nav__list-item { + text-transform: uppercase; + padding: 2rem 2rem; + text-align: center; +} \ No newline at end of file diff --git a/04/styles/reset.css b/04/styles/reset.css new file mode 100644 index 00000000..607fff0c --- /dev/null +++ b/04/styles/reset.css @@ -0,0 +1,299 @@ +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); +} \ No newline at end of file From 8a5aed4bb3e51b1d07f1e932eef151a7276d03aa Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Sun, 14 Dec 2025 14:29:07 +0100 Subject: [PATCH 07/10] Task04 CSS menu bar added --- 04/styles/menu.css | 107 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 95 insertions(+), 12 deletions(-) diff --git a/04/styles/menu.css b/04/styles/menu.css index 969527a2..e7dbb726 100644 --- a/04/styles/menu.css +++ b/04/styles/menu.css @@ -4,32 +4,115 @@ --secondary-color: #009AE1; } +body { + background-color: var(--primary-color-light); +} + +.dropdown-menu__list-item, +.dropdown-menu__sublist-item, +.nav__list-item { + cursor: pointer; +} + .dropdown-menu__list-item, .dropdown-menu__sublist-item { text-transform: capitalize; + text-align: left; + padding: .7rem; + padding-left: 1.7rem; + width: 200px; + background-color: var(--primary-color-dark); } -.header { +.dropdown-menu__list, +.dropdown-menu__sublist { + flex-direction: column; position: absolute; - inset: 0; - margin: auto; - width: fit-content; - height: fit-content; + display: none; + color: var(--primary-color-light); + top: 100%; + left: 0; } -.nav__list, -.dropdown-menu__list, .dropdown-menu__sublist { - display: flex; + top: 50%; + left: 100%; } -.dropdown-menu__list, -.dropdown-menu__sublist { - flex-direction: column; +.header { + margin-top: 1rem; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: fit-content; + background-color: white; +} + +.nav__list { + display: flex; } .nav__list-item { text-transform: uppercase; - padding: 2rem 2rem; + padding: 1.7rem 1.7rem; text-align: center; + position: relative; +} + +.nav__list-item::after { + content: ''; + position: absolute; + width: 0; + height: 3px; + background-color: var(--secondary-color); + left: 50%; + top: 0; + transform: translateX(-50%); + transition: width 250ms ease-in-out; +} + +.nav__list-item:hover::after { + width: 100%; +} + +.nav__list-item:hover { + color: var(--secondary-color); +} + +.nav__list-item:hover > .dropdown-menu__list, +.dropdown-menu__list-item:hover > .dropdown-menu__sublist, +.nav__list-item:focus > .dropdown-menu__list, +.dropdown-menu__list-item:focus > .dropdown-menu__sublist { + display: flex; +} + +.nav__list-item:has(.dropdown-menu__list)::before { + content: ">"; + position: absolute; + left: 75%; + top: 37%; + transform: rotateZ(270deg); + transition: all 250ms ease-in-out; +} + +.nav__list-item:has(.dropdown-menu__list):hover::before { + transform: rotateZ(90deg); + left: 78%; +} + +.dropdown-menu__list-item:has(.dropdown-menu__sublist)::after { + content: '>'; + position: absolute; + left: 40%; + transition: left 250ms ease-in-out; +} + +.dropdown-menu__list-item:has(.dropdown-menu__sublist):hover::after { + left: 90% +} + +.dropdown-menu__list-item:hover, +.dropdown-menu__sublist-item:hover { + color: white; } \ No newline at end of file From 35047ddf2a40f0661e18c7d2dff57b2a4c73545c Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Sun, 14 Dec 2025 14:47:10 +0100 Subject: [PATCH 08/10] Task04 Done --- 04/index.html | 16 ++++++++-------- 04/styles/menu.css | 21 ++++++++++----------- 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/04/index.html b/04/index.html index bdcf2737..26a9a967 100644 --- a/04/index.html +++ b/04/index.html @@ -22,22 +22,22 @@
diff --git a/04/styles/menu.css b/04/styles/menu.css index e7dbb726..0d02e4e0 100644 --- a/04/styles/menu.css +++ b/04/styles/menu.css @@ -8,10 +8,9 @@ body { background-color: var(--primary-color-light); } -.dropdown-menu__list-item, -.dropdown-menu__sublist-item, -.nav__list-item { - cursor: pointer; +a { + text-decoration: none; + color: inherit; } .dropdown-menu__list-item, @@ -22,6 +21,7 @@ body { padding-left: 1.7rem; width: 200px; background-color: var(--primary-color-dark); + color: var(--primary-color-light); } .dropdown-menu__list, @@ -29,11 +29,14 @@ body { flex-direction: column; position: absolute; display: none; - color: var(--primary-color-light); top: 100%; left: 0; } +.nav__list-item:hover { + color: var(--secondary-color); +} + .dropdown-menu__sublist { top: 50%; left: 100%; @@ -76,10 +79,6 @@ body { width: 100%; } -.nav__list-item:hover { - color: var(--secondary-color); -} - .nav__list-item:hover > .dropdown-menu__list, .dropdown-menu__list-item:hover > .dropdown-menu__sublist, .nav__list-item:focus > .dropdown-menu__list, @@ -112,7 +111,7 @@ body { left: 90% } -.dropdown-menu__list-item:hover, -.dropdown-menu__sublist-item:hover { +.dropdown-menu__list-item:hover > a, +.dropdown-menu__sublist-item:hover > a { color: white; } \ No newline at end of file From d16089fd88f811bcba5d7c61b8e16be2292bc41a Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Sun, 14 Dec 2025 19:46:50 +0100 Subject: [PATCH 09/10] Task05 Done - layout fexbox --- 05/index.html | 52 ++++++++ 05/styles/index.css | 123 ++++++++++++++++++ 05/styles/reset.css | 299 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 474 insertions(+) create mode 100644 05/index.html create mode 100644 05/styles/index.css create mode 100644 05/styles/reset.css diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..01e571ac --- /dev/null +++ b/05/index.html @@ -0,0 +1,52 @@ + + + + + + + + + Layout Task05 + + + +
+ +
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/05/styles/index.css b/05/styles/index.css new file mode 100644 index 00000000..ef8ea035 --- /dev/null +++ b/05/styles/index.css @@ -0,0 +1,123 @@ +:root { + --article-color: #FFCA18; + --section-outline-color: #0ED145; + --article-outline-color: #00A8F3; +} + +html { + margin: 3px; + height: calc(100vh - 6px); +} + +body { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + gap: 5px; +} + + + +/* MAIN ELEMENTS */ +.header, +.first-section, +.second-section, +.footer { + outline: 3px solid var(--section-outline-color); + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.nav, +.first-section__article, +.second-section__article, +.footer__header { + display: flex; + flex-direction: row; + align-items: center; + outline: 3px solid var(--article-outline-color); + width: 90%; +} + +.nav__element, +.first-section__div, +.second-section__div, +.footer__div { + background-color: var(--article-color); + height: 95%; +} + + +/* Header */ +.header { + height: 10vh; +} + +.nav { + height: 8vh; + justify-content: space-between; +} + +.nav__element { + width: 15%; +} + +.nav__element:last-of-type { + width: 45%; +} + + + +/* Section #1 */ +.first-section { + height: 40vh; + gap: 5px; +} + +.first-section__article { + height: 38vh; + justify-content: space-between; +} + +.first-section__div { + height: 95%; + flex-basis: calc(50% - 5px); +} + + + +/* Section #2 */ +.second-section { + height: 40vh; +} + +.second-section__article { + height: 38vh; + justify-content: space-evenly; +} + +.second-section__div { + flex-basis: calc(33.34% - 40px); +} + + + +/* Footer */ +.footer { + min-height: 100px; + height: 10vh; +} + +.footer__header { + height: 9vh; + min-height: 90px; + justify-content: center; +} + +.footer__div { + height: 90%; + width: 250px; +} \ No newline at end of file diff --git a/05/styles/reset.css b/05/styles/reset.css new file mode 100644 index 00000000..607fff0c --- /dev/null +++ b/05/styles/reset.css @@ -0,0 +1,299 @@ +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); +} \ No newline at end of file From db2a5ab5f3ef2ee2974e9e1f3f66a3110889cebd Mon Sep 17 00:00:00 2001 From: TetraMeister Date: Mon, 15 Dec 2025 19:32:06 +0100 Subject: [PATCH 10/10] 2nd try Task05: CSS and HTML layout Done --- 05/{ => Try01}/index.html | 0 05/{ => Try01}/styles/index.css | 0 05/{ => Try01}/styles/reset.css | 0 05/Try02/index.html | 67 +++++++ 05/Try02/styles/base.css | 27 +++ 05/Try02/styles/first-section.css | 9 + 05/Try02/styles/footer.css | 10 + 05/Try02/styles/header.css | 12 ++ 05/Try02/styles/reset.css | 299 +++++++++++++++++++++++++++++ 05/Try02/styles/second-section.css | 9 + 10 files changed, 433 insertions(+) rename 05/{ => Try01}/index.html (100%) rename 05/{ => Try01}/styles/index.css (100%) rename 05/{ => Try01}/styles/reset.css (100%) create mode 100644 05/Try02/index.html create mode 100644 05/Try02/styles/base.css create mode 100644 05/Try02/styles/first-section.css create mode 100644 05/Try02/styles/footer.css create mode 100644 05/Try02/styles/header.css create mode 100644 05/Try02/styles/reset.css create mode 100644 05/Try02/styles/second-section.css diff --git a/05/index.html b/05/Try01/index.html similarity index 100% rename from 05/index.html rename to 05/Try01/index.html diff --git a/05/styles/index.css b/05/Try01/styles/index.css similarity index 100% rename from 05/styles/index.css rename to 05/Try01/styles/index.css diff --git a/05/styles/reset.css b/05/Try01/styles/reset.css similarity index 100% rename from 05/styles/reset.css rename to 05/Try01/styles/reset.css diff --git a/05/Try02/index.html b/05/Try02/index.html new file mode 100644 index 00000000..2f5dd19c --- /dev/null +++ b/05/Try02/index.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + Task05 | Layout + + + +
+
+

+ +
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/05/Try02/styles/base.css b/05/Try02/styles/base.css new file mode 100644 index 00000000..823fb0d4 --- /dev/null +++ b/05/Try02/styles/base.css @@ -0,0 +1,27 @@ +:root { + --cell-bg-color: #FFCA18; + --row-outline-color: #0ED145; + --container-outline-color: #00A8F3; +} + +.row, +.cell, +.container { + margin: 5px; + padding: 5px; +} + +.row { + outline: 3px solid var(--row-outline-color); +} + +.cell { + background-color: var(--cell-bg-color); + min-height: 50px; +} + +.container { + max-width: 1200px; + margin: 0 auto; + outline: 3px solid var(--container-outline-color); +} \ No newline at end of file diff --git a/05/Try02/styles/first-section.css b/05/Try02/styles/first-section.css new file mode 100644 index 00000000..87822f8f --- /dev/null +++ b/05/Try02/styles/first-section.css @@ -0,0 +1,9 @@ +.first-section__container { + display: flex; + justify-content: space-between; +} + +.first-section__content { + width: 49%; + min-height: 400px; +} \ No newline at end of file diff --git a/05/Try02/styles/footer.css b/05/Try02/styles/footer.css new file mode 100644 index 00000000..ad9c2fc4 --- /dev/null +++ b/05/Try02/styles/footer.css @@ -0,0 +1,10 @@ +.footer__container { + display: flex; + justify-content: center; + align-items: center; + min-height: 100px; +} + +.footer__content { + width: 20%; +} \ No newline at end of file diff --git a/05/Try02/styles/header.css b/05/Try02/styles/header.css new file mode 100644 index 00000000..363ac6f6 --- /dev/null +++ b/05/Try02/styles/header.css @@ -0,0 +1,12 @@ +.header__container { + display: flex; + justify-content: space-between; +} + +.header__logo { + min-width: 150px; +} + +.header__nav { + min-width: 500px; +} \ No newline at end of file diff --git a/05/Try02/styles/reset.css b/05/Try02/styles/reset.css new file mode 100644 index 00000000..607fff0c --- /dev/null +++ b/05/Try02/styles/reset.css @@ -0,0 +1,299 @@ +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); +} \ No newline at end of file diff --git a/05/Try02/styles/second-section.css b/05/Try02/styles/second-section.css new file mode 100644 index 00000000..4bc532ed --- /dev/null +++ b/05/Try02/styles/second-section.css @@ -0,0 +1,9 @@ +.second-section__container { + display: flex; + justify-content: space-evenly; +} + +.second-section__content { + min-height: 400px; + width: 32%; +} \ No newline at end of file