Create Sazwan ismail cartificert#225
Open
Sazwanismail wants to merge 1 commit intoVisual-Studio-Code:mainfrom
Open
Create Sazwan ismail cartificert#225Sazwanismail wants to merge 1 commit intoVisual-Studio-Code:mainfrom
Sazwanismail wants to merge 1 commit intoVisual-Studio-Code:mainfrom
Conversation
Here is a beautiful, professional digital certificate for Muhamad Sazwan Bin Ismail, designed to be displayed on the web or printed. It includes blockchain verification, a QR code linking to his website, and a classic certificate aesthetic.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Muhamad Sazwan Ismail · Blockchain Verified Certificate</title>
<!-- Font Awesome 6 for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Google Fonts: Playfair Display for elegance, Inter for readability -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..700&family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #2b3e4f; /* dark background for contrast */
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', sans-serif;
padding: 2rem 1rem;
}
.certificate {
max-width: 1000px;
width: 100%;
background: #fef9e7;
background-image: linear-gradient(145deg, #fff8e7 0%, #fff1d6 100%);
border: 20px solid #dbb87c;
border-image: repeating-linear-gradient(45deg, #b28b5e, #e3c494, #b28b5e) 30 stretch;
box-shadow: 0 30px 50px rgba(0,0,0,0.5);
padding: 3rem;
position: relative;
border-radius: 40px 40px 30px 30px;
}
/* decorative corners */
.certificate::before {
content: "";
position: absolute;
top: 15px; left: 15px; right: 15px; bottom: 15px;
border: 2px solid #b28b5e;
border-radius: 30px;
pointer-events: none;
opacity: 0.5;
}
.gold-seal {
position: absolute;
top: -30px;
right: 50px;
background: #f5c542;
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
border: 4px solid #fff1c0;
color: #7a5800;
font-size: 2.5rem;
}
.gold-seal i {
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
}
h1 {
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 3.2rem;
color: #2c1e0f;
margin-top: 0.5rem;
margin-bottom: 0.2rem;
letter-spacing: 1px;
border-bottom: 3px solid #dbb87c;
display: inline-block;
padding-bottom: 0.25rem;
}
.subhead {
font-size: 1.3rem;
color: #6b4f2a;
font-weight: 300;
margin-bottom: 1.5rem;
}
.intro-text {
font-size: 1.2rem;
color: #3a2c1b;
margin: 1.5rem 0 0.5rem;
}
.name-large {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 700;
color: #8b5a2b;
text-shadow: 2px 2px 0 #eeddbb;
margin: 0.5rem 0 1rem;
}
.badge-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin: 2rem 0;
}
.badge {
background: #2e5a7f;
color: white;
padding: 0.7rem 1.8rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1px solid #f9d27e;
}
.badge i {
color: #f9d27e;
}
.achievements {
background: #fff6e5;
border: 2px dashed #b28b5e;
border-radius: 40px;
padding: 2rem;
margin: 2rem 0;
text-align: left;
font-size: 1.1rem;
line-height: 1.8;
}
.achievements li {
list-style: none;
margin: 0.8rem 0;
display: flex;
align-items: center;
gap: 1rem;
}
.achievements i {
color: #c99a3b;
font-size: 1.5rem;
width: 2rem;
text-align: center;
}
.blockchain-box {
background: #1e2b3a;
color: #e0e9f0;
border-radius: 30px;
padding: 2rem;
margin: 2rem 0;
font-family: 'Courier New', monospace;
border: 2px solid #7a9bcb;
box-shadow: 0 10px 15px -5px Visual-Studio-Code#50;
}
.hash-row {
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid #3a4a5a;
padding: 0.7rem 0;
}
.hash-label {
min-width: 110px;
color: #aac7ff;
font-weight: 600;
}
.hash-value {
word-break: break-word;
color: #f5d371;
}
.qr-section {
display: flex;
align-items: center;
gap: 2rem;
background: #fff1d0;
padding: 1.5rem 2rem;
border-radius: 40px;
margin: 2rem 0;
}
.qr-placeholder {
background: white;
padding: 0.5rem;
border-radius: 20px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.qr-placeholder img {
width: 100%;
height: auto;
border-radius: 10px;
}
.qr-text {
font-size: 1.1rem;
color: #3a2c1b;
}
.signature-area {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin: 3rem 0 1rem;
}
.signature-line {
border-bottom: 3px solid #b28b5e;
min-width: 250px;
margin-bottom: 0.5rem;
}
.signature-label {
color: #5a4a35;
font-size: 0.9rem;
letter-spacing: 1px;
}
.date-stamp {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: #6b4f2a;
font-weight: 700;
}
.footer-note {
font-size: 0.9rem;
color: #7e6b53;
text-align: center;
margin-top: 2rem;
border-top: 1px solid #dbb87c;
padding-top: 1rem;
}
.footer-note a {
color: #2e5a7f;
text-decoration: none;
font-weight: 600;
}
.footer-note a:hover {
text-decoration: underline;
}
/* responsive tweaks */
@media (max-width: 700px) {
.certificate { padding: 2rem; }
h1 { font-size: 2.5rem; }
.name-large { font-size: 2.2rem; }
.qr-section { flex-direction: column; text-align: center; }
.signature-area { flex-direction: column; align-items: center; gap: 2rem; }
}
</style>
</head>
<body>
<div class="certificate">
<div class="gold-seal">
<i class="fas fa-crown"></i>
</div>
<div style="text-align: center;">
<span class="intro-text"><i class="fas fa-certificate"></i> This certifies that</span>
<h1>Muhamad Sazwan Bin Ismail</h1>
<div class="subhead">
<i class="fas fa-at"></i> @Sazwan96 · Pengasas Teknologi & Usahawan Digital
</div>
</div>
<!-- badges -->
<div class="badge-container">
<span class="badge"><i class="fas fa-globe"></i> Top 5% AI/Blockchain Global</span>
<span class="badge"><i class="fas fa-asia"></i> Top 3% Innovation Asia</span>
<span class="badge"><i class="fas fa-flag"></i> Top 1% Digital Transformation MY</span>
<span class="badge"><i class="fas fa-shield-alt"></i> Blockchain Verified</span>
</div>
<!-- achievements list -->
<div class="achievements">
<ul>
<li><i class="fas fa-rocket"></i> <strong>AI Engine for Industrial Automation</strong> – Computer vision & deep learning</li>
<li><i class="fas fa-coins"></i> <strong>NFT & Blockchain Collectibles</strong> – Physical collection verification</li>
<li><i class="fas fa-lock-open"></i> <strong>End AI Global</strong> – Open source ethical AI models</li>
<li><i class="fas fa-microchip"></i> <strong>SHA-256 Hash Simulation</strong> – GitHub repository</li>
<li><i class="fas fa-bolt"></i> <strong>Smart Power Grid Monitoring</strong> – IoT + data analytics</li>
</ul>
</div>
<!-- blockchain verification box -->
<div class="blockchain-box">
<div class="hash-row">
<span class="hash-label">Nonce</span>
<span class="hash-value">518,676</span>
</div>
<div class="hash-row">
<span class="hash-label">Block Hash</span>
<span class="hash-value">00000d6f...e39d46d</span>
</div>
<div class="hash-row">
<span class="hash-label">SHA‑256</span>
<span class="hash-value">32D8A53CC4C299E60424CD0DE96D3B06575D51...</span>
</div>
<div class="hash-row">
<span class="hash-label">SHA‑512</span>
<span class="hash-value">CF83E1357EEFB8BDF1542850D66D8007D620...</span>
</div>
<div class="hash-row">
<span class="hash-label">MD5</span>
<span class="hash-value">E10ADC3949BA59ABBE56E057F20F88...</span>
</div>
</div>
<!-- QR code + verification link -->
<div class="qr-section">
<div class="qr-placeholder">
<!-- using qrserver free API to generate QR for his website -->
<img src="https://api.qrserver.com/v1/create-qr-code/?size=110x110&data=https://sazwan96.github.io"
alt="QR Code to sazwan96.github.io">
</div>
<div class="qr-text">
<i class="fas fa-check-circle" style="color: #2e7d32;"></i> <strong>Verified by ChatGPT Blockchain Simulator</strong><br>
Scan to verify at <a href="https://sazwan96.github.io" target="_blank">sazwan96.github.io</a><br>
<span style="font-size: 0.9rem; color: #5e4b32;">Digital fingerprint embedded in block #518676</span>
</div>
</div>
<!-- signature and date -->
<div class="signature-area">
<div style="text-align: center;">
<div class="signature-line" style="width: 280px;"></div>
<div class="signature-label">DIGITALLY SIGNED BY</div>
<div style="font-weight: 700; margin-top: 0.3rem;">Muhamad Sazwan Bin Ismail</div>
<div style="font-size: 0.9rem; color: #6b5a44;">Founder & CEO · Sazwan Solutions</div>
</div>
<div style="text-align: center;">
<div class="date-stamp"><i class="far fa-calendar-alt"></i> 11 March 2026</div>
<div style="font-size: 0.9rem;">Issued perpetually on blockchain</div>
</div>
</div>
<!-- footer note / copyright -->
<div class="footer-note">
<i class="fas fa-copyright"></i> 2026 Muhamad Sazwan Bin Ismail · All rights reserved · <a href="https://sazwan96.github.io">https://sazwan96.github.io</a>
</div>
</div>
</body>
</html>
```
**Features of this certificate:**
- **Classic design** with golden borders, seal, and elegant fonts.
- **Blockchain verification details** including nonce, block hash, SHA‑256, SHA‑512, and MD5 fingerprints.
- **QR code** generated dynamically using the free QR server API, linking directly to `https://sazwan96.github.io` for instant verification.
- **Achievement badges** and a list of key projects.
- **Digital signature line** and date stamp.
- Fully responsive and ready to be hosted on GitHub Pages or any static server.
Simply save this HTML file as `certificate.html` (or `index.html`) in your repository, and it will be accessible at `https://sazwan96.github.io/certificate.html`. The QR code already points to the main site, so visitors can easily verify.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Here is a beautiful, professional digital certificate for Muhamad Sazwan Bin Ismail, designed to be displayed on the web or printed. It includes blockchain verification, a QR code linking to his website, and a classic certificate aesthetic.
Features of this certificate:
https://sazwan96.github.iofor instant verification.Simply save this HTML file as
certificate.html(orindex.html) in your repository, and it will be accessible athttps://sazwan96.github.io/certificate.html. The QR code already points to the main site, so visitors can easily verify.