/* ===================================
   ZXing Online Decoder
   Style.css - Clean & Unified
=================================== */

/* ===== Reset & Base ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f5f9ff;
  color: #1e293b;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: min(1180px, 92%);
  margin: 0 auto;
}

.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

/* ===== Base Typography & Spacing ===== */
h1 {
  font-size: clamp(2.2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: #0f172a;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  color: #0f172a;
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

p {
  line-height: 1.75;
  margin-bottom: 20px;
  color: #64748b;
}

section {
  padding: 56px 0;
}

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #e5e7eb;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.logo {
  font-size: 28px;
  font-weight: 800;
  color: #1d4ed8;
  letter-spacing: -0.5px;
}

.logo span {
  color: #2563eb;
}

nav {
  display: flex;
  gap: 28px;
}

nav a {
  font-weight: 600;
  color: #334155;
  transition: color 0.25s ease;
}

nav a:hover {
  color: #2563eb;
}

/* ===== Hero Section ===== */
.hero {
  padding: 52px 20px 40px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.hero p {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #475569;
}

.hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #475569;
}

.hero-subtitle span {
  font-size: 0.938rem;
  font-weight: 600;
  color: #2563eb;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* ===== Scanner Section ===== */
.scanner {
  padding: 20px 0 52px;
}

.scanner-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}

.brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563eb;
}

.scanner-card {
  background: #fff;
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
  border: 1px solid #e5e7eb;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scanner-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1);
}

.scanner-card h2 {
  font-size: 1.85rem;
  margin-bottom: 12px;
}

.scanner-card p {
  color: #64748b;
  margin-bottom: 24px;
}

/* ===== Buttons & Actions ===== */
.primary-btn,
.secondary-btn,
.action-btn,
.copy-btn {
  border: none;
  cursor: pointer;
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.primary-btn {
  background: #2563eb;
  color: #fff;
  padding: 15px 30px;
  min-height: 54px;
}

.primary-btn:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

.secondary-btn {
  background: #eef4ff;
  color: #2563eb;
  padding: 14px 24px;
  min-height: 54px;
}

.secondary-btn:hover {
  background: #dbeafe;
  transform: translateY(-2px);
}

.actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.copy-btn {
  background: #2563eb;
  color: #fff;
  padding: 14px 24px;
  border-radius: 12px;
  margin-top: 22px;
}

.copy-btn:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

/* ===== Preview & Results ===== */
#preview {
  margin-top: 32px;
}

#preview img {
  max-width: 420px;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid #dbe4f0;
}

#result {
  margin-top: 32px;
}

.result-card {
  max-width: 680px;
  margin: 32px auto 0;
  background: #fff;
  border: 2px solid #22c55e;
  border-radius: 22px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(34, 197, 94, 0.12);
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.35s ease;
}

.result-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #22c55e, #2563eb, #06b6d4);
}

.result-card hr {
  margin: 24px 0;
  border: none;
  height: 1px;
  background: #e5e7eb;
}

.result-title,
.success-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  color: #16a34a;
  margin-bottom: 22px;
}

.success-header {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #16a34a;
  font-size: 22px;
  font-weight: 800;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 18px;
}

.success-header i {
  font-size: 28px;
}

.success-header div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.success-header small {
  display: inline;
  font-size: 15px;
  color: #64748b;
  font-weight: normal;
}

.result-box {
  background: #f8fafc;
  border-radius: 16px;
  padding: 20px;
  margin: 16px 0;
  border: 1px solid #dbeafe;
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.result-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
}

.result-label {
  display: inline-block;
  background: #eff6ff;
  color: #2563eb;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.result-value {
  font-size: clamp(1.125rem, 3vw, 1.625rem);
  font-weight: 700;
  color: #1e293b;
  word-break: break-word;
  line-height: 1.4;
}

.result-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}

