diff --git a/foundations/04-chaining-selectors/README.md b/foundations/04-chaining-selectors/README.md index 282296c..01a7511 100644 --- a/foundations/04-chaining-selectors/README.md +++ b/foundations/04-chaining-selectors/README.md @@ -2,10 +2,13 @@ Credits for the images in this exercise go to [Katho Mutodo](https://linktr.ee/photobykatho_) and [Andrea Piacquadio](https://www.pexels.com/@olly?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels). -With this exercise, we've provided you a completed HTML file, so you will only have to edit the CSS file. For this exercise, it's more important to understand how chaining different selectors works than how to actually add the attributes. + +With this exercise, we've provided you with a partially completed HTML file which you'll configure. The purpose of this exercise is to focus on understanding how to chain different selectors, rather than solely adding attributes. Additionally, you'll have the chance to review your HTML images. We have two images for you to style, each with two class names, where one of the class names is shared. The goal here is to chain the selectors for both elements, so that each have a unique style applied, despite using a shared class selector. For example, you want an element that has both X and Y to have one set of styles, while an element with X and Z has a completely different set of styles. We included the original images as well, so that you can see how the styles you will be adding look in comparison, so do not add any styles to them. +**Note:** Download and group the images in a separate "images" folder. Ensure correct image source paths in your HTML to avoid image loading issues. This is crucial for a cleaner project structure. + The properties you need to add to each element are: * Make the element with both the `avatar` and `proportioned` classes 300 pixels wide, then give it a height so that it retains its original square proportions (don't hardcode in a pixel value for the height!). diff --git a/foundations/04-chaining-selectors/index.html b/foundations/04-chaining-selectors/index.html index 3106101..dfed3f8 100644 --- a/foundations/04-chaining-selectors/index.html +++ b/foundations/04-chaining-selectors/index.html @@ -8,15 +8,16 @@ +
- Woman with glasses - Man with surprised expression + Woman with glasses + Man with surprised expression
- Woman with glasses - Man with surprised expression + Woman with glasses + Man with surprised expression
\ No newline at end of file diff --git a/foundations/04-chaining-selectors/solution/images/pexels-andrea-piacquadio-3777931.jpg b/foundations/04-chaining-selectors/solution/images/pexels-andrea-piacquadio-3777931.jpg new file mode 100644 index 0000000..1f7652c Binary files /dev/null and b/foundations/04-chaining-selectors/solution/images/pexels-andrea-piacquadio-3777931.jpg differ diff --git a/foundations/04-chaining-selectors/solution/images/pexels-katho-mutodo-8434791.jpg b/foundations/04-chaining-selectors/solution/images/pexels-katho-mutodo-8434791.jpg new file mode 100644 index 0000000..4844432 Binary files /dev/null and b/foundations/04-chaining-selectors/solution/images/pexels-katho-mutodo-8434791.jpg differ diff --git a/foundations/04-chaining-selectors/solution/solution.html b/foundations/04-chaining-selectors/solution/solution.html index ae43339..2a646fa 100644 --- a/foundations/04-chaining-selectors/solution/solution.html +++ b/foundations/04-chaining-selectors/solution/solution.html @@ -9,12 +9,12 @@
- Woman with glasses - Man with surprised expression + Woman with glasses + Man with surprised expression
- Woman with glasses - Man with surprised expression + Woman with glasses + Man with surprised expression
\ No newline at end of file diff --git a/foundations/04-chaining-selectors/style.css b/foundations/04-chaining-selectors/style.css index e69de29..d55c2c5 100644 --- a/foundations/04-chaining-selectors/style.css +++ b/foundations/04-chaining-selectors/style.css @@ -0,0 +1 @@ +/* Add CSS Styling */ \ No newline at end of file