Is there a free way to make a HTML code into a real URL link
Here is my simple HTML. I need to give it a link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Fonn Prints</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root {
--bg: #05060a;
--accent: #ff6b3d;
--text: #f5f5f7;
--muted: #9ca3af;
--radius-pill: 999px;
--shadow-soft: 0 18px 45px rgba(0,0,0,0.55);
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: radial-gradient(circle at top, #111827 0, #020308 55%, #000 100%);
color: var(--text);
font-family: var(--font-sans);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
padding: 20px;
}
.container {
max-width: 640px;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.logo {
width: 64px;
height: 64px;
border-radius: 16px;
background: conic-gradient(from 210deg,#ff6b3d,#f97316,#22d3ee,#6366f1,#ff6b3d);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
.logo::after {
content: "";
position: absolute;
inset: 10px;
border-radius: 12px;
background: radial-gradient(circle at 30% 20%, #111827, #020617 70%);
opacity: 0.9;
}
h1 {
font-size: 2.4rem;
letter-spacing: -0.03em;
font-weight: 700;
}
p {
color: var(--muted);
font-size: 1rem;
line-height: 1.6;
max-width: 480px;
}
.btn {
margin-top: 10px;
padding: 12px 26px;
border-radius: var(--radius-pill);
background: radial-gradient(circle at 0 0,#f97316,#ea580c 40%,#7c2d12 100%);
color: #fff;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
box-shadow: var(--shadow-soft);
transition: 0.15s ease-out;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn:hover {
transform: translateY(-2px);
filter: brightness(1.05);
}
</style>
</head>
<body>
<div class="container">
<div class="logo"></div>
<h1>Fonn Prints</h1>
<p>
Clean, functional 3D models designed for real-world use.
Fast to print. Support-light. Always practical.
</p>
<!-- ⭐ ONLY BUTTON -->
<a class="btn" href="https://www.printables.com/@FonnPrints" target="_blank">
Browse Models ↗
</a>
</div>
</body>
</html>