Creating an alternative Linktr.ee page using HTML & CSS

For those who are not familiar with Linktr.ee, its a service that allows users to create a landing page with a list of links for others to connect and showcase their work. Currently, they have a free and paid version. The free version offers a limited amount of styling, while the paid version allows you to provide your own branding and further customisation on your links page.

While I'm aware that there are multiple ways to create an alternative Linktr.ee page, I found this approach to be helpful and straightforward. It utilises the basic CSS concepts in positioning and offers a chance to experiment on customising the button styles and transitions.

I believe this is a great beginner project for those who are starting off with HTML and CSS and wanted to build a simple landing page that anyone can use when promoting their work online.

Heres my final result that you can view on CodePen:

A couple of things Ive learned while building out my landing page:

1. With Linktr.ee, the elements on the screen (i.e. the avatar photo, the handle name and the links), it needs to be placed in the centre.
2. I wanted to create a custom gradient that was easy on the eyes. Ive used https://cssgradient.io/ to create my background and set the background to be fixed.
3. By default, the buttons on Linktr.ee are styled to be rectangle blocks. I decided to tweak this on my landing page by adding a border radius to make my buttons look round.
4. In making the landing page responsive, I made sure to set the buttons width to 70% so this way when scaling down on the browser or viewing on the mobile browser, the page would be adjusted accordantly without eschewing the content on the side.

Have you built your own landing page similar to Linktr.ee? Let me know in the comments below!