From a43deb149934ca345a8fd5aa0de7239b9e5514b9 Mon Sep 17 00:00:00 2001 From: Dominik Lenart Date: Wed, 24 Jul 2024 13:18:40 +0200 Subject: [PATCH 1/4] make all exercises --- 02/styles/index.css | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/02/styles/index.css b/02/styles/index.css index 6f4fd057..ea9247af 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,9 @@ 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); @@ -72,8 +73,8 @@ to samo co w 1) ale z efektem najechania kursorem na label font-size: 13px; } -.ac-container label:hover:after, -.ac-container input:checked + label:hover:after { +.ac-container label:hover::after, +.ac-container input:checked + label:hover::after { content: ''; position: absolute; width: 24px; @@ -89,7 +90,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 +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 c6fd87f3f0d44a4eb7114f370a358692a160c79e Mon Sep 17 00:00:00 2001 From: Dominik Lenart Date: Wed, 24 Jul 2024 14:02:01 +0200 Subject: [PATCH 2/4] Make exercises from module 3 --- 03/index.html | 1 + 03/style.css | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 03/style.css diff --git a/03/index.html b/03/index.html index 0c018343..2af7bb59 100644 --- a/03/index.html +++ b/03/index.html @@ -5,6 +5,7 @@ devmentor.pl - HTML & CSS BASICS - #03 + diff --git a/03/style.css b/03/style.css new file mode 100644 index 00000000..8cbdaeed --- /dev/null +++ b/03/style.css @@ -0,0 +1,54 @@ +@font-face { + font-family: 'Source Sans Pro'; + src: url('source-sans-pro/SourceSansPro-Bold.otf') format('opentype'); + font-style: normal; + font-weight: bold; +} + +div { + font-family: 'Source Sans Pro'; + font-weight: bold; +} + + +.parent { + width: 600px; + padding: 20px; +} + +.parent { + display: flex; + gap: 10px; +} + + +parent--inline-block { + display: inline-block; +} + + +.parent--float { + float: inline-end; +} + +.parent--flexbox { + display: flex; +} + +.child--first +.child--middle { + width: 30%; +} + +.child--first { + font-weight: normal; +} + +.child--middle { + font-weight: bold; +} +.child--last { +width: 40%; +font-style: italic; +} + From 63df8087995f78012210e68bd925cd69a7599ebc Mon Sep 17 00:00:00 2001 From: Dominik Lenart Date: Mon, 12 Aug 2024 14:59:11 +0200 Subject: [PATCH 3/4] made exercise nr4 --- 03/style.css | 4 +- 04/assets/index.html | 34 +++++++++++++++ 04/assets/style.css | 100 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 136 insertions(+), 2 deletions(-) create mode 100644 04/assets/index.html create mode 100644 04/assets/style.css diff --git a/03/style.css b/03/style.css index 8cbdaeed..800f09f9 100644 --- a/03/style.css +++ b/03/style.css @@ -41,11 +41,11 @@ parent--inline-block { } .child--first { - font-weight: normal; + font-style: normal; } .child--middle { - font-weight: bold; + font-style: bold; } .child--last { width: 40%; diff --git a/04/assets/index.html b/04/assets/index.html new file mode 100644 index 00000000..9ffadf45 --- /dev/null +++ b/04/assets/index.html @@ -0,0 +1,34 @@ + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/04/assets/style.css b/04/assets/style.css new file mode 100644 index 00000000..92fdfe53 --- /dev/null +++ b/04/assets/style.css @@ -0,0 +1,100 @@ +body { + font-family: Arial, sans-serif; + background-color: f5f5f5; +} + +nav { + background-color: #f8f8f8; + padding: 10px; +} + +.nav-links { + list-style: none; + margin: 0; + padding: 0; + display: flex; +} +.nav-item { + position: relative; + margin-right: 20px; + padding: 10px; +} + +.nav-item:first-child a { + color: #4db8ff; +} + +.nav-item a { + text-decoration: none; + padding: 10px; + display: block; + color: #333; +} + +.nav-item.dropdown>a::after, +.nav-item.dropdown-submenu>a::after { + content: '>'; + position: absolute; + right: 0; + transform: rotate(90deg); + font-size: 15px; + vertical-align: top; +} + +.dropdown-submenu>a::after, +.dropdown-submenu>a::after { + content: '>'; + position: absolute; + right: 0; + transform: rotate(0deg); + font-size: 15px; + margin: 0 10px; +} + +a:hover { + color: #4db8ff; +} + +.dropdown-content, +.submenu-content { + display: none; + position: absolute; + background-color: #333; + min-width: 150px; + list-style: none; + padding: 0; + margin: 0; +} + +.dropdown-content li, +.submenu-content li { + position: relative; +} + +.dropdown-content a, +.submenu-content a { + color: #fff; + padding: 10px; + display: block; +} + +.nav-item:hover>.dropdown-content, +.dropdown-submenu:hover>.submenu-content { + display: block; +} + +.dropdown-content { + top: 100%; + left: 0; +} + +.submenu-content { + top: 0; + left: 100%; +} + +.arrow-up { + display: inline-block; + transform: rotate(-90deg); + font-size: 24px; +} \ No newline at end of file From d305abdecfde1cdb15bf2de2baf5511fd6503d0e Mon Sep 17 00:00:00 2001 From: Dominik Lenart Date: Mon, 12 Aug 2024 16:54:55 +0200 Subject: [PATCH 4/4] made all exercises --- 05/index.html | 36 +++++++++++++++++++++++ 05/style.css | 79 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 115 insertions(+) create mode 100644 05/index.html create mode 100644 05/style.css diff --git a/05/index.html b/05/index.html new file mode 100644 index 00000000..6e7cf834 --- /dev/null +++ b/05/index.html @@ -0,0 +1,36 @@ + + + + + + Document + + + +
+
+ +
+ +
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/05/style.css b/05/style.css new file mode 100644 index 00000000..bff9c1f3 --- /dev/null +++ b/05/style.css @@ -0,0 +1,79 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; + background-color: #fff; +} + +.container { + width: 100%; + max-width: 1000px; + border: 5px solid green; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + border: 2px solid blue; + margin: 20px 0; +} + +.logo, +.menu { + width: 200px; + height: 40px; + background-color: #ffca18; +} + +.menu { + width: 400px; +} + +.grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.5em; + border: 3px solid blue; + +} + +.grid-item { + background-color: #ffca18; + height: 250px; + margin: 20px 0; +} + +.grid-column { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.5em; + border: 3px solid blue; +} + +.grid-item-column { + background-color: #ffca18; + height: 250px; + margin: 20px 0; +} + +.container1 { + display: flex; + justify-content: center; + align-items: center; + border: 3px solid blue; +} + +.footer { + height: 100vh; + height: 100px; + width: 100px; + display: flex; + justify-content: center; + align-items: center; + background-color: #ffca18; + +} \ No newline at end of file