From c7552cfd8e8281960805b71242348252dd251b00 Mon Sep 17 00:00:00 2001 From: Dagmara Opalka Date: Mon, 24 Jun 2024 13:34:38 +0200 Subject: [PATCH 1/3] add homework --- .vscode/settings.json | 3 ++ 01/index.html | 75 +++++++++++++++++++++++++++++++++++++++++-- 02/styles/index.css | 8 ++--- 03/index.html | 1 + 03/styles/index.css | 75 +++++++++++++++++++++++++++++++++++++++++++ 04/menu.html | 33 +++++++++++++++++++ 04/style/style.css | 63 ++++++++++++++++++++++++++++++++++++ 05/structrue.html | 31 ++++++++++++++++++ 05/style/style.css | 74 ++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 357 insertions(+), 6 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 03/styles/index.css create mode 100644 04/menu.html create mode 100644 04/style/style.css create mode 100644 05/structrue.html create mode 100644 05/style/style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/01/index.html b/01/index.html index 194076af..887395c1 100644 --- a/01/index.html +++ b/01/index.html @@ -1,12 +1,83 @@ - + + devmentor.pl - HTML & CSS BASICS - #01 - + +
+

Logo

+
+ + +
+
+ tytuł artukułu +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut sem ut neque gravida gravida sed sit amet enim. Nulla dolor dolor, tempus sit amet leo at, tempor laoreet nisl. Pellentesque lobortis ante odio. Sed a vulputate tortor. Phasellus pulvinar eros ut velit blandit varius. Integer vitae fringilla erat. Morbi volutpat nunc velit, vel tristique nunc tristique vitae. Maecenas scelerisque lectus et porta pellentesque. Etiam hendrerit ipsum et felis semper, a fermentum velit suscipit. Fusce placerat tempor felis, eu semper sapien convallis eu. Fusce efficitur, mauris in faucibus accumsan, massa odio maximus nisl, vel consectetur lectus nunc et urna. Donec dapibus pulvinar justo sed tempor. + + Fusce feugiat vehicula condimentum. Suspendisse nec nibh dapibus, interdum arcu eget, posuere erat. Morbi vitae eros ut justo facilisis tempus. In eu lacus consequat, scelerisque enim non, commodo nulla. Maecenas pellentesque a sem ac venenatis. Maecenas ut tempus felis. Duis luctus aliquam euismod. Aenean non purus in nunc dignissim egestas. Duis in tellus ac ex posuere dignissim ac eu odio. Sed dictum aliquet finibus. Morbi interdum commodo placerat. Duis sollicitudin dolor at libero scelerisque laoreet. Praesent eu ullamcorper neque, placerat ornare diam.

+
+ +

Dodaj swój komentarz!

+ + +
+ + +
+

+ "Interesujacy artkuł!"" Basia +

+

+ "To mną wstrząsneło!"" Bartek +

+

Chę więcej takich treści Bożydar

