@bammytech1
@MitaliShah
Submitted
What are you most proud of, and what would you do differently next time?
Any feedback is appreciated! Thank you!
What challenges did you encounter, and how did you overcome them?
To display different images for mobile and desktop screens, I have utilized the element.
What specific areas of your project would you like help with?
Any feedback is appreciated! Thank you!
@bammytech1
Posted
Well organised work..Happy coding
@AyomideKayode
Submitted
Built this card using CSS customs properties, flex and grid. My image placement in the desktop view might be a bit unorthodox, lol. Reviews and feedback would be appreciated.
@bammytech1
Posted
Hi @AyomideKayode Here are some suggestions to help improve your code:
This challenges requires the use of two images 🎑 for different breakpoints. The picture element will facilitate this. Here is an example of how it works: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture> More Info:📚https://www.w3schools.com/html/html_images_picture.asp
The only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a paragraph element. The statistics at the bottom are a list, so it should be built using an unordered List element. More Info:📚
MDN <ul>: The Unordered List element
set min-height: 100vh; for better responsiveness. For improved accessibility 📈 for your content, it is best practice to use em for media-queries. Using these unit gives users the ability to scale elements up and down, relative to a set value. If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!
Marked as helpful
@Frankmona
Submitted
Issues using the right font #appreciate comments
@bammytech1
Posted
HI @Frankmona I can see you don't import the right way. please check below for correction
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');
also change this: font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
to this: font-family: 'Big Shoulders Display', cursive;
i hope this help?
Marked as helpful
@hozayves
Submitted
Hi there, I'm Yves and this is my solution for this challenge.
This challenge looks simple. yet still challenging! Especially when making it accessible.
A things that I learned in CSS
Build with
Anyway, feel free to give me any suggestions or feedback. Thanks!
@bammytech1
Posted
@hozayves Nice work mate. i will suggest you use rem for font sizes and em for padding and the likes.
@musayar9
Submitted
@bammytech1
Posted
@musayar9 happy coding mate, nice job but i would say you should fix the responsiveness. to make you design more charming.
Marked as helpful
@nasirmca
Submitted
@bammytech1
Posted
@nasirmca nice try I guess this is your first challenge, you still need to fix the responsiveness both web and mobile view. The layout are not appealing.
Marked as helpful
