Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Free Website Builders & Coding Tools - OPEN IN BROWSER</title> | |
| <style> | |
| :root { | |
| --primary: #4361ee; | |
| --secondary: #3a0ca3; | |
| --accent: #f72585; | |
| --light: #f8f9fa; | |
| --dark: #212529; | |
| --success: #4cc9f0; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f7ff; | |
| color: var(--dark); | |
| line-height: 1.6; | |
| } | |
| .browser-warning { | |
| background: #ff6b6b; | |
| color: white; | |
| padding: 1rem; | |
| text-align: center; | |
| font-weight: bold; | |
| border-bottom: 3px solid #e63946; | |
| } | |
| .browser-warning a { | |
| color: #ffd166; | |
| text-decoration: underline; | |
| } | |
| header { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| color: white; | |
| padding: 2rem 0; | |
| text-align: center; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem 0; | |
| } | |
| h1, h2, h3 { | |
| margin-bottom: 1rem; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| h2 { | |
| color: var(--secondary); | |
| border-bottom: 2px solid var(--accent); | |
| padding-bottom: 0.5rem; | |
| margin-top: 2rem; | |
| } | |
| .nav-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 2rem; | |
| margin: 1rem 0; | |
| flex-wrap: wrap; | |
| } | |
| .nav-links a { | |
| color: white; | |
| text-decoration: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 5px; | |
| background: rgba(255, 255, 255, 0.1); | |
| transition: background 0.3s; | |
| } | |
| .nav-links a:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| .instructions { | |
| background: #e7f5ff; | |
| border-left: 4px solid var(--success); | |
| padding: 1.5rem; | |
| margin: 1.5rem 0; | |
| border-radius: 0 8px 8px 0; | |
| } | |
| .instructions ol { | |
| margin-left: 1.5rem; | |
| } | |
| .instructions li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .intro { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 10px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| margin-bottom: 2rem; | |
| } | |
| .card-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin: 2rem 0; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .card-header { | |
| background: var(--primary); | |
| color: white; | |
| padding: 1.5rem; | |
| } | |
| .card-body { | |
| padding: 1.5rem; | |
| } | |
| .card-footer { | |
| background: #f8f9fa; | |
| padding: 1rem 1.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .btn { | |
| display: inline-block; | |
| background: var(--accent); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 5px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: opacity 0.3s; | |
| } | |
| .btn:hover { | |
| opacity: 0.9; | |
| } | |
| .tag { | |
| background: #e9ecef; | |
| padding: 0.3rem 0.7rem; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| } | |
| .feature-list { | |
| list-style: none; | |
| margin: 1rem 0; | |
| } | |
| .feature-list li { | |
| padding: 0.5rem 0; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .feature-list li:before { | |
| content: "✓ "; | |
| color: var(--success); | |
| font-weight: bold; | |
| } | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| text-align: center; | |
| padding: 2rem 0; | |
| margin-top: 3rem; | |
| } | |
| @media (max-width: 768px) { | |
| .card-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="browser-warning"> | |
| ⚠️ Double-click didn't work? <strong>Right-click this file</strong> → "Open with" → Choose your browser (Chrome, Firefox, Edge) | |
| </div> | |
| <header> | |
| <div class="container"> | |
| <h1>Free Tools for Building Websites & Code</h1> | |
| <p>Powerful, free alternatives to premium website builders and coding assistants</p> | |
| <div class="nav-links"> | |
| <a href="index.html">Home</a> | |
| <a href="floor-plan.html">Floor Plan</a> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="container"> | |
| <section class="instructions"> | |
| <h2>How to Open This File Correctly</h2> | |
| <ol> | |
| <li><strong>Right-click</strong> the HTML file on your computer</li> | |
| <li>Select <strong>"Open with"</strong></li> | |
| <li>Choose your web browser (Chrome, Firefox, Edge, Safari)</li> | |
| <li>Alternatively, <strong>drag the file</strong> into an open browser tab</li> | |
| </ol> | |
| <p><em>If double-clicking opens in a text editor, your computer is set to open HTML files with the wrong program.</em></p> | |
| </section> | |
| <section class="intro"> | |
| <h2>Build Websites Without Coding Experience</h2> | |
| <p>These free website builders offer drag-and-drop interfaces, templates, and hosting to get your site online quickly without needing to write code.</p> | |
| </section> | |
| <h2>Free Website Builders</h2> | |
| <div class="card-grid"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3>Wix</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p>Drag-and-drop website builder with hundreds of templates. Great for beginners and small businesses.</p> | |
| <ul class="feature-list"> | |
| <li>500MB storage & bandwidth</li> | |
| <li>Wix ads displayed</li> | |
| <li>Mobile-optimized</li> | |
| <li>100s of templates</li> | |
| </ul> | |
| </div> | |
| <div class="card-footer"> | |
| <span class="tag">Beginner Friendly</span> | |
| <a href="https://www.wix.com/" class="btn" target="_blank">Visit</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3>WordPress.com</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p>The popular blogging platform that powers over 40% of all websites. Extensive plugin ecosystem.</p> | |
| <ul class="feature-list"> | |
| <li>3GB storage</li> | |
| <li>Free subdomain</li> | |
| <li>Basic customization</li> | |
| <li>Blogging focused</li> | |
| </ul> | |
| </div> | |
| <div class="card-footer"> | |
| <span class="tag">Blogging</span> | |
| <a href="https://wordpress.com/" class="btn" target="_blank">Visit</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3>GitHub Pages</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p>Host static websites directly from your GitHub repository. Perfect for portfolios and project pages.</p> | |
| <ul class="feature-list"> | |
| <li>Free hosting</li> | |
| <li>Custom domain support</li> | |
| <li>Jekyll integration</li> | |
| <li>Developer friendly</li> | |
| </ul> | |
| </div> | |
| <div class="card-footer"> | |
| <span class="tag">Developers</span> | |
| <a href="https://pages.github.com/" class="btn" target="_blank">Visit</a> | |
| </div> | |
| </div> | |
| </div> | |
| <h2>Free Coding Assistance Tools</h2> | |
| <div class="card-grid"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3>CodePen</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p>Online community for testing and showcasing HTML, CSS, and JavaScript code snippets.</p> | |
| <ul class="feature-list"> | |
| <li>Full code editor</li> | |
| <li>Public "pens"</li> | |
| <li>Frontend focus</li> | |
| <li>Community sharing</li> | |
| </ul> | |
| </div> | |
| <div class="card-footer"> | |
| <span class="tag">Frontend</span> | |
| <a href="https://codepen.io/" class="btn" target="_blank">Visit</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3>Replit</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p>Browser-based IDE that supports over 50 programming languages. Collaborate in real-time.</p> | |
| <ul class="feature-list"> | |
| <li>Public projects</li> | |
| <li>Basic compute power</li> | |
| <li>Multiplayer editing</li> | |
| <li>50+ languages</li> | |
| </ul> | |
| </div> | |
| <div class="card-footer"> | |
| <span class="tag">Multi-language</span> | |
| <a href="https://replit.com/" class="btn" target="_blank">Visit</a> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h3>VS Code Online</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p>The full Visual Studio Code experience running in your browser. No installation required.</p> | |
| <ul class="feature-list"> | |
| <li>Full editor experience</li> | |
| <li>Extensions support</li> | |
| <li>Git integration</li> | |
| <li>Terminal access</li> | |
| </ul> | |
| </div> | |
| <div class="card-footer"> | |
| <span class="tag">Full IDE</span> | |
| <a href="https://vscode.dev/" class="btn" target="_blank">Visit</a> | |
| </div> | |
| </div> | |
| </div> | |
| <section class="instructions"> | |
| <h2>Next Steps</h2> | |
| <p><strong>Save this file</strong> to your computer and try the methods above to open it in a browser. Once you can see this page properly, you'll know HTML files are working correctly on your system!</p> | |
| </section> | |
| <section class="intro"> | |
| <h2>Getting Started Tips</h2> | |
| <ul class="feature-list"> | |
| <li>Start with a simple project to learn the tools</li> | |
| <li>Take advantage of templates to save time</li> | |
| <li>Join community forums for help and inspiration</li> | |
| <li>Consider upgrading to paid plans as your needs grow</li> | |
| <li>Many tools offer student discounts or special programs</li> | |
| </ul> | |
| </section> | |
| </div> | |
| <footer> | |
| <div class="container"> | |
| <p>This resource page showcases free alternatives to premium website builders and coding tools.</p> | |
| <p>All mentioned tools have free tiers available at the time of publishing.</p> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> | |