.result-row .result-value {
  text-align: right;
  font-size: 16px;
  font-weight: 600;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.action-btn {
  min-height: 48px;
  padding: 12px;
}

.action-btn.primary {
  background: #2563eb;
  color: #fff;
}

.action-btn.success {
  background: #16a34a;
  color: #fff;
}

.action-btn:hover {
  transform: translateY(-2px);
  filter: brightness(0.96);
}

.result-card .primary-btn,
.result-card .secondary-btn,
.result-card .success-btn {
  width: 100%;
  height: 54px;
  border-radius: 14px;
  font-size: 17px;
  margin-top: 14px;
}

/* ===== Toast Notification ===== */
#toast {
  animation: toastIn 0.25s ease;
}

/* ===== Loading State ===== */
.loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #dbeafe;
  border-top: 4px solid #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 18px;
}

/* ===== Utility Scan Components ===== */
.newscan-btn {
  width: 100%;
  margin-top: 15px;
  padding: 14px;
  background: #f1f5f9;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease;
}

.newscan-btn:hover {
  background: #e0f2fe;
}

.password-value {
  font-size: 20px;
  font-weight: 800;
  color: #dc2626;
  letter-spacing: 1px;
}

.eye-btn {
  margin-left: 10px;
  cursor: pointer;
  color: #2563eb;
  font-size: 18px;
}

/* ===== Sections Unified Styling ===== */
.section-title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 14px;
  color: #0f172a;
}

.section-subtitle {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
  color: #64748b;
  line-height: 1.7;
}

/* Trust Section */
.trust-section {
  padding: 56px 0;
  background: #f8fbff;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.trust-item {
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s ease;
}

.trust-item:hover {
  transform: translateY(-4px);
}

.trust-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.trust-item h3 {
  margin: 10px 0;
  font-size: 1.125rem;
}

.trust-item p {
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Supported Formats Section */
.supported-section {
  padding: 56px 0;
  background: #f8fbff;
}

.supported-intro {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
  color: #64748b;
  line-height: 1.7;
}

.formats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.formats-grid span {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  font-weight: 700;
  font-size: 0.938rem;
  transition: all 0.25s ease;
}

.formats-grid span:hover {
  border-color: #2563eb;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
}

/* Features Section */
.features {
  padding: 56px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.feature-card {
  background: #fff;
  padding: 28px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(37, 99, 235, 0.1);
}

.feature-card i {
  font-size: 40px;
  color: #2563eb;
  margin-bottom: 16px;
}

.feature-card h3 {
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.feature-card p {
  color: #64748b;
  margin: 0;
}

/* Generator Section */
.generator {
  padding: 56px 0;
}

.generator-types {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}

.type-btn {
  padding: 10px 18px;
  border: 1px solid #dbeafe;
  background: #fff;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.type-btn:hover,
.type-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.generator-form,
#dynamicFields {
  width: 100%;
}

.generator-form {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.generator-form input {
  flex: 1;
  min-width: 260px;
  padding: 14px 16px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-size: 16px;
  outline: none;
}

.generator-form input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#dynamicFields input,
#dynamicFields select {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-size: 16px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  margin-bottom: 14px;
}

#generateBtn {
  width: 100%;
}

#qrPreview {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}

#qrPreview canvas,
#qrPreview img {
  background: #fff;
  padding: 14px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

#downloadArea {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

#newQRBtn {
  margin-top: 18px;
}

/* About Section */
.about-section {
  padding: 56px 0;
}

.about-card,
.faq-item {
  padding: 24px;
}

.about-section h3 {
  margin: 28px 0 12px;
  font-size: 1.25rem;
  color: #0f172a;
}

.about-section p {
  font-size: 1rem;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 16px;
}

.about-list {
  margin: 16px 0 0;
  padding-left: 20px;
}

.about-list li {
  margin-bottom: 10px;
  line-height: 1.7;
  color: #475569;
}

/* FAQ Section */
.faq,
.faq-section {
  padding: 56px 0;
  background: #f8fbff;
}

.faq-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  margin-bottom: 16px;
  transition: all 0.25s ease;
}

.faq-item:hover {
  border-color: #2563eb;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
}

.faq-item h3 {
  font-size: 1.125rem;
  margin-bottom: 8px;
  color: #0f172a;
}

