WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Landing Page - Möbel Inc.
1558
Andev.web
Im Editor öffnen
Video
Veröffentlichen Sie Ihren Code
0
Empfohlen
12 July 2025
CSS-Karten-Leuchteffekt
5 April 2025
eine Plattform-Website
9 July 2025
UI-Design-Umschalter: Optionen „Hell“, „Dunkel“, „Dunkel“
HTML
Copy
<html> <head> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" /> <link rel="stylesheet" as="style" onload="this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&family=Plus+Jakarta+Sans%3Awght%40400%3B500%3B700%3B800" /> <title>Galileo Design</title> <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," /> <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> </head> <body> <div class="relative flex size-full min-h-screen flex-col bg-[#FFFFFF] group/design-root overflow-x-hidden" style='font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;'> <div class="layout-container flex h-full grow flex-col"> <header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#F4EFE6] px-10 py-3"> <div class="flex items-center gap-4 text-[#1C160C]"> <div class="size-4"> <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 4H30.6666V17.3334H17.3334V30.6666H4V44H44V4Z" fill="currentColor"></path></svg> </div> <h2 class="text-[#1C160C] text-lg font-bold leading-tight tracking-[-0.015em]">Furniture Inc</h2> </div> <div class="flex flex-1 justify-end gap-8"> <div class="flex items-center gap-9"> </div> <div class="flex gap-2"> <button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-4 bg-[#019863] text-[#FFFFFF] text-sm font-bold leading-normal tracking-[0.015em]" > <span class="truncate">New Arrival</span> </button> <button class="flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 bg-[#F4EFE6] text-[#1C160C] gap-2 text-sm font-bold leading-normal tracking-[0.015em] min-w-0 px-2.5" > <div class="text-[#1C160C]" data-icon="MagnifyingGlass" data-size="20px" data-weight="regular"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 256 256"> <path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z" ></path> </svg> </div> </button> <button class="flex max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 bg-[#F4EFE6] text-[#1C160C] gap-2 text-sm font-bold leading-normal tracking-[0.015em] min-w-0 px-2.5" > <div class="text-[#1C160C]" data-icon="User" data-size="20px" data-weight="regular"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 256 256"> <path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z" ></path> </svg> </div> </button> </div> </div> </header> <div class="px-40 flex flex-1 justify-center py-5"> <div class="layout-content-container flex flex-col max-w-[960px] flex-1"> <div class="@container"> <div class="@[480px]:p-4"> <div class="flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat @[480px]:gap-8 @[480px]:rounded-xl items-start justify-end px-4 pb-10 @[480px]:px-10" style='background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), url("https://cdn.usegalileo.ai/stability/ac38bf44-77b7-4fb9-912b-63360e4cfaf7.png");' > <h1 class="text-white text-4xl font-black leading-tight tracking-[-0.033em] @[480px]:text-5xl @[480px]:font-black @[480px]:leading-tight @[480px]:tracking-[-0.033em] text-center" > A new season of style </h1> <button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-4 @[480px]:h-12 @[480px]:px-5 bg-[#019863] text-[#FFFFFF] text-sm font-bold leading-normal tracking-[0.015em] @[480px]:text-base @[480px]:font-bold @[480px]:leading-normal @[480px]:tracking-[0.015em]" > <span class="truncate">Shop now</span> </button> </div> </div> </div> <div class="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-3 p-4"> <div class="flex flex-col gap-3"> <div class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-xl" style='background-image: url("https://cdn.usegalileo.ai/stability/7327f8fc-e5d2-42c3-9173-29b1352c8e39.png");' ></div> </div> <div class="flex flex-col gap-3"> <div class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-xl" style='background-image: url("https://cdn.usegalileo.ai/stability/a01add7d-09b8-4c99-bc74-f00708eada13.png");' ></div> </div> <div class="flex flex-col gap-3"> <div class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-xl" style='background-image: url("https://cdn.usegalileo.ai/stability/a1de1f4e-b0a0-4126-ac1d-7c0cde17c759.png");' ></div> </div> <div class="flex flex-col gap-3"> <div class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-xl" style='background-image: url("https://cdn.usegalileo.ai/stability/903e0cb2-27ad-4a6f-9d85-a30502020a60.png");' ></div> </div> </div> <div class="@container"> <div class="flex flex-col gap-6 px-4 py-10 @[480px]:gap-8 @[864px]:flex-row"> <div class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-xl @[480px]:h-auto @[480px]:min-w-[400px] @[864px]:w-full" style='background-image: url("https://cdn.usegalileo.ai/stability/4f23f32f-67c6-453a-ade3-974e41e5656c.png");' ></div> <div class="flex flex-col gap-6 @[480px]:min-w-[400px] @[480px]:gap-8 @[864px]:justify-center"> <h1 class="text-[#1C160C] text-4xl font-black leading-tight tracking-[-0.033em] @[480px]:text-5xl @[480px]:font-black @[480px]:leading-tight @[480px]:tracking-[-0.033em] text-center" > Design inspiration </h1> <button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-4 @[480px]:h-12 @[480px]:px-5 bg-[#019863] text-[#FFFFFF] text-sm font-bold leading-normal tracking-[0.015em] @[480px]:text-base @[480px]:font-bold @[480px]:leading-normal @[480px]:tracking-[0.015em]" > <span class="truncate">Shop the look</span> </button> </div> </div> </div> <div class="grid grid-cols-[repeat(auto-fit,minmax(158px,1fr))] gap-3 p-4"> <div class="flex flex-col gap-3 pb-3"> <div class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-xl" style='background-image: url("https://cdn.usegalileo.ai/stability/ab75ed90-c013-4654-ba69-e02051dfea5d.png");' ></div> <div> <p class="text-[#1C160C] text-base font-medium leading-normal">Sofas</p> <p class="text-[#A18249] text-sm font-normal leading-normal">Starting at $399</p> </div> </div> <div class="flex flex-col gap-3 pb-3"> <div class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-xl" style='background-image: url("https://cdn.usegalileo.ai/stability/99c38e34-9bf7-4085-a5ea-03e09ea774fc.png");' ></div> <div> <p class="text-[#1C160C] text-base font-medium leading-normal">Chairs</p> <p class="text-[#A18249] text-sm font-normal leading-normal">Starting at $299</p> </div> </div> <div class="flex flex-col gap-3 pb-3"> <div class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-xl" style='background-image: url("https://cdn.usegalileo.ai/stability/9cafbdc6-78ba-4079-ba0c-741d51d40dc3.png");' ></div> <div> <p class="text-[#1C160C] text-base font-medium leading-normal">Tables</p> <p class="text-[#A18249] text-sm font-normal leading-normal">Starting at $199</p> </div> </div> <div class="flex flex-col gap-3 pb-3"> <div class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-xl" style='background-image: url("https://cdn.usegalileo.ai/stability/9ad9e040-5169-4820-a428-99d26f082494.png");' ></div> <div> <p class="text-[#1C160C] text-base font-medium leading-normal">Beds</p> <p class="text-[#A18249] text-sm font-normal leading-normal">Starting at $599</p> </div> </div> </div> </div> </div> </div> </div> </body> </html>
CSS
Copy
<!-- Replace with your HTML Code (Leave empty if not needed) -->
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
