<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimal Interior - Guaranteed Images</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f5f5f5;
color: #1a1a1a;
}
.salmon-bg { background-color: #f4a28c; }
.rounded-custom { border-radius: 45px; }
</style>
</head>
<body class="p-4 md:p-12 lg:p-16">
<!-- NAVBAR -->
<nav class="max-w-7xl mx-auto flex justify-between items-center mb-12">
<div class="flex items-center gap-2 font-black text-xl italic">
<div class="w-8 h-8 bg-black rounded-lg"></div>
DESIGN
</div>
<div class="hidden md:flex gap-10 text-[13px] font-bold uppercase tracking-widest text-gray-400">
<a href="#" class="text-black">Home</a>
<a href="#" class="hover:text-black">Collection</a>
<a href="#" class="hover:text-black">About</a>
<a href="#" class="hover:text-black">Contact</a>
</div>
<button class="salmon-bg text-white px-8 py-3 rounded-2xl font-bold text-xs uppercase shadow-lg">
Shop
</button>
</nav>
<!-- MAIN -->
<main class="max-w-7xl mx-auto grid lg:grid-cols-12 gap-8">
<!-- LEFT TEXT -->
<div class="lg:col-span-4 bg-white rounded-custom p-10 flex flex-col justify-center shadow">
<h1 class="text-4xl lg:text-6xl font-black mb-6">
Warm & Minimal <br> Interiors
</h1>
<p class="text-gray-500 mb-10">
Discover modern interiors thoughtfully designed with soft, calming tones, elegant textures, and timeless aesthetics that bring warmth, comfort, and sophistication to every corner of your home. Each space is crafted to feel visually stunning yet effortlessly relaxing, with carefully chosen furniture, lighting, and accents that create a harmonious and refined atmosphere. These interiors reflect a contemporary lifestyle while offering a welcoming environment where style and comfort coexist beautifully. </p>
<div class="flex gap-4">
<button class="salmon-bg text-white px-6 py-3 rounded-xl text-sm font-bold">
Explore
</button>
<button class="border px-6 py-3 rounded-xl text-sm font-bold">
Learn More
</button>
</div>
</div>
<!-- RIGHT IMAGES -->
<div class="lg:col-span-8 flex flex-col gap-8">
<!-- HERO IMAGE -->
<div class="h-[500px] rounded-custom overflow-hidden shadow-xl">
<img decoding="async" src="https://images.unsplash.com/photo-1616594039964-ae9021a400a0?q=80&w=1200&auto=format&fit=crop" class="w-full h-full object-cover" alt="Photo 1616594039964 Ae9021a400a0?q=80&w=1200&auto=format&fit=crop" title="Design Web Templete Code 1">
</div>
<!-- THUMBNAILS -->
<div class="grid grid-cols-3 gap-8">
<div class="aspect-square rounded-custom overflow-hidden">
<img decoding="async" src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?q=80&w=600&auto=format&fit=crop" class="w-full h-full object-cover" alt="Photo 1600210492486 724fe5c67fb0?q=80&w=600&auto=format&fit=crop" title="Design Web Templete Code 1">
</div>
<div class="aspect-square rounded-custom overflow-hidden">
<img decoding="async" src="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?q=80&w=600&auto=format&fit=crop" class="w-full h-full object-cover" alt="Photo 1618221195710 Dd6b41faaea6?q=80&w=600&auto=format&fit=crop" title="Design Web Templete Code 1">
</div>
<div class="aspect-square rounded-custom overflow-hidden">
<img decoding="async" src="https://images.unsplash.com/photo-1615873968403-89e068629265?q=80&w=600&auto=format&fit=crop" class="w-full h-full object-cover" alt="Photo 1615873968403 89e068629265?q=80&w=600&auto=format&fit=crop" title="Design Web Templete Code 1">
</div>
</div>
</div>
</main>
</body>
</html>]]>
