Scribd
Upload
3 views

downloads.html

The document is an HTML template for a webpage titled 'LuxVPN - Downloads', featuring a stylish design for presenting VPN configuration downloads. It includes a navigation bar, a hero section for branding, and sections for server locations with options for OpenVPN and WireGuard. The layout is responsive and incorporates various animations and styles to enhance user experience.

Uploaded by

hmumods123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

downloads.html

The document is an HTML template for a webpage titled 'LuxVPN - Downloads', featuring a stylish design for presenting VPN configuration downloads. It includes a navigation bar, a hero section for branding, and sections for server locations with options for OpenVPN and WireGuard. The layout is responsive and incorporates various animations and styles to enhance user experience.

Uploaded by

hmumods123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 16

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LuxVPN - Downloads</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root {
--primary: #9d4edd;
--hover-color: #c77dff;
--background: #0b090a;
--card-bg: #161a1d;
}

body {
background: var(--background);
color: var(--primary);
line-height: 1.6;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
background: rgba(11, 9, 10, 0.9);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 12px rgba(157, 78, 221, 0.1);
backdrop-filter: blur(10px);
animation: slideDown 0.8s ease-out;
}

.navbar .logo {
font-size: 2rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
background: linear-gradient(45deg, #9d4edd, #c77dff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
}
.navbar .logo::after {
content: '';
position: absolute;
width: 40px;
height: 3px;
background: var(--primary);
bottom: -5px;
left: 0;
}

.nav-links {
list-style: none;
display: flex;
gap: 30px;
}

.nav-links a {
text-decoration: none;
color: var(--primary);
font-size: 1.1rem;
font-weight: 500;
position: relative;
transition: all 0.3s ease;
}

.nav-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: var(--primary);
bottom: -5px;
left: 0;
transition: width 0.3s ease;
}

.nav-links a:hover {
color: var(--hover-color);
}

.nav-links a:hover::after {
width: 100%;
}

.hero {
padding: 80px 0 40px;
text-align: center;
position: relative;
overflow: hidden;
}

.hero::before {
content: '';
position: absolute;
top: -100px;
left: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(157, 78, 221, 0.1) 0%,
rgba(11, 9, 10, 0) 70%);
z-index: -1;
}

.hero::after {
content: '';
position: absolute;
bottom: -100px;
right: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(157, 78, 221, 0.1) 0%,
rgba(11, 9, 10, 0) 70%);
z-index: -1;
}

.hero h1 {
font-size: 3rem;
margin-bottom: 20px;
font-weight: 800;
text-shadow: 0 0 10px rgba(157, 78, 221, 0.3);
animation: glow 3s infinite alternate;
}

.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 50px;
color: #f8f8f8;
}

.configs-section {
padding: 40px 0 80px;
}

.section-title {
text-align: center;
margin-bottom: 50px;
position: relative;
}

.section-title h2 {
font-size: 2.5rem;
display: inline-block;
padding-bottom: 10px;
position: relative;
}

.section-title h2::after {
content: '';
position: absolute;
width: 60%;
height: 3px;
background: var(--primary);
bottom: 0;
left: 20%;
}
.config-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}

.config-card {
background: var(--card-bg);
border-radius: 15px;
padding: 30px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.config-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--hover-color));
}

.config-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(157, 78, 221, 0.15);
}

.config-card .location-icon {
font-size: 2.5rem;
margin-bottom: 20px;
color: var(--primary);
}

.config-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #fff;
}

.config-card .server-info {
font-size: 0.9rem;
color: #aaa;
margin-bottom: 25px;
}

.download-btn {
display: inline-block;
padding: 12px 25px;
background: linear-gradient(45deg, var(--primary), var(--hover-color));
color: #fff;
text-decoration: none;
border-radius: 30px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(157, 78, 221, 0.3);
position: relative;
overflow: hidden;
z-index: 1;
}

.download-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
z-index: -1;
}

.download-btn:hover::before {
width: 100%;
}

.download-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(157, 78, 221, 0.4);
}

.download-btn i {
margin-right: 10px;
}

.tos-notice {
margin-top: 15px;
font-size: 0.85rem;
color: #aaa;
}

.tos-notice a {
color: var(--primary);
text-decoration: none;
font-weight: 500;
}

.tos-notice a:hover {
text-decoration: underline;
}

.features {
padding: 40px 0;
background: rgba(22, 26, 29, 0.5);
margin: 80px 0;
border-radius: 20px;
}

.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 30px;
}

.feature-item {
text-align: center;
padding: 20px;
}

