Hi @MAIAN-HUNTER, I reviewed your repository and I have some suggestions for you:
- Adopt mobile-first approach, is a good way to style the
html
; - Try to start to use a modern approach with the
css
by using Logical properties example: -margin-left = margin-inline-start
; -margin-bottom = margin-block-end
; - Check out this article about Logical properties; - To follow the design you need to remove the
padding
on your.container
, you can add it by using@media
or@container
query, I used the second one, or maybe the fluid spacing; - You need to set all the headings bigger than now;
- Don't use
strong
if your goal is only to highlight text, instead use theb
orspan
to achieve that. Read this article to discover why; - To make a divider use the semantic
hr
or adiv
with class.divider
for example, the last one was my solution, instead of settingpadding-top
to theh2
; - Remove the default
padding
fromul
andol
, and to style the bullet points use the same trick that you use on theli
forol
(they should be bold), and play with::before
pseudo-element, this is how I did all the marker for the list; hint:left: some rem
- To style the
border
of thetable
you can usetable {border-collapse: collapse;}
, with thiscss
theborder
looks like a single line; - In my solution I used only
tr
andtd
to make the table, maybe this doesn't matter, but you need to highlight the right column of the table,th
hasfont-weight: bold;
as default on it; - Fix the
footer
tag and position, on mobile view it overlaps the layout and on large screen, it sits on the left of the card;
Hoping you find this helpful ✌️
Keep learning 📖 Keep coding 💻
Marked as helpful
1