Badges

Have you ever wanted to add a tiny badge to your website? Or perhaps wanted to add a copyright symbol telling users who made the website without a full blown sticky footer? Now you can!

Introducing Badges

Very innovative name, I know.

Just add this piece of code to your website and you're all set! Just make sure to replace YOUR TEXT HERE with your text.
Also make sure to replace the link in line 2 of the following codeblock with your own link.


<link rel="stylesheet" href="https://badge.coolcodersj.repl.co/style.css">
<a class="badge" href="https://repl.it/@USER" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Repl.it_logo.svg" alt="replit" />YOUR TEXT HERE</a>

The badge is a small sticky badge in the bottom right corner. Example repl linked.

Multiple badges

Badges has support for up to 4 badges total. To add a badge, copy the same code, but change the class in line 2 to one of these classes -
badge This class is the bottom-most badge
badge2 This class is the second bottom-most badge
badge2 This class is the second topmost badge
badge4 This class is the topmost badge

Animations

When you hover over a badge, the replit logo spins. To prevent this, or if you're putting in your own image, add the class no-animate. An example of this is the Github badge (last badge on example). The replit logo spins, but the Github logo does not.

Edit: Thanks for trending guys!

Voters

87 more...

Comments

hot new top

And don't forget to chance the link. Otherwise it will bring you to:
https://coolcodersj.repl.co/
DID YOU JUST TRY TO GET FREE ADVERTISING?!?!?!?!

that is an example repl. The above code says "

", where user is your username. I needed to put a valid url for it to work.

I have never and will never self-advertise on replit. I may put my content in a post, but will never try to advertise.

how did you make a single subdomain for your site? Usually it's https://..repl.co but yours is just https://.repl.co ??

Name the repl your exact username. For example, that repl is named "CoolCoderSJ"

k i understand

cool thanks!

If you create a repl named "nbbcsf", the URI will be something like "nbbcsf.repl.co" (assuming you using something that needs a site).

If u go to freenom.com u can get like even more of a custom domain!

Profile icon

[deleted]

freenom is a scam. sure they give you free domains, at the cost of your personal info exposed on the dark web, and the peace of mind that if your website is underated or overrated they will deregister it, and the fact that they have redirected people's registered domains to adult sites. get a free domain from the github student developer pack or buy one.

Well, that's what people may say. Now show me evidence that any of what you are claiming is true

Luv tis, tho we should be able to customize the CSS and the icon, but in an easy way...

You probably could change the image on it if you changed the name of the source for that image and it could possible change the image on is and the

the image is customizable, just change the image source

as for the css, you can override it by using the badge CSS class

If you want I could make something that does that

if you know decent web dev customization is pretty easy as is.

~~make it pease~~

Best and cleanest if you just make an api smh

again- The code is literally 3 lines. If you know almost any html and/or css, you can customize it. The code is made for people who know html and/or css, I don't see any other way you could implement it without knowing any html at all.

Using a link bruh

fine i will customize it myself 😒😭 ~~im lazy~~


.badge:hover{
  background-color: rgb(26, 43, 63) !important;
}
.badge{
  transition: 0.2s !important;
}
.badge img:hover, .badge:hover > img, .badge2 img:hover, .badge2:hover > img, .badge3 img:hover, .badge3:hover > img, .badge4 img:hover, .badge4:hover > img{
  animation-name: spin !important;
  animation-duration: 2s !important;
  animation-timing-function: cubic-bezier(0.80, 0, 0.20, 1) !important;
  animation-iteration-count: infinite !important;
}
@keyframes spin{
  0% { transform: scale(1) rotate(0); }
  25% { transform: scale(1) rotate(90); }
  50% { transform: scale(1) rotate(180); }
  75% { transform: scale(1) rotate(270); }
  100% { transform: scale(1) rotate(360deg);}
}

add this to your css

not sure what most of it is just by skimming, but it made things a lot better by adding transition: 0.2s !important;, thanks.

WAIT WHAT?!?!?!? Instead it brought me here:https://replit.com/@user?tab=comments

Sorry if it wasn't clear enough, but you have to change the link in the code in line 2 of the codeblock above. I have edited the post to make it clearer now.

POG

I want to get into webpage design someday, but I have no clue where to start. This is better than anything I could make

https://w3schools.com/ is always a great place to start :)

thx

looks like I'll learn HTML and then once I have that down I gotta take up Java bcuz I want to make my own mobile app one day

codecademy is another great option for you

too late

how do I upload an image to HTML?

do you mean a repl? If you mean a repl, click the three dots on the top right corner of the files bar, click upload file

To use an image in html, do


<img src="IMAGE URL HERE" alt="ALT TEXT HERE" />

yeah but like how do I find the image URL

right click on image > Copy Image Link

the text may vary between browsers

HTML is the best language for webpages

but my ultimate goal is to create mobile apps

oh. mobile apps? I suggest python or JavaScript for that

why

Mobile apps are not made with HTML. To make a mobile app, you need one of the following languages -

Swift - iOS and macOS apps
Python - Desktop apps
Kotlin or Java - Android Apps

You can most certainly turn a website into a desktop app, but your goal is mobile.

You could also use unity and build for iOS/android. It uses C# which is really similar to Java

Not really

which is why I want to make webpages first, then apps

What do you mean? C# is similar to Java. The syntax is basically the same and C# was built off of Java.

I have no clue what this argument is about but please don't use this comment thread to argue. Just make a post saying that

"C# and Java are almost the same."

settle your differences there.

I prefer you guys open a new repl and use multiplayer chat or threads as I get notifications for each message sent on this post.

Yea sorry about that.

Uhh, a lot of apps on the App Store are now just web apps (e.g Amazon).

two main ways:
if the image is online, and you're using chrome, right-
click>copy image address (provided that the website you're
copying from, did not use a local link from their local
computer)

now, if the image is offline:
1) if the image is 'example.jpeg' and it is located
locally on your pc, then in your code, you can just call
it 'example.jpeg'
2) if the image is 'example.jpeg' , and its located
locally on your disk, then open its file location, in file
explorer(windows). Right-click it > open with > google
chrome (or any other browser). Now, once browser pops up
with the image, copy the url from the url bar. it will be
something like c:/user/folder/subfolder/example.jpeg

There is also mimo on mobile

ok then

When I hover it gets a little bigger, then if I hover one more second it gets even bigger. Could you make the size change smother and remove the second size change?

that is kewl

I added myself - https://replit.com/@LingWu1/badge#index.html

SO COOL! I added it to my site

Badges

Introducing Badges.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}.css-1gcl232{min-width:16px;min-height:16px;}

Multiple badges

Animations

Comments

POG.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}.css-1gcl232{min-width:16px;min-height:16px;}

"C# and Java are almost the same.".css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}.css-1gcl232{min-width:16px;min-height:16px;}

Introducing Badges

POG

"C# and Java are almost the same."