tod
/
odin-default-css-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhanced template; Added images/folder and fixed img path in solution

This commit is contained in:
dev-ethanjohn 2023-08-26 08:56:31 -07:00
parent ea34148b29
commit 21e8746579
6 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
foundations/04-chaining-selectors/README.md
View File

@ -3,11 +3,11 @@
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). 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 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. 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. 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:** 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. **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: The properties you need to add to each element are:

9
foundations/04-chaining-selectors/index.html
View File

@ -8,15 +8,16 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<!-- Check image source path. Review Foundations lesson - Links and Images -->
<!-- Use the classes BELOW this line --> <!-- Use the classes BELOW this line -->
<div> <div>
<img class="avatar proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="Woman with glasses"> <img class="avatar proportioned" src="" alt="Woman with glasses">
<img class="avatar distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="Man with surprised expression"> <img class="avatar distorted" src="" alt="Man with surprised expression">
</div> </div>
<!-- Use the classes ABOVE this line --> <!-- Use the classes ABOVE this line -->
<div> <div>
<img class="original proportioned" src="./pexels-katho-mutodo-8434791.jpg" alt="Woman with glasses"> <img class="original proportioned" src="" alt="Woman with glasses">
<img class="original distorted" src="./pexels-andrea-piacquadio-3777931.jpg" alt="Man with surprised expression"> <img class="original distorted" src="" alt="Man with surprised expression">
</div> </div>
</body> </body>
</html> </html>

BIN
foundations/04-chaining-selectors/solution/images/pexels-andrea-piacquadio-3777931.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
foundations/04-chaining-selectors/solution/images/pexels-katho-mutodo-8434791.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

8
foundations/04-chaining-selectors/solution/solution.html
View File

@ -9,12 +9,12 @@
</head> </head>
<body> <body>
<div> <div>
<img class="avatar proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="Woman with glasses"> <img class="avatar proportioned" src="./images/pexels-katho-mutodo-8434791.jpg" alt="Woman with glasses">
<img class="avatar distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="Man with surprised expression"> <img class="avatar distorted" src="./images/pexels-andrea-piacquadio-3777931.jpg" alt="Man with surprised expression">
</div> </div>
<div> <div>
<img class="original proportioned" src="../pexels-katho-mutodo-8434791.jpg" alt="Woman with glasses"> <img class="original proportioned" src="./images/pexels-katho-mutodo-8434791.jpg" alt="Woman with glasses">
<img class="original distorted" src="../pexels-andrea-piacquadio-3777931.jpg" alt="Man with surprised expression"> <img class="original distorted" src="./images/pexels-andrea-piacquadio-3777931.jpg" alt="Man with surprised expression">
</div> </div>
</body> </body>
</html> </html>

1
foundations/04-chaining-selectors/style.css
View File

@ -0,0 +1 @@
/* Add CSS Styling */