<!doctype html>
Business Today - Gadgets & Tech
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Arial, sans-serif;
background: #f8f9fa;
color: #333;
line-height: 1.6;
}
.header {
background: #c8102e; /* Business Today red */
color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header h1 {
font-size: 28px;
}
.search-bar {
padding: 10px 20px;
width: 350px;
border: none;
border-radius: 30px;
font-size: 16px;
}
.nav {
background: #fff;
border-bottom: 1px solid #ddd;
padding: 12px 20px;
display: flex;
gap: 25px;
font-weight: 600;
}
.nav a {
text-decoration: none;
color: #333;
}
.nav a:hover {
color: #c8102e;
}
.container {
max-width: 1200px;
margin: 30px auto;
padding: 0 20px;
}
.section-title {
font-size: 26px;
color: #c8102e;
margin-bottom: 20px;
border-bottom: 3px solid #c8102e;
padding-bottom: 8px;
display: inline-block;
}
.gadgets-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
.gadget-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
transition: transform 0.3s;
}
.gadget-card:hover {
transform: translateY(-8px);
}
.gadget-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-body {
padding: 18px;
}
.card-title {
font-size: 20px;
margin-bottom: 10px;
line-height: 1.3;
}
.price {
font-size: 22px;
font-weight: bold;
color: #c8102e;
margin: 10px 0;
}
.specs {
font-size: 14px;
color: #666;
margin-bottom: 12px;
}
.btn {
background: #c8102e;
color: white;
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
}
.btn:hover {
background: #a00c24;
}
.trending {
margin-top: 50px;
}
.carousel {
display: flex;
overflow-x: auto;
gap: 20px;
padding-bottom: 15px;
scrollbar-width: thin;
}
.carousel-card {
min-width: 220px;
background: white;
border-radius: 10px;
padding: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-align: center;
}
.live {
color: #c8102e;
font-weight: bold;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
footer {
background: #222;
color: #ccc;
text-align: center;
padding: 30px;
margin-top: 60px;
}
</style>
<div class="header">
<h1>Business Today</h1>
<input type="text" class="search-bar" placeholder="गैजेट्स, स्मार्टफोन या टेक सर्च करें..." />
</div>
<div class="nav">
<a href="#">होम</a>
<a href="#">मार्केट</a>
<a href="#">टेक्नोलॉजी</a>
<a href="#">गैजेट्स</a>
<a href="#">स्मार्टफोन</a>
<a href="#">वीडियो</a>
</div>
<div class="container">
<h2 class="section-title">नए गैजेट्स & टेक न्यूज़</h2>
<div class="gadgets-grid" id="gadgetsGrid">
<!-- JS से भरेगा -->
</div>
<div class="trending">
<h2 class="section-title">ट्रेंडिंग गैजेट्स</h2>
<div class="carousel" id="carousel">
<!-- JS से भरेगा -->
</div>
</div>
</div>
<footer>
© 2026 Business Today | Gadgets Section Demo<br />
केवल डेमो उद्देश्य के लिए • रियल डेटा के लिए आधिकारिक साइट देखें
</footer>
<script>
// सैंपल गैजेट्स डेटा (आप बाद में रियल API जोड़ सकते हैं)
const gadgets = [
{
title: "Vivo X300s लॉन्च, 200MP कैमरा के साथ",
price: "₹74,999",
image: "https://picsum.photos/id/1015/600/400",
specs: "Dimensity 9500 • 120Hz AMOLED • 6300mAh",
change: "+2.3%"
},
{
title: "Xiaomi TV S Mini LED Series 2026",
price: "₹1,29,999",
image: "https://picsum.photos/id/106/600/400",
specs: "Mini LED • 4K 144Hz • Google TV",
change: "नया लॉन्च"
},
{
title: "Lava Bold N2 Pro बजट स्मार्टफोन",
price: "₹7,999",
image: "https://picsum.photos/id/201/600/400",
specs: "5000mAh • 50MP कैमरा • 8GB RAM",
change: "बेस्ट वैल्यू"
},
{
title: "ViewSonic AI ViewBoard IN01-2",
price: "₹1,20,000",
image: "https://picsum.photos/id/251/600/400",
specs: "Android 14 • Interactive Display",
change: "एआई फीचर्स"
}
];
// मुख्य गैजेट्स कार्ड बनाएं
function renderGadgets() {
const grid = document.getElementById('gadgetsGrid');
grid.innerHTML = '';
gadgets.forEach(g => {
const card = document.createElement('div');
card.className = 'gadget-card';
card.innerHTML = `
<img src="${g.image}" alt="${g.title}">
<div class="card-body">
<h3 class="card-title">${g.title}</h3>
<div class="price">₹${g.price}</div>
<div class="specs">${g.specs}</div>
<div style="color: #28a745; font-weight:600;">${g.change}</div>
<button class="btn" onclick="alert('अधिक जानकारी के लिए Business Today ऐप डाउनलोड करें')">जानें अधिक</button>
</div>
`;
grid.appendChild(card);
});
}
// ट्रेंडिंग carousel
function renderCarousel() {
const carousel = document.getElementById('carousel');
carousel.innerHTML = '';
gadgets.forEach(g => {
const item = document.createElement('div');
item.className = 'carousel-card';
item.innerHTML = `
<img src="${g.image}" alt="" style="width:100%; height:140px; object-fit:cover; border-radius:8px;">
<h4 style="margin:12px 0 8px;">${g.title}</h4>
<div class="price" style="font-size:18px;">₹${g.price}</div>
`;
carousel.appendChild(item);
});
}
// लाइव प्राइस सिमुलेशन (हर 8 सेकंड में छोटा बदलाव)
function simulateLivePrice() {
setInterval(() => {
const prices = document.querySelectorAll('.price');
prices.forEach(price => {
if (Math.random() > 0.7) {
let current = parseInt(price.textContent.replace(/[^0-9]/g,''));
current += Math.floor(Math.random() * 300) - 100;
price.textContent = `₹${current.toLocaleString('en-IN')}`;
}
});
}, 8000);
}
// शुरू करें
window.onload = () => {
renderGadgets();
renderCarousel();
simulateLivePrice();
// सर्च फंक्शन (डेमो)
document.querySelector('.search-bar').addEventListener('keyup', (e) => {
if (e.key === 'Enter') {
alert('सर्च रिजल्ट: ' + e.target.value + ' के लिए गैजेट्स दिखाए जा रहे हैं (डेमो)');
}
});
};
</script>
</!doctype>
0 $type={blogger}:
Post a Comment