.faq-item p {
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

/* ===== Footer ===== */
.footer,
footer {
  background: #0f172a;
  color: #cbd5e1;
  margin-top: 60px;
  padding: 52px 0 24px;
  text-align: left;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
}

.footer h3,
.footer h4 {
  color: #fff;
  margin-bottom: 16px;
}

.footer p {
  line-height: 1.7;
  color: #94a3b8;
  margin-bottom: 0;
}

.footer a {
  display: block;
  color: #cbd5e1;
  margin-bottom: 10px;
  transition: all 0.25s ease;
}

.footer a:hover {
  color: #3b82f6;
  padding-left: 4px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 35px;
  padding-top: 20px;
  text-align: center;
  font-size: 14px;
  color: #94a3b8;
}

/* ===== Keyframes ===== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== Responsive Rules ===== */
@media (max-width: 992px) {
  .scanner-card {
    padding: 28px;
  }
  nav {
    gap: 18px;
  }
}

@media (max-width: 768px) {
  section {
    padding: 44px 0;
  }

  .header .container {
    flex-direction: column;
    gap: 14px;
  }

  nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .hero {
    padding: 40px 16px 32px;
  }

  .scanner-card,
  .result-card {
    padding: 22px;
  }

  .result-row {
    flex-direction: column;
    gap: 6px;
  }

  .result-row .result-value {
    text-align: left;
  }

  .primary-btn,
  .secondary-btn {
    width: 100%;
  }

  .actions {
    flex-direction: column;
  }

  .generator-form {
    flex-direction: column;
  }

  .generator-form input,
  .generator-form button {
    width: 100%;
  }

  .footer {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .action-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .logo {
    font-size: 24px;
  }

  .scanner-card h2 {
    font-size: 1.5rem;
  }
}
/* ===================================
   EXACT FIX FOR HEADINGS & SPACING
=================================== */

/* 1. Alignment & Font Sizing Fix */
.hero h1 {
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  margin-bottom: 12px !important;
}

h2, 
.section-title, 
.supported-section h2, 
.about-section h2, 
.faq-section h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

.about-section h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  text-align: left !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}

/* 2. Compact Section Gaps Fix */
section, 
.hero, 
.scanner, 
.supported-section, 
.about-section, 
.faq-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 3. Text Line Height & Spacing Adjustments */
.hero p, 
.section-subtitle, 
.supported-intro, 
.about-section p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}
/* Exact Button Icon Alignment & Spacing */
.hero-buttons .primary-btn,
.primary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important; /* Icon aur text me clean gap */
}

.hero-buttons .primary-btn svg,
.primary-btn svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}
/* Hero Subtitle Styling */
.hero-subtitle {
  font-size: 15px !important;
  color: #4a5568 !important;
  margin-top: 6px !important;
  margin-bottom: 10px !important;
  text-align: center !important;
}

.hero-subtitle strong {
  color: #1a202c !important;
  font-weight: 600 !important;
}

/* Single Line Badges Container */
.hero-badges {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important; /* Force strictly single line */
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #2b6cb0 !important;
  margin-bottom: 20px !important;
  white-space: nowrap !important; /* No text wrapping */
}

.hero-badges .dot {
  color: #cbd5e0 !important;
  font-size: 10px !important;
}

/* Screen size adjustments for smaller devices */
@media (max-width: 380px) {
  .hero-badges {
    font-size: 10.5px !important;
    gap: 4px !important;
  }
}
/* Compact Wi-Fi Result Grid */
.wifi-meta-row {
  display: flex !important;
  gap: 8px !important;
}

@media (max-width: 360px) {
  .wifi-meta-row {
    flex-direction: column !important;
  }
}
/* ===== Mobile Hamburger Navigation ===== */

.menu-toggle{
display:none;
border:none;
background:transparent;
color:#1e293b;
font-size:24px;
cursor:pointer;
padding:8px;
}

.header .container{
position:relative;
}

@media(max-width:768px){

.header .container{
flex-direction:row !important;
align-items:center;
justify-content:space-between;
padding:14px 0;
}

.menu-toggle{
display:flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
}

.header nav{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
flex-direction:column;
gap:0;
padding:10px;
background:#fff;
border:1px solid #e5e7eb;
border-radius:0 0 16px 16px;
box-shadow:0 12px 30px rgba(15,23,42,.10);
}

.header nav.show{
display:flex;
}

.header nav a{
padding:13px 16px;
border-radius:10px;
}

.header nav a:hover{
background:#eff6ff;
}

}

