File: //home/thetcbtv/www/wp-content/themes/the-true-creators/header.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The True Creators - Web Designer and Developer</title>
<meta name="description" content="The True Creators helps startups and small businesses get their website built for free upfront. No hidden charges – pay later only when you earn." />
<meta name="keywords" content="The True Creators, free website development, free website design, pay later website development, pay later web design, startup websites, websites for startups, small business websites, affordable website design, professional web development, WordPress website builder, custom website design, SEO-friendly websites, e-commerce website development, online business websites, web design company Patiala, web design company Jalandhar, web design company Hoshiarpur, Punjab website development, startup web solutions, no upfront cost websites, Er. Hardeep Singh Bains" />
<!-- Open Graph (Facebook, LinkedIn, WhatsApp) -->
<meta property="og:title" content="The True Creators | Free Website Development for Startups – Pay Later" />
<meta property="og:description" content="Get your startup or small business website built for free. Pay later only when you earn. No hidden charges – The True Creators is your digital growth partner." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://thetruecreators.com/" />
<meta property="og:image" content="https://thetruecreators.com/assets/og-image.jpg" />
<meta property="og:site_name" content="The True Creators" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="The True Creators | Free Website Development for Startups – Pay Later" />
<meta name="twitter:description" content="We build your startup website for free – pay later when you start earning. No upfront costs, no hidden charges. Focus on your business, we handle your website." />
<meta name="twitter:image" content="https://thetruecreators.com/assets/og-image.jpg" />
<meta name="twitter:site" content="@thetruecreators" />
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="https://thetruecreators.com/wp-content/uploads/2025/09/cropped-black-logo-copy-2.png">
<link rel="icon" href="https://thetruecreators.com/wp-content/uploads/2025/09/cropped-black-logo-copy-2.png" type="image/png" />
<link rel="icon" href="https://thetruecreators.com/wp-content/uploads/2025/09/cropped-black-logo-copy-2.png" type="image/png" />
<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&family=Montserrat:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<style>
:root{
--accent:#1739ff; /* teal */
--accent-dark:#051a96;
--muted:#64748b;
--bg:#f7fbfb;
--card:#ffffff;
--glass: rgba(255,255,255,0.6);
--shadow: 0 8px 24px rgba(16,24,40,0.08);
--radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#fbfeff 0%, #f1f8f7 100%);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;smooth-font-scaling:antialiased;color:#04363b}
/* TOP ANNOUNCEMENT */
.top-announcement{height: 32px; background:linear-gradient(90deg,var(--accent) 0%, var(--accent-dark) 100%);color:white;padding:8px 0;overflow:hidden}
.ticker-wrap{margin: -12px 0px 0px 0px;padding:0 20px;display:flex;align-items:center;gap:16px}
.ticker-label{font-weight:700;font-family:Montserrat,Inter;color:rgba(255,255,255,0.95);font-size:14px}
.ticker{flex:1;position:relative}
.ticker p{display:inline-block;white-space:nowrap;padding-right:60px;animation:slide-left 18s linear infinite}
@keyframes slide-left{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.cta-ticker{background:rgba(255,255,255,0.12);padding:6px 10px;border-radius:999px;font-weight:600;cursor:pointer}
/* NAV */
header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));backdrop-filter: blur(6px);box-shadow:var(--shadow)}
.nav-inner{margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:12px}
.logo{display:flex;align-items:center;gap:12px}
.logo .mark{ width: 68px;
height: 53px;background:url(https://thetruecreators.com/wp-content/uploads/2025/09/black-logo-copy-1.png) no-repeat center / cover;
;border-radius:12px;display:grid;place-items:center;color:#042;box-shadow:0 6px 18px rgba(3,105,92,0.16);font-weight:800;font-family:Montserrat}
.logo .title{line-height:1}
.logo .title h1{margin:0;font-size:28px}
.logo .title p{margin:0;font-size:12px;color:var(--muted)}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center}
nav a{color:#083740;text-decoration:none;font-weight:600;padding:8px;border-radius:8px}
nav a:hover{background:rgba(2,120,102,0.06)}
.btn-primary{background:var(--accent);color:white;padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none}
/* About */
.section{max-width:1200px;margin:36px auto;padding:0 20px}
.about{display:grid;gap:28px;align-items:start}
.card{background:var(--card);padding:22px;border-radius:14px;box-shadow:var(--shadow)}
/* Why choose */
.why{display:flex;gap:16px;flex-wrap:wrap}
.why .item{flex:1 1 260px;padding:18px;border-radius:12px;background:linear-gradient(180deg,#ffffff,#f7fffb);box-shadow:0 6px 16px rgba(3,105,92,0.06)}
.highlight{font-weight:800;color:var(--accent-dark);font-family:Montserrat}
/* Plans */
.plans{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.plan{flex:1 1 260px;padding:18px;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfffd);box-shadow:var(--shadow);border:1px solid rgba(2,120,102,0.04)}
.plan .price{font-size:28px;margin:8px 0;font-weight:800}
.plan ul{margin:0;padding-left:18px;color:var(--muted)}
.plan .buy{display:inline-block;margin-top:12px;padding:10px 14px;border-radius:8px;font-weight:700;text-decoration:none}
.plan.free{border:2px dashed rgba(3,105,92,0.08)}
/* Testimonials */
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.testimonial{padding:16px;border-radius:12px;background:linear-gradient(180deg,#ffffff,#f9fffd);box-shadow:var(--shadow)}
/* Footer */
footer{background:#052d2a;color:white;padding:28px 20px;margin-top:34px}
.footer-inner{height: 88px;max-width:1200px;margin:0 auto;display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.footer-col{flex:1 1 220px}
.small{font-size:13px;color:rgba(255,255,255,0.75)}
/* Responsive */
@media(max-width:980px){
.hero{grid-template-columns:1fr;}
.about{grid-template-columns:1fr}
}
/* Mobile menu toggle */
.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
.hamburger div { width: 25px; height: 3px; background: #1739ff; transition: 0.3s; }
@media(max-width:768px){
nav ul { display: none; flex-direction: column; gap: 12px; background: #fff; position: absolute; top: 60px; right: 20px; padding: 20px; border-radius: 12px; box-shadow: var(--shadow);}
nav ul.active { display: flex; }
.hamburger { display: flex; }
}
body { font-size: 16px; line-height: 1.6; }
h1, h2, h3 { font-weight: 700; }
img { max-width: 100%; height: auto; border-radius: 12px; }
.section { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
@media(max-width:480px){
.top-announcement p { font-size: 14px; }
.top-announcement span { font-size: 16px; }
}
button, .btn-primary {
transition: all 0.3s ease;
}
button:hover, .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
@media(max-width:768px){
footer div { flex: 1 1 100%; margin-bottom: 20px; }
}
.entry-title {
font-size: 2rem;
font-weight: 800;
color: #042c2f;
text-align: center;
margin-bottom: 20px;
}
.entry-content {
font-size: 1.1rem;
line-height: 1.8;
color: #04363b;
}
</style>
</head>
<body>
<!-- Hamburger -->
<script>
function toggleNav() {
document.querySelector('nav ul').classList.toggle('active');
}
</script>
<div class="hamburger" onclick="toggleNav()" aria-label="Toggle navigation">
<div></div><div></div><div></div>
</div>
<!-- Interactive Top Announcement Ticker -->
<div class="top-announcement" role="region" aria-label="Announcement"
style="width: 100%; overflow: hidden; background: linear-gradient(90deg, #4f46e5, #3b82f6); color: #fff; font-family: 'Segoe UI', sans-serif; padding: 12px 0; position: relative;">
<div class="ticker-wrap" style="overflow: hidden; position: relative;">
<div class="ticker" style="display: inline-block; white-space: nowrap; padding-left: 100%;">
<!-- Megaphone Icon -->
<span style="margin-right: 12px; font-size: 18px; animation: pulse 1.5s infinite;">📢</span>
<!-- Announcement Text with clickable link -->
<p style="margin:0; font-size: 16px; line-height: 1.5; display:inline;">
<strong style="color:#facc15;">New Offer!</strong> — Click on the
<a href="https://healthcaretalk.thetruecreators.com" target="_blank" style="color:#34d399; text-decoration: underline;">link</a>
to avail. Book a <strong style="color:#34d399;">free consultation</strong> on Health Talk Cafe by using
<strong style="color:#f87171;">The True Creators Coupon</strong> for your
<strong style="color:#fbbf24;">first consultation free</strong>.
</p>
</div>
</div>
</div>
<!-- Ticker Animation -->
<style>
@keyframes tickerScroll {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
/* Megaphone Pulse */
@keyframes pulse {
0%, 100% { transform: scale(1); opacity:1; }
50% { transform: scale(1.2); opacity:0.8; }
}
/* Make ticker scroll smoothly */
.ticker {
animation: tickerScroll 20s linear infinite;
}
/* Pause animation on hover */
.ticker-wrap:hover .ticker {
animation-play-state: paused;
}
/* Responsive font size */
@media(max-width:768px){
.top-announcement p {
font-size: 14px;
}
.top-announcement span {
font-size: 16px;
}
}
/* Center all content inside the main content area */
.site-content {
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering if needed */
text-align: justify; /* center text */
padding: 40px 20px; /* optional padding */
flex-direction: column; /* stack child elements vertically */
}
.site-content main.container {
width: 100%;
}
</style>
<!-- Header / Nav -->
<header>
<div class="nav-inner">
<div class="logo" aria-label="The True Creators logo">
<div class="mark"></div>
<div class="title"><h1>The True Creators<p>Web Designer and Developer for Digital Marketing</p></h1></div>
</div>
<nav aria-label="Primary navigation">
<ul>
<li><a href="https://thetruecreators.com/">Home</a></li>
<li><a href="https://thetruecreators.com/about-us/">About</a></li>
<li><a href="https://thetruecreators.com/category/blogs/">Blogs</a></li>
<li><a href="https://thetruecreators.com/services/">Services</a></li>
<li><a href="https://thetruecreators.com/plans/">Plans</a></li>
<li><a href="https://thetruecreators.com/add-your-business-free-with-us/">Add Your Business Free With Us</a></li>
<li><a href="https://thetruecreators.com/digital-directory/">Digital Directory</a></li>
<li><a href="https://thetruecreators.com/contact-us/" class="btn-primary">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div class="site-content-contain">
<div id="content" class="site-content">