diff --git a/sessions/s03_css_selectors/participants/farhad/default.png b/sessions/s03_css_selectors/participants/farhad/default.png new file mode 100644 index 0000000..58d4977 Binary files /dev/null and b/sessions/s03_css_selectors/participants/farhad/default.png differ diff --git a/sessions/s03_css_selectors/participants/farhad/hovered.png b/sessions/s03_css_selectors/participants/farhad/hovered.png new file mode 100644 index 0000000..a733ec5 Binary files /dev/null and b/sessions/s03_css_selectors/participants/farhad/hovered.png differ diff --git a/sessions/s03_css_selectors/participants/farhad/index.css b/sessions/s03_css_selectors/participants/farhad/index.css new file mode 100644 index 0000000..01526cf --- /dev/null +++ b/sessions/s03_css_selectors/participants/farhad/index.css @@ -0,0 +1,46 @@ +.hobby-list { + font-family: sans-serif; + list-style-type: square; + color: #ff6600; + width: max-content; + line-height: 1.4; +} + +.hobby-list:has(li:hover) li:not(:hover) { + opacity: 0.3; +} + +.hobby-list li { + transition: all 0.2s ease-in-out; +} + +.hobby-list li:hover { + opacity: 1; + color: red; + transform: scale(1.2, 1.5); + transition: all 0.2s ease-in-out; +} + +.hobby-list:has(li:hover) li:has(+ li:hover) { + opacity: 1; + color: green; + transform: scale(1.1, 1.2); +} + +.hobby-list:has(li:hover) li:has(+ li + li:hover) { + opacity: 0.5; + color: green; + transform: scale(1.02, 1.2); +} + +.hobby-list:has(li:hover) li:hover + li { + opacity: 1; + color: blue; + transform: scale(1.1, 1.2); +} + +.hobby-list:has(li:hover) li:hover + li + li { + opacity: 0.5; + color: blue; + transform: scale(1.02, 1.2); +} diff --git a/sessions/s03_css_selectors/participants/farhad/index.html b/sessions/s03_css_selectors/participants/farhad/index.html new file mode 100644 index 0000000..1b222e3 --- /dev/null +++ b/sessions/s03_css_selectors/participants/farhad/index.html @@ -0,0 +1,31 @@ + + +
+ + + +