Intermediate
Make a card work right to left
The same quote card appears twice, once in English and once in Arabic (dir="rtl"). It uses physical properties, so the Arabic card has its accent border, padding, text alignment and "new" badge on the wrong side.
Rewrite the CSS with logical properties so that, in each card, the accent border and padding are on the side where lines start, the text aligns to the start, and the badge sits in the top corner at the end of the line. Don't change the HTML.
What Check tests
- The English card's border is on the left
- The Arabic card's border is on the right
- The Arabic card's 16px padding is on the right
- Arabic text aligns to the right
- Each badge sits at the end of the line
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.