Skip to content
Submitted almost 5 years ago

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

Solomon Ekrebe•610
@krebeDev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...URL shortening API landing page
  • HTML
  • CSS
  • JS
  • API
3intermediate

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
    @mattstuddertPosted almost 5 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!

    0
    Solomon Ekrebe•610
    @krebeDevPosted almost 5 years ago

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

    0

Please log in to post a comment

Log in with GitHub

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