Bhaia meny zxingorg name py bna lia public and create now yaha b sath sath smjaw gy kia kia krna hoga ok

Check kre  bar bar sshot nh mango apka ye free version hai itna photo upload nh hota ab agy jaw

Kya nh aik phla part dya tha ab ye 2 meny os phla wla index html end mr dono paste kia

Kaha hay ks sy replace kro tak koi eror na hn and aik bat ap aik sath kam kia kro mobil bad me kro wo karo acha nh lgta

Kaha paste kru excat jaga btaw

Han sub file cummit save kia ab yaha kya kro

1000079137.jpg
1000079139.jpg
Bhaia ye dekho is me menu and Upload Image
Open Camera
Paste QR
Options kam nh krta 
And 2nd camer sshot ka UX ui zara dekhy and Results ka kya seen hoga abhi tak just text dummy ki trah

1000079141.jpg
1000079143.jpg
Bhaia aik or bat Wi-Fi QR code me password bold hna chye user boly ga well and good 2nd bat ye QR Code
Data Matrix
PDF417

Ye direct start na koi heading aik or bat last sshot me spacing buht ha ap dekhy

Kaha paste kro yar main yo footer me likha hwa ha

Kaha paste kro sahi knc line

Scanner card ki opar ya kaha kaste krna

Kaha sy kaha tak replace krna

Me ny to esa replace and paste kia check

Yesterday 10:38 AM
Bhaia ye dekho itna mehnat kia apko itna zari kia baki ap b dekhy sab sahi hay lekin Generator wala part ksa ha UX ؟ itna chota box input k lye hum to to aik High quality chez banny ja rha tha os ki bad Homepage/footer ka UX and sshot de rha

Dev id kaha sy kaha tak replace krna

1000079394.jpg
1000079392.jpg
Chlo me apko Homepage and footer ka sshot de rha taka ap khud dekh ly

Yesterday 5:46 PM
1000079560.jpg
1000079551.jpg
Bhaia Dono sshot dekh lye. Homepage py  ZXing Online Decoder buht bara dekhta see and upload qr py click kren nechy scroll krta Qr scaner ki pas and upload qr ki nechy open camera falto me kam ka nh 
2nd Results Section ux patla sa lg rai ap dekhy ux ki hisab 
Baki falo code nh dena taka or tool kharab na hn jye understand

1000079560.jpg
1000079649.jpg
Bhaia ap 2nd wali site ki heading dekho hmra wala see kitna bara UX to dekho yar

Yesterday 8:32 PM
1000079663.jpg
1000079665.jpg
1000079667.jpg
Bhaia heading dekhy 36px koi asr nh prta pta ni kyn aik to apny 82 css replace kreaya 2nd one section sy dosra section space dekhy UX apng css deya koi asr nh para


Pasted text(2).txt
Document
Ye all check kro nd sab fix kro

1000079678.jpg
1000079680.jpg
Bhaia h1 heading b dekhy and spacing 1% b asr nh hwa akhir kyn yar


style.css
File


style (1).css
File
Check kru upload kia 

Thought for 6s
Haan, seedhi baat:

blog.html file already ready hai. Maine usme Blog Hub ka complete structure banaya tha. blog.html

Tumhe blog post ka content blog.html ke andar paste nahi karna.

System ye hoga:

zxingorg.com/
├── index.html
├── generator.html
├── blog.html          ← sirf Blog Hub
├── about.html
├── privacy.html
├── terms.html
├── contact.html
│
├── posts/
│   ├── connect-to-wi-fi-using-qr-code-windows/
│   │   └── index.html
│   ├── decode-qr-code-blurred-image/
│   │   └── index.html
│   ├── fix-rick-astley-qr-code-patch/
│   │   └── index.html
│   └── ...10 posts
│
├── images/
│   ├── connect-to-wi-fi-using-qr-code-windows.webp
│   ├── decode-qr-code-blurred-image.webp
│   └── ...10 images
│
├── style.css
├── generator.js
├── sitemap.xml
└── robots.txt
blog.html me kya rahega?
Sirf cards + links + images + short descriptions.

Example:

<a href="/posts/decode-qr-code-from-image/">
    <img src="/images/decode-qr-code-from-image.webp"
         alt="How to decode a QR code from an image">
    <h3>How to Decode QR Code from Image via Browser</h3>
    <p>Learn how to decode a QR code from an image directly in your browser.</p>
    <span>Read Guide →</span>
</a>
Actual article kahan jayega?
Us post ka poora Blogger content yahan jayega:

/posts/decode-qr-code-from-image/index.html
Us page me hoga:

Title
Featured WebP image
Full article content
Internal links
Related guides
Decoder CTA
Article schema
Canonical
Unique meta description
Google crawlable <a href> links se pages discover karta hai, aur Article structured data article title/image/date ko better understand karne me help kar sakta hai. 

Images ka system
10 WebP images → /images/ folder

Blog card me same image use ho sakti hai:

blog.html
   ↓
image.webp
Aur article page par bhi:

post/index.html
   ↓
same image.webp
Bas filename aur alt descriptive rakhenge.

SEO/indexing ka flow
Google
  ↓
Homepage
  ↓
blog.html
  ↓
10 article links
  ↓
10 article pages
  ↓
related article links
  ↓
Decoder / Generator
Sitemap in URLs ko additional discovery signal dega, lekin sitemap akela indexing guarantee nahi karta. 

Ab tumhe blog.html me article content paste nahi karna. Pehle blog.html GitHub ke root me upload karo. Phir hum Post #1 ka complete index.html banayenge aur usme tumhara existing Blogger content + WebP image + SEO + internal links fit karenge.




blog.html
HTML


1000079877.jpg
Bhaia see sshot Zxing org blog or os sy Above ksy ajeb lg ria apka ux and is sab post feature image box is ka kya hoga so bta dy sab

Thought for 10s
Haan bhai, screenshot dekh liya. Ab asli issue clear hai. Blog ka UX is waqt weird isliye lag raha hai kyunki screenshot me style.css load hi nahi hui. Is wajah se:

ZXingOrg purple/default browser link ban gaya.

Home / QR Generator / Blog / About bhi default links hain.

Hamburger default browser button dikh raha hai.

Fonts serif/default ho gaye.

Card ka proper design apply nahi hua.

Feature image broken hai, isliye bada empty blue box ban gaya.

Feature image box ka final system
Har post ki apni WebP image hogi.

Example:

images/
├── wifi-windows.webp
├── blurred-qr.webp
├── rick-astley-qr.webp
├── qr-from-image.webp
...
Aur Blog card usi image ko use karega:

<img src="/images/qr-from-image.webp"
     alt="How to decode a QR code from an image">
Broken/empty image box nahi hona chahiye.

UX bhi main change karunga
Meri recommendation screenshot dekh kar:

Top:

ZXingOrg Blog
QR Code & Barcode Guides
Short description

Phir ek compact Featured Guide card, bahut giant blank image box nahi.

Uske neeche:

Latest QR Decoder Guides

2-column cards:

Image → Category → Title → 2-line description → Read Guide

Phir:

Wi-Fi & QR Guides

Phir:

Barcode & 2D Code Guides

Phir:

More Guides

Aur last me:

Need to scan? → Open ZXing Decoder

Sabse pehle ek important fix
blog.html me CSS path:

<link rel="stylesheet" href="/style.css">
Agar blog.html aur style.css same GitHub root folder me hain, ye production site par theek hona chahiye. Lekin screenshot local file/preview se hai to /style.css load nahi hoga. Root-relative path ke bajaye:

<link rel="stylesheet" href="style.css">
use karna local preview ke liye safer hai.

Aur images
Abhi maine placeholder filenames assume kiye the. Ye sahi final approach nahi hai. Tumhare jo actual 10 WebP files hain, unke exact filenames use karne honge. Main fake paths nahi rakhunga.

So blog.html ka current design final mat samjho. Pehle CSS loading aur actual 10 image filenames fix karte hain; phir Blog Hub genuinely premium lagega.


