Skip to content

Instantly share code, notes, and snippets.

@oshkoshbagoshh

oshkoshbagoshh/index.html

Created September 23, 2025 16:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save oshkoshbagoshh/49e4709addb83c5050eb088e3b4ca184 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save oshkoshbagoshh/49e4709addb83c5050eb088e3b4ca184 to your computer and use it in GitHub Desktop.
Download ZIP
Website Auditing Tools Landing Page
Raw
index.html
<body>
<header>
<nav>
<a href="#hero">Home</a>
<a href="#benefits">Features</a>
<a href="#how-it-works">How It Works</a>
<a href="#pricing">Pricing</a>
<a href="#faq">FAQ</a>
<a href="#cta" class="btn-primary" style="padding:0.3rem 0.6rem; font-weight:normal;">Try Now</a>
</nav>
</header>
<main class="container">
<!-- Hero -->
<section id="hero" class="hero" role="banner">
<p>Trusted by 500+ webmasters & developers</p>
<h1>Lightweight Website Auditing Toolkit for PHP Developers</h1>
<p>Fast, efficient, and easy-to-use auditing tools built with vanilla PHP</p>
<button class="btn-primary" onclick="alert('Starting free audit...')">Start Free Audit</button>
<button class="btn-secondary" onclick="alert('Viewing demo...')">View Demo</button>
</section>
<!-- Partners -->
<section class="partners" aria-label="Partners">
<h2>Trusted by</h2>
<div>
<span>CompanyA</span>
<span>CompanyB</span>
<span>CompanyC</span>
<span>CompanyD</span>
</div>
</section>
<!-- Benefits -->
<section id="benefits" class="benefits" aria-label="Benefits">
<h2>Benefits</h2>
<div class="benefits-list">
<div class="benefit">Run audits without any heavy dependencies</div>
<div class="benefit">Get actionable SEO, performance, and security insights</div>
<div class="benefit">Integrates seamlessly with your PHP projects</div>
<div class="benefit">Lightweight and blazing fast</div>
</div>
</section>
<!-- How It Works -->
<section id="how-it-works" class="how-it-works" aria-label="How It Works">
<h2>How It Works</h2>
<div class="how-list">
<div class="how-step">Upload your website URL or local PHP project</div>
<div class="how-step">Run audits for SEO, performance, accessibility, and security</div>
<div class="how-step">Get detailed reports with recommendations</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="pricing" aria-label="Pricing">
<h2>Pricing</h2>
<div class="pricing-plans">
<div class="plan">
<h3>Free</h3>
<div class="plan-price">$0</div>
<ul class="plan-features">
<li>Basic audits</li>
<li>Limited reports</li>
<li>Community support</li>
</ul>
<button onclick="alert('Selected Free plan')">Start Free Audit</button>
</div>
<div class="plan popular">
<h3>Pro</h3>
<div class="plan-price">$29/month</div>
<ul class="plan-features">
<li>Full audits</li>
<li>Downloadable reports</li>
<li>Priority support</li>
</ul>
<button onclick="alert('Selected Pro plan')">Get Pro</button>
</div>
<div class="plan">
<h3>Enterprise</h3>
<div class="plan-price">Custom</div>
<ul class="plan-features">
<li>Custom features & integrations</li>
<li>Dedicated support</li>
<li>Service level agreement</li>
</ul>
<button onclick="alert('Selected Enterprise plan')">Contact Sales</button>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="testimonials" aria-label="Testimonials">
<h2>What Our Users Say</h2>
<div class="testimonials-list">
<div class="testimonial">
<blockquote>"This toolkit saved me hours of manual checking. Fast and accurate!"</blockquote>
<div class="name">Jane D.</div>
<div class="rating">Rating: ★★★★★</div>
</div>
<div class="testimonial">
<blockquote>"Lightweight and easy to integrate with my PHP projects."</blockquote>
<div class="name">Mark S.</div>
<div class="rating">Rating: ★★★★☆</div>
</div>
<div class="testimonial">
<blockquote>"Great support and very useful audit reports."</blockquote>
<div class="name">Anna K.</div>
<div class="rating">Rating: ★★★★★</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="faq" aria-label="Frequently Asked Questions">
<h2>Frequently Asked Questions</h2>
<div class="faq-list">
<details class="faq-item">
<summary>Is the toolkit open source?</summary>
<p>Yes, it is fully open source and free to use.</p>
</details>
<details class="faq-item">
<summary>Does it work on shared hosting?</summary>
<p>Yes, it requires only PHP 7.4+ and no special extensions.</p>
</details>
<details class="faq-item">
<summary>How often are audits updated?</summary>
<p>Audit rules are updated monthly based on latest best practices.</p>
</details>
<details class="faq-item">
<summary>What kind of support is available?</summary>
<p>Community support for Free plan, priority support for Pro and Enterprise.</p>
</details>
</div>
</section>
<!-- CTA Section -->
<section id="cta" class="cta-section" aria-label="Call to Action">
<h2>Ready to audit your website?</h2>
<button class="btn-primary" onclick="alert('Starting free audit...')">Start Your Free Audit Now</button>
</section>
</main>
<footer>
<p>&copy; 2025 Website Auditing Toolkit. All rights reserved.</p>
<nav>
<a href="#hero">Home</a> |
<a href="#benefits">Features</a> |
<a href="#pricing">Pricing</a> |
<a href="#faq">FAQ</a> |
<a href="#cta">Contact</a>
</nav>
</footer>
</body>
Raw
script.js
console.log('hi');
Raw
style.css
/* Minimal CSS for layout and styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f9f9f9;
color: #222;
}
a {
color: #007bff;
text-decoration: none;
}
header,
footer {
background: #222;
color: white;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 1000;
}
nav a {
margin: 0 1rem;
font-weight: bold;
}
.container {
max-width: 960px;
margin: 2rem auto;
padding: 0 1rem;
}
h1,
h2,
h3 {
margin-top: 0;
}
.hero {
text-align: center;
padding: 4rem 1rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.hero button {
margin: 1rem 0.5rem;
padding: 0.75rem 1.5rem;
font-size: 1rem;
cursor: pointer;
border: none;
border-radius: 4px;
}
.btn-primary {
background: #007bff;
color: white;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.partners,
.benefits,
.how-it-works,
.pricing,
.testimonials,
.faq,
.cta-section {
background: white;
margin: 2rem 0;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.partners span {
margin-right: 1rem;
font-weight: bold;
}
.benefits-list,
.how-list,
.pricing-plans,
.testimonials-list,
.faq-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.benefit,
.how-step,
.plan,
.testimonial,
.faq-item {
flex: 1 1 250px;
background: #f0f0f0;
padding: 1rem;
border-radius: 6px;
}
.plan {
background: white;
border: 1px solid #ddd;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.plan.popular {
border-color: #007bff;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}
.plan h3 {
margin-bottom: 0.5rem;
}
.plan-price {
font-size: 1.5rem;
margin: 1rem 0;
}
.plan-features {
list-style: none;
padding: 0;
margin: 0 0 1rem 0;
text-align: left;
}
.plan-features li {
margin: 0.25rem 0;
}
.plan button {
background: #007bff;
border: none;
color: white;
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
}
.testimonial blockquote {
font-style: italic;
margin: 0 0 0.5rem 0;
}
.testimonial .name {
font-weight: bold;
}
.faq-item summary {
cursor: pointer;
font-weight: bold;
padding: 0.5rem 0;
}
.cta-section {
text-align: center;
}
.cta-section button {
font-size: 1.25rem;
padding: 1rem 2rem;
}
footer {
text-align: center;
font-size: 0.9rem;
}
@media (max-width: 600px) {
.benefits-list,
.how-list,
.pricing-plans,
.testimonials-list,
.faq-list {
flex-direction: column;
}
}
Raw
website-auditing-tools-landing-page.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment