Tea Cozy by Jess

Here’s my Tea Cozy project that I did a few days ago. So static lol. The code is super long because I had to do a lot of experimenting to figure it out. I think I hit most of the essentials but I really couldn’t get the opacity to behave the way I wanted it to. The background in the design spec is black. The text color looks correct when background opacity is set but the background is no longer black. When I set the font opacity then the color difference was barely detectable at 0.9. Suggestions on this or on making it more concise would be super helpful. Anything else?
Tea Cozy by Jess
@tuanur

It’s very good to be experimenting with things. There are several ways to accomplish the goal. But after it might be good practice to clean up your code and see how things can be simplified by removing redundant codes. Small example: the footer z-index is set to 5. But in the design there is no reason to do so because the footer won’t be overlapped by another element. The only place where I would use z-index is with the nav bar (z-index 2) so it moves above all others. The rest of the site doesn’t have elements that are out of the flow of the document so no need for a z-index. Similar for the ID #all, the */ code already has that function. My guess would be that because you use and #all id to set the background it causes the opacity to cancel because ID trumps all others.

Going on that, I would also look at the use of class and ID a bit more. An ID is designed to be used for only one element on the page. For example: img is used for all images, the class: featuredimg for all the featured tea images and #berryimg for only the berry tea image. I see that your ID’s are used multiple times and also for large content (like the #all id). This doesn’t have to be bad per se, but can make the code confusing and cause unwanted effects like what I think is going on with the opacity. Personally I don’t prefer the use of a container class (see my code) but I’ve noticed it on codecadamy.

But! You got everything working except for the opacity. I could live with that. And you have been experimenting so you probably leaned a lot, which is always good. :smiley:

1 Like