Scribd
Upload
2 views5 pages

Web

The document is an HTML template for a luxury fashion brand website named XELIEN. It includes a header with navigation links, featured collections, and an about section describing the brand's focus on elegance and style. The layout utilizes Tailwind CSS for styling and includes various SVG icons for visual elements.

Uploaded by

choudharyhimanshuu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views5 pages

Web

The document is an HTML template for a luxury fashion brand website named XELIEN. It includes a header with navigation links, featured collections, and an about section describing the brand's focus on elegance and style. The layout utilizes Tailwind CSS for styling and includes various SVG icons for visual elements.

Uploaded by

choudharyhimanshuu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

<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&amp;family=Noto+Serif%3Awght%40400%3B500%3B700%3B9
00&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900"
/>

<title>Stitch 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-[#1a1a1a] dark
group/design-root overflow-x-hidden" style='font-family: "Noto Serif", "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-[#363636] px-10 py-3">
<div class="flex items-center gap-4 text-white">
<div class="size-4">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/
2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M39.475 21.6262C40.358 21.4363 40.6863 21.5589 40.7581
21.5934C40.7876 21.655 40.8547 21.857 40.8082 22.3336C40.7408 23.0255
40.4502 24.0046 39.8572 25.2301C38.6799 27.6631 36.5085 30.6631
33.5858 33.5858C30.6631 36.5085 27.6632 38.6799 25.2301
39.8572C24.0046 40.4502 23.0255 40.7407 22.3336 40.8082C21.8571
40.8547 21.6551 40.7875 21.5934 40.7581C21.5589 40.6863 21.4363 40.358
21.6262 39.475C21.8562 38.4054 22.4689 36.9657 23.5038 35.2817C24.7575
33.2417 26.5497 30.9744 28.7621 28.762C30.9744 26.5497 33.2417 24.7574
35.2817 23.5037C36.9657 22.4689 38.4054 21.8562 39.475
21.6262ZM4.41189 29.2403L18.7597 43.5881C19.8813 44.7097 21.4027
44.9179 22.7217 44.7893C24.0585 44.659 25.5148 44.1631 26.9723
43.4579C29.9052 42.0387 33.2618 39.5667 36.4142 36.4142C39.5667
33.2618 42.0387 29.9052 43.4579 26.9723C44.1631 25.5148 44.659 24.0585
44.7893 22.7217C44.9179 21.4027 44.7097 19.8813 43.5881 18.7597L29.2403
4.41187C27.8527 3.02428 25.8765 3.02573 24.2861 3.36776C22.6081
3.72863 20.7334 4.58419 18.8396 5.74801C16.4978 7.18716 13.9881 9.18353
11.5858 11.5858C9.18354 13.988 7.18717 16.4978 5.74802 18.8396C4.58421
20.7334 3.72865 22.6081 3.36778 24.2861C3.02574 25.8765 3.02429 27.8527
4.41189 29.2403Z"
fill="currentColor"
></path>
</svg>
</div>
<h2 class="text-white text-lg font-bold leading-tight tracking-
[-0.015em]">XELIEN</h2>
</div>
<div class="flex flex-1 justify-end gap-8">
<div class="flex items-center gap-9">
<a class="text-white text-sm font-medium leading-normal"
href="#">Shop</a>
<a class="text-white text-sm font-medium leading-normal"
href="#">About</a>
<a class="text-white text-sm font-medium leading-normal"
href="#">Contact</a>
</div>
<div class="flex gap-2">
<button
class="flex max-w-[480px] cursor-pointer items-center justify-center
overflow-hidden rounded-xl h-10 bg-[#363636] text-white gap-2 text-sm font-
bold leading-normal tracking-[0.015em] min-w-0 px-2.5"
>
<div class="text-white" 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-xl h-10 bg-[#363636] text-white gap-2 text-sm font-
bold leading-normal tracking-[0.015em] min-w-0 px-2.5"
>
<div class="text-white" data-icon="ShoppingBag" 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="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-1
6V56A16,16,0,0,0,216,40Zm0,160H40V56H216V200ZM176,88a48,48,0,0,1-96,
0,8,8,0,0,1,16,0,32,32,0,0,0,64,0,8,8,0,0,1,16,0Z"
></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]:px-4 @[480px]:py-3">
<div
class="bg-cover bg-center flex flex-col justify-end overflow-hidden
bg-[#1a1a1a] @[480px]:rounded-xl min-h-80"
style='background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4)
0%, rgba(0, 0, 0, 0) 25%), url("https://lh3.googleusercontent.com/aida-public/
AB6AXuB0WtSD6cWolEGbrTjIQZegOzAElOvN31UWFdTNEu67aWkVT3qxF66oY
nSFhV5wuco2uLC7tcsp_nYje7SqP4gV-
_jbrgNiZXHfWgdHDTUqVUQdA50eCrDjPGCVWtHJinkoFZzuIPu4d-
RVDB6QJ8yeMnCk728g4PnlPqUM1Rm1U_EdHKKUkA6n8-38betRuzjz_21n-
Jh_2WK_zS8e71XaXb8SE73edMNfclGGqQEoB019C5jSYFNLkUiE9_0p8qvkQp
M3ji45vkU");'
>
<div class="flex p-4"><p class="text-white tracking-light text-
[28px] font-bold leading-tight">Luxury Redefined</p></div>
</div>
</div>
</div>
<h2 class="text-white text-[22px] font-bold leading-tight tracking-
[-0.015em] px-4 pb-3 pt-5">Featured Collections</h2>
<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://lh3.googleusercontent.com/
aida-public/AB6AXuByZ9OeE-JTzzmvdefwrELK04wN1YIJtNCP1R_eL7t0x-
vDTwNsY9qNv9lhfrMWWwcfPWhHVpZMFmvQ11cs-d-
Ts_VPbnkNex03zYyd0t40WYa-2adt4ackv2pUUpxtzs6TwKGJff0JmW8cWDuI7k
tBbkXMTwcayzd2whyBfU2lURYUhLiznKlrWhzmvTRSSFhYXoi2dlsrsui9JAhO0O
9MA1FdTF0alPbNhA_btdLEULadLIHkwPaPYaizfnBByblIWXKgk6Med-0");'
></div>
<p class="text-white text-base font-medium leading-normal">New
Arrivals</p>
</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://lh3.googleusercontent.com/
aida-public/AB6AXuAS36PHCc_-H5-
uaDYkbPUjPixheBDH9nuxbCJDaSjy8pldJLpTWjPkG170myHzTJTLmamDQRQ2T
IAryT_G2czQ9Cgz9zLijRqPxX5oqsRaTIrmcK1YJHl95Q4w_dPc9hbIiw12P5TxgJQ
j9yj1Q3QQg9YUDslx0Tnh7DBnT1mQnOKJNCVNDllfQN1TEADf4_GY__Pzh80Dg
6TlYHRTEeZtTLejVgqsw7Y6UjJoq5oEi-
G0A2snhEZz2KoLUEH1kky5HnkI5DgHPUI");'
></div>
<p class="text-white text-base font-medium leading-normal">Best
Sellers</p>
</div>
</div>
<h2 class="text-white text-[22px] font-bold leading-tight tracking-
[-0.015em] px-4 pb-3 pt-5">About XELIEN</h2>
<p class="text-white text-base font-normal leading-normal pb-3 pt-1
px-4">
XELIEN is a luxury fashion brand that redefines elegance and style. Our
collections are crafted with the finest materials and attention to detail, offering
timeless
pieces for the modern man and woman.
</p>
</div>
</div>
<footer class="flex justify-center">
<div class="flex max-w-[960px] flex-1 flex-col">
<footer class="flex flex-col gap-6 px-5 py-10 text-center @container">
<div class="flex flex-wrap items-center justify-center gap-6
@[480px]:flex-row @[480px]:justify-around">
<a class="text-[#adadad] text-base font-normal leading-normal min-
w-40" href="#">Privacy Policy</a>
<a class="text-[#adadad] text-base font-normal leading-normal min-
w-40" href="#">Terms of Service</a>
<a class="text-[#adadad] text-base font-normal leading-normal min-
w-40" href="#">Shipping &amp; Returns</a>
</div>
<p class="text-[#adadad] text-base font-normal leading-
normal">@2024 XELIEN. All rights reserved.</p>
</footer>
</div>
</footer>
</div>
</div>
</body>
</html>

You might also like