UI Code - Info Fusion Hub

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CozyHome</title>

/* Container */
.container {
padding: 25px 60px;
}

/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
font-weight: bold;
font-size: 20px;
}

.nav-links {
display: flex;
gap: 30px;
}

.nav-links a {
text-decoration: none;
color: #555;
font-size: 14px;
}

.shop-btn {
background: #f28b7a;
color: white;
padding: 10px 22px;
border-radius: 10px;
text-decoration: none;
font-weight: bold;
}

/* Hero Section */
.hero {
display: flex;
margin-top: 40px;
gap: 40px;
}

/* LEFT CARD */
.left-card {
background: white;
padding: 40px;
border-radius: 25px;
width: 40%;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.left-card h1 {
font-size: 40px;
line-height: 1.2;
}

.left-card p {
color: #777;
margin-top: 20px;
font-size: 14px;
line-height: 1.6;
}

.buttons {
margin-top: 30px;
display: flex;
gap: 15px;
}

.btn-primary {
background: #f28b7a;
color: white;
padding: 12px 18px;
border-radius: 10px;
text-decoration: none;
}

.btn-secondary {
border: 1px solid #ddd;
padding: 12px 18px;
border-radius: 10px;
text-decoration: none;
color: #333;
}

/* RIGHT SIDE */
.right {
width: 60%;
}

/* Main Image Card */
.main-card {
position: relative;
border-radius: 25px;
overflow: hidden;
}

.main-card img {
width: 100%;
height: 420px;
object-fit: cover;
}

/* Label */
.label {
position: absolute;
top: 15px;
left: 15px;
background: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
}

/* Thumbnails */
.thumbnails {
display: flex;
gap: 15px;
margin-top: 15px;
}

.thumb {
flex: 1;
border-radius: 15px;
overflow: hidden;
}

.thumb img {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 15px;
}

/* Responsive */
@media (max-width: 900px) {
.hero {
flex-direction: column;
}

.left-card, .right {
width: 100%;
}

.container {
padding: 20px;
}
}
</style>

</head>
<body>

<!– NAVBAR –>
<div class=”navbar”>
<div class=”logo”>CozyHome</div>

<div class=”nav-links”>
<a href=”#”>Home</a>
<a href=”#”>Collection</a>
<a href=”#”>About</a>
<a href=”#”>Contact</a>
</div>

<!– HERO –>
<div class=”hero”>

<!– LEFT –>
<div class=”left-card”>
<h1>Warm & Minimal Interiors — Inspiration for every room</h1>

<p>
Discover thoughtfully curated furniture and decor. Soft palettes, rounded forms and cozy textures.
</p>

<div class=”buttons”>
<a href=”#” class=”btn-primary”>Explore Collection</a>
<a href=”#” class=”btn-secondary”>Learn More</a>
</div>
</div>

<!– RIGHT –>
<div class=”right”>

<div class=”main-card”>
<span class=”label”>New Arrivals</span>
<img src=”https://images.unsplash.com/photo-1600585154340-be6161a56a0c”>
</div>

</div>

</body>
</html>