<aside> 📌 How to add a sticky ‘made by’ badge in the bottom corner of a Carrd.co site

</aside>

• It’s adapted from the code and setup suggested by @levelsio

Step1 – add the HTML

• Add an Embed element, set it to Inline and add this HTML code:

<a target="_blank" rel="noopener" class="levelsio-by" href="<https://twitter.com/markbowley>"><img src="<https://pbs.twimg.com/profile_images/1181977806017880064/CTKGPHhX_400x400.jpg>" /><p>by @markbowley</p></a>

You can change some of the details for your own needs:

• Change the link URL (href)
• Change the profile image source (tip: use the URL of your Twitter avatar)
• Change the badge text (in between the <p> and </p> elements)

Step 2 – add the CSS

• Add another Embed element, set it to Hidden in the Head, and add this CSS code:

<style>

.levelsio-by {
font-family:"Helvetica Neue",sans-serif;
left:0; /* change to 'right' for a right-corner badge */
bottom:0;
position:fixed;
z-index:100;
border-top-right-radius: 5px; /* change to 'border-top-left-radius' for a right-corner badge */
padding: 6px;
border-top: 1px solid #efefef; /* change the border colour if you want */
border-right: 1px solid #efefef; /* change to 'border-left' for a right-corner badge, and change the border colour if you want */
background: #fff; /* change to your preferred badge background colour */
color: #6f6f6f; /* change to your preferred link colour */
text-decoration:none;
}
.levelsio-by:hover {
background:#fff;
color:rgb(255, 71, 66); /* change to your preferred link hover colour */
}
.levelsio-by img {
border-radius:100%;
width:22px;
vertical-align:middle;
}
.levelsio-by p {
margin:0;
vertical-align:middle;
display:inline;
margin-left:7px;
font-weight:500;
font-size:14px;
}

</style>

You can change some of the details for your own needs (see comments in the code):

• Change the badge background colour
• Change the link text colour
• Change the position to a bottom-right corner badge