Files
website/templates/minecraft.html
SimolZimol 68ece96e16 modified: templates/minecraft.html
modified:   templates/projects.html
	modified:   versions/version.json
2026-01-22 15:18:23 +01:00

1194 lines
31 KiB
HTML

{% extends "base.html" %}
{% block title %}Minecraft Development - Devanturas by SimolZimol{% endblock %}
{% block description %}Professional Minecraft plugin development for Velocity, Spigot, Paper, and Bukkit servers by SimolZimol{% endblock %}
{% block content %}
<!-- Minecraft Hero Section -->
<section class="minecraft-hero">
<div class="container">
<div class="hero-content">
<div class="hero-badge">
<i class="fas fa-cube"></i>
<span>Minecraft Development</span>
</div>
<h1>Professional Plugin Development</h1>
<p class="hero-subtitle">Creating powerful, optimized plugins for Velocity, Spigot, Paper & Bukkit servers</p>
<div class="hero-stats">
<div class="stat-item">
<div class="stat-icon"><i class="fas fa-calendar-alt"></i></div>
<div class="stat-content">
<span class="stat-number">{{ info.experience }}</span>
<span class="stat-label">Development Experience</span>
</div>
</div>
<div class="stat-item">
<div class="stat-icon"><i class="fas fa-project-diagram"></i></div>
<div class="stat-content">
<span class="stat-number">{{ projects|length }}</span>
<span class="stat-label">Active Projects</span>
</div>
</div>
<div class="stat-item">
<div class="stat-icon"><i class="fas fa-cubes"></i></div>
<div class="stat-content">
<span class="stat-number">1.15-1.21</span>
<span class="stat-label">MC Versions</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Featured Projects Section -->
<section class="minecraft-projects-section">
<div class="container">
<div class="section-header">
<h2>My Minecraft Projects</h2>
<p>Explore my collection of high-quality plugins and tools</p>
</div>
<div class="projects-grid">
{% for project in projects %}
<div class="project-card">
<div class="project-card-header">
<div class="project-icon-wrapper">
<i class="fas fa-plug"></i>
</div>
<div class="project-badge">{{ project.version }}</div>
</div>
<div class="project-card-body">
<h3>{{ project.name }}</h3>
<p class="project-description">{{ project.description }}</p>
<div class="project-meta">
<div class="meta-item">
<i class="fas fa-gamepad"></i>
<span>{{ project.supported_versions }}</span>
</div>
<div class="meta-item">
<i class="fas fa-download"></i>
<span>{{ project.downloads }}</span>
</div>
</div>
</div>
<div class="project-card-footer">
<a href="{{ project.url }}" class="project-link">
View Details <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
<!-- Expertise Section -->
<section class="minecraft-expertise-section">
<div class="container">
<div class="expertise-grid">
<div class="expertise-column">
<div class="section-header">
<h2>Technical Expertise</h2>
<p>Comprehensive development skills for modern Minecraft servers</p>
</div>
<div class="expertise-categories">
<div class="expertise-category">
<h3><i class="fas fa-code"></i> Development APIs</h3>
<div class="tag-list">
{% for api in info.preferred_apis %}
<span class="tag">{{ api }}</span>
{% endfor %}
</div>
</div>
<div class="expertise-category">
<h3><i class="fas fa-server"></i> Server Platforms</h3>
<div class="tag-list">
{% for server_type in info.server_types %}
<span class="tag tag-server">{{ server_type }}</span>
{% endfor %}
</div>
</div>
<div class="expertise-category">
<h3><i class="fas fa-star"></i> Specializations</h3>
<div class="specialties-list">
{% for specialty in info.specialties %}
<div class="specialty-item">
<i class="fas fa-check-circle"></i>
<span>{{ specialty }}</span>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="expertise-column">
<div class="expertise-features">
<div class="feature-box">
<div class="feature-icon">
<i class="fas fa-rocket"></i>
</div>
<h3>Performance Optimized</h3>
<p>Every plugin is built with performance in mind, ensuring minimal server impact and maximum player experience.</p>
</div>
<div class="feature-box">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Secure & Reliable</h3>
<p>Following security best practices and thorough testing to deliver stable, production-ready code.</p>
</div>
<div class="feature-box">
<div class="feature-icon">
<i class="fas fa-sync-alt"></i>
</div>
<h3>Regular Updates</h3>
<p>Continuous maintenance and updates to ensure compatibility with the latest Minecraft versions.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="services-section">
<div class="container">
<div class="section-header">
<h2>Development Services</h2>
<p>Comprehensive Minecraft plugin development solutions</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-code"></i>
</div>
<h3>Custom Plugin Development</h3>
<p>Tailored plugins built from the ground up to match your exact requirements and server vision.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Custom commands & features</li>
<li><i class="fas fa-check"></i> Database integration (MySQL, MongoDB)</li>
<li><i class="fas fa-check"></i> Permission system integration</li>
<li><i class="fas fa-check"></i> Advanced configuration options</li>
</ul>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-tachometer-alt"></i>
</div>
<h3>Performance Optimization</h3>
<p>Comprehensive analysis and optimization of existing plugins for better server performance.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Performance profiling & analysis</li>
<li><i class="fas fa-check"></i> Memory leak detection & fixes</li>
<li><i class="fas fa-check"></i> Async task optimization</li>
<li><i class="fas fa-check"></i> Server architecture consulting</li>
</ul>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-wrench"></i>
</div>
<h3>Plugin Maintenance & Support</h3>
<p>Ongoing maintenance, updates, and support to keep your plugins running smoothly.</p>
<ul class="service-features">
<li><i class="fas fa-check"></i> Version compatibility updates</li>
<li><i class="fas fa-check"></i> Bug fixes & troubleshooting</li>
<li><i class="fas fa-check"></i> Feature enhancements</li>
<li><i class="fas fa-check"></i> Technical documentation</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Resources & Downloads -->
<section class="resources-section">
<div class="container">
<div class="section-header">
<h2>Download Platforms</h2>
<p>Find my plugins on popular Minecraft platforms</p>
</div>
<div class="platforms-grid">
<a href="https://modrinth.com/plugin/fly-simolzimol/" target="_blank" class="platform-card">
<div class="platform-icon">
<i class="fas fa-cube"></i>
</div>
<h3>Modrinth</h3>
<p>Modern plugin hosting with fast downloads and comprehensive documentation</p>
<span class="platform-link-text">Visit Modrinth <i class="fas fa-external-link-alt"></i></span>
</a>
<a href="https://www.spigotmc.org/resources/fly.83164/" target="_blank" class="platform-card">
<div class="platform-icon">
<i class="fas fa-plug"></i>
</div>
<h3>SpigotMC</h3>
<p>The largest Minecraft server resource platform with millions of downloads</p>
<span class="platform-link-text">Visit SpigotMC <i class="fas fa-external-link-alt"></i></span>
</a>
<a href="https://github.com/SimolZimol/" target="_blank" class="platform-card">
<div class="platform-icon">
<i class="fab fa-github"></i>
</div>
<h3>GitHub</h3>
<p>Open source projects, documentation, and version control repositories</p>
<span class="platform-link-text">Visit GitHub <i class="fas fa-external-link-alt"></i></span>
</a>
</div>
</div>
</section>
<!-- Hosting & Sponsoring Section -->
<section class="hosting-section">
<div class="container">
<div class="section-header">
<h2>Server Hosting & Sponsoring</h2>
<p>Supporting gaming communities with server infrastructure and technical expertise</p>
</div>
<div class="hosting-grid">
<div class="hosting-main">
<div class="hosting-feature-card">
<div class="hosting-icon">
<i class="fab fa-youtube"></i>
</div>
<h3>Active Partnership: Ludi et Historia</h3>
<p class="hosting-subtitle">Since August 2020</p>
<p>I actively support <a href="https://youtube.fandom.com/wiki/Ludi_et_Historia" target="_blank" style="color: #00d4ff;">Ludi et Historia</a>, a YouTube channel focused on gaming content, by providing and managing game servers for their community.</p>
<div class="supported-games">
<h4>Supported Games:</h4>
<div class="game-tags">
<span class="game-tag"><i class="fas fa-cube"></i> Minecraft</span>
<span class="game-tag"><i class="fas fa-gamepad"></i> Valheim</span>
<span class="game-tag"><i class="fas fa-gamepad"></i> 7 Days to Die</span>
<span class="game-tag"><i class="fas fa-gamepad"></i> ARK</span>
<span class="game-tag"><i class="fas fa-ellipsis-h"></i> And more</span>
</div>
</div>
<div class="hosting-features">
<div class="feature-item">
<i class="fas fa-server"></i>
<span>Professional server infrastructure</span>
</div>
<div class="feature-item">
<i class="fas fa-headset"></i>
<span>24/7 technical support</span>
</div>
<div class="feature-item">
<i class="fas fa-cogs"></i>
<span>Custom configurations & plugins</span>
</div>
<div class="feature-item">
<i class="fas fa-shield-alt"></i>
<span>Server security & backups</span>
</div>
</div>
</div>
</div>
<div class="hosting-sidebar">
<div class="hosting-info-card">
<h3><i class="fas fa-users"></i> Community Support</h3>
<p>Over the years, I've supported various small content creators and gaming communities with server hosting and technical assistance.</p>
</div>
<div class="hosting-info-card">
<h3><i class="fas fa-handshake"></i> Looking for Server Help?</h3>
<p>If you're a content creator or community leader in need of server infrastructure or technical support, feel free to reach out!</p>
<a href="{{ url_for('contact') }}" class="hosting-contact-btn">
<i class="fas fa-envelope"></i> Get in Touch
</a>
</div>
<div class="hosting-info-card">
<h3><i class="fas fa-rocket"></i> What I Offer</h3>
<ul class="hosting-offers">
<li><i class="fas fa-check"></i> Game server setup & hosting</li>
<li><i class="fas fa-check"></i> Custom plugin development</li>
<li><i class="fas fa-check"></i> Server optimization</li>
<li><i class="fas fa-check"></i> Technical consulting</li>
<li><i class="fas fa-check"></i> Long-term partnerships</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="minecraft-cta-section">
<div class="container">
<div class="cta-box">
<div class="cta-content">
<h2>Need a Custom Minecraft Plugin or Server Support?</h2>
<p>Let's discuss your project requirements and create something amazing for your server</p>
</div>
<div class="cta-actions">
<a href="{{ url_for('contact') }}" class="btn btn-primary">
<i class="fas fa-comments"></i> Get in Touch
</a>
<a href="{{ url_for('projects') }}" class="btn btn-outline">
<i class="fas fa-folder-open"></i> All Projects
</a>
</div>
</div>
</div>
</section>
<style>
/* Minecraft Hero */
.minecraft-hero {
background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 100%);
padding: 120px 0 80px;
position: relative;
overflow: hidden;
}
.minecraft-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.1) 0%, transparent 50%);
}
.hero-content {
position: relative;
text-align: center;
z-index: 1;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(0, 212, 255, 0.1);
border: 1px solid rgba(0, 212, 255, 0.3);
color: #00d4ff;
padding: 0.5rem 1.25rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 1.5rem;
}
.hero-content h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(135deg, #ffffff 0%, #00d4ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.3rem;
color: #cfcfcf;
margin-bottom: 3rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
margin-top: 3rem;
}
.stat-item {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(255, 255, 255, 0.03);
padding: 1.25rem 2rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
}
.stat-item:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(0, 212, 255, 0.3);
transform: translateY(-2px);
}
.stat-icon {
font-size: 2rem;
color: #00d4ff;
}
.stat-content {
display: flex;
flex-direction: column;
text-align: left;
}
.stat-number {
font-size: 1.8rem;
font-weight: 700;
color: #ffffff;
line-height: 1;
}
.stat-label {
font-size: 0.85rem;
color: #9b9b9b;
margin-top: 0.25rem;
}
/* Projects Section */
.minecraft-projects-section {
padding: 80px 0;
background: #0f0f1f;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-header h2 {
font-size: 2.5rem;
margin-bottom: 0.75rem;
color: #ffffff;
}
.section-header p {
font-size: 1.1rem;
color: #9b9b9b;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.project-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
}
.project-card:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(0, 212, 255, 0.3);
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0, 212, 255, 0.15);
}
.project-card-header {
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0, 0, 0, 0.2);
}
.project-icon-wrapper {
width: 50px;
height: 50px;
border-radius: 12px;
background: linear-gradient(135deg, #00d4ff 0%, #8a2be2 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #ffffff;
}
.project-badge {
background: rgba(0, 212, 255, 0.1);
border: 1px solid rgba(0, 212, 255, 0.3);
color: #00d4ff;
padding: 0.4rem 0.9rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.project-card-body {
padding: 1.5rem;
}
.project-card-body h3 {
font-size: 1.4rem;
margin-bottom: 0.75rem;
color: #ffffff;
}
.project-description {
color: #cfcfcf;
line-height: 1.6;
margin-bottom: 1.25rem;
font-size: 0.95rem;
}
.project-meta {
display: flex;
gap: 1.5rem;
margin-top: 1rem;
}
.meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: #9b9b9b;
font-size: 0.9rem;
}
.meta-item i {
color: #00d4ff;
}
.project-card-footer {
padding: 1rem 1.5rem;
background: rgba(0, 0, 0, 0.15);
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.project-link {
color: #00d4ff;
text-decoration: none;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
}
.project-link:hover {
gap: 0.5rem;
}
/* Expertise Section */
.minecraft-expertise-section {
padding: 80px 0;
background: #0a0a1a;
}
.expertise-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 3rem;
}
.expertise-categories {
display: flex;
flex-direction: column;
gap: 2rem;
}
.expertise-category h3 {
font-size: 1.2rem;
color: #ffffff;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.expertise-category h3 i {
color: #00d4ff;
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.tag {
background: rgba(0, 212, 255, 0.1);
border: 1px solid rgba(0, 212, 255, 0.3);
color: #00d4ff;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
}
.tag:hover {
background: rgba(0, 212, 255, 0.2);
border-color: #00d4ff;
}
.tag-server {
background: rgba(138, 43, 226, 0.1);
border-color: rgba(138, 43, 226, 0.3);
color: #8a2be2;
}
.tag-server:hover {
background: rgba(138, 43, 226, 0.2);
border-color: #8a2be2;
}
.specialties-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.specialty-item {
display: flex;
align-items: center;
gap: 0.75rem;
color: #cfcfcf;
font-size: 0.95rem;
}
.specialty-item i {
color: #00d4ff;
font-size: 1.1rem;
}
.expertise-features {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.feature-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 1.75rem;
border-radius: 12px;
transition: all 0.3s ease;
}
.feature-box:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(0, 212, 255, 0.3);
transform: translateX(5px);
}
.feature-icon {
width: 50px;
height: 50px;
border-radius: 12px;
background: linear-gradient(135deg, #00d4ff 0%, #8a2be2 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #ffffff;
margin-bottom: 1rem;
}
.feature-box h3 {
font-size: 1.25rem;
color: #ffffff;
margin-bottom: 0.75rem;
}
.feature-box p {
color: #9b9b9b;
line-height: 1.6;
font-size: 0.95rem;
}
/* Services Section */
.services-section {
padding: 80px 0;
background: #0f0f1f;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.service-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 2rem;
border-radius: 16px;
transition: all 0.3s ease;
}
.service-card:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(0, 212, 255, 0.3);
transform: translateY(-5px);
}
.service-icon {
width: 60px;
height: 60px;
border-radius: 14px;
background: linear-gradient(135deg, #00d4ff 0%, #8a2be2 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
color: #ffffff;
margin-bottom: 1.5rem;
}
.service-card h3 {
font-size: 1.4rem;
color: #ffffff;
margin-bottom: 1rem;
}
.service-card > p {
color: #9b9b9b;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.service-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.service-features li {
display: flex;
align-items: center;
gap: 0.75rem;
color: #cfcfcf;
font-size: 0.95rem;
}
.service-features i {
color: #00d4ff;
font-size: 0.9rem;
}
/* Resources Section */
.resources-section {
padding: 80px 0;
background: #0a0a1a;
}
.platforms-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.platform-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 2rem;
border-radius: 16px;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 0.3s ease;
}
.platform-card:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(0, 212, 255, 0.3);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.1);
}
.platform-icon {
width: 70px;
height: 70px;
border-radius: 14px;
background: linear-gradient(135deg, #00d4ff 0%, #8a2be2 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #ffffff;
margin-bottom: 1.5rem;
}
.platform-card h3 {
font-size: 1.5rem;
color: #ffffff;
margin-bottom: 0.75rem;
}
.platform-card p {
color: #9b9b9b;
line-height: 1.6;
margin-bottom: 1.5rem;
flex-grow: 1;
}
.platform-link-text {
color: #00d4ff;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* CTA Section */
.minecraft-cta-section {
padding: 80px 0;
background: #0f0f1f;
}
.cta-box {
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(138, 43, 226, 0.1) 100%);
border: 1px solid rgba(0, 212, 255, 0.3);
padding: 3rem;
border-radius: 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.cta-content h2 {
font-size: 2rem;
color: #ffffff;
margin-bottom: 0.5rem;
}
.cta-content p {
font-size: 1.1rem;
color: #cfcfcf;
}
.cta-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
/* Hosting & Sponsoring Section */
.hosting-section {
padding: 80px 0;
background: #0a0a1a;
}
.hosting-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 2rem;
margin-top: 3rem;
}
.hosting-feature-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(0, 212, 255, 0.2);
border-radius: 16px;
padding: 2.5rem;
}
.hosting-icon {
width: 70px;
height: 70px;
border-radius: 14px;
background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #ffffff;
margin-bottom: 1.5rem;
}
.hosting-feature-card h3 {
font-size: 1.8rem;
color: #ffffff;
margin-bottom: 0.5rem;
}
.hosting-subtitle {
color: #00d4ff;
font-weight: 600;
margin-bottom: 1rem;
}
.hosting-feature-card > p {
color: #e0e0e0;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.hosting-feature-card a {
color: #00d4ff;
text-decoration: none;
transition: color 0.3s ease;
}
.hosting-feature-card a:hover {
color: #00a8e6;
text-decoration: underline;
}
.supported-games {
margin: 2rem 0;
}
.supported-games h4 {
color: #ffffff;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.game-tags {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.game-tag {
background: rgba(0, 212, 255, 0.1);
border: 1px solid rgba(0, 212, 255, 0.3);
color: #00d4ff;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
}
.hosting-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-top: 2rem;
}
.feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
color: #e0e0e0;
font-size: 0.95rem;
}
.feature-item i {
color: #00d4ff;
font-size: 1.1rem;
}
.hosting-sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.hosting-info-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(0, 212, 255, 0.2);
border-radius: 16px;
padding: 1.75rem;
}
.hosting-info-card h3 {
color: #ffffff;
margin-bottom: 1rem;
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.hosting-info-card h3 i {
color: #00d4ff;
}
.hosting-info-card p {
color: #e0e0e0;
line-height: 1.6;
margin-bottom: 1rem;
}
.hosting-contact-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
margin-top: 0.5rem;
}
.hosting-contact-btn:hover {
background: linear-gradient(135deg, #00a8e6 0%, #007aa3 100%);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
}
.hosting-offers {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.hosting-offers li {
display: flex;
align-items: center;
gap: 0.75rem;
color: #e0e0e0;
font-size: 0.95rem;
}
.hosting-offers i {
color: #00d4ff;
font-size: 0.9rem;
}
.btn {
padding: 0.875rem 1.75rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1rem;
}
.btn-primary {
background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
color: #ffffff;
}
.btn-primary:hover {
background: linear-gradient(135deg, #00a8e6 0%, #007aa3 100%);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
}
.btn-outline {
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.btn-outline:hover {
border-color: #00d4ff;
background: rgba(0, 212, 255, 0.1);
}
/* Responsive Design */
@media (max-width: 1024px) {
.expertise-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.hosting-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.hero-content h1 {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.hero-stats {
gap: 1.5rem;
}
.stat-item {
padding: 1rem 1.5rem;
}
.projects-grid {
grid-template-columns: 1fr;
}
.cta-box {
text-align: center;
justify-content: center;
}
.cta-actions {
justify-content: center;
}
.hosting-features {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hero-content h1 {
font-size: 2rem;
}
.stat-item {
flex-direction: column;
text-align: center;
}
.stat-content {
align-items: center;
}
.section-header h2 {
font-size: 2rem;
}
.hosting-feature-card {
padding: 1.5rem;
}
.game-tags {
justify-content: center;
}
}
</style>
{% endblock %}