Bhaia Blog section again sy do Tek sa and Css file to apny dya he nh k is ko css end me padte kro

Thought for 7s
Haan bhai, ab sahi system hai:

1. blog-final.html
Is file ko GitHub ke root me blog.html naam se rakho.

blog-final.html

2. Blog CSS
Tumhari existing style.css ke bilkul END me ye CSS paste karo:

blog-css-to-paste.txt

3. Images
Blog HTML me maine ye exact folder assume kiya hai:

/images/
Aur filenames slug ke hisaab se hain, example:

images/decode-qr-code-from-image.webp
images/decode-qr-code-blurred-image.webp
images/decode-wifi-qr-code-from-image.webp
Tumhari actual WebP files ko in filenames ke mutabiq rename/upload karna hoga, warna image broken dikhegi.

4. Post content
Blog.html me full article content nahi hoga.

Har post ki apni file hogi:

/posts/decode-qr-code-from-image/index.html
/posts/decode-qr-code-blurred-image/index.html
...
Wahin tumhara existing Blogger content + featured WebP + SEO meta + canonical + related posts + Decoder CTA jayega.

Abhi blog.html + CSS complete karo. Uske baad hum Post #1 ko proper article page me convert karenge. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>ZXing Org Blog – QR Code & Barcode Guides</title>
<meta name="description" content="Practical QR code, Wi-Fi QR, barcode and ZXingOrg decoder guides. Learn how to scan, decode and troubleshoot QR codes and barcodes online.">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://www.zxingorg.com/blog.html">

<meta property="og:type" content="website">
<meta property="og:title" content="ZXing Org Blog – QR Code & Barcode Guides">
<meta property="og:description" content="Practical QR code, Wi-Fi QR, barcode and decoder guides from ZXing Org.">
<meta property="og:url" content="https://www.zxingorg.com/blog.html">
<meta property="og:site_name" content="ZXing Org">

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="ZXing Org Blog – QR Code & Barcode Guides">
<meta name="twitter:description" content="Practical QR code, Wi-Fi QR, barcode and decoder guides from ZXing Org.">

<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@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="stylesheet" href="style.css">

<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"CollectionPage",
  "name":"ZXing Org Blog – QR Code & Barcode Guides",
  "url":"https://www.zxingorg.com/blog.html",
  "description":"Practical QR code, Wi-Fi QR, barcode and decoder guides from ZXing Org.",
  "isPartOf":{
    "@type":"WebSite",
    "name":"ZXing Org",
    "url":"https://www.zxingorg.com/"
  }
}
</script>

</head>

<body>

<header class="header">
  <div class="container">
    <a href="/" class="logo">ZXing<span>Org</span></a>

    <button class="menu-toggle" id="menuToggle" aria-label="Open menu" aria-expanded="false">
      <i class="fa-solid fa-bars"></i>
    </button>

    <nav id="mainNav">
      <a href="/">Home</a>
      <a href="/generator.html">QR Generator</a>
      <a href="/blog.html" aria-current="page">Blog</a>
      <a href="/about.html">About</a>
    </nav>
  </div>
</header>

<main>

<section class="blog-hero">
  <div class="container">
    <div class="blog-breadcrumb">
      <a href="/">Home</a> <span aria-hidden="true">›</span> Blog
    </div>

    <h1>ZXing Org Blog</h1>

    <p>
      Practical QR code, Wi-Fi QR, barcode and decoder guides to help you scan,
      decode and troubleshoot codes online.
    </p>
  </div>
</section>

