Certificate Badges

Developer
Daniesy
Size
3,276 Kb
Views
6,072
  1. Certificate Badges Previews
  2. Certificate Badges HTML Codes
  3. Certificate Badges CSS Codes

How do I make an certificate badges?

What is a certificate badges? How do you make a certificate badges? This script and codes were developed by Daniesy on 10 January 2023, Tuesday.

Certificate Badges Previews
IQ Test

Certificate Badges - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Certificate Badges</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
.badge { position: relative; width: 216px; height: 216px; display: inline-block; margin: 40px; background: #2B2B2B; border-radius: 8px; overflow: hidden;
}
.badge .title { font-family: "Montserrat", sans-serif; font-weight: bold; font-size: 1.7em; position: absolute; top: -28px; border-radius: 8px 8px 0 0; text-align: center; width: 100%; padding: 20px 0;
}
.badge .subtitle { position: absolute; font-family: "Fjalla One", sans-serif; font-size: 1.8em; width: 100%; text-align: center; color: white; position: absolute; top: 115px; transition: all .3s;
}
.badge .subtitle:after { content: "★"; display: block; font-size: 1.4em; position: relative; margin: 12px 0 0; transition: all .3s;
}
.badge:hover .subtitle:after { margin: -5px 0 0;
}
.badge:hover .subtitle { top: 100px;
}
.red .title { background: #DC514E;
}
.red .subtitle:after { color: white;
}
.red:hover .subtitle:after { color: #DC514E;
}
.green .title { background: #2ecc71;
}
.green .subtitle:after { color: white;
}
.green:hover .subtitle:after { color: #2ecc71;
}
.gray .title { background: #95a5a6;
}
.gray .subtitle:after { color: white;
}
.gray:hover .subtitle:after { color: #95a5a6;
}
.yellow .title { background: #f1c40f;
}
.yellow .subtitle:after { color: white;
}
.yellow:hover .subtitle:after { color: #f1c40f;
}
.blue .title { background: #3498db;
}
.blue .subtitle:after { color: white;
}
.blue:hover .subtitle:after { color: #3498db;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="badge red"> <p class="title">WINNING TEAM</p> <p class="subtitle">CTF 365</p>
</div>
<div class="badge green"> <p class="title">WINNING TEAM</p> <p class="subtitle">CTF 365</p>
</div>
<div class="badge gray"> <p class="title">WINNING TEAM</p> <p class="subtitle">CTF 365</p>
</div>
<div class="badge yellow"> <p class="title">WINNING TEAM</p> <p class="subtitle">CTF 365</p>
</div>
<div class="badge blue"> <p class="title">WINNING TEAM</p> <p class="subtitle">CTF 365</p>
</div>
</body>
</html>

Certificate Badges - Script Codes CSS Codes

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
.badge { position: relative; width: 216px; height: 216px; display: inline-block; margin: 40px; background: #2B2B2B; border-radius: 8px; overflow: hidden;
}
.badge .title { font-family: "Montserrat", sans-serif; font-weight: bold; font-size: 1.7em; position: absolute; top: -28px; border-radius: 8px 8px 0 0; text-align: center; width: 100%; padding: 20px 0;
}
.badge .subtitle { position: absolute; font-family: "Fjalla One", sans-serif; font-size: 1.8em; width: 100%; text-align: center; color: white; position: absolute; top: 115px; transition: all .3s;
}
.badge .subtitle:after { content: "★"; display: block; font-size: 1.4em; position: relative; margin: 12px 0 0; transition: all .3s;
}
.badge:hover .subtitle:after { margin: -5px 0 0;
}
.badge:hover .subtitle { top: 100px;
}
.red .title { background: #DC514E;
}
.red .subtitle:after { color: white;
}
.red:hover .subtitle:after { color: #DC514E;
}
.green .title { background: #2ecc71;
}
.green .subtitle:after { color: white;
}
.green:hover .subtitle:after { color: #2ecc71;
}
.gray .title { background: #95a5a6;
}
.gray .subtitle:after { color: white;
}
.gray:hover .subtitle:after { color: #95a5a6;
}
.yellow .title { background: #f1c40f;
}
.yellow .subtitle:after { color: white;
}
.yellow:hover .subtitle:after { color: #f1c40f;
}
.blue .title { background: #3498db;
}
.blue .subtitle:after { color: white;
}
.blue:hover .subtitle:after { color: #3498db;
}
Certificate Badges - Script Codes
Certificate Badges - Script Codes
Home Page Home
Developer Daniesy
Username daniesy
Uploaded January 10, 2023
Rating 3
Size 3,276 Kb
Views 6,072
Do you need developer help for Certificate Badges?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniesy (daniesy) Script Codes
Name
Cool CSS3 Hover Effects Social Icons
Flat css-only countdown and countup
Badge
OsX Mavericks
Profile box
Beautiful Flat Text Slider
Cookie box
Grand Theft Auto 5
Badge certified
SVG Badges for CTF365
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!