NITIN SANJAY JOGDAND
NITIN SANJAY JOGDANDAT.POST.AMKHEDA TQ. MALEGOAN DIST.WASHIM
<!doctype html>
<html lang="mr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>नवीन वेबसाइट — औपचारिक नमुना</title>
<meta name="description" content="औपचारिक व आधुनिक लूकची वेबसाइट — परिचय, सेवा आणि संपर्क फॉर्म"]>
<style>
:root{--bg:#f7f9fb;--card:#ffffff;--accent:#0b5cff;--muted:#6b7280;--radius:12px}
*{box-sizing:border-box}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background:var(--bg); color:#0f172a; line-height:1.6}
.container{max-width:1100px;margin:36px auto;padding:24px}
header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:52px;height:52px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#0853d6);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:18px}
nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
nav a{color:var(--muted);text-decoration:none;font-weight:600}
nav a:hover{color:var(--accent)}
.hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;margin-top:18px}
.card{background:var(--card);border-radius:var(--radius);padding:26px;box-shadow:0 6px 18px rgba(11,92,255,0.06)}
h1{margin:0 0 12px;font-size:28px}
p.lead{color:var(--muted);margin:0 0 18px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.feature{padding:14px;border-radius:10px;background:#f8fbff;border:1px solid rgba(11,92,255,0.06)}
.feature h4{margin:0 0 6px;font-size:16px}
.feature p{margin:0;color:var(--muted);font-size:14px}
form label{display:block;font-weight:600;margin-bottom:6px;font-size:14px}
input[type=text], input[type=email], textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #e6eef8;background:#fbfdff}
textarea{min-height:120px;resize:vertical}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:var(--accent);color:white;text-decoration:none;font-weight:700;border:none;cursor:pointer}
footer{margin-top:28px;padding:18px 0;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;align-items:center}
/* Responsive */
@media (max-width:900px){
.hero{grid-template-columns:1fr}
.features{grid-template-columns:1fr}
.logo{width:44px;height:44px}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="brand">
<div class="logo">NW</div>
<div>
<div style="font-weight:800">नवीन वेबसाइट</div>
<div style="font-size:13px;color:var(--muted)">औपचारिक व्यावसायिक प्रस्तुती</div>
</div>
</div>
<nav>
<ul>
<li><a href="#about">आमच्याबद्दल</a></li>
<li><a href="#services">सेवा</a></li>
<li><a href="#contact">संपर्क</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<div>
<div class="card">
<h1>आपल्या व्यवसायासाठी व्यावसायिक वेबसाइट</h1>
<p class="lead">आम्ही आधुनिक, सुरक्षित आणि वापरायला सोपी वेबसाइट तयार करतो — जी तुमच्या ब्रँडला विश्वासार्हता देईल आणि ग्राहकांशी प्रभावीपणे संवाद साधेल.</p>
<div class="features">
<div class="feature">
<h4>उत्तरदायी डिझाइन</h4>
<p>सर्व उपकरणांवर सुंदर दिसणारे लेआउट.</p>
</div>
<div class="feature">
<h4>सुरक्षित आणि जलद</h4>
<p>टॉप-लेवल सुरक्षा व जलद लोडिंग वेळ.</p>
</div>
<div class="feature">
<h4>संवादात्मक फॉर्म</h4>
<p>ग्राहक कनेक्टसाठी सुलभ संपर्क फॉर्म.</p>
</div>
</div>
</div>
</div>
<aside>
<div class="card">
<h3 style="margin-top:0">संपर्क करा</h3>
<form id="contactForm" action="#" onsubmit="handleSubmit(event)">
<label for="name">नाव</label>
<input type="text" id="name" name="name" placeholder="तुमचे पूर्ण नाव" required>
<label for="email" style="margin-top:10px">ई-मेल</label>
<input type="email" id="email" name="email" placeholder="उदा. name@example.com" required>
<label for="message" style="margin-top:10px">संदेश</label>
<textarea id="message" name="message" placeholder="तुमचा संदेश लिहा..." required></textarea>
<div style="margin-top:12px;display:flex;gap:10px;align-items:center;justify-content:flex-end">
<button type="submit" class="btn">पाठवा</button>
</div>
</form>
<div id="notice" style="margin-top:10px;color:var(--muted);font-size:13px"></div>
</div>
</aside>
</section>
<section id="about" style="margin-top:24px">
<div class="card">
<h2>आमच्याबद्दल</h2>
<p style="color:var(--muted)">आम्ही वेब डिझाइन व विकासातील अनुभवी संघ आहोत. आम्ही लहान व्यवसाय, संस्थांना आणि व्यावसायिकांना त्यांच्या ऑनलाईन उपस्थितीसाठी सुसंगत आणि परिणामकारक वेबसाइट देतो. आमचा उद्देश स्पष्ट — उच्च दर्जा, वेळेवर वितरण व पारदर्शक प्रक्रिया.</p>
</div>
</section>
<section id="services" style="margin-top:18px">
<div class="card">
<h2>सेवा</h2>
<ul style="color:var(--muted);margin:8px 0 0 18px">
<li>कस्टम HTML/CSS/JavaScript वेबपेज डिझाईन</li>
<li>रेस्पॉन्सिव व मोबाइल-फर्स्ट डिझाइन</li>
<li>सामग्री व्यवस्थापन व SEO अनुकूलता</li>
<li>होस्टिंग व देखभाल सेवा</li>
</ul>
</div>
</section>
</main>
<footer>
<div>© {new Date().getFullYear()} नवीन वेबसाइट. सर्व हक्क राखीव.</div>
<div style="font-size:13px;color:var(--muted)">ई-मेल: info@example.com | दूरध्वनी: +91 90000 00000</div>
</footer>
</div>
<script>
function handleSubmit(e){
e.preventDefault();
const n = document.getElementById('name').value.trim();
const em = document.getElementById('email').value.trim();
const msg = document.getElementById('message').value.trim();
const notice = document.getElementById('notice');
if(!n || !em || !msg){ notice.textContent='कृपया सर्व फील्ड भरा.'; return }
// येथे तुम्ही API कडे पोस्ट करू शकता. सध्या फक्त स्थानिक पुष्टीकरण.
notice.style.color='green';
notice.textContent='धन्यवाद! तुमचा संदेश प्राप्त झाला आहे. आम्ही लवकरच संपर्क करू.';
document.getElementById('contactForm').reset();
}
</script>
</body>
</html>
Comments
Post a Comment