Single Price Grid Component using HTML, Scss, and Bootstrap

Solution retrospective
Hi all, please checkout my submitted solution. It will be a pleasure to know your perspective, experiences, etc. when developing a website.
Feel free to comment on:
- suggestion to better solutions (or avoid using 'hacks' :D)
- some nit-picks to a more beautiful and responsive front-end design
- development cycle used for faster and efficient process of building a website.
- other advice related to this challenge
Challenges encountered:
-
Border Radius. I used a hacky way to do it. Please see the live site > scss > media queries > border-radius.
-
Sticky Footer. I used a hacky way to do this. (please see live site > html)
- from html, I added class of h-100.
- from body, class="d-flex flex-column h-100"
- from main, I class="flex-shrink-0"
- from footer, I used container class inside the tag
Notes:
- I do not have the same background as the one in the challenge. The repository that I downloaded does not have a background image included.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @alex-kim-dev
Hey! A little suggestion on the
border-radius
. Do you know you can apply it only to the container along withoverflow: hidden
so it cuts the pointy angles of container's children? You can use it for larger screens, and for mobile just set the radius to 0.Also you can use Codepen's full page view link to make a nicer screenshot, however it's still going to mess up the a11y/html report.
Nice job overall and have fun coding!
Marked as helpful - @AngelusLovell
Bro,
why do u have your code like that.🤔 Create a github repo commit your challenges and host it there.
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