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;
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..800f09f9
--- /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-style: normal;
+}
+
+.child--middle {
+ font-style: bold;
+}
+.child--last {
+width: 40%;
+font-style: italic;
+}
+
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
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