DEV Community

Cover image for How to add "Made By" at the bottom corner of the website?
Amirul Asyraf
Amirul Asyraf

Posted on

How to add "Made By" at the bottom corner of the website?

hey πŸ‘‹ , I still haven't figured out what the title should be. Comment if you find a well-suited title after reading this article. You're awesome :P

Last week, I look at the Basecamp website to know how to Change the underline color Tricks in CSS (Pssst, read that article, Pretty cool stuff πŸ”₯).

This week, when I look at the Gumroad website, specifically all of the product pages, I notice new interesting HTML stuff :P.

Screenshot 2021-07-04 at 20.38.54.png

Check this example product page.

Notice the Powered by Gumroad floating stuff(I don't know what to call it πŸ˜‚). That is cool actually. I have already seen this trend on many websites nowadays.

Free marketing. It makes your brand stands out. πŸ¦„

Other examples;

βœ… Webflow

Screenshot 2021-07-04 at 21.03.54.png

βœ… Stripe

Screenshot 2021-07-04 at 21.39.33.png

βœ… mmm.page

mmmgif.gif

If you have a side project, you can show: "Made by asyraf" too!!

Examples:

βœ… MakerReads

Screenshot 2021-07-04 at 21.09.53.png

βœ… No More Google

Screenshot 2021-07-04 at 21.51.52.png

βœ… Begreate.me

Screenshot 2021-07-06 at 12.15.06.png

βœ… chart2site.com

Screenshot 2021-07-06 at 12.17.05.png

Pretty cool right 🌈. So, how we gonna make it ??


I have two ways for you;

1) Inspect DevTool

Honestly, this is easy. You can just open your DevTool and inspect the element. Most of the view is written in HTML & CSS. Pretty easy right. Don't bother to think of React or Vue or Svelte or other stuff.

Screenshot 2021-07-06 at 06.46.04.png

Go and try to inspect the element. Use the utilities that Google has been given to you(that's why I love using vanilla things).

If you already forgot how HTML & CSS is, I'm here to help you. Keep reading :P

2) Code Snippet

There are two variations I came across here. One is like a Gumroad, and the second is like Pieter Levels.

Gumroad

Pieter Levels

The main thing here is:

  • a tag: to wrap the floating stuff, the text & the logo
  • left or right: either you want to put it on the left/right/bottom
  • position: set it to fixed as you want it to be sticky when you scroll the page and stick it at its position.
  • logo stuff
  • decoration stuff; border-radius, text-decoration, box-shadow ......

That is all my friends. Don't forget to mention me on Twitter if you put it on your website. Happy to see the variation of your guys' creativity 🌈.

The End


Resources:

no resources as I just use DevTool πŸ˜†

Discussion (0)