Responsive bookmark landing page

Solution retrospective
This was my first time using Framer Motion, and I implemented it to add a smooth sliding transition to the accordion component.
Recently, I learned about the compound components pattern, but I initially struggled to understand it. Since the best way to learn is by doing, I decided to apply it in this project. Although I faced challenges at first, I was able to complete it—and now, I feel like I have a solid understanding of the pattern, which I'm proud of.
What specific areas of your project would you like help with?I need help with adding the background image and text decoration (underline).
Currently, the width of the underline remains constant instead of adjusting dynamically based on the content. I’d appreciate any help in resolving these two issues.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@olaide-hok
Hi there,
Great work here!
Well done.
Regarding
the width of the underline remaining constant instead of adjusting dynamically based on the content
. An approach would be to style using ::after pseudo css selector. The width will then be in percentage instead of a fixed value.For the background image, two approaches
- add it using the ::before css pseudo selector.
- add it by adding and styling a div as a sibling element of the image. With the parent div position relatively and target div absolutely. The width and height would have percentage values in other to be responsive.
For example
function HeroSection() { return ( <section className="mx-8 mt-20 lg:mx-12 lg:mt-[6.75rem] lg:grid lg:grid-cols-2 xl:mx-0 xl:gap-16"> <div class="relative"> <img className="mx-auto lg:order-2" src={heroImg} alt="Illustration of a browser tab showing a list of bookmarks with colored indicators" /> <div class="pos right-0 bottom-0 -z-1 bg-[#5267D} w-[75%] h-[75%] rounded-l-[999px]"></div> </div> // Article section goes here </section> ); }
Or styling the pseudo
function HeroSection() { return ( <section className="mx-8 mt-20 lg:mx-12 lg:mt-[6.75rem] lg:grid lg:grid-cols-2 xl:mx-0 xl:gap-16"> <div class="hero-img-wrapper relative"> <img className="mx-auto lg:order-2" src={heroImg} alt="Illustration of a browser tab showing a list of bookmarks with colored indicators" /> </div> // Article section goes here </section> ); }
.hero-img-wrapper::before{ content: "", background: #5267DF; position: absolute; width: 75%; height: 75%; }
NB all tailwind utility classes and css rules provided have to be edited to suite specific needs.
The Feature Section component could be update to
function HeroSection() { return ( <section className="mx-8 mt-20 lg:mx-12 lg:mt-[6.75rem] lg:grid lg:grid-cols-2 xl:mx-0 xl:gap-16"> <article> <nav className="mt-8" aria-label="Download options"> <ul className="flex items-center justify-left gap-3.5"> // li tags goes here </ul> </nav> </article> </section> ); }
Well done and happy coding.
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