.feature-item i {
font-size: 2rem;
color: var(--primary);
margin-bottom: 15px;
}

.feature-item h3 {
font-size: 1.3rem;
margin-bottom: 10px;
color: #fff;
}

.feature-item p {
color: #bbb;
font-size: 0.9rem;
}

footer {
background: var(--card-bg);
padding: 40px 0 20px;
text-align: center;
margin-top: 80px;
position: relative;
}

.footer-content {
display: flex;
flex-direction: column;
align-items: center;
}

.footer-logo {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 20px;
color: var(--primary);
}

.footer-links {
display: flex;
gap: 20px;
margin-bottom: 30px;
}

.footer-links a {
color: #ddd;
text-decoration: none;
transition: color 0.3s ease;
}

.footer-links a:hover {
color: var(--primary);
}

.social-links {
display: flex;
gap: 15px;
margin-bottom: 30px;
}

.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(157, 78, 221, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
color: var(--primary);
}

.social-links a:hover {
background: var(--primary);
color: #fff;
transform: translateY(-3px);
}

.copyright {
color: #888;
font-size: 0.9rem;
}

.footer-wave {
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: 50px;
background-image: url("data:image/svg+xml,%3Csvg
xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'
preserveAspectRatio='none'%3E%3Cpath
d='M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-
250.45.39-57.84,11.73-114,31.07-
172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,9
85.66,92.83Z' fill='%23161a1d'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
background-repeat: no-repeat;
}

.tab-container {
margin-bottom: 40px;
}

.tabs {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.tab {
padding: 12px 25px;
background: var(--card-bg);
color: #fff;
border: none;
cursor: pointer;
font-size: 1.1rem;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}

.tab:first-child {
border-radius: 30px 0 0 30px;
}

.tab:last-child {
border-radius: 0 30px 30px 0;
}

.tab.active {
background: var(--primary);
color: #fff;
}

.tab-content {
display: none;
}

.tab-content.active {
display: block;
animation: fadeIn 0.5s ease-out;
}

/* Animations */
@keyframes slideDown {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes glow {
0% {
text-shadow: 0 0 5px rgba(157, 78, 221, 0.2);
}
100% {
text-shadow: 0 0 20px rgba(157, 78, 221, 0.5), 0 0 30px rgba(157,
78, 221, 0.3);
}
}

/* Responsive design */
@media (max-width: 768px) {
.navbar {
padding: 15px 20px;
flex-direction: column;
gap: 15px;
}

.hero h1 {
font-size: 2.2rem;
}

.config-grid {
grid-template-columns: 1fr;
}

.features-grid {
grid-template-columns: 1fr;
}

.tabs {
flex-direction: column;
align-items: center;
gap: 10px;
}

.tab:first-child, .tab:last-child {
border-radius: 30px;
}
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">LuxVPN</div>
<ul class="nav-links">
<li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
<li><a href="tos.html" target="_blank"><i class="fas fa-file-
contract"></i> Terms</a></li>
<li><a href="https://discord.gg/x59R2Fh"><i class="fas fa-headset"></i>
Support</a></li>
</ul>
</nav>

<section class="hero">
<div class="container">
<h1>LuxVPN</h1>
<p>Download our OpenVPN and WireGuard configurations, available on all
devices that support these protocols.</p>
</div>
</section>

<section class="configs-section">
<div class="container">
<div class="section-title">
<h2>Server Locations</h2>
</div>

<div class="tab-container">
<div class="tabs">
<button class="tab active" data-tab="openvpn"><i class="fas fa-
shield-alt"></i> OpenVPN</button>
<button class="tab" data-tab="wireguard"><i class="fas fa-
bolt"></i> WireGuard</button>
</div>

<div id="openvpn" class="tab-content active">


<div class="config-grid">
<div class="config-card" style="animation: fadeIn 0.5s
ease-out 0.1s both;">
<div class="location-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>London</h3>
<div class="server-info">
<p>OVH Hosting</p>
<p><i class="fas fa-tachometer-alt"></i> Online |
<i class="fas fa-shield-alt"></i> DDoS Protected</p>
</div>
<a href="configs/BassingsVPN-London.ovpn" download
class="download-btn">
<i class="fas fa-download"></i> Download Config
</a>
<p class="tos-notice">By downloading, you agree to our
<a href="tos.html" target="_blank">Terms of Service</a></p>
</div>

<div class="config-card" style="animation: fadeIn 0.5s


ease-out 0.3s both;">
<div class="location-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>Canada</h3>
<div class="server-info">
<p>OVH Hosting</p>
<p><i class="fas fa-tachometer-alt"></i> Online |
<i class="fas fa-shield-alt"></i> DDoS Protected</p>
</div>
<a href="configs/BassingsVPN-Canada.ovpn" download
class="download-btn">
<i class="fas fa-download"></i> Download Config
</a>
<p class="tos-notice">By downloading, you agree to our
<a href="tos.html" target="_blank">Terms of Service</a></p>
</div>

<div class="config-card" style="animation: fadeIn 0.5s


ease-out 0.5s both;">
<div class="location-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>Oregon</h3>
<div class="server-info">
<p>OVH Hosting</p>
<p><i class="fas fa-tachometer-alt"></i> Online |
<i class="fas fa-shield-alt"></i> DDoS Protected</p>
</div>
<a href="configs/BassingsVPN-Oregon.ovpn" download
class="download-btn">
<i class="fas fa-download"></i> Download Config
</a>
<p class="tos-notice">By downloading, you agree to our
<a href="tos.html" target="_blank">Terms of Service</a></p>
</div>

<div class="config-card" style="animation: fadeIn 0.5s


ease-out 0.5s both;">
<div class="location-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>Germany</h3>
<div class="server-info">
<p>OVH Hosting</p>
<p><i class="fas fa-tachometer-alt"></i> Online |
<i class="fas fa-shield-alt"></i> DDoS Protected</p>
</div>
<a href="configs/BassingsVPN-Germany.ovpn" download
class="download-btn">
<i class="fas fa-download"></i> Download Config
</a>
<p class="tos-notice">By downloading, you agree to our
<a href="tos.html" target="_blank">Terms of Service</a></p>
</div>

<div class="config-card" style="animation: fadeIn 0.5s


ease-out 0.5s both;">
<div class="location-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>Dallas</h3>
<div class="server-info">
<p>Path Networks</p>
<p><i class="fas fa-tachometer-alt"></i> Online |
<i class="fas fa-shield-alt"></i> DDoS Protected</p>
</div>
<a href="configs/BassingsVPN-Dallas.ovpn" download
class="download-btn">
<i class="fas fa-download"></i> Download Config
</a>
<p class="tos-notice">By downloading, you agree to our
<a href="tos.html" target="_blank">Terms of Service</a></p>
</div>

<div class="config-card" style="animation: fadeIn 0.5s


ease-out 0.5s both;">
<div class="location-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>Australia</h3>
<div class="server-info">
<p>Digital Ocean</p>
<p><i class="fas fa-tachometer-alt"></i> Online |
<i class="fas fa-shield-alt"></i> Not DDoS Protected</p>
</div>
<a href="configs/BassingsVPN-Australia.ovpn" download
class="download-btn">
<i class="fas fa-download"></i> Download Config
</a>
<p class="tos-notice">By downloading, you agree to our
<a href="tos.html" target="_blank">Terms of Service</a></p>
</div>
</div>
</div>

<div id="wireguard" class="tab-content">


<div class="config-grid">
<div class="config-card">
<div class="location-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>London</h3>
<div class="server-info">
<p>OVH Hosting</p>
<p><i class="fas fa-tachometer-alt"></i> Online |
<i class="fas fa-shield-alt"></i> DDoS Protected</p>
<p><i class="fas fa-bolt"></i> Lower Latency,
Higher Speeds</p>
</div>
<a href="configs/London.conf" download class="download-
btn">
<i class="fas fa-download"></i> Download Config
</a>
<p class="tos-notice">By downloading, you agree to our
<a href="tos.html" target="_blank">Terms of Service</a></p>
</div>

<div class="config-card">
<div class="location-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>Germany</h3>
<div class="server-info">
<p>OVH Hosting</p>
<p><i class="fas fa-tachometer-alt"></i> Online |
<i class="fas fa-shield-alt"></i> DDoS Protected</p>
<p><i class="fas fa-bolt"></i> Lower Latency,
Higher Speeds</p>
</div>
<a href="configs/Germany.conf" download
class="download-btn">
<i class="fas fa-download"></i> Download Config
</a>
<p class="tos-notice">By downloading, you agree to our
<a href="tos.html" target="_blank">Terms of Service</a></p>
</div>

<div class="config-card">
<div class="location-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>Canada</h3>
<div class="server-info">
<p>OVH Hosting</p>
<p><i class="fas fa-tachometer-alt"></i> Online |
<i class="fas fa-shield-alt"></i> DDoS Protected</p>
<p><i class="fas fa-bolt"></i> Lower Latency,
Higher Speeds</p>
</div>
<a href="configs/Canada.conf" download class="download-
btn">
<i class="fas fa-download"></i> Download Config
</a>
<p class="tos-notice">By downloading, you agree to our
<a href="tos.html" target="_blank">Terms of Service</a></p>
</div>

<div class="config-card">
<div class="location-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>Oregon</h3>
<div class="server-info">
<p>OVH Hosting</p>
<p><i class="fas fa-tachometer-alt"></i> Online |
<i class="fas fa-shield-alt"></i> DDoS Protected</p>
<p><i class="fas fa-bolt"></i> Lower Latency,
Higher Speeds</p>
</div>
<a href="configs/Oregon.conf" download class="download-
btn">
<i class="fas fa-download"></i> Download Config
</a>
<p class="tos-notice">By downloading, you agree to our
<a href="tos.html" target="_blank">Terms of Service</a></p>
</div>

<div class="config-card">
<div class="location-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>Dallas</h3>
<div class="server-info">
<p>Path Networks</p>
<p><i class="fas fa-tachometer-alt"></i> Online |
<i class="fas fa-shield-alt"></i> DDoS Protected</p>
<p><i class="fas fa-bolt"></i> Lower Latency,
Higher Speeds</p>
</div>
<a href="configs/Dallas.conf" download class="download-
btn">
<i class="fas fa-download"></i> Download Config
</a>
<p class="tos-notice">By downloading, you agree to our
<a href="tos.html" target="_blank">Terms of Service</a></p>
</div>

<div class="config-card">
<div class="location-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<h3>Cloudflare</h3>
<div class="server-info">
<p>Cloudflare</p>
<p><i class="fas fa-tachometer-alt"></i> Online |
<i class="fas fa-shield-alt"></i> DDoS Protected</p>
<p><i class="fas fa-bolt"></i> Lower Latency,
Higher Speeds</p>
</div>
<a href="configs/cloudflare.conf" download
class="download-btn">
<i class="fas fa-download"></i> Download Config
</a>
<p class="tos-notice">By downloading, you agree to our
<a href="tos.html" target="_blank">Terms of Service</a></p>
</div>
</div>
</div>
</div>
</section>

<section class="features">
<div class="container">
<div class="section-title">
<h2>Why Choose LuxVPN</h2>
</div>

<div class="features-grid">
<div class="feature-item">
<i class="fas fa-lock"></i>
<h3>DDoS Protected</h3>
<p>Advanced DDoS Protection by using XDP & BPF filtering deep
within the linux kernel, allowing for extreme protection against all.</p>
</div>

<div class="feature-item">
<i class="fas fa-bolt"></i>
<h3>High Performance</h3>
<p>Our servers are optimized for speed with 10-25Gbps port
speeds and low latency.</p>
</div>

<div class="feature-item">
<i class="fas fa-globe"></i>
<h3>Global Access</h3>
<p>Multiple server locations worldwide to ensure you always
have a reliable connection.</p>
</div>

<div class="feature-item">
<i class="fas fa-user-shield"></i>
<h3>No Logging</h3>
<p>We respect your privacy. No activity or connection logs are
stored on our servers.</p>
</div>
</div>
</div>
</section>
<footer>
<div class="footer-wave"></div>
<div class="container">
<div class="footer-content">
<div class="footer-logo">LuxVPN</div>

<div class="footer-links">
<a href="index.html">Home</a>
<a href="tos.html">Terms of Service</a>
<a href="https://discord.gg/x59A32Fh">Support</a>
</div>

<div class="social-links">
<a href="https://discord.gg/x59K32Fh"><i class="fab fa-
discord"></i></a>
</div>

<p class="copyright">? 2025 LuxVPN. All rights reserved.</p>


</div>
</div>
</footer>

<script>
// Tab functionality
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');

tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Remove active class from all tabs and contents
tabs.forEach(t => t.classList.remove('active'));
tabContents.forEach(content =>
content.classList.remove('active'));

// Add active class to clicked tab and corresponding content


tab.classList.add('active');

document.getElementById(tab.dataset.tab).classList.add('active');
});
});

// Simple scroll animation


const cards = document.querySelectorAll('.config-card');

window.addEventListener('scroll', function() {
cards.forEach(card => {
const cardTop = card.getBoundingClientRect().top;
const windowHeight = window.innerHeight;

if (cardTop < windowHeight * 0.8) {


card.style.opacity = "1";
card.style.transform = "translateY(0)";
}
});
});
});
</script>
</body>
</html>

You might also like