How to add "Made By" at the bottom corner of the website?
Tags: html, css, design, uiweekly
Published: 2021-07-23 06:41:07

> **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](https://dev.to/asyraf/how-to-change-link-underline-color-with-css-m47) (Pssst, read that article, Pretty cool stuff 🔥).

This week, when I look at the [Gumroad](https://gumroad.com/) website, specifically all of the product pages, I notice new **interesting HTML stuff** :P.

![Screenshot 2021-07-04 at 20.38.54.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625402479146/tJ5N_S-O1.png)

Check this example [product page](https://maketheweb.gumroad.com/l/cleanshot). 

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](https://webflow.com/)

![Screenshot 2021-07-04 at 21.03.54.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625403848848/UVXPSnI52.png)

### ✅ [Stripe](https://stripe.com/)

![Screenshot 2021-07-04 at 21.39.33.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625405986451/4es9B8a5dQ.png)

### ✅ [mmm.page](https://mmm.page/)

![mmmgif.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1625524700710/T-m2zSc4O.gif)

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

Examples:

### ✅ [MakerReads](https://makerreads.com/)

![Screenshot 2021-07-04 at 21.09.53.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625404204004/JblUw5dAx.png)

### ✅ [No More Google](https://nomoregoogle.com/)

![Screenshot 2021-07-04 at 21.51.52.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625406724221/dLREmmHRB.png)

### ✅ [Begreate.me](https://begreat.me/)

![Screenshot 2021-07-06 at 12.15.06.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625544977350/GACnz6uuw.png)

### ✅ [chart2site.com](https://chart2site.com/)

![Screenshot 2021-07-06 at 12.17.05.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1625545054516/-0DOGxSKH.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1625525183686/I9QTyVDfW.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**

{% codepen https://codepen.io/asyrafff/pen/gOWPodv %}

**Pieter Levels**

{% codepen https://codepen.io/asyrafff/pen/YzVwYRQ %}

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](https://twitter.com/asyr0f) 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 😆