Submitted over 4 years ago

Shortly URL shortening service - Using JavaScript, Bootstrap, and APIs

Solomon Ekrebe• 610

@krebeDev

Preview site View code

This is a solution for...

URL shortening API landing page

HTML
CSS
JS
API

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

I had quite a fight with JavaScript on this one! I somehow got away without using localStorage. However, I still have some known troubles - 1. Getting the blue strand behind the cards (below Advanced Statistics) and 2. Having the illustration image to be full-width on the right. I couldn't figure out how to achieve these with Bootstrap. Please, your input is needed!!!

Community feedback

Matt Studdert• 13,611

@mattstuddert

Posted over 4 years ago

Hey Solomon, nice work on this. For the background line, you could use pseudo-elements on the middle item to create the line. Have a little look into styling ::before and ::after elements in your CSS. For the full-width illustration, you'll struggle to get this done in Bootstrap. This would be best done using your own custom layout styles in this region to really match up to the design.

I hope this helps. Keep up the great work!

Solomon Ekrebe• 610

@krebeDev

Posted over 4 years ago

Thanks for the insights, @mattstuddert. I'll definitely try out the suggestions.

Please log in to post a comment

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