Download Free Assets
Building a professional-looking website doesn’t have to cost a fortune. Whether you’re a small business owner, freelancer, or creative designer, the right web template can help you launch your online presence quickly and beautifully — without touching a single line of code.
In today’s digital world, first impressions matter more than ever. A stunning, well-designed website builds trust, attracts visitors, and turns them into customers. The good news? There are thousands of free web templates that look as polished as premium ones. In this guide, we’ve handpicked the best free web templates that are fully responsive, modern, and easy to customize — so you can focus on your content, not your code.
Download Best Free HTML5 Templates
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Stunning — Professional HTML5 Template</title>
<meta name="description" content="Stunning, responsive and functional HTML5 template for businesses, portfolios and startups." />
<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=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<style>
:root{
--bg:#0f1724; --card:#0b1220; --muted:#98a0b4; --accent:#7c5cff; --glass: rgba(255,255,255,0.04);
--radius:14px; --maxw:1100px; --gap:24px; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#071025 0%, #081525 60%);color:#e6eef8}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:40px 24px}
/* NAV */
header{position:sticky;top:18px;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px;background:transparent}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#4cc3ff);display:flex;align-items:center;justify-content:center;font-weight:800;color:#051023}
nav ul{display:flex;gap:16px;align-items:center;margin:0;padding:0;list-style:none}
.cta{padding:10px 16px;background:var(--accent);border-radius:10px;color:white;font-weight:600}
.menu-toggle{display:none}
/* HERO */
.hero{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center;padding:48px 0}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.02;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 18px}
.actions{display:flex;gap:12px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));border-radius:var(--radius);padding:18px;box-shadow:0 6px 18px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03)}
/* Feature grid */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.feature{padding:18px;border-radius:12px;background:var(--glass);border:1px solid rgba(255,255,255,0.03)}
.feature h4{margin:0 0 8px}
.muted{color:var(--muted);font-size:0.95rem}
/* Portfolio */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.work{height:160px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));display:flex;align-items:flex-end;padding:12px}
.tag{background:rgba(0,0,0,0.35);padding:6px 10px;border-radius:999px;font-size:0.85rem}
/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0}
.price{padding:22px;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)}
.price h3{margin:0 0 8px}
.price .amount{font-size:1.6rem;font-weight:700;margin-bottom:12px}
/* Contact */
.contact{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
form input, form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
form button{margin-top:10px;padding:12px;border-radius:10px;border:0;background:var(--accent);color:#051023;font-weight:700}
footer{margin-top:48px;padding:24px 0;color:var(--muted);font-size:0.95rem;text-align:center}
/* Responsive */
@media(max-width:980px){
.hero{grid-template-columns:1fr;}
.features{grid-template-columns:repeat(2,1fr)}
.work-grid{grid-template-columns:repeat(2,1fr)}
.pricing{grid-template-columns:1fr}
}
@media(max-width:640px){
.features{grid-template-columns:1fr}
.menu-toggle{display:block}
nav ul{display:none}
}
/* small helpers */
.muted-2{color:#b6c2d6}
.center{text-align:center}
</style>
</head>
<body>
<header>
<div class="container nav">
<div class="brand">
<div class="logo">S</div>
<div>
<div style="font-weight:700">Stunning</div>
<div style="font-size:0.85rem;color:var(--muted)">HTML5 Template</div>
</div>
</div>
<nav>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#work">Portfolio</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div style="display:flex;align-items:center;gap:12px">
<a class="cta" href="#contact">Get Started</a>
<button class="menu-toggle" aria-label="menu">☰</button>
</div>
</div>
</header>
<main class="container">
<section class="hero">
<div>
<div class="card">
<h1>Stunning, professional HTML5 template — built for speed and conversions</h1>
<p class="muted">A production-ready single-file starter template: responsive layout, accessible components, hero, portfolio, pricing, and contact form.</p>
<div class="actions">
<a class="cta" href="#download">Download</a>
<a style="padding:10px 14px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.03)" href="#features">Explore Features</a>
</div>
<div class="features" style="margin-top:24px">
<div class="feature">
<h4>Responsive & Fast</h4>
<div class="muted">Mobile-first design and minimal CSS for quick load times.</div>
</div>
<div class="feature">
<h4>Accessible</h4>
<div class="muted">Semantic HTML, clear focus states, and keyboard-friendly UI.</div>
</div>
<div class="feature">
<h4>Customizable</h4>
<div class="muted">Easy to rebrand: colors, fonts, and layout sections are simple to edit.</div>
</div>
</div>
</div>
</div>
<aside>
<div class="card">
<div style="display:flex;flex-direction:column;gap:12px">
<div style="font-weight:700">Quick Specs</div>
<div class="muted-2">HTML5 • CSS only (no frameworks) • Vanilla JS • Responsive • SEO-friendly</div>
<div style="display:flex;gap:8px;margin-top:8px">
<div style="flex:1;padding:10px;border-radius:10px;background:linear-gradient(180deg,#071034, #08182a);text-align:center">Pages: 1</div>
<div style="flex:1;padding:10px;border-radius:10px;background:linear-gradient(180deg,#071034, #08182a);text-align:center">Demo: Built-in</div>
</div>
<div style="margin-top:12px">
<div style="font-size:0.9rem;color:var(--muted);">Preview</div>
<div style="height:160px;border-radius:10px;margin-top:8px;background:linear-gradient(135deg, rgba(124,92,255,0.14), rgba(76,195,255,0.08));display:flex;align-items:center;justify-content:center}">
<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
<rect width="120" height="80" rx="10" fill="#071725" />
<rect x="14" y="14" width="92" height="12" rx="4" fill="#0e2b3b" />
<rect x="14" y="34" width="92" height="8" rx="4" fill="#0e2b3b" />
</svg>
</div>
</div>
</div>
</div>
</aside>
</section>
<section id="work">
<div style="display:flex;align-items:center;justify-content:space-between;gap:16px">
<div>
<h2 style="margin:0">Selected Work</h2>
<div class="muted">Examples built with this template (mockups)</div>
</div>
<a href="#" style="color:var(--muted);font-size:0.95rem">View all</a>
</div>
<div class="work-grid">
<div class="work card"><div><div class="tag">Agency</div></div></div>
<div class="work card"><div><div class="tag">SaaS</div></div></div>
<div class="work card"><div><div class="tag">Portfolio</div></div></div>
<div class="work card"><div><div class="tag">E‑Commerce</div></div></div>
<div class="work card"><div><div class="tag">Startup</div></div></div>
<div class="work card"><div><div class="tag">Course</div></div></div>
</div>
</section>
<section id="pricing">
<h2 style="margin-top:34px">Pricing Plans</h2>
<div class="muted">Simple pricing table ready to customize for free/premium versions.</div>
<div class="pricing">
<div class="price card">
<h3>Starter</h3>
<div class="amount">Free</div>
<div class="muted">Single-page template, community support, open-source.</div>
<ul style="margin:12px 0 0 16px;color:var(--muted)">
<li>Responsive layout</li>
<li>Basic components</li>
<li>Community updates</li>
</ul>
<a href="#download" style="display:inline-block;margin-top:12px;padding:10px 12px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.03)">Download</a>
</div>
<div class="price card" style="border:2px solid rgba(124,92,255,0.35);transform:scale(1.02)">
<h3>Pro</h3>
<div class="amount">$49</div>
<div class="muted">Includes PSD/Figma mockups, premium components and email support.</div>
<ul style="margin:12px 0 0 16px;color:var(--muted)">
<li>All Starter features</li>
<li>Figma & PSD files</li>
<li>Free updates</li>
</ul>
<a href="#purchase" style="display:inline-block;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--accent);color:#051023;font-weight:700">Buy Pro</a>
</div>
<div class="price card">
<h3>Agency</h3>
<div class="amount">$199</div>
<div class="muted">Multi-site license, priority support, white-label options.</div>
<ul style="margin:12px 0 0 16px;color:var(--muted)">
<li>Multi-site license</li>
<li>Priority support</li>
<li>Custom integrations</li>
</ul>
<a href="#contact" style="display:inline-block;margin-top:12px;padding:10px 12px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.03)">Contact Sales</a>
</div>
</div>
</section>
<section id="contact">
<h2 style="margin-top:34px">Contact & Customization</h2>
<div class="muted">Want this template customized or converted to WordPress/React? Reach out.</div>
<div class="contact" style="margin-top:18px">
<form class="card" onsubmit="handleForm(event)">
<label class="muted">Name</label>
<input required type="text" id="name" placeholder="Your name">
<label class="muted" style="margin-top:8px">Email</label>
<input required type="email" id="email" placeholder="you@example.com">
<label class="muted" style="margin-top:8px">Message</label>
<textarea rows="4" id="message" placeholder="How can we help?"></textarea>
<button type="submit">Send Message</button>
<div id="formMsg" style="margin-top:10px;color:var(--muted)"></div>
</form>
<aside class="card">
<h3 style="margin:0 0 8px">Need help?</h3>
<div class="muted">Email: hello@stunningtemplate.dev</div>
<div style="height:14px"></div>
<div class="muted">Follow us for updates and freebies.</div>
<div style="display:flex;gap:8px;margin-top:12px">
<div style="padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.02)">Twitter</div>
<div style="padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.02)">Dribbble</div>
<div style="padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.02)">GitHub</div>
</div>
</aside>
</div>
</section>
<footer>
<div class="muted">© <span id="yr"></span> Stunning Template — Built with care. | <span style="color:var(--muted)">Made for developers & creators</span></div>
</footer>
</main>
<script>
// small interactions
document.getElementById('yr').textContent = new Date().getFullYear();
document.querySelector('.menu-toggle').addEventListener('click', ()=>{
const ul = document.querySelector('nav ul');
if(ul.style.display==='flex') ul.style.display='none'; else ul.style.display='flex';
});
function handleForm(e){
e.preventDefault();
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const msg = document.getElementById('message').value.trim();
const out = document.getElementById('formMsg');
if(!name||!email){ out.textContent='Please fill name and email.'; return }
out.textContent='Thanks, we received your message (demo).';
// Demo: replace with real submission endpoint
setTimeout(()=>{document.getElementById('name').value='';document.getElementById('email').value='';document.getElementById('message').value='';},1200)
}
</script>
</body>
</html>Download Best Free WordPress Themes
/*
Theme Name: StunningPress
Theme URI: https://example.com/stunningpress
Author: Your Name
Author URI: https://example.com
Description: A stunning, professional, and functional starter WordPress theme — responsive, accessible, and optimized for performance.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: stunningpress
*/
/*
File tree included in this theme (all files are provided below):
stunningpress/
├─ style.css # theme header & main stylesheet (imports assets/css/style.css)
├─ functions.php # enqueue, theme supports, menus, widgets
├─ index.php # main loop (uses template parts)
├─ header.php # header markup
├─ footer.php # footer markup
├─ single.php # single post
├─ page.php # page template
├─ archive.php # archive & home fallback
├─ 404.php # 404 template
├─ sidebar.php # optional sidebar (widget area)
├─ template-parts/
│ └─ content.php # loop content markup
├─ assets/
│ ├─ css/
│ │ └─ style.css # theme styles (modern, responsive)
│ ├─ js/
│ │ └─ main.js # lightweight JS (menu toggle, skip-link focus)
│ └─ img/
│ └─ placeholder.png
└─ README.md # install & customization notes
--------------------------------------------------------------------------------
=== FILE: functions.php ===
<?php
// Theme functions: enqueues, supports, menus, widgets
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
function stunningpress_setup() {
// Make theme available for translation
load_theme_textdomain( 'stunningpress', get_template_directory() . '/languages' );
// Add default posts and comments RSS feed links to head
add_theme_support( 'automatic-feed-links' );
// Let WordPress manage the document title
add_theme_support( 'title-tag' );
// Enable support for Post Thumbnails on posts and pages
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );
// Register navigation menus
register_nav_menus( array(
'primary' => esc_html__( 'Primary Menu', 'stunningpress' ),
'footer' => esc_html__( 'Footer Menu', 'stunningpress' ),
) );
// HTML5 support
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// Responsive embeds
add_theme_support( 'responsive-embeds' );
// Add support for selective refresh for widgets
add_theme_support( 'customize-selective-refresh-widgets' );
}
add_action( 'after_setup_theme', 'stunningpress_setup' );
function stunningpress_content_width() {
$GLOBALS['content_width'] = apply_filters( 'stunningpress_content_width', 1200 );
}
add_action( 'after_setup_theme', 'stunningpress_content_width', 0 );
function stunningpress_widgets_init() {
register_sidebar( array(
'name' => esc_html__( 'Sidebar', 'stunningpress' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'stunningpress' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'stunningpress_widgets_init' );
function stunningpress_scripts() {
// Main stylesheet (contains theme metadata header in style.css)
wp_enqueue_style( 'stunningpress-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// Additional compiled CSS
wp_enqueue_style( 'stunningpress-main', get_template_directory_uri() . '/assets/css/style.css', array(), wp_get_theme()->get( 'Version' ) );
// Main JS (defer)
wp_enqueue_script( 'stunningpress-main', get_template_directory_uri() . '/assets/js/main.js', array(), wp_get_theme()->get( 'Version' ), true );
// Localize script for accessibility strings
wp_localize_script( 'stunningpress-main', 'stunningpressData', array(
'menu_label' => esc_html__( 'Menu', 'stunningpress' ),
) );
}
add_action( 'wp_enqueue_scripts', 'stunningpress_scripts' );
// Clean up wp_head
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
?>
=== FILE: style.css ===
/*
Theme Name: StunningPress
Description: A stunning, professional, and functional starter WordPress theme.
Author: Your Name
Version: 1.0
Text Domain: stunningpress
*/
/* Import compiled CSS */
@import url('assets/css/style.css');
=== FILE: assets/css/style.css ===
/* Base layout and modern responsive styles for StunningPress */
:root{
--color-bg: #ffffff;
--color-text: #111827;
--color-accent: #0ea5a4;
--max-width: 1200px;
--container-padding: 24px;
--radius: 12px;
--muted: #6b7280;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
body{color:var(--color-text);background:var(--color-bg);line-height:1.6}
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--container-padding)}
/* Header */
.site-header{background:linear-gradient(180deg, rgba(14,165,164,0.06), transparent);padding:18px 0}
.site-branding{display:flex;align-items:center;gap:12px}
.site-title{font-size:1.25rem;font-weight:700;margin:0}
.site-description{color:var(--muted);font-size:0.9rem}
/* Nav */
.primary-navigation{display:flex;justify-content:space-between;align-items:center}
.menu-toggle{display:none}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.menu a{text-decoration:none;color:var(--color-text);font-weight:600}
/* Main */
.site-main{display:grid;grid-template-columns:1fr 320px;gap:32px;padding:32px 0}
.entry{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:0 6px 20px rgba(16,24,40,0.04)}
.entry-title{margin-top:0;font-size:1.5rem}
.entry-meta{color:var(--muted);font-size:0.9rem;margin-bottom:12px}
/* Footer */
.site-footer{border-top:1px solid #eef2f7;padding:28px 0;margin-top:40px;color:var(--muted)}
/* Responsive */
@media (max-width: 900px){
.site-main{grid-template-columns:1fr}
.menu{display:none}
.menu-toggle{display:inline-block}
}
=== FILE: header.php ===
<?php
?><!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'stunningpress' ); ?></a>
<header class="site-header">
<div class="container">
<div class="site-branding">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-logo">
<img src="<?php echo get_template_directory_uri() . '/assets/img/placeholder.png'; ?>" alt="<?php bloginfo( 'name' ); ?>" style="height:48px;width:auto;border-radius:8px">
</a>
<div>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
</div>
</div>
<nav class="primary-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'menu',
'container' => false,
) );
?>
<button class="menu-toggle" aria-expanded="false"><?php esc_html_e( 'Menu', 'stunningpress' ); ?></button>
</nav>
</div>
</header>
<main id="content" class="site-main container">
=== FILE: footer.php ===
</main>
<footer class="site-footer container">
<div class="site-info">
<p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
=== FILE: index.php ===
<?php get_header(); ?>
<?php if ( have_posts() ) : ?>
<div class="content-area">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'template-parts/content', get_post_type() ); ?>
<?php endwhile; ?>
<?php the_posts_pagination(); ?>
</div>
<?php get_sidebar(); ?>
<?php else : ?>
<div class="no-results">
<h2><?php esc_html_e( 'Nothing Found', 'stunningpress' ); ?></h2>
<p><?php esc_html_e( 'It seems we can’t find what you’re looking for. Try a search.', 'stunningpress' ); ?></p>
<?php get_search_form(); ?>
</div>
<?php endif; ?>
<?php get_footer(); ?>
=== FILE: template-parts/content.php ===
<article id="post-<?php the_ID(); ?>" <?php post_class('entry'); ?>>
<?php if ( has_post_thumbnail() ) : ?>
<div class="entry-thumbnail">
<?php the_post_thumbnail('large'); ?>
</div>
<?php endif; ?>
<header class="entry-header">
<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-meta"><?php the_time( 'F j, Y' ); ?> · <?php the_author_posts_link(); ?></div>
</header>
<div class="entry-content">
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>"><?php esc_html_e( 'Read more', 'stunningpress' ); ?></a>
</div>
</article>
=== FILE: single.php ===
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="content-area">
<article class="entry">
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-meta"><?php the_time( 'F j, Y' ); ?> · <?php the_author_posts_link(); ?></div>
</header>
<div class="entry-content"><?php the_content(); ?></div>
<footer class="entry-footer">
<?php the_tags( '<p class="tags">', ', ', '</p>' ); ?>
</footer>
</article>
<?php comments_template(); ?>
</div>
<?php endwhile; endif; ?>
<?php get_footer(); ?>
=== FILE: page.php ===
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="content-area">
<article class="entry">
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<div class="entry-content"><?php the_content(); ?></div>
</article>
</div>
<?php endwhile; endif; ?>
<?php get_footer(); ?>
=== FILE: archive.php ===
<?php get_header(); ?>
<div class="content-area">
<header class="page-header">
<h1 class="page-title"><?php post_type_archive_title(); ?></h1>
</header>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'template-parts/content', get_post_type() ); ?>
<?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>
=== FILE: 404.php ===
<?php get_header(); ?>
<div class="content-area">
<article class="entry">
<h1><?php esc_html_e( 'Page Not Found', 'stunningpress' ); ?></h1>
<p><?php esc_html_e( 'Sorry, we couldn’t find that page. Try searching instead.', 'stunningpress' ); ?></p>
<?php get_search_form(); ?>
</article>
</div>
<?php get_footer(); ?>
=== FILE: sidebar.php ===
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
=== FILE: assets/js/main.js ===
// Lightweight JS for accessibility and mobile menu toggle
(function(){
var btn = document.querySelector('.menu-toggle');
var menu = document.querySelector('.menu');
if(!btn || !menu) return;
btn.addEventListener('click', function(){
var expanded = this.getAttribute('aria-expanded') === 'true' || false;
this.setAttribute('aria-expanded', !expanded);
menu.style.display = expanded ? 'none' : 'flex';
});
})();
=== FILE: assets/img/placeholder.png ===
# (Add your logo or placeholder image here — this is a binary image file; replace in theme folder)
=== FILE: README.md ===
# StunningPress — WordPress Starter Theme
## Installation
1. Create a new folder `stunningpress` in `wp-content/themes/`.
2. Copy all files and folders from this theme into `wp-content/themes/stunningpress`.
3. Go to WordPress admin > Appearance > Themes and activate "StunningPress".
4. Set up a Primary Menu in Appearance > Menus and assign to 'Primary'.
5. Add widgets to the Sidebar (Appearance > Widgets).
## Customization
- Edit `assets/css/style.css` for colors, spacing, and layout tweaks.
- Replace `assets/img/placeholder.png` with your logo.
- Modify `functions.php` to add more theme supports (e.g., custom logo, editor styles).
## Tips for production
- Minify CSS/JS and use a build step (e.g., webpack, gulp).
- Add proper image sizes in `functions.php` for performance.
- Integrate with block editor styles if you want full Gutenberg support.
--------------------------------------------------------------------------------
End of theme files. Customize as needed.
Download Best Free Bootstrap Templates
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Stunning Bootstrap Template</title>
<meta name="description" content="Stunning, professional, and functional Bootstrap template - perfect for businesses, portfolios, and startups.">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<style>
:root{
--brand:#0d6efd; /* primary brand color */
--muted:#6c757d;
}
/* Hero */
.hero{min-height:70vh;display:flex;align-items:center}
.hero-bg{background:linear-gradient(135deg, rgba(13,110,253,0.08), rgba(0,0,0,0.02));backdrop-filter: blur(2px);}
/* Cards */
.feature-icon{font-size:2.2rem;background:linear-gradient(180deg,rgba(13,110,253,0.12),transparent);width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:12px}
/* Portfolio */
.portfolio-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(13,110,253,0.08);transition:all .35s}
/* Testimonials */
.testimonial{background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(18,18,20,0.04);padding:1.25rem}
/* Footer */
footer{background:#0f1724;color:#ecf2ff}
/* Utilities */
.btn-primary, .text-primary{color:#fff}
@media (max-width:767px){
.hero{min-height:58vh;padding-top:2rem;padding-bottom:2rem}
}
</style>
</head>
<body class="bg-light text-dark">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
<div class="container">
<a class="navbar-brand fw-bold" href="#">BrandName</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto align-items-lg-center">
<li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#pricing">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
<li class="nav-item ms-lg-3"><a class="btn btn-outline-primary btn-sm" href="#">Get Started</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero -->
<header class="hero hero-bg py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-5 fw-bold">Stunning Bootstrap Template for Modern Websites</h1>
<p class="lead text-muted">A professional, responsive, and fully functional starter template built with Bootstrap — ideal for startups, agencies, portfolios, and small businesses.</p>
<div class="d-flex gap-2 flex-wrap">
<a href="#features" class="btn btn-primary btn-lg">Explore Features</a>
<a href="#pricing" class="btn btn-outline-secondary btn-lg">See Pricing</a>
</div>
<ul class="mt-4 text-muted small">
<li>Responsive layout — mobile-first design</li>
<li>Clean, customizable components</li>
<li>Performance-minded & accessible</li>
</ul>
</div>
<div class="col-lg-6 d-none d-lg-block">
<div class="card border-0 shadow-sm">
<img src="https://images.unsplash.com/photo-1492724441997-5dc865305da7?q=80&w=1400&auto=format&fit=crop&ixlib=rb-4.0.3&s=placeholder" class="card-img-top rounded-top" alt="hero demo">
<div class="card-body">
<div class="row g-2">
<div class="col-6">
<div class="p-3 bg-white rounded shadow-sm">
<h6 class="mb-0">Clean UI</h6>
<small class="text-muted">Modern components & spacing</small>
</div>
</div>
<div class="col-6">
<div class="p-3 bg-white rounded shadow-sm">
<h6 class="mb-0">Fast Setup</h6>
<small class="text-muted">Ready-to-use sections</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Features -->
<section id="features" class="py-5">
<div class="container">
<div class="row text-center mb-4">
<div class="col-lg-8 mx-auto">
<h2 class="fw-bold">Beautiful & Practical Components</h2>
<p class="text-muted">Everything you need to launch a professional website quickly — hero, features, pricing, contact form, and more.</p>
</div>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="p-4 bg-white rounded-4 h-100">
<div class="feature-icon mb-3"><i class="bi bi-phone"></i></div>
<h5>Responsive Layout</h5>
<p class="text-muted small">Designed mobile-first with Bootstrap's grid and utilities for perfect display on any device.</p>
</div>
</div>
<div class="col-md-4">
<div class="p-4 bg-white rounded-4 h-100">
<div class="feature-icon mb-3"><i class="bi bi-speedometer2"></i></div>
<h5>High Performance</h5>
<p class="text-muted small">Minimal dependencies and optimized images for fast loading times and better SEO.</p>
</div>
</div>
<div class="col-md-4">
<div class="p-4 bg-white rounded-4 h-100">
<div class="feature-icon mb-3"><i class="bi bi-brush"></i></div>
<h5>Easy Customization</h5>
<p class="text-muted small">Well-structured code and utility classes make it simple to customize styles and layout.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio -->
<section id="portfolio" class="py-5 bg-white">
<div class="container">
<div class="row align-items-center mb-4">
<div class="col-md-8">
<h3 class="fw-bold">Recent Projects</h3>
<p class="text-muted">A selection of websites and landing pages built using this template.</p>
</div>
<div class="col-md-4 text-md-end">
<a href="#" class="btn btn-outline-primary">View All Projects</a>
</div>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="card portfolio-card border-0 h-100">
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&s=placeholder" class="card-img-top rounded" alt="project 1">
<div class="card-body">
<h5 class="card-title">Startup Landing</h5>
<p class="card-text small text-muted">A lead-capture landing page optimized for conversions.</p>
<a class="stretched-link" href="#"></a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card portfolio-card border-0 h-100">
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&s=placeholder" class="card-img-top rounded" alt="project 2">
<div class="card-body">
<h5 class="card-title">Agency Site</h5>
<p class="card-text small text-muted">A portfolio and services showcase for creative agencies.</p>
<a class="stretched-link" href="#"></a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card portfolio-card border-0 h-100">
<img src="https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&s=placeholder" class="card-img-top rounded" alt="project 3">
<div class="card-body">
<h5 class="card-title">Personal Portfolio</h5>
<p class="card-text small text-muted">A minimal portfolio to highlight work samples and case studies.</p>
<a class="stretched-link" href="#"></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="py-5">
<div class="container">
<div class="row text-center mb-4">
<div class="col-lg-8 mx-auto">
<h2 class="fw-bold">Pricing Plans</h2>
<p class="text-muted">Simple, transparent pricing for individuals and teams.</p>
</div>
</div>
<div class="row g-4 justify-content-center">
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-4 text-center">
<h5>Starter</h5>
<div class="my-3">
<span class="h2 fw-bold">$0</span>
<div class="small text-muted">Forever free</div>
</div>
<ul class="list-unstyled small text-muted">
<li>Basic templates</li>
<li>Community support</li>
<li>Limited updates</li>
</ul>
<a href="#" class="btn btn-outline-primary mt-3">Get Started</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-4 text-center">
<h5>Pro</h5>
<div class="my-3">
<span class="h2 fw-bold">$29</span>
<div class="small text-muted">per month</div>
</div>
<ul class="list-unstyled small text-muted">
<li>All templates</li>
<li>Email support</li>
<li>Monthly updates</li>
</ul>
<a href="#" class="btn btn-primary mt-3">Start Free Trial</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-4 text-center">
<h5>Enterprise</h5>
<div class="my-3">
<span class="h2 fw-bold">Custom</span>
<div class="small text-muted">Contact sales</div>
</div>
<ul class="list-unstyled small text-muted">
<li>White-label designs</li>
<li>Priority support</li>
<li>Dedicated resources</li>
</ul>
<a href="#contact" class="btn btn-outline-primary mt-3">Contact Sales</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-5 bg-white">
<div class="container">
<div class="row justify-content-center mb-4">
<div class="col-lg-8 text-center">
<h3 class="fw-bold">What Our Users Say</h3>
<p class="text-muted">Real feedback from designers and small business owners.</p>
</div>
</div>
<div class="row g-4">
<div class="col-md-4">
<div class="testimonial h-100">
<p class="mb-2">"This template saved our launch. Clean code and beautiful UI — highly recommended!"</p>
<div class="d-flex align-items-center">
<img src="https://i.pravatar.cc/48?img=3" class="rounded-circle me-3" alt="user">
<div>
<strong>Alex R.</strong>
<div class="small text-muted">Founder, BrightStart</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="testimonial h-100">
<p class="mb-2">"Fast to customize and mobile-ready — our clients love it."</p>
<div class="d-flex align-items-center">
<img src="https://i.pravatar.cc/48?img=5" class="rounded-circle me-3" alt="user">
<div>
<strong>Jordan P.</strong>
<div class="small text-muted">UI Designer</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="testimonial h-100">
<p class="mb-2">"Perfect starter kit for agencies — great spacing and typography."</p>
<div class="d-flex align-items-center">
<img src="https://i.pravatar.cc/48?img=7" class="rounded-circle me-3" alt="user">
<div>
<strong>Sam K.</strong>
<div class="small text-muted">Front-end Dev</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="py-5">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-lg-6">
<h3 class="fw-bold">Get in Touch</h3>
<p class="text-muted">Have questions or need a custom template? Send us a message.</p>
<form id="contactForm" class="needs-validation" novalidate>
<div class="mb-3">
<label for="name" class="form-label">Full name</label>
<input type="text" class="form-control" id="name" placeholder="Your full name" required>
<div class="invalid-feedback">Please enter your name.</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="you@example.com" required>
<div class="invalid-feedback">Please provide a valid email.</div>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="4" placeholder="How can we help?" required></textarea>
<div class="invalid-feedback">Please enter a message.</div>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
<div class="col-lg-6">
<div class="p-4 bg-primary text-white rounded-4">
<h5>Office</h5>
<p class="small mb-1">123 Startup Ave, Suite 100</p>
<p class="small mb-1">San Francisco, CA 94105</p>
<p class="small mb-0">Email: hello@brandname.com</p>
</div>
<div class="mt-4">
<h6 class="fw-bold">Subscribe</h6>
<p class="text-muted small">Get updates and free templates.</p>
<form class="d-flex" onsubmit="event.preventDefault(); alert('Subscribed!');">
<input class="form-control me-2" type="email" placeholder="Your email" required>
<button class="btn btn-dark" type="submit">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-5">
<div class="container">
<div class="row gy-4">
<div class="col-md-4">
<h5 class="fw-bold">BrandName</h5>
<p class="small text-muted">Beautiful, functional web templates built for speed and usability.</p>
</div>
<div class="col-md-2">
<h6 class="fw-bold">Product</h6>
<ul class="list-unstyled small">
<li><a href="#" class="text-muted">Templates</a></li>
<li><a href="#" class="text-muted">Pricing</a></li>
<li><a href="#" class="text-muted">Changelog</a></li>
</ul>
</div>
<div class="col-md-2">
<h6 class="fw-bold">Company</h6>
<ul class="list-unstyled small">
<li><a href="#" class="text-muted">About</a></li>
<li><a href="#" class="text-muted">Careers</a></li>
<li><a href="#" class="text-muted">Contact</a></li>
</ul>
</div>
<div class="col-md-4 text-md-end">
<h6 class="fw-bold">Follow Us</h6>
<div class="d-flex gap-2 justify-content-md-end">
<a class="btn btn-outline-light btn-sm" href="#"><i class="bi bi-twitter"></i></a>
<a class="btn btn-outline-light btn-sm" href="#"><i class="bi bi-facebook"></i></a>
<a class="btn btn-outline-light btn-sm" href="#"><i class="bi bi-linkedin"></i></a>
</div>
<p class="small text-muted mt-3">© <span id="year"></span> BrandName. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<!-- Back to top -->
<button id="backTop" class="btn btn-primary shadow position-fixed" style="right:20px;bottom:20px;border-radius:50%;display:none;"> <i class="bi bi-arrow-up"></i></button>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Set year in footer
document.getElementById('year').textContent = new Date().getFullYear();
// Show back to top when scrolled
const backTop = document.getElementById('backTop');
window.addEventListener('scroll', ()=>{
backTop.style.display = (window.scrollY>300)?'block':'none';
});
backTop.addEventListener('click', ()=>{window.scrollTo({top:0,behavior:'smooth'})});
// Simple contact form validation
(function () {
'use strict'
const form = document.getElementById('contactForm')
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
} else {
event.preventDefault()
// Here you can integrate your API or email service
alert('Thank you — your message was sent!')
form.reset()
}
form.classList.add('was-validated')
}, false)
})()
</script>
</body>
</html>
Creating a stunning website no longer requires hiring a developer or spending hundreds of dollars on design. With these free web templates, you can start fast, look professional, and grow your online presence effortlessly. Each template is crafted to be user-friendly, mobile-responsive, and SEO-ready — perfect for personal portfolios, startups, or businesses of any size.
Pick the one that fits your brand, customize it to your needs, and watch your vision come to life. Beautiful websites begin with the right foundation — and these free templates give you exactly that.