Linktree Protfolio Template Using Pure HTML CSS JS
You can simply change the code where it is needed
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Your Name | Links</title>
<style>
/* Base Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #c2e9fb, #a1c4fd);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
transition: background 0.4s ease;
}
/* Container */
.linktree-container {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 20px;
padding: 40px 30px;
width: 100%;
max-width: 400px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
text-align: center;
color: #222;
transition: all 0.4s ease;
}
/* Avatar */
.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 20px;
border: 4px solid white;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
/* Text */
h1 {
font-size: 26px;
margin-bottom: 5px;
}
p {
font-size: 14px;
color: #444;
margin-bottom: 30px;
}
/* Links */
.links a {
display: block;
text-decoration: none;
margin: 12px 0;
padding: 14px 20px;
border-radius: 30px;
font-weight: 600;
font-size: 16px;
color: white;
background: linear-gradient(to right, #36d1dc, #5b86e5);
box-shadow: 0 4px 10px rgba(91, 134, 229, 0.4);
transition: transform 0.3s, box-shadow 0.3s;
}
.links a:hover {
transform: scale(1.05);
box-shadow: 0 6px 14px rgba(91, 134, 229, 0.6);
}
footer {
margin-top: 35px;
font-size: 13px;
color: #555;
}
/* Dark Mode Toggle */
.dark-toggle {
position: fixed;
top: 20px;
right: 20px;
background: #222;
color: white;
border: none;
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
/* DARK MODE */
.dark {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: #eee;
}
.dark .linktree-container {
background: rgba(0, 0, 0, 0.3);
color: #f2f2f2;
}
.dark .links a {
background: linear-gradient(to right, #614385, #516395);
}
.dark footer {
color: #aaa;
}
</style>
</head>
<body>
<button class="dark-toggle" onclick="toggleDarkMode()">🌓</button>
<div class="linktree-container">
<img src="https://via.placeholder.com/120" alt="Your Avatar" class="avatar" />
<h1>Your Name</h1>
<p>@yourusername</p>
<div class="links">
<a href="https://yourportfolio.com" target="_blank">🌐 Portfolio</a>
<a href="https://github.com/yourusername" target="_blank">🐱 GitHub</a>
<a href="https://linkedin.com/in/yourusername" target="_blank">💼 LinkedIn</a>
<a href="https://twitter.com/yourusername" target="_blank">🐦 Twitter</a>
<a href="mailto:you@example.com" target="_blank">📧 Email Me</a>
</div>
<footer>© 2025 Your Name</footer>
</div>
<script>
function toggleDarkMode() {
document.body.classList.toggle('dark');
}
</script>
</body>
</html>code-box
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your Name | Links</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #c2e9fb, #a1c4fd);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 20px;
gap: 20px;
transition: background 0.4s ease;
flex-wrap: wrap;
}
/* === Main Container === */
.linktree-container {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border-radius: 20px;
padding: 30px 20px;
width: 100%;
max-width: 400px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
text-align: center;
color: #222;
flex-shrink: 0;
}
.avatar {
width: 110px;
height: 110px;
border-radius: 50%;
border: 4px solid white;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
margin-bottom: 15px;
}
h1 {
font-size: 24px;
margin-bottom: 5px;
}
p {
font-size: 14px;
color: #444;
margin-bottom: 20px;
}
.links a {
display: block;
text-decoration: none;
margin: 10px 0;
padding: 14px 20px;
border-radius: 30px;
font-weight: 600;
font-size: 16px;
color: white;
background: linear-gradient(to right, #36d1dc, #5b86e5);
box-shadow: 0 4px 10px rgba(91, 134, 229, 0.4);
transition: transform 0.3s;
}
.links a:hover {
transform: scale(1.05);
}
.ad-slot {
margin: 20px auto;
text-align: center;
background: #fff;
border: 1px dashed #ccc;
padding: 10px;
border-radius: 12px;
font-size: 13px;
color: #888;
}
footer {
margin-top: 30px;
font-size: 12px;
color: #555;
}
.dark-toggle {
position: fixed;
top: 20px;
right: 20px;
background: #222;
color: white;
border: none;
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
/* === Sidebar Ad Slot === */
.sidebar-ad {
width: 300px;
min-height: 250px;
border: 1px dashed #ccc;
background: #fff;
padding: 15px;
border-radius: 15px;
color: #444;
font-size: 14px;
text-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* === Dark Mode === */
.dark {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: #eee;
}
.dark .linktree-container {
background: rgba(0, 0, 0, 0.4);
color: #f2f2f2;
}
.dark .links a {
background: linear-gradient(to right, #614385, #516395);
}
.dark .ad-slot,
.dark .sidebar-ad {
background: #1c1c1c;
border-color: #444;
color: #bbb;
}
.dark footer {
color: #aaa;
}
/* === Responsive === */
@media screen and (max-width: 768px) {
body {
flex-direction: column;
align-items: center;
}
.sidebar-ad {
display: none;
}
}
</style>
</head>
<body>
<button class="dark-toggle" onclick="toggleDarkMode()">🌓</button>
<!-- Main Card -->
<div class="linktree-container">
<img src="https://via.placeholder.com/110" alt="Your Avatar" class="avatar" />
<h1>Your Name</h1>
<p>@yourusername</p>
<div class="ad-slot">[ Top Ad 320x100 ]</div>
<div class="links">
<a href="https://yourportfolio.com" target="_blank">🌐 Portfolio</a>
<div class="ad-slot">[ Ad Between 1 ]</div>
<a href="https://github.com/yourusername" target="_blank">🐱 GitHub</a>
<a href="https://linkedin.com/in/yourusername" target="_blank">💼 LinkedIn</a>
<div class="ad-slot">[ Ad Between 2 ]</div>
<a href="https://twitter.com/yourusername" target="_blank">🐦 Twitter</a>
<a href="mailto:you@example.com" target="_blank">📧 Email Me</a>
</div>
<div class="ad-slot">[ Bottom Ad 320x100 ]</div>
<footer>© 2025 Your Name</footer>
</div>
<!-- Sidebar Ad (visible only on desktop) -->
<div class="sidebar-ad">
[ Sidebar Ad 300x250 ]<br />
This space is perfect for:<br />
- Google Ads<br />
- Affiliate banners<br />
- Custom promotions
</div>
<script>
function toggleDarkMode() {
document.body.classList.toggle("dark");
}
</script>
</body>
</html>code-box
Post a Comment
Do not use spammy word.