Sketching on something :P

Sketching on something :P

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

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 πŸ˜†

Β 
Share this