<section class="blog-main">
  <div class="container">

    <section class="blog-section">
      <div class="blog-section-title">
        <h2>Featured Guide</h2>
      </div>

      <article class="blog-feature">
        <a class="blog-feature-media" href="/posts/decode-qr-code-from-image/" aria-label="Read How to Decode QR Code from Image via Browser">
          <img
            src="/images/decode-qr-code-from-image.webp"
            alt="QR code being decoded from an image in a browser"
            width="1280"
            height="720"
          >
        </a>

        <div class="blog-feature-content">
          <span class="blog-badge">QR Decoder</span>

          <h3>How to Decode QR Code from Image via Browser</h3>

          <p>
            Learn how to decode a QR code from an image directly in a browser,
            with practical steps for faster and safer scanning.
          </p>

          <a class="blog-read" href="/posts/decode-qr-code-from-image/">
            Read Guide <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
          </a>
        </div>
      </article>
    </section>

    <section class="blog-section">
      <div class="blog-section-title">
        <h2>QR Decoder Guides</h2>
      </div>

      <div class="blog-grid">

        <article class="blog-card">
          <a class="blog-card-media" href="/posts/decode-qr-code-blurred-image/">
            <img src="/images/decode-qr-code-blurred-image.webp" alt="Decoding a blurred QR code image" width="1280" height="720" loading="lazy">
          </a>
          <div class="blog-card-content">
            <span class="blog-badge">QR Decoder</span>
            <h3>How to Decode a QR Code Blurred Image with ZXing Org</h3>
            <p>Practical steps for testing and decoding QR images that are blurred or difficult to read.</p>
            <a class="blog-read" href="/posts/decode-qr-code-blurred-image/">Read Guide <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
          </div>
        </article>

        <article class="blog-card">
          <a class="blog-card-media" href="/posts/fix-qr-code-cannot-be-read-from-image/">
            <img src="/images/fix-qr-code-cannot-be-read-from-image.webp" alt="Troubleshooting a QR code that cannot be read from an image" width="1280" height="720" loading="lazy">
          </a>
          <div class="blog-card-content">
            <span class="blog-badge">Troubleshooting</span>
            <h3>How to Fix ZXing Org QR Code Cannot Be Read from Image Error</h3>
            <p>Common image and scanning issues that can prevent a QR code from being decoded successfully.</p>
            <a class="blog-read" href="/posts/fix-qr-code-cannot-be-read-from-image/">Read Guide <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
          </div>
        </article>

        <article class="blog-card">
          <a class="blog-card-media" href="/posts/decode-wifi-qr-code-from-image/">
            <img src="/images/decode-wifi-qr-code-from-image.webp" alt="Decoding a Wi-Fi QR code from an image" width="1280" height="720" loading="lazy">
          </a>
          <div class="blog-card-content">
            <span class="blog-badge">Wi-Fi QR</span>
            <h3>How to Decode WiFi QR Code from Image Safely</h3>
            <p>Understand what a Wi-Fi QR code contains and how to decode one from an image.</p>
            <a class="blog-read" href="/posts/decode-wifi-qr-code-from-image/">Read Guide <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
          </div>
        </article>

      </div>
    </section>

    <section class="blog-section">
      <div class="blog-section-title">
        <h2>Wi-Fi & QR Code Guides</h2>
      </div>

      <div class="blog-grid">

        <article class="blog-card">
          <a class="blog-card-media" href="/posts/connect-to-wi-fi-using-qr-code-windows/">
            <img src="/images/connect-to-wi-fi-using-qr-code-windows.webp" alt="Connecting to Wi-Fi on Windows with a QR code" width="1280" height="720" loading="lazy">
          </a>
          <div class="blog-card-content">
            <span class="blog-badge">Wi-Fi QR</span>
            <h3>3 Ways to Connect to Wi-Fi Using a QR Code on Windows</h3>
            <p>Explore practical ways to connect a Windows device to Wi-Fi using a QR code.</p>
            <a class="blog-read" href="/posts/connect-to-wi-fi-using-qr-code-windows/">Read Guide <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
          </div>
        </article>

        <article class="blog-card">
          <a class="blog-card-media" href="/posts/extract-gps-coordinates-from-qr-code/">
            <img src="/images/extract-gps-coordinates-from-qr-code.webp" alt="Extracting GPS coordinates from a location sharing QR code" width="1280" height="720" loading="lazy">
          </a>
          <div class="blog-card-content">
            <span class="blog-badge">QR & Location</span>
            <h3>How to Extract GPS Coordinates from Location Sharing QR Codes</h3>
            <p>Learn how location-sharing QR codes can contain geographic information and how to decode it.</p>
            <a class="blog-read" href="/posts/extract-gps-coordinates-from-qr-code/">Read Guide <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
          </div>
        </article>

        <article class="blog-card">
          <a class="blog-card-media" href="/posts/fix-rick-astley-qr-code-patch/">
            <img src="/images/fix-rick-astley-qr-code-patch.webp" alt="Troubleshooting a QR code patch and extracting its link" width="1280" height="720" loading="lazy">
          </a>
          <div class="blog-card-content">
            <span class="blog-badge">Troubleshooting</span>
            <h3>How to Fix a Rick Astley QR Code Patch and Extract the Link Safely</h3>
            <p>Understand how patched QR codes can behave and how to inspect the destination safely.</p>
            <a class="blog-read" href="/posts/fix-rick-astley-qr-code-patch/">Read Guide <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
          </div>
        </article>

      </div>
    </section>

    <section class="blog-section">
      <div class="blog-section-title">
        <h2>Barcode & 2D Code Guides</h2>
      </div>

      <div class="blog-grid">

        <article class="blog-card">
          <a class="blog-card-media" href="/posts/decode-data-matrix-from-image/">
            <img src="/images/decode-data-matrix-from-image.webp" alt="Decoding a Data Matrix code from an image" width="1280" height="720" loading="lazy">
          </a>
          <div class="blog-card-content">
            <span class="blog-badge">Data Matrix</span>
            <h3>How to Upload and Decode Data Matrix Files on ZXing Org</h3>
            <p>Learn how to upload a Data Matrix image and read its encoded information online.</p>
            <a class="blog-read" href="/posts/decode-data-matrix-from-image/">Read Guide <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
          </div>
        </article>

        <article class="blog-card">
          <a class="blog-card-media" href="/posts/scan-barcode-from-image-mobile/">
            <img src="/images/scan-barcode-from-image-mobile.webp" alt="Scanning a barcode from an image on a mobile browser" width="1280" height="720" loading="lazy">
          </a>
          <div class="blog-card-content">
            <span class="blog-badge">Barcode</span>
            <h3>How to Scan Barcode from Image on Mobile Browsers</h3>
            <p>Discover a practical way to scan barcode images from mobile browsers without installing an app.</p>
            <a class="blog-read" href="/posts/scan-barcode-from-image-mobile/">Read Guide <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
          </div>
        </article>

        <article class="blog-card">
          <a class="blog-card-media" href="/posts/zxing-org-android-apk-mobile-guide/">
            <img src="/images/zxing-org-android-apk-mobile-guide.webp" alt="ZXing Org Android mobile decoder guide" width="1280" height="720" loading="lazy">
          </a>
          <div class="blog-card-content">
            <span class="blog-badge">Mobile Guide</span>
            <h3>ZXing Org Android APK: Mobile Integration and Decoder App Guide</h3>
            <p>A guide to understanding mobile use cases and decoder workflows on Android.</p>
            <a class="blog-read" href="/posts/zxing-org-android-apk-mobile-guide/">Read Guide <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
          </div>
        </article>

      </div>
    </section>

    <section class="blog-cta">
      <h2>Need to scan a QR code?</h2>
      <p>
        Use the ZXing Online Decoder to scan a QR code or supported barcode
        directly in your browser.
      </p>
      <a class="blog-button" href="/">
        Open ZXing Decoder
        <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
      </a>
    </section>

  </div>
</section>

</main>

<footer class="footer">
  <div class="container">
    <div class="footer-bottom">
      <p>© 2026 ZXingOrg. All rights reserved.</p>
    </div>
  </div>
</footer>

<script>
const menuToggle = document.getElementById("menuToggle");
const mainNav = document.getElementById("mainNav");

if (menuToggle && mainNav) {
  menuToggle.addEventListener("click", () => {
    const isOpen = mainNav.classList.toggle("show");
    menuToggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
    menuToggle.querySelector("i").className =
      isOpen ? "fa-solid fa-xmark" : "fa-solid fa-bars";
  });

  mainNav.querySelectorAll("a").forEach(link => {
    link.addEventListener("click", () => {
      mainNav.classList.remove("show");
      menuToggle.setAttribute("aria-expanded", "false");
      menuToggle.querySelector("i").className = "fa-solid fa-bars";
    });
  });
}
</script>

</body>
</html>