+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + +
Przykładowa tabela
Test1Test2Test3
123
+ +
+
+
+
+
Wszystkie prawa autorskie zastrzeżone!
\ No newline at end of file diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..4b74f5ec 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) */ -?? { +p { 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) */ -?? { +div { background: #fff; } @@ -62,7 +62,7 @@ to samo co w 1) ale z efektem najechania kursorem na label (0, 3, 2) */ ??, -?? { +section { background: #f1f2f3; color: #666; text-shadow: 0 1px 1px rgba(255,255,255,0.6); @@ -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) */ -?? { +end.selector { -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..4e93939b 100644 --- a/03/index.html +++ b/03/index.html @@ -5,6 +5,7 @@ devmentor.pl - HTML & CSS BASICS - #03 + diff --git a/03/styles/index.css b/03/styles/index.css new file mode 100644 index 00000000..3e250854 --- /dev/null +++ b/03/styles/index.css @@ -0,0 +1,75 @@ + + +body { + font-family: 'Source Sans Pro', sans-serif; +} + +.parent { + width: 600px; + padding: 20px; + margin-bottom: 40px; /* Dodanie odstępu między sekcjami */ +} + +.child { + box-sizing: border-box; + padding: 10px; +} + +.child--first { + width: 30%; + font-weight: 400; + font-family: 'Source Sans Pro', sans-serif; +} + +.child--middle { + width: 30%; + font-weight: 700; + font-family: 'Source Sans Pro', sans-serif; +} + +.child--last { + width: 40%; + font-style: italic; + font-family: 'Source Sans Pro', sans-serif; +} + +/* Inline-block */ +.parent--inline-block .child { + display: inline-block; + vertical-align: top; + margin-right: 10px; +} + +.parent--inline-block .child--last { + margin-right: 0; +} + +/* Float */ +.parent--float .child { + float: left; + margin-right: 10px; +} + +.parent--float .child--last { + margin-right: 0; +} + +.parent--float::after { + content: ""; + display: table; + clear: both; +} + +/* Flexbox */ +.parent--flexbox { + display: flex; + justify-content: space-between; +} + +.parent--flexbox .child { + margin-right: 10px; +} + +.parent--flexbox .child--last { + margin-right: 0; +} \ No newline at end of file diff --git a/04/menu.html b/04/menu.html new file mode 100644 index 00000000..453a87f4 --- /dev/null +++ b/04/menu.html @@ -0,0 +1,33 @@ + + + + + + Menu Wielopoziomowe + + + +
+ +
+ + \ No newline at end of file diff --git a/04/style/style.css b/04/style/style.css new file mode 100644 index 00000000..49903329 --- /dev/null +++ b/04/style/style.css @@ -0,0 +1,63 @@ +body { + font-family: Arial, sans-serif; +} + +header { + background-color: #fff; + padding: 10px 0; +} + +.menu, .submenu { + list-style: none; + padding: 0; + margin: 0; +} + +.menu > li { + display: inline-block; + position: relative; + padding: 10px 20px; +} + +.menu > li > a { + text-decoration: none; + color: #000; + padding: 10px; +} + +.menu > li:hover > a { + border-bottom: 2px solid #00f; +} + +.submenu { + display: none; + position: absolute; + top: 100%; + left: 0; + background-color: #333; +} + +.submenu li { + position: relative; +} + +.submenu li a { + display: block; + color: #fff; + padding: 10px; + text-decoration: none; + white-space: nowrap; +} + +.submenu li a:hover { + background-color: #555; +} + +.menu > li:hover .submenu { + display: block; +} + +.submenu .submenu { + left: 100%; + top: 0; +} \ No newline at end of file diff --git a/05/structrue.html b/05/structrue.html new file mode 100644 index 00000000..7e98a1a9 --- /dev/null +++ b/05/structrue.html @@ -0,0 +1,31 @@ + + + + + + Struktura Strony + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/05/style/style.css b/05/style/style.css new file mode 100644 index 00000000..f485964a --- /dev/null +++ b/05/style/style.css @@ -0,0 +1,74 @@ +body { + margin: 0; + font-family: Arial, sans-serif; +} + +header, footer { + display: flex; + justify-content: space-between; + padding: 10px; + background-color: #f0f0f0; + border: 1px solid green; +} + +header div, footer div { + width: 30%; + background-color: yellow; + border: 1px solid blue; +} + +header .header-left, footer .footer-top { + width: 20%; +} + +header .header-right, footer .footer-bottom { + width: 20%; + align-self: center; +} + +main { + padding: 10px; + border: 1px solid green; +} + +.section { + display: flex; + justify-content: space-between; + margin: 10px 0; + padding: 10px; + border: 1px solid green; +} + +.section div { + background-color: yellow; + border: 1px solid blue; +} + +.section-1 { + height: 300px; +} + +.section-1-left { + width: 60%; + height: 100%; +} + +.section-1-right { + width: 35%; + height: 100%; +} + +.section-2 { + height: 200px; + background-color: yellow; + border: 1px solid blue; +} + +.section-3 { + height: 300px; +} + +.section-3-left, .section-3-middle, .section-3-right { + width: 30%; + height: 100%; +} \ No newline at end of file From a0f52593f8bb826d75816de7d2749c12f942d730 Mon Sep 17 00:00:00 2001 From: Dagmara Opalka Date: Tue, 25 Jun 2024 14:38:44 +0200 Subject: [PATCH 2/3] fix of 02 --- 02/styles/index.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/02/styles/index.css b/02/styles/index.css index 4b74f5ec..c571da43 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) */ -p { +.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) */ -div { +.ac-container label:hover { background: #fff; } @@ -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); } @@ -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) */ -end.selector { +.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 5cdb649b94f6edebb49d905059adf652bb8603c6 Mon Sep 17 00:00:00 2001 From: Dagmara Opalka Date: Tue, 25 Jun 2024 17:09:55 +0200 Subject: [PATCH 3/3] fixed of homework --- 03/index.html | 20 +++++++------------- 03/styles/index.css | 2 +- 04/menu.html | 10 +++++----- 04/style/style.css | 2 +- 05/structrue.html | 2 +- 5 files changed, 15 insertions(+), 21 deletions(-) diff --git a/03/index.html b/03/index.html index 4e93939b..690ad99f 100644 --- a/03/index.html +++ b/03/index.html @@ -5,34 +5,28 @@ devmentor.pl - HTML & CSS BASICS - #03 - +
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
-
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
-
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
-
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, asperiores.
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis praesentium in possimus!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, iure?
diff --git a/03/styles/index.css b/03/styles/index.css index 3e250854..889ccd7b 100644 --- a/03/styles/index.css +++ b/03/styles/index.css @@ -28,7 +28,7 @@ body { } .child--last { - width: 40%; + width: calc(40% - 20px); font-style: italic; font-family: 'Source Sans Pro', sans-serif; } diff --git a/04/menu.html b/04/menu.html index 453a87f4..9b9fd03d 100644 --- a/04/menu.html +++ b/04/menu.html @@ -4,15 +4,15 @@ Menu Wielopoziomowe - +
diff --git a/04/style/style.css b/04/style/style.css index 49903329..fe33b903 100644 --- a/04/style/style.css +++ b/04/style/style.css @@ -53,7 +53,7 @@ header { background-color: #555; } -.menu > li:hover .submenu { +.menu li:hover > .submenu { display: block; } diff --git a/05/structrue.html b/05/structrue.html index 7e98a1a9..2a0b76ad 100644 --- a/05/structrue.html +++ b/05/structrue.html @@ -4,7 +4,7 @@ Struktura Strony - +