I've added some animations, I wanted the animations to be subtle. Were these okay or too much.
Aurel
@Aur71All comments
- @Valac01Submitted about 2 years ago
- @donnol87Submitted about 2 years ago
This one was pretty tricky. I still don't think it's fully responsive and I had to hard code some of the css for items to appear where I wanted them. I also struggled to get the fonts I wanted in VSCode.
Although I used FlexBox for this exercise, I still had to move items around with margin, padding etc to get them where I wanted them.
This doesn't seem right but the final product is almost good enough.
As always, please share any feedback so I can continue to grow as a front-end-developer.
Thanks all,
Donn
@Aur71Posted about 2 years agoUsing padding and margin is normal, so dont worry about it. Also when you downlad the starter files there is a styling guide. There you will find the colors and fonts used in design.
0 - @hafsatun2020Submitted about 2 years ago
I couldn't figure out how to increase the space between price and Annual plan.
I would appreciate if someone could help me out with that. thank you
@Aur71Posted about 2 years agoPut bouth of them inside a container.
.container { display: flex; gap: 10px; }
Or you can just use margin-top on the price and margin-bottom on the text.
Marked as helpful2 - @DavincyProjectSubmitted about 2 years ago
can someone explain to me how to replace images with css or whatever u know, from desktop images to mobile images
@Aur71Posted about 2 years agoPut bouth images inside your img-container. To the desktop image give an id = "desktop-img". To the mobile image give an id = "mobile-img"
#desktop-img { display: block; } #mobile-img { display: none; }
Now you just have to use a media querie so you can switch the display when you hit a break point.
@media only screen and (max-width: 600px) {
#desktop-img { display: none; } #mobile-img { display: block; }
And last change the direction of your container
.container { flex-direction: column; } }
Marked as helpful1 - @JacobMarshall0Submitted about 2 years ago
How can I develop code for better accessibility?
@Aur71Posted about 2 years agoFor better accessibility use semantic html, like header, main, footer, etc (in this case i think you shoud wrap all the content in a <main> element). Is good practice to only use a slinge <h1> on your page for your most important title . Also use the alt attribute from your images.
Marked as helpful1