প্রিয় গ্রাহক, গত হালখাতায় আপনি উপস্থিত হননি। আজকে বিকেলে উপস্থিত হয়ে বকেয়া পরিশোধ করতে অনুরোধ করা হলো। পায়ে পায়ে শোরুম, জুমারবাড়ী। জুতার দোকান। ধন্যবাদ।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Imran Hossen - Welcome</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
}
/* Header / Hero */
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 8rem 2rem 6rem;
position: relative;
}
header h1 {
font-size: 3.5rem;
margin-bottom: 0.8rem;
}
header p {
font-size: 1.4rem;
opacity: 0.95;
max-width: 600px;
margin: 0 auto 2rem;
}
.btn {
display: inline-block;
background-color: white;
color: #4a4a4a;
padding: 0.9rem 2.2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
margin: 0.5rem;
transition: all 0.25s ease;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}
.btn-outline {
background: transparent;
border: 2px solid white;
color: white;
}
/* Sections */
section {
padding: 5rem 2rem;
max-width: 1100px;
margin: 0 auto;
}
h2 {
text-align: center;
font-size: 2.6rem;
margin-bottom: 3rem;
color: #222;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
}
.card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}
.card img {
width: 100%;
height: 220px;
object-fit: cover;
}
.card-content {
padding: 1.8rem;
}
footer {
background: #222;
color: #ccc;
text-align: center;
padding: 3rem 1rem;
margin-top: 4rem;
}
footer a {
color: #a5b4fc;
text-decoration: none;
}
@media (max-width: 600px) {
header h1 { font-size: 2.6rem; }
header { padding: 6rem 1.5rem 4rem; }
h2 { font-size: 2.1rem; }
}
</style>
</head>
<body>
<header>
<h1>Imran Hossen</h1>
<p>Web Enthusiast • Learner • Creator</p>
<a href="#about" class="btn">Know More</a>
<a href="#contact" class="btn btn-outline">Get in Touch</a>
</header>
<section id="about">
<h2>About Me</h2>
<div class="grid">
<div class="card">
<img src="https://images.unsplash.com/photo-1516321310764-9f3c9619d7d7?w=800&auto=format&fit=crop" alt="coding">
<div class="card-content">
<h3>Who I Am</h3>
<p>Passionate about building things that live on the internet. Currently learning modern web development and exploring new technologies.</p>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&auto=format&fit=crop" alt="laptop">
<div class="card-content">
<h3>What I Do</h3>
<p>HTML • CSS • JavaScript • React • Tailwind • Node.js basics • always learning something new</p>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&auto=format&fit=crop" alt="team work">
<div class="card-content">
<h3>My Goal</h3>
<p>Build clean, fast, and useful digital products while continuously improving my skills.</p>
</div>
</div>
</div>
</section>
<section id="contact" style="background:#f0f4ff;">
<h2>Contact Me</h2>
<p style="text-align:center; font-size:1.3rem; max-width:600px; margin:0 auto 2.5rem;">
Feel free to reach out if you want to talk about web development, projects, or just say hi!
</p>
<div style="text-align:center;">
<a href="mailto:yourname@example.com" class="btn">Send Email</a>
<a href="https://github.com/YOUR-USERNAME" target="_blank" class="btn btn-outline">GitHub</a>
</div>
</section>
<footer>
<p>© 2025 Imran Hossen • Made with ♡ and curiosity</p>
<p><a href="#">Back to Top ↑</a></p>
</footer>
</body>
</html>