Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Single Page Portfolio with tailwind

sutulipβ€’ 50

@KmSutula

Desktop design screenshot for the Single-page developer portfolio coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had a few problems with the hero section, aligning the social nav and intro text with the picture. My picture is positioned absolute on the tablet and desktop versions of the page. I was struggling to decide how to architect the top nav bar (adamkeyes & social icons) in relation to the portrait image.

Community feedback

Nelsonβ€’ 2,390

@nelsonleone

Posted

HELLO .....congrats on completing this challenge, it's nice πŸŽ‰πŸŽ‰πŸŽ‰

I have little tip on how you can position the nav icons, hope this comment was helpful and made meaning to you

You can use position relative on the image container.

The container, should bear the image and the icons .

Then set a position of absolute on the icons , you can easily position them as you like since the will be contained by there relative position parent container.

Set a z-index on them to make them always appear on top.

This is one way to do it ,

You can make the name-logo, and icons to be your nav, on the top of your page.

Then your intro should have a display flex, give the image container a specific width so it doesn't go away when you absolutely position the image, you can then position the image to be behind the icons, setting a z-index so it goes behind them

Have fun codingπŸŽ‰

0

Please log in to post a comment

Log in with GitHub
Discord logo

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