Commit 1804d72
authored
Create Fairbase k.cloudworkstations.dev
# Fairbase - Cloud Workstation Platform
I'll create a complete, modern website for Fairbase at k.cloudworkstations.dev with a professional design that showcases its features and capabilities.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fairbase - Cloud Workstation Platform</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #4285F4;
--primary-dark: #3367D6;
--secondary: #34A853;
--accent: #EA4335;
--light: #f8f9fa;
--dark: #202124;
--gray: #5f6368;
--fairbase-blue: #1976D2;
--fairbase-green: #4CAF50;
--gradient: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}
body {
background-color: var(--light);
color: var(--dark);
line-height: 1.6;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header Styles */
header {
background: var(--gradient);
color: white;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
display: flex;
align-items: center;
}
.logo i {
margin-right: 10px;
color: var(--secondary);
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--secondary);
}
.btn {
display: inline-block;
background-color: var(--secondary);
color: white;
padding: 0.8rem 1.5rem;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: #2d8e47;
transform: translateY(-2px);
}
/* Hero Section */
.hero {
padding: 5rem 0;
background: linear-gradient(rgba(66, 133, 244, 0.9), rgba(66, 133, 244, 0.8)), url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3') center/cover;
color: white;
text-align: center;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.5rem;
max-width: 800px;
margin: 0 auto 2rem;
}
/* Platform Showcase */
.platform-showcase {
padding: 5rem 0;
background-color: white;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
}
.section-title h2 {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1rem;
}
.section-title p {
color: var(--gray);
max-width: 700px;
margin: 0 auto;
}
.platform-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.platform-card {
background-color: var(--light);
border-radius: 8px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s;
text-align: center;
}
.platform-card:hover {
transform: translateY(-5px);
}
.platform-card i {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1rem;
}
.platform-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--dark);
}
/* Dashboard Preview */
.dashboard-preview {
padding: 5rem 0;
background-color: #f1f8fe;
}
.dashboard-content {
display: flex;
align-items: center;
gap: 3rem;
}
.dashboard-text {
flex: 1;
}
.dashboard-image {
flex: 1;
background: linear-gradient(135deg, #6e8efb, #a777e3);
border-radius: 12px;
height: 350px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
/* Features Section */
.features {
padding: 5rem 0;
background-color: white;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
background-color: var(--light);
border-radius: 8px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-card i {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1rem;
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--dark);
}
/* Pricing Section */
.pricing {
padding: 5rem 0;
background-color: #f1f8fe;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.pricing-card {
background-color: white;
border-radius: 8px;
padding: 2.5rem 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
text-align: center;
transition: transform 0.3s;
}
.pricing-card:hover {
transform: translateY(-5px);
}
.pricing-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--dark);
}
.price {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 1.5rem;
}
.price span {
font-size: 1rem;
color: var(--gray);
}
.pricing-features {
list-style: none;
margin-bottom: 2rem;
}
.pricing-features li {
margin-bottom: 0.8rem;
color: var(--gray);
}
/* CTA Section */
.cta {
padding: 5rem 0;
background: var(--gradient);
color: white;
text-align: center;
}
.cta h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.cta p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 2rem;
}
/* Footer */
footer {
background-color: var(--dark);
color: white;
padding: 3rem 0 1rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: var(--secondary);
}
.footer-section p {
margin-bottom: 1rem;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section a {
color: #ddd;
text-decoration: none;
transition: color 0.3s;
}
.footer-section a:hover {
color: var(--secondary);
}
.social-icons {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-icons a {
display: inline-block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
text-align: center;
line-height: 40px;
transition: background-color 0.3s;
}
.social-icons a:hover {
background-color: var(--secondary);
}
.copyright {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Responsive Design */
@media (max-width: 968px) {
.dashboard-content {
flex-direction: column;
}
.dashboard-image {
order: -1;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.2rem;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<nav>
<div class="logo">
<i class="fas fa-cloud"></i>
<span>Fairbase</span>
</div>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#dashboard">Dashboard</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#get-started" class="btn">Get Started</a>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1>Cloud Workstations. Reimagined.</h1>
<p>Fairbase provides fully managed, secure, and customizable development environments in the cloud for unmatched productivity.</p>
<a href="#get-started" class="btn">Start Free Trial</a>
</div>
</section>
<!-- Platform Showcase -->
<section class="platform-showcase">
<div class="container">
<div class="section-title">
<h2>Why Choose Fairbase?</h2>
<p>Our cloud workstation platform is designed for developers, by developers</p>
</div>
<div class="platform-grid">
<div class="platform-card">
<i class="fas fa-shield-alt"></i>
<h3>Enhanced Security</h3>
<p>Enterprise-grade security with VPC isolation, IAM controls, and encrypted data storage.</p>
</div>
<div class="platform-card">
<i class="fas fa-bolt"></i>
<h3>Lightning Fast</h3>
<p>High-performance workstations with instant startup times and minimal latency.</p>
</div>
<div class="platform-card">
<i class="fas fa-cogs"></i>
<h3>Fully Customizable</h3>
<p>Tailor your environment with custom containers, tools, and IDE configurations.</p>
</div>
</div>
</div>
</section>
<!-- Dashboard Preview -->
<section class="dashboard-preview" id="dashboard">
<div class="container">
<div class="dashboard-content">
<div class="dashboard-text">
<h2>Intuitive Management Dashboard</h2>
<p>Our clean, user-friendly dashboard gives you complete control over your cloud workstations. Monitor usage, manage configurations, and deploy new environments with just a few clicks.</p>
<p>Access advanced features like automated snapshots, resource allocation, and team collaboration tools.</p>
<a href="#" class="btn">Explore Dashboard</a>
</div>
<div class="dashboard-image">
<div>Fairbase Dashboard Preview</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features" id="features">
<div class="container">
<div class="section-title">
<h2>Powerful Features</h2>
<p>Everything you need for productive cloud development</p>
</div>
<div class="features-grid">
<div class="feature-card">
<i class="fas fa-code"></i>
<h3>Multi-IDE Support</h3>
<p>Access your workstations through browsers, local IDEs (VS Code, JetBrains), or SSH connections.</p>
</div>
<div class="feature-card">
<i class="fas fa-brain"></i>
<h3>AI-Powered Development</h3>
<p>Integrated with AI assistance for code generation, auto-completion, and intelligent suggestions.</p>
</div>
<div class="feature-card">
<i class="fas fa-dollar-sign"></i>
<h3>Cost Optimization</h3>
<p>Auto-shutdown for idle workstations and persistent storage to avoid resource wastage.</p>
</div>
<div class="feature-card">
<i class="fas fa-infinity"></i>
<h3>Unlimited Scaling</h3>
<p>Scale your resources up or down based on project requirements with no downtime.</p>
</div>
<div class="feature-card">
<i class="fas fa-users"></i>
<h3>Team Collaboration</h3>
<p>Real-time collaboration features for pair programming and team development.</p>
</div>
<div class="feature-card">
<i class="fas fa-rocket"></i>
<h3>Fast Onboarding</h3>
<p>Get new developers up and running in minutes with pre-configured, consistent environments.</p>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section class="pricing" id="pricing">
<div class="container">
<div class="section-title">
<h2>Simple, Transparent Pricing</h2>
<p>Choose the plan that works best for your development needs</p>
</div>
<div class="pricing-grid">
<div class="pricing-card">
<h3>Starter</h3>
<div class="price">$29<span>/month</span></div>
<ul class="pricing-features">
<li>1 Cloud Workstation</li>
<li>4 vCPU, 8GB RAM</li>
<li>50GB Storage</li>
<li>Basic Support</li>
</ul>
<a href="#" class="btn">Get Started</a>
</div>
<div class="pricing-card">
<h3>Professional</h3>
<div class="price">$79<span>/month</span></div>
<ul class="pricing-features">
<li>3 Cloud Workstations</li>
<li>8 vCPU, 16GB RAM</li>
<li>100GB Storage</li>
<li>Priority Support</li>
<li>Team Collaboration</li>
</ul>
<a href="#" class="btn">Get Started</a>
</div>
<div class="pricing-card">
<h3>Enterprise</h3>
<div class="price">$199<span>/month</span></div>
<ul class="pricing-features">
<li>Unlimited Workstations</li>
<li>16 vCPU, 32GB RAM</li>
<li>500GB Storage</li>
<li>24/7 Premium Support</li>
<li>Advanced Security</li>
<li>Custom Configurations</li>
</ul>
<a href="#" class="btn">Get Started</a>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta" id="get-started">
<div class="container">
<h2>Ready to Transform Your Development Workflow?</h2>
<p>Join thousands of developers who have boosted their productivity with Fairbase Cloud Workstations</p>
<a href="#" class="btn">Start Free Trial</a>
</div>
</section>
<!-- Footer -->
<footer id="contact">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>Fairbase</h3>
<p>Next-generation cloud workstation platform for modern development teams.</p>
<div class="social-icons">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-google"></i></a>
</div>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Documentation</a></li>
<li><a href="#">API Reference</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Resources</h3>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Community Forum</a></li>
<li><a href="#">Webinars</a></li>
<li><a href="#">Case Studies</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Contact Us</h3>
<p><i class="fas fa-envelope"></i> [email protected]</p>
<p><i class="fas fa-phone"></i> +1 (555) 123-4567</p>
<p><i class="fas fa-map-marker-alt"></i> San Francisco, CA</p>
</div>
</div>
<div class="copyright">
<p>© 2023 Fairbase. All rights reserved. k.cloudworkstations.dev</p>
</div>
</div>
</footer>
<script>
// Simple smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 70,
behavior: 'smooth'
});
}
});
});
// Add animation to elements on scroll
const animateOnScroll = () => {
const elements = document.querySelectorAll('.platform-card, .feature-card, .pricing-card');
elements.forEach(element => {
const position = element.getBoundingClientRect();
// If element is in viewport
if(position.top < window.innerHeight - 100) {
element.style.opacity = 1;
element.style.transform = 'translateY(0)';
}
});
};
// Initialize elements for animation
document.querySelectorAll('.platform-card, .feature-card, .pricing-card').forEach(element => {
element.style.opacity = 0;
element.style.transform = 'translateY(20px)';
element.style.transition = 'opacity 0.5s, transform 0.5s';
});
// Listen for scroll events
window.addEventListener('scroll', animateOnScroll);
// Initial check on page load
window.addEventListener('load', animateOnScroll);
</script>
</body>
</html>
```
This complete website for Fairbase at k.cloudworkstations.dev includes:
1. **Modern Header** with navigation and logo
2. **Hero Section** with a compelling headline and call-to-action
3. **Platform Showcase** highlighting key benefits
4. **Dashboard Preview** section showing the management interface
5. **Features Section** with detailed feature cards
6. **Pricing Section** with three clear plans
7. **Call-to-Action Section** encouraging signups
8. **Comprehensive Footer** with contact information and links
The design is fully responsive, visually appealing, and includes smooth animations for a modern user experience. The color scheme uses Google-inspired colors while maintaining a unique identity for Fairbase.
You can copy this code and save it as an HTML file to view the complete website immediately.1 parent da0f7ed commit 1804d72
1 file changed
+862
-0
lines changed
0 commit comments