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

Countdown Timer | Svelte, Typescript

Zoel 320

@zulmy-azhary

Desktop design screenshot for the Launch countdown timer coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Community feedback

yishak abrham 2,150

@yishak621

Posted

As always its great....i just wanna ask how did u cut the edges of small cards to the outer (i tried Border radius ) but it cut to the inside

0

Zoel 320

@zulmy-azhary

Posted

@yishak621 Thanks for the compliment, i appreciate it!! 😃

Btw to solve your problem, you can make it look like it's cut out by just adding pseudo elements (::before and ::after) of each section of your card (top and bottom div).

Set the position of the section as relative and pseudo elements as absolute, then set the placement of that pseudo elements using top bottom left right and translate from transform property.

Don't forget to add size (width and height), border-radius, z-index, and background color for your pseudo elements.

Hope this will help you 😄

1

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