Hostinger-reg-GitHub step 3
📦 General
✨ The Prompt Phrase
Take the new SSH key you created and navigate to your GitHub repository. Go to Settings, then Deploy Keys. Create a new deploy key, name it according to your application, and paste the key. Make sure to check "Allow write access" before saving. Look at the image in the preview is the key screen to apply the SSH.
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Deploy Keys - Settings</title>
<style>
/* ==================== CSS Variables ==================== */
:root {
--bg-primary: #0d1117;
--bg-secondary: #161b22;
--bg-tertiary: #21262d;
--bg-info: #1c2938;
--border-primary: #30363d;
--border-secondary: #21262d;
--text-primary: #e6edf3;
--text-secondary: #7d8590;
--text-muted: #484f58;
--accent-blue: #58a6ff;
--accent-purple: #8b5cf6;
--accent-green: #238636;
--accent-green-hover: #2ea043;
--accent-red: #da3633;
--accent-red-hover: #b62324;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}
/* ==================== Reset & Base Styles ==================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.5;
font-size: 14px;
}
a {
color: var(--accent-blue);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* ==================== Layout Container ==================== */
.container {
display: flex;
min-height: 100vh;
}
/* ==================== Sidebar Navigation ==================== */
.sidebar {
width: 280px;
background-color: var(--bg-primary);
border-right: 1px solid var(--border-primary);
padding: 16px 0;
overflow-y: auto;
}
.nav-section {
margin-bottom: 24px;
}
.nav-section-title {
padding: 8px 16px;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.nav-item {
display: flex;
align-items: center;
padding: 8px 16px;
color: var(--text-primary);
cursor: pointer;
transition: background-color 0.15s ease;
position: relative;
}
.nav-item:hover {
background-color: var(--bg-secondary);
}
.nav-item.active {
background-color: var(--bg-secondary);
font-weight: 600;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background-color: var(--accent-blue);
}
.nav-item-icon {
margin-right: 12px;
font-size: 16px;
color: var(--text-secondary);
width: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-item-text {
flex: 1;
}
.nav-item-badge {
background-color: var(--accent-green);
color: var(--text-primary);
padding: 2px 7px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.nav-item-chevron {
color: var(--text-muted);
font-size: 12px;
}
/* ==================== Top Navigation Tabs ==================== */
.top-nav {
display: flex;
gap: 16px;
padding: 16px 32px;
background-color: var(--bg-primary);
border-bottom: 1px solid var(--border-primary);
}
.top-nav-item {
padding: 8px 0;
color: var(--text-primary);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: border-color 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
}
.top-nav-item:hover {
border-bottom-color: var(--border-primary);
}
.top-nav-item.active {
border-bottom-color: var(--accent-blue);
}
.top-nav-icon {
font-size: 16px;
}
/* ==================== Main Content Area ==================== */
.main-content {
flex: 1;
overflow-y: auto;
}
.content-wrapper {
max-width: 1280px;
padding: 24px 32px;
}
/* ==================== Info Banner ==================== */
.info-banner {
background-color: var(--bg-info);
border: 1px solid rgba(139, 92, 246, 0.4);
border-radius: 6px;
padding: 16px;
margin-bottom: 24px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.info-banner-icon {
color: var(--accent-purple);
font-size: 20px;
flex-shrink: 0;
}
.info-banner-text {
color: var(--text-primary);
font-size: 14px;
line-height: 1.6;
}
/* ==================== Section Header ==================== */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.section-title {
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
}
/* ==================== Button Styles ==================== */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 16px;
font-size: 14px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
border: 1px solid;
font-family: var(--font-sans);
}
.btn-primary {
background-color: var(--accent-green);
border-color: rgba(240, 246, 252, 0.1);
color: var(--text-primary);
}
.btn-primary:hover {
background-color: var(--accent-green-hover);
}
.btn-danger {
background-color: var(--accent-red);
border-color: rgba(240, 246, 252, 0.1);
color: var(--text-primary);
}
.btn-danger:hover {
background-color: var(--accent-red-hover);
}
/* ==================== Description Text ==================== */
.description-text {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.6;
margin-bottom: 24px;
}
/* ==================== Deploy Key Card ==================== */
.deploy-keys-section {
background-color: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 6px;
overflow: hidden;
}
.deploy-keys-header {
padding: 16px;
border-bottom: 1px solid var(--border-primary);
font-weight: 600;
color: var(--text-primary);
}
.deploy-key-item {
padding: 16px;
border-bottom: 1px solid var(--border-primary);
display: flex;
gap: 16px;
}
.deploy-key-item:last-child {
border-bottom: none;
}
.deploy-key-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-primary);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.deploy-key-badge {
background-color: var(--bg-tertiary);
color: var(--text-secondary);
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
border: 1px solid var(--border-primary);
}
.deploy-key-content {
flex: 1;
}
.deploy-key-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.deploy-key-hash {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 8px;
word-break: break-all;
}
.deploy-key-meta {
font-size: 12px;
color: var(--text-secondary);
}
.deploy-key-meta a {
color: var(--text-secondary);
}
.deploy-key-meta a:hover {
color: var(--accent-blue);
}
.deploy-key-actions {
flex-shrink: 0;
display: flex;
align-items: flex-start;
}
/* ==================== Footer ==================== */
.footer {
padding: 24px 32px;
border-top: 1px solid var(--border-primary);
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
font-size: 12px;
color: var(--text-secondary);
}
.footer a {
color: var(--accent-blue);
}
.footer-icon {
margin-right: 8px;
}
/* ==================== Responsive Design ==================== */
@media (max-width: 1024px) {
.sidebar {
width: 240px;
}
.content-wrapper {
padding: 16px 24px;
}
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar {
width: 100%;
border-right: none;
border-bottom: 1px solid var(--border-primary);
}
.top-nav {
padding: 12px 16px;
}
.content-wrapper {
padding: 16px;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- ==================== Sidebar Navigation ==================== -->
<aside class="sidebar">
<!-- General Section -->
<nav class="nav-section">
<div class="nav-item">
<span class="nav-item-icon">⚙️</span>
<span class="nav-item-text">General</span>
</div>
</nav>
<!-- Access Section -->
<nav class="nav-section">
<div class="nav-section-title">Access</div>
<div class="nav-item">
<span class="nav-item-icon">👥</span>
<span class="nav-item-text">Collaborators</span>
</div>
</nav>
<!-- Code and Automation Section -->
<nav class="nav-section">
<div class="nav-section-title">Code and automation</div>
<div class="nav-item">
<span class="nav-item-icon">🌿</span>
<span class="nav-item-text">Branches</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🏷️</span>
<span class="nav-item-text">Tags</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">📋</span>
<span class="nav-item-text">Rules</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">⚡</span>
<span class="nav-item-text">Actions</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🤖</span>
<span class="nav-item-text">Models</span>
<span class="nav-item-badge">Preview</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🔗</span>
<span class="nav-item-text">Webhooks</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🤝</span>
<span class="nav-item-text">Copilot</span>
<span class="nav-item-chevron">›</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">📦</span>
<span class="nav-item-text">Environments</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">💻</span>
<span class="nav-item-text">Codespaces</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">📄</span>
<span class="nav-item-text">Pages</span>
</div>
</nav>
<!-- Security Section -->
<nav class="nav-section">
<div class="nav-section-title">Security</div>
<div class="nav-item">
<span class="nav-item-icon">🛡️</span>
<span class="nav-item-text">Advanced Security</span>
</div>
<div class="nav-item active">
<span class="nav-item-icon">🔑</span>
<span class="nav-item-text">Deploy keys</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🔐</span>
<span class="nav-item-text">Secrets and variables</span>
<span class="nav-item-chevron">›</span>
</div>
</nav>
<!-- Integrations Section -->
<nav class="nav-section">
<div class="nav-section-title">Integrations</div>
<div class="nav-item">
<span class="nav-item-icon">🔌</span>
<span class="nav-item-text">GitHub Apps</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">📧</span>
<span class="nav-item-text">Email notifications</span>
</div>
<div class="nav-item">
<span class="nav-item-icon">🔗</span>
<span class="nav-item-text">Autolink references</span>
</div>
</nav>
</aside>
<!-- ==================== Main Content ==================== -->
<main class="main-content">
<!-- Top Navigation Tabs -->
<nav class="top-nav">
<div class="top-nav-item">
<span class="top-nav-icon">🔒</span>
<span>Security</span>
</div>
<div class="top-nav-item">
<span class="top-nav-icon">📊</span>
<span>Insights</span>
</div>
<div class="top-nav-item active">
<span class="top-nav-icon">⚙️</span>
<span>Settings</span>
</div>
</nav>
<!-- Content Wrapper -->
<div class="content-wrapper">
<!-- Info Banner -->
<div class="info-banner">
<div class="info-banner-icon">🔮</div>
<div class="info-banner-text">
We recommend using <a href="#">GitHub Apps</a> instead for fine grained control over repositories and <a href="#">enhanced security</a>.
</div>
</div>
<!-- Section Header -->
<div class="section-header">
<h1 class="section-title">Deploy keys</h1>
<button class="btn btn-primary">Add deploy key</button>
</div>
<!-- Description -->
<p class="description-text">
<a href="#">Deploy keys</a> use an SSH key to grant readonly or write access to a single repository. They are not protected by a passphrase and can be a security risk if your server is compromised. If you have a complex project or want more fine-grain control over permissions, consider using <a href="#">GitHub Apps</a> instead.
</p>
<!-- Deploy Keys List -->
<div class="deploy-keys-section">
<div class="deploy-keys-header">1 deploy key</div>
<div class="deploy-key-item">
<div class="deploy-key-icon">
<span>🔑</span>
</div>
<div class="deploy-key-content">
<div class="deploy-key-title">glRompt my manager.</div>
<div class="deploy-key-hash">SHA256:XVGWTrosRgG2nez@io4wbCp7gRoKVJHFHW9CAR9iYng</div>
<div class="deploy-key-meta">
<span class="deploy-key-badge">SSH</span>
Added on Jan 7, 2026 by <a href="#">@victorystreamlines</a>
<span style="margin: 0 8px;">·</span>
Never used — Read/write
</div>
</div>
<div class="deploy-key-actions">
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<span class="footer-icon">©</span>
<span>2026 GitHub, Inc.</span>
<a href="#">Terms</a>
<a href="#">Privacy</a>
<a href="#">Security</a>
<a href="#">Status</a>
<a href="#">Community</a>
<a href="#">Docs</a>
<a href="#">Contact</a>
<a href="#">Manage cookies</a>
<a href="#">Do not share my personal information</a>
</footer>
</main>
</div>
<script>
// Add interactivity for navigation items
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
this.classList.add('active');
});
});
// Add interactivity for top nav tabs
document.querySelectorAll('.top-nav-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.top-nav-item').forEach(i => i.classList.remove('active'));
this.classList.add('active');
});
});
// Delete button confirmation
document.querySelectorAll('.btn-danger').forEach(btn => {
btn.addEventListener('click', function() {
if (confirm('Are you sure you want to delete this deploy key?')) {
alert('Deploy key deleted successfully!');
}
});
});
// Add deploy key button
document.querySelector('.btn-primary').addEventListener('click', function() {
alert('Add deploy key dialog would open here');
});
</script>
</body>
</html>
Live Preview