361 lines
18 KiB
PHP
361 lines
18 KiB
PHP
<?php
|
|
session_start();
|
|
$a = rand(2, 12);
|
|
$b = rand(2, 12);
|
|
$_SESSION['captcha_answer'] = $a + $b;
|
|
$captcha_q = "$a + $b";
|
|
$form_sent = isset($_GET['sent']) && $_GET['sent'] === '1';
|
|
$form_error = isset($_GET['error']) && $_GET['error'] === '1';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Fraxle.net - Web & Tech for Small Businesses</title>
|
|
<meta name="description" content="Friendly website design, online apps, tech and network support, plus graphics, video, 3D and audio for small businesses in Oxfordshire and beyond.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<noscript><link rel="stylesheet" href="css/noscript.css"></noscript>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ===================== NAV ===================== -->
|
|
<header class="site-header" id="site-header">
|
|
<nav class="nav-container">
|
|
<a href="#hero" class="nav-logo">
|
|
<span class="logo-icon"><img style="width:32px;" src="img/tinyicon.png"></span>
|
|
<span class="logo-text">Fraxle<span class="logo-dot">.net</span></span>
|
|
</a>
|
|
<ul class="nav-links" id="nav-links">
|
|
<li><a href="#services">Services</a></li>
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#projects">Projects</a></li>
|
|
<li><a href="estimates">Estimates</a></li>
|
|
<li><a href="#contact" class="btn nav-cta">Get in Touch</a></li>
|
|
</ul>
|
|
<button class="nav-hamburger" id="nav-hamburger" aria-label="Toggle menu" aria-expanded="false">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- ===================== HERO ===================== -->
|
|
<section id="hero" class="hero">
|
|
<div class="hero-stars" id="hero-stars"></div>
|
|
<div class="hero-orbs">
|
|
<div class="orb orb-1"></div>
|
|
<div class="orb orb-2"></div>
|
|
<div class="orb orb-3"></div>
|
|
</div>
|
|
<div class="hero-content">
|
|
<div class="hero-text">
|
|
<p class="hero-eyebrow">✦ Magical Digital Services ✦</p>
|
|
<h1 class="hero-title">
|
|
Web & Tech<br>
|
|
<span class="hero-title-accent">for Small Business</span>
|
|
</h1>
|
|
<div class="hero-mascots-mobile">
|
|
<img src="img/wizcat4.webp" alt="Danny the tech-wizard and Astro the cosmic cat" class="mascot-img mascot-teleport">
|
|
<p class="hero-caption">Danny the tech-wizard & Astro the cosmic cat</p>
|
|
</div>
|
|
<p class="hero-subtitle">Friendly website design, online apps, tech support and creative wizardry - with a touch of enchantment. Based in Oxfordshire.</p>
|
|
<div class="hero-actions">
|
|
<a href="mailto:wizard@fraxle.net" class="btn btn-primary">
|
|
<i class="fas fa-envelope"></i> wizard@fraxle.net
|
|
</a>
|
|
<a href="#services" class="btn btn-ghost">
|
|
Explore the magic <i class="fas fa-arrow-down"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-mascots">
|
|
<div class="mascot-ring">
|
|
<img src="img/wizcat4.webp" alt="Danny the tech-wizard and Astro the cosmic cat" class="mascot-img mascot-teleport">
|
|
</div>
|
|
<p class="hero-caption">Danny the tech-wizard & Astro the cosmic cat</p>
|
|
</div>
|
|
</div>
|
|
<div class="hero-wave">
|
|
<svg viewBox="0 0 1440 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
|
|
<path d="M0,50 C300,100 900,0 1440,60 L1440,100 L0,100 Z" fill="#251D70"/>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== SERVICES ===================== -->
|
|
<section id="services" class="services section-pad">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<p class="section-eyebrow">What I do</p>
|
|
<h2 class="section-title">Spells I Cast</h2>
|
|
<p class="section-lead">From conjuring websites to taming rogue gadgets - here's how I can help your business.</p>
|
|
</div>
|
|
<div class="services-grid">
|
|
<div class="service-card reveal">
|
|
<div class="service-icon service-icon--orange">
|
|
<i class="fas fa-wand-magic-sparkles"></i>
|
|
</div>
|
|
<h3>Web Design with a Touch of Alchemy</h3>
|
|
<p>I conjure websites that don't just look pretty - they load fast, climb the search rankings and turn curious visitors into customers. From a simple landing page to a full online store - WordPress, Shopify or Squarespace - every site is built to be quick, secure and unmistakably yours. Need something truly bespoke? I build custom online apps too.</p>
|
|
</div>
|
|
<div class="service-card reveal">
|
|
<div class="service-icon service-icon--purple">
|
|
<i class="fas fa-mobile-screen-button"></i>
|
|
</div>
|
|
<h3>Tech Support & Digital Sorcery</h3>
|
|
<p>Gadgets gone rogue? Whether it's setting up a new smartphone, syncing a stubborn tablet, sorting out office computers and networks, connecting smart-home gadgets or reviving a misbehaving laptop, I'll get your tech behaving - and show you how to keep it that way.</p>
|
|
</div>
|
|
<div class="service-card reveal">
|
|
<div class="service-icon service-icon--gold">
|
|
<i class="fas fa-palette"></i>
|
|
</div>
|
|
<h3>Master of the Mystic Digital Arts</h3>
|
|
<p>Beyond the web, I craft the creative magic too - logos and graphics, video filming and editing, 3D modelling and animation, and audio production. Whatever your project conjures up, I can help bring it to life.</p>
|
|
</div>
|
|
</div>
|
|
<div class="service-wide reveal">
|
|
<div class="service-wide-icon">
|
|
<i class="fas fa-seedling"></i>
|
|
</div>
|
|
<div class="service-wide-text">
|
|
<h3>Magic for Ethical, Independent Business</h3>
|
|
<p>I work especially with small businesses, not-for-profits, charities and farmers who want to grow sustainably in the digital age. Affordable, human-centred and as easy to use as a well-cast spell.</p>
|
|
</div>
|
|
<div class="service-wide-plants" aria-hidden="true">
|
|
<i class="fas fa-seedling"></i>
|
|
<i class="fas fa-leaf"></i>
|
|
<i class="fas fa-seedling"></i>
|
|
<i class="fas fa-spa"></i>
|
|
<i class="fas fa-seedling"></i>
|
|
<i class="fas fa-leaf"></i>
|
|
<i class="fas fa-seedling"></i>
|
|
<i class="fas fa-spa"></i>
|
|
<i class="fas fa-seedling"></i>
|
|
<i class="fas fa-leaf"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== ABOUT ===================== -->
|
|
<section id="about" class="about section-pad">
|
|
<div class="container">
|
|
<div class="about-grid">
|
|
<div class="about-image reveal">
|
|
<div class="about-img-placeholder">
|
|
<img src="img/wizfixer.webp" alt="Danny the tech-wizard" class="mascot-img">
|
|
<!-- <i class="fas fa-hat-wizard"></i> -->
|
|
</div>
|
|
<div class="about-badge">
|
|
<i class="fas fa-location-dot"></i> Oxfordshire, UK
|
|
</div>
|
|
</div>
|
|
<div class="about-text reveal">
|
|
<p class="section-eyebrow">About Fraxle.net</p>
|
|
<h2 class="section-title">Conjuring Digital Magic for Small Businesses</h2>
|
|
<p>Welcome to the realm where technology meets wizardry! Whether you're planting the seeds of a new venture or looking to level up your digital presence, I blend design, functionality, and futuristic tools to help your business flourish.</p>
|
|
<p>Based primarily in <strong>Oxfordshire</strong>, I can bring these skills directly to your local organisation - and work remotely with anyone, anywhere.</p>
|
|
<div class="about-bullets">
|
|
<div class="about-bullet">
|
|
<i class="fas fa-check-circle"></i>
|
|
<span>Friendly, jargon-free support</span>
|
|
</div>
|
|
<div class="about-bullet">
|
|
<i class="fas fa-check-circle"></i>
|
|
<span>Affordable packages for small budgets</span>
|
|
</div>
|
|
<div class="about-bullet">
|
|
<i class="fas fa-check-circle"></i>
|
|
<span>Ethical, independent & community-focused</span>
|
|
</div>
|
|
</div>
|
|
<a href="#contact" class="btn btn-primary">Start a Conversation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== PROJECTS ===================== -->
|
|
<section id="projects" class="projects section-pad">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<p class="section-eyebrow">Portfolio</p>
|
|
<h2 class="section-title">Recent Enchantments</h2>
|
|
<p class="section-lead">A few recent projects from the spell book.</p>
|
|
</div>
|
|
<div class="projects-list">
|
|
<!-- No link — James Norman has no website -->
|
|
<article class="project-row project-row--no-link reveal">
|
|
<div class="project-row-img">
|
|
<img src="img/james.jpg" alt="James Norman" loading="lazy">
|
|
</div>
|
|
<div class="project-row-info">
|
|
<div class="project-row-meta">
|
|
<span class="project-number">01</span>
|
|
<span class="project-type">Organic Farmer</span>
|
|
</div>
|
|
<h3>James Norman</h3>
|
|
<p class="project-work"><i class="fas fa-network-wired"></i> Office Network Update</p>
|
|
</div>
|
|
</article>
|
|
<a href="https://organicgrowersgathering.org/" target="_blank" rel="noopener" class="project-row reveal">
|
|
<div class="project-row-img">
|
|
<img src="img/ogg.jpg" alt="The Organic Growers Gathering" loading="lazy">
|
|
</div>
|
|
<div class="project-row-info">
|
|
<div class="project-row-meta">
|
|
<span class="project-number">02</span>
|
|
<span class="project-type">Organic Farming Event</span>
|
|
</div>
|
|
<h3>The Organic Growers Gathering</h3>
|
|
<p class="project-work"><i class="fas fa-video"></i> Video Recording & Editing</p>
|
|
</div>
|
|
<div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
|
|
</a>
|
|
<a href="https://sunscope.net" target="_blank" rel="noopener" class="project-row reveal">
|
|
<div class="project-row-img">
|
|
<img src="img/sunscope.jpg" alt="Sunscope.net" loading="lazy">
|
|
</div>
|
|
<div class="project-row-info">
|
|
<div class="project-row-meta">
|
|
<span class="project-number">03</span>
|
|
<span class="project-type">Weather Application</span>
|
|
</div>
|
|
<h3>Sunscope.net</h3>
|
|
<p class="project-work"><i class="fas fa-cloud-sun"></i> Advanced Weather App</p>
|
|
</div>
|
|
<div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
|
|
</a>
|
|
<a href="https://camplight.co.uk/" target="_blank" rel="noopener" class="project-row reveal">
|
|
<div class="project-row-img">
|
|
<img src="img/camplight.jpg" alt="Camplight" loading="lazy">
|
|
</div>
|
|
<div class="project-row-info">
|
|
<div class="project-row-meta">
|
|
<span class="project-number">04</span>
|
|
<span class="project-type">Camping & Outdoors</span>
|
|
</div>
|
|
<h3>Camplight</h3>
|
|
<p class="project-work"><i class="fas fa-globe"></i> Website Design & Build</p>
|
|
</div>
|
|
<div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
|
|
</a>
|
|
<a href="https://www.hempen.co.uk/" target="_blank" rel="noopener" class="project-row reveal">
|
|
<div class="project-row-img">
|
|
<img src="img/hempen.jpg" alt="Hempen Organic" loading="lazy">
|
|
</div>
|
|
<div class="project-row-info">
|
|
<div class="project-row-meta">
|
|
<span class="project-number">05</span>
|
|
<span class="project-type">Hemp & CBD Products</span>
|
|
</div>
|
|
<h3>Hempen Organic</h3>
|
|
<p class="project-work"><i class="fas fa-cart-shopping"></i> eCommerce Website</p>
|
|
</div>
|
|
<div class="project-row-arrow"><i class="fas fa-arrow-right"></i></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== PRICING TEASER ===================== -->
|
|
<section id="pricing-teaser" class="pricing-teaser section-pad">
|
|
<div class="container">
|
|
<div class="pricing-teaser-inner reveal">
|
|
<div class="pricing-teaser-copy">
|
|
<p class="section-eyebrow">Transparent Pricing</p>
|
|
<h2 class="section-title">Spells & Pricing</h2>
|
|
<p class="section-lead">From a simple first website to a full ecommerce empire - plus ongoing care plans and ad-hoc tech support. See clear, honest estimates with no hidden fees, and enquire about any package in a click.</p>
|
|
<a href="estimates" class="btn btn-primary pricing-teaser-btn">
|
|
<i class="fas fa-scroll"></i> View Estimates & Packages
|
|
</a>
|
|
</div>
|
|
<div class="pricing-teaser-astro" aria-hidden="true">
|
|
<img src="img/astrofly2.webp" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== CONTACT ===================== -->
|
|
<section id="contact" class="contact section-pad">
|
|
<div class="container">
|
|
<div class="contact-wrapper">
|
|
<div class="contact-intro reveal">
|
|
<p class="section-eyebrow section-eyebrow--light">Say Hello</p>
|
|
<h2 class="section-title section-title--light">Get in Touch</h2>
|
|
<p>Have a project in mind? Need some tech support? Drop me a message and I'll get back to you - usually within one working day, as soon as the stars align.</p>
|
|
<ul class="contact-details">
|
|
<li>
|
|
<i class="fas fa-envelope"></i>
|
|
<a href="mailto:wizard@fraxle.net">wizard@fraxle.net</a>
|
|
</li>
|
|
<li>
|
|
<i class="fas fa-location-dot"></i>
|
|
Oxfordshire, UK
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="contact-form-wrap reveal">
|
|
<?php if ($form_sent): ?>
|
|
<div class="form-success">
|
|
<div class="form-success-icon"><i class="fas fa-check"></i></div>
|
|
<h3>Incantation sent!</h3>
|
|
<p>Thanks for getting in touch. I'll reply as soon as I can.</p>
|
|
</div>
|
|
<?php else: ?>
|
|
<?php if ($form_error): ?>
|
|
<div class="form-error-msg">
|
|
<i class="fas fa-triangle-exclamation"></i>
|
|
<p>Something went wrong - please check your details (including the maths answer) and try again.</p>
|
|
</div>
|
|
<?php endif; ?>
|
|
<form class="contact-form" action="send.php" method="POST" novalidate>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="name">Your Name</label>
|
|
<input type="text" id="name" name="name" placeholder="e.g. Merlin" required autocomplete="name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" name="email" placeholder="you@example.com" required autocomplete="email">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="message">Your Message</label>
|
|
<textarea id="message" name="message" rows="5" placeholder="Tell me about your project or what you need help with..." required></textarea>
|
|
</div>
|
|
<div class="form-captcha">
|
|
<label for="captcha">
|
|
Quick check — what is <strong><?= htmlspecialchars($captcha_q) ?></strong>?
|
|
</label>
|
|
<input type="number" id="captcha" name="captcha" placeholder="Answer" required min="1">
|
|
</div>
|
|
<button type="submit" class="btn btn-accent">
|
|
<i class="fas fa-paper-plane"></i> Send Incantation
|
|
</button>
|
|
</form>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== FOOTER ===================== -->
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<p class="footer-logo">Fraxle<span>.net</span></p>
|
|
<p class="footer-tagline">Friendly web & tech for small businesses</p>
|
|
<p class="footer-links"><a href="terms">Terms & Conditions</a></p>
|
|
<p class="footer-copy">© <?= date('Y') ?> Fraxle.net All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|