Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Used HTML and CSS to completed

@DerRight

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am most proud that I finally solved a problem that has been stuck for a long time. Hahaha, I searched for many methods and finally found a suitable method! ※Record: one hour and forty-three minutes

我最自豪於我終於解決卡住已久的問題了哈哈哈,我找了好多種方法,最後終於找到一種適用的方法! ※紀錄:一小時四十三分鐘

What challenges did you encounter, and how did you overcome them?

The most challenging thing is the problem of image masking. I have found two methods in total.

One is to use .pic:before {}, and then use the relationship between position and z-index layers to solve this problem.

The second method is to add a ,在css中使用mix-blend-mode:multiply;來呈現圖層混合的狀態。

What specific areas of your project would you like help with?

First of all, thank you very much for viewing my finished product. I am not very familiar with the syntax of CSS yet and need to improve it a lot, especially regarding the problems with pictures and shadows. Please give me your advice!

首先非常謝謝您觀看我的成品,對於css的語法尚未非常熟悉,還需要多多加強,尤其是關於圖片上的問題還有陰影的問題,再請大家多多指教!

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord