Thu Sep 05 2024
Add Background Image Using Custom Tailwind CSS Configuration
Next.JS50 views
Tailwind CSS is a popular utility-first CSS framework that simplifies the process of styling your web elements. In the case of designing a website or web application, one of the common tasks is adding background images to elements, and Tailwind makes this very straightforward with custom configuration. In this article, we will walk you through the steps to add a background image using Tailwind CSS custom configuration, as well as explain some useful Tailwind classes that can help you customize the image behavior.
Step 1: Configuration for Background Images
You can define your image path using url() in tailwind.config file. You need to add the image inside the backgroundImage section.
backgroundImage: {
bannerImg: "url('/travel-banner.jpg')",
}
Step 2: Use The Class Names in Your HTML
You can add your image with bg utility class then mentioning your image class name.
<section className="bg-bannerImg">
...
</section>
Step 3: Add Background Image Properties with Tailwind Classes
After the background image is set, you can control how it behaves using a few key utility classes provided by Tailwind CSS.
<section className="bg-bannerImg bg-repeat bg-cover bg-bottom">
...
</section>
1. Background Repeat
By default, the background image might repeat if it's smaller than the container. You can control this with Tailwind's bg-repeat classes.
bg-no-repeat: Prevents the image from repeating.
bg-repeat: Repeats the image in both directions.
bg-repeat-x: Repeats the image only on the horizontal axis.
bg-repeat-y: Repeats the image only on the vertical axis.
2. Background Size
You can also control the image aspect ratio using background size utilities.
bg-cover: Scales the background image to cover the entire container while maintaining the aspect ratio.
bg-contain: Scales the background image to fit within the container, without stretching it.
3. Background Position
You can control the position of the background image using the bg-position utilities.
bg-top: Positions the image at the top.
bg-center: Centers the background image.
bg-bottom: Aligns the image at the bottom.
4. Background Attachment
Tailwind allows you to control whether the background image scrolls with the content or is fixed in place.
bg-fixed: Fixes the background image.
bg-scroll: The background image scrolls with the page.
Conclusion
Adding a background image to your website or web application is fast and easy with the help of Tailwind CSS. Tailwind offers a range of utilities that allow you to control how the background behaves, without needing to write custom CSS from scratch. Whether you're setting background size, positioning, repeating, even attachment. Tailwind simplifies the entire process and helps you to design responsive and visually appealing elements with minimal effort.
File Name: tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
colors: {
white: "#fff",
darkGray: "#4d4d4d",
green: "#00C165",
black: "#000",
},
extend: {
backgroundImage: {
bannerImg: "url('/travel-banner.jpg')",
blackOverlay:
"linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%)",
},
},
},
plugins: [],
};
export default config;
File Name: page.tsx
import Header from "@/components/header";
import PackageDetails from "@/components/packageDetails";
import { Package } from "@/models/package";
import Image from "next/image";
import traveler from "../../public/traveler.jpg";
import Gallery from "@/components/gallery";
const packages = [
{
bgImg: "venice.jpg",
name: "City of Canal",
location: "Venice",
price: "$1230.00",
},
{
bgImg: "moscow.jpg",
name: "The Heritage City",
location: "Moscow",
price: "$1430.00",
},
{
bgImg: "paris.jpg",
name: "City of Love",
location: "Paris",
price: "$1030.00",
},
{
bgImg: "mumbai.jpg",
name: "City of Dreams",
location: "Mumbai",
price: "$830.00",
},
{
bgImg: "tokyo.jpg",
name: "City of Anime",
location: "Tokyo",
price: "$2830.00",
},
{
bgImg: "beijing.jpg",
name: "The Forbidden City",
location: "Beijing",
price: "$1930.00",
},
];
const Home = () => {
return (
<>
<Header />
<section className="bg-bannerImg bg-no-repeat bg-cover bg-bottom">
<div className="w-full h-screen flex items-end bg-blackOverlay">
<div className="container mx-auto mb-40">
<h1 className="text-white uppercase text-7xl font-bold">
Never Stop
<br />
Exploring World
</h1>
<p className="text-white w-full max-w-2xl my-8">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
facilis enim laboriosam iste doloribus blanditiis illo veniam fuga
vitae architecto, laborum debitis sequi, ducimus repellendus
reprehenderit fugit assumenda deserunt distinctio!
</p>
<a
href=""
className="bg-green text-white uppercase font-semibold px-6 py-3 rounded-md transition-all inline-block hover:scale-105"
>
Get Started
</a>
</div>
</div>
</section>
<section className="py-20">
<div className="container mx-auto px-4">
<h2 className="text-6xl font-bold text-darkGray mb-3 uppercase">
Packages
<span className="inline-block bg-green w-40 h-1 ml-2"></span>
</h2>
<p className="text-sm text-darkGray w-full max-w-[750px]">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim porro
ullam laboriosam nesciunt tenetur perspiciatis praesentium illum
ducimus distinctio aut eos commodi, sit a incidunt!
</p>
<div className="flex flex-wrap mt-8">
{packages.map((pkg: Package, i: number) => {
return <PackageDetails key={i} pkgInfo={pkg} />;
})}
</div>
</div>
</section>
<section className="bg-[url('/tea-garden.jpg')] bg-cover bg-fixed bg-no-repeat bg-center">
<div className="bg-black bg-opacity-70 py-20">
<div className="container mx-auto flex">
<aside className="text-center w-1/4">
<svg
width="50"
height="50"
viewBox="0 0 50 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-10 h-10 fill-white mx-auto"
>
<g clipPath="url(#clip0_223_4)">
<path d="M17.8572 37.4744C15.4532 35.6577 13.7251 33.0899 12.9464 30.179L10.0368 43.5762H17.8572V37.4744Z" />
<path d="M17.0963 0.123506C16.2205 0.0232342 15.4022 0.577346 15.1707 1.42791L13.3409 8.00489C13.6479 7.91421 13.9657 7.86625 14.2857 7.86189C14.7709 7.86233 15.2509 7.96173 15.6965 8.15486L18.8581 5.4449C19.3281 5.04207 19.9728 4.91128 20.5627 5.09962C21.1526 5.28752 21.6025 5.76751 21.7525 6.36828L22.0999 7.75813C25.1979 7.33219 28.3425 7.37318 31.4287 7.87977C33.857 8.36456 35.7491 8.84674 36.9929 9.19246L34.8676 1.55565C34.6195 0.659744 33.7293 0.1004 32.8142 0.266503L25.7437 1.5914V1.59925H25.7215L17.0963 0.123506Z" />
<path d="M21.2036 11.5378L20.0195 6.80542L17.1212 9.29042C17.5951 9.9047 17.8536 10.6576 17.8571 11.4332V11.8064C18.9444 11.6904 20.0601 11.6006 21.2036 11.5378Z" />
<path d="M10.7143 12.3262V11.4333C10.7182 11.0252 10.7932 10.6207 10.9349 10.2379L8.03571 9.15015V13.7984C8.90894 13.515 9.82752 13.2552 10.7919 13.0189C10.7426 12.7913 10.7169 12.559 10.7143 12.3262Z" />
<path d="M22.5368 9.50548L23.026 11.4638C23.6786 11.446 24.3347 11.4333 25 11.4333C29.3588 11.408 33.708 11.8436 37.9752 12.7325L37.5528 11.2145C36.5579 10.9154 34.276 10.2719 31.0752 9.6306C28.2497 9.1772 25.3741 9.13491 22.5368 9.50548Z" />
<path d="M19.8098 36.6556L22.6597 38.409C24.0936 39.2975 25.9064 39.2975 27.3403 38.409L30.1902 36.6556C33.6121 34.5324 35.6995 30.7966 35.7143 26.77V21.7699L25 18.6179L14.2857 21.7699V26.7744C14.3023 30.7997 16.3892 34.5333 19.8098 36.6556ZM27.9292 25.1932C30.0733 24.3347 32.503 24.5872 34.4243 25.8689L33.4329 27.3547C32.0012 26.3986 30.1902 26.2103 28.5919 26.8511L27.1179 27.4406L26.4535 25.783L27.9292 25.1932ZM25 34.2734C25.7603 34.4225 26.5267 34.0476 26.8751 33.3557L28.4733 34.1535C27.7653 35.5678 26.1989 36.3338 24.6482 36.0243L22.1427 35.5225L22.4928 33.7725L25 34.2734ZM15.5757 25.8689C17.4975 24.5885 19.9262 24.3352 22.0707 25.1923L23.5465 25.783L22.8821 27.4406L21.4072 26.8503C19.809 26.2111 17.9988 26.3999 16.5671 27.3547L15.5757 25.8689Z" />
<path d="M25 13.2188C10.0455 13.2188 0 17.8356 0 22.1473C0 24.9009 3.95464 29.3608 10.6376 32.4073L12.5 23.8376V22.2903L10.0734 23.0044L9.56944 21.292L24.748 16.8277C24.9128 16.7793 25.0872 16.7793 25.252 16.8277L40.4306 21.292L39.9266 23.0044L37.5 22.2903V23.8376L39.3624 32.4091C46.0454 29.3608 50 24.9009 50 22.1473C50 17.8356 39.9545 13.2188 25 13.2188Z" />
<path d="M39.2857 49.8261H49.9259C49.4869 47.25 47.256 45.3653 44.6428 45.3618H39.2857V49.8261Z" />
<path d="M12.5 45.3618H14.2857V49.8261H12.5V45.3618Z" />
<path d="M35.7143 45.3618H37.5V49.8261H35.7143V45.3618Z" />
<path d="M0.0740967 49.8261H10.7143V45.3618H5.35712C2.74395 45.3653 0.513114 47.25 0.0740967 49.8261Z" />
<path d="M30.3571 44.4689V38.6492L28.275 39.9305C26.2686 41.1734 23.7313 41.1734 21.725 39.9305L19.6428 38.6492V44.4689C19.6428 44.9619 19.2431 45.3617 18.75 45.3617H16.0714V49.826H33.9286V45.3617H31.25C30.7569 45.3617 30.3571 44.9619 30.3571 44.4689Z" />
<path d="M32.1428 37.4744V43.5762H39.9632L37.0535 30.179C36.2749 33.0899 34.5467 35.6577 32.1428 37.4744Z" />
<path d="M16.0714 12.0235V11.4332C16.0714 10.447 15.2719 9.64746 14.2857 9.64746C13.2996 9.64746 12.5 10.447 12.5 11.4332V12.326C12.5048 12.4267 12.5183 12.527 12.541 12.6251C13.6714 12.3932 14.8481 12.1922 16.0714 12.0235Z" />
</g>
<defs>
<clipPath id="clip0_223_4">
<rect width="50" height="50" />
</clipPath>
</defs>
</svg>
<h3 className="text-white font-semibold text-4xl leading-none mt-4">
2196
<br />
<small className="text-sm font-medium tracking-widest">
Happy Traveler
</small>
</h3>
</aside>
<aside className="text-center w-1/4">
<svg
width="50"
height="50"
viewBox="0 0 50 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-10 h-10 fill-white mx-auto"
>
<path d="M11.432 33.7648L11.7187 34.0516L12.0062 33.7648C12.1805 33.5906 12.3742 33.4453 12.5773 33.3164C12.5313 32.8898 12.5 32.4609 12.5 32.0312C12.5 31.1953 12.5914 30.4172 12.7367 29.6875H9.73594C9.50234 30.4281 9.375 31.2148 9.375 32.0312C9.375 32.3016 9.39219 32.5719 9.41953 32.8406C10.1789 32.907 10.8867 33.2195 11.432 33.7648Z" />
<path d="M20.3125 32.0312C20.3125 31.1875 20.2055 30.4086 20.0383 29.6875H14.3383C14.1703 30.4094 14.0625 31.1883 14.0625 32.0312C14.0625 32.2984 14.0727 32.5664 14.093 32.8328C14.1641 32.8289 14.232 32.8125 14.3039 32.8125C15.393 32.8125 16.4039 33.3531 17.0078 34.2602L17.0844 34.375H20.0359C20.2047 33.6531 20.3125 32.8742 20.3125 32.0312Z" />
<path d="M15.1179 24.5063C13.1234 25.0556 11.4492 26.3743 10.432 28.1251H13.1508C13.6758 26.5978 14.4343 25.3868 15.1179 24.5063Z" />
<path d="M19.257 39.5563C21.2515 39.007 22.9257 37.6883 23.9429 35.9375H21.2241C20.6991 37.4648 19.9406 38.6758 19.257 39.5563Z" />
<path d="M19.5421 35.9375H17.8116C17.9093 36.3133 17.9687 36.7 17.9687 37.0945C17.9687 37.907 17.746 38.6906 17.353 39.3781C17.9694 38.7156 18.8897 37.5461 19.5421 35.9375Z" />
<path d="M26.4047 6.43887L15.7516 2.44434L13.5602 4.0873L18.8305 11.9936L26.4047 6.43887Z" />
<path d="M19.5469 28.125C18.8329 26.3578 17.7954 25.1258 17.1891 24.5078C16.5844 25.1273 15.5477 26.3617 14.8329 28.125H19.5469Z" />
<path d="M41.193 7.57656C42.1406 6.3125 42.5391 4.73516 42.3297 3.18359L40.1164 2.63047C39.8563 2.56563 39.5906 2.52734 39.3266 2.48438C39.5836 3.80781 39.5516 5.17344 39.2219 6.49219L39.1914 6.6125L41.1734 7.60391L41.193 7.57656Z" />
<path d="M4.6875 17.9688H10.6812L17.0742 13.2812H4.6875C3.39531 13.2812 2.34375 14.3328 2.34375 15.625C2.34375 16.9172 3.39531 17.9688 4.6875 17.9688Z" />
<path d="M15.7078 35.1266C15.1445 34.2805 13.8289 34.1508 13.1109 34.8695L11.7188 36.2609L10.3266 34.8695C10.0078 34.5508 9.58437 34.375 9.13359 34.375C8.56797 34.375 8.04297 34.6555 7.72969 35.1266L7.54219 35.4078C7.20781 35.9094 7.03125 36.493 7.03125 37.0945C7.03125 38.075 7.50703 39 8.30547 39.5703L11.7188 42.0086L15.1328 39.5703C15.9305 39.0008 16.4062 38.075 16.4062 37.0945C16.4062 36.4922 16.2297 35.9086 15.8953 35.4078L15.7078 35.1266Z" />
<path d="M31.25 22.2724V26.3255L36.8961 34.7951L39.8094 32.4646L38.4094 17.0662L31.25 22.2724Z" />
<path d="M32.8125 14.8438C33.6754 14.8438 34.375 14.1442 34.375 13.2812C34.375 12.4183 33.6754 11.7188 32.8125 11.7188C31.9496 11.7188 31.25 12.4183 31.25 13.2812C31.25 14.1442 31.9496 14.8438 32.8125 14.8438Z" />
<path d="M21.8749 32.0312C21.8749 32.8672 21.7835 33.6453 21.6382 34.375H24.639C24.8725 33.6344 24.9999 32.8477 24.9999 32.0312C24.9999 31.2148 24.8725 30.4281 24.6397 29.6875H21.639C21.7835 30.4172 21.8749 31.1953 21.8749 32.0312Z" />
<path d="M26.5625 17.1875C26.5625 16.3258 25.8617 15.625 25 15.625C24.1383 15.625 23.4375 16.3258 23.4375 17.1875C23.4375 17.4648 23.5133 17.7328 23.6492 17.9688H26.35C26.4867 17.7328 26.5625 17.4648 26.5625 17.1875Z" />
<path d="M45.4672 3.96875L43.9305 3.58437C44.0242 5.33984 43.5125 7.08594 42.4422 8.51406L41.6391 9.58359L37.3711 7.45L37.7047 6.11328C38.0148 4.87109 37.9922 3.58203 37.6773 2.34766C35.6555 2.36875 33.7266 3.00781 32.0938 4.20625L13.3242 17.9687H21.9867C21.9211 17.7148 21.875 17.4547 21.875 17.1875C21.875 15.4641 23.2766 14.0625 25 14.0625C26.7234 14.0625 28.125 15.4641 28.125 17.1875C28.125 17.4547 28.0789 17.7148 28.0133 17.9687H28.125C29.6094 17.9687 30.85 19.0109 31.1664 20.4016L39.7156 14.1844L39.9398 16.6508L44.6844 12.9047C46.5734 11.4133 47.6562 9.17891 47.6562 6.77266C47.6562 5.44375 46.7563 4.29062 45.4672 3.96875ZM32.8125 16.4062C31.0891 16.4062 29.6875 15.0047 29.6875 13.2812C29.6875 11.5578 31.0891 10.1562 32.8125 10.1562C34.5359 10.1562 35.9375 11.5578 35.9375 13.2812C35.9375 15.0047 34.5359 16.4062 32.8125 16.4062Z" />
<path d="M28.125 19.5313H4.6875C3.80859 19.5313 2.99688 19.2399 2.34375 18.7485V46.0938C2.34375 46.9556 3.04453 47.6563 3.90625 47.6563H28.125C28.9867 47.6563 29.6875 46.9556 29.6875 46.0938V21.0938C29.6875 20.2321 28.9867 19.5313 28.125 19.5313ZM26.5625 46.0938H23.4375V44.5313H26.5625V46.0938ZM26.5625 42.9688H21.875V41.4063H26.5625V42.9688ZM17.1875 41.4063C16.6141 41.4063 16.0453 41.3415 15.4859 41.2384L11.7188 43.929L7.39688 40.8423C6.18906 39.9798 5.46875 38.579 5.46875 37.0946C5.46875 36.1829 5.73594 35.3001 6.24219 34.5407L6.42969 34.2595C6.78984 33.7188 7.29609 33.3126 7.87578 33.0696C7.8375 32.7251 7.8125 32.379 7.8125 32.0313C7.8125 26.8618 12.018 22.6563 17.1875 22.6563C22.357 22.6563 26.5625 26.8618 26.5625 32.0313C26.5625 37.2009 22.357 41.4063 17.1875 41.4063Z" />
<path d="M19.257 24.5063C19.9406 25.3876 20.6991 26.5978 21.2241 28.1251H23.9429C22.9257 26.3735 21.2515 25.0556 19.257 24.5063Z" />
</svg>
<h3 className="text-white font-semibold text-4xl leading-none mt-4">
180
<br />
<small className="text-sm font-medium tracking-widest">
Travel & Tourism
</small>
</h3>
</aside>
<aside className="text-center w-1/4">
<svg
width="50"
height="50"
viewBox="0 0 50 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-10 h-10 fill-white mx-auto"
>
<path d="M2.34375 1.5625V48.4375H47.6562V1.5625H2.34375ZM8.59375 45.3125H5.46875V42.1875H8.59375V45.3125ZM8.59375 39.0625H5.46875V35.9375H8.59375V39.0625ZM8.59375 32.8125H5.46875V29.6875H8.59375V32.8125ZM8.59375 26.5625H5.46875V23.4375H8.59375V26.5625ZM8.59375 20.3125H5.46875V17.1875H8.59375V20.3125ZM8.59375 14.0625H5.46875V10.9375H8.59375V14.0625ZM8.59375 7.8125H5.46875V4.6875H8.59375V7.8125ZM35.9375 30.4688C35.9375 32.1945 34.5383 33.5938 32.8125 33.5938H17.1875C15.4617 33.5938 14.0625 32.1945 14.0625 30.4688V19.5312C14.0625 17.8055 15.4617 16.4062 17.1875 16.4062H32.8125C34.5383 16.4062 35.9375 17.8055 35.9375 19.5312V30.4688ZM44.5312 45.3125H41.4062V42.1875H44.5312V45.3125ZM44.5312 39.0625H41.4062V35.9375H44.5312V39.0625ZM44.5312 32.8125H41.4062V29.6875H44.5312V32.8125ZM44.5312 26.5625H41.4062V23.4375H44.5312V26.5625ZM44.5312 20.3125H41.4062V17.1875H44.5312V20.3125ZM44.5312 14.0625H41.4062V10.9375H44.5312V14.0625ZM44.5312 7.8125H41.4062V4.6875H44.5312V7.8125Z" />
<path d="M21.0938 28.9062V21.0938L29.6875 25L21.0938 28.9062Z" />
</svg>
<h3 className="text-white font-semibold text-4xl leading-none mt-4">
116
<br />
<small className="text-sm font-medium tracking-widest">
Travel Vlog
</small>
</h3>
</aside>
<aside className="text-center w-1/4">
<svg
width="50"
height="50"
viewBox="0 0 50 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-10 h-10 fill-white mx-auto"
>
<g clipPath="url(#clip0_225_19)">
<path d="M13.4685 42.2969C13.0805 42.9694 12.7183 43.5816 12.3907 44.099C11.7586 45.0926 10.6625 45.6942 9.48491 45.6942C8.3073 45.6942 7.21126 45.0925 6.57909 44.099C6.25148 43.5816 5.88929 42.9695 5.50131 42.2969C1.897 42.9781 0 44.418 0 45.5389C0 47.2375 4.05265 49.1431 9.48481 49.1431C14.9171 49.1431 18.9696 47.2375 18.9696 45.5389C18.9697 44.418 17.0727 42.9781 13.4685 42.2969Z" />
<path d="M9.48491 14.6526C4.23854 14.666 -0.00575713 18.9257 5.86188e-06 24.172C5.86188e-06 27.8194 4.87178 38.2095 8.03625 43.1676C8.34882 43.6665 8.89611 43.9695 9.48481 43.9695C10.0735 43.9695 10.6209 43.6665 10.9334 43.1676C14.0978 38.2095 18.9696 27.8194 18.9696 24.172C18.9755 18.9257 14.7312 14.666 9.48491 14.6526ZM9.48491 31.0355C5.67518 31.0355 2.58681 27.9471 2.58681 24.1374C2.58681 20.3277 5.67518 17.2393 9.48491 17.2393C13.2946 17.2393 16.383 20.3277 16.383 24.1374C16.3778 27.9451 13.2925 31.0305 9.48491 31.0355Z" />
<path d="M9.48488 18.9641C6.62761 18.9641 4.31128 21.2803 4.31128 24.1377C4.31128 26.9951 6.62751 29.3113 9.48488 29.3113C12.3422 29.3113 14.6585 26.9951 14.6585 24.1377C14.6561 21.2813 12.3412 18.9664 9.48488 18.9641Z" />
<path d="M42.2507 24.1376C45.5188 24.1376 48.2866 22.5598 48.2866 20.6886C48.2866 19.6281 47.3381 18.5934 45.8291 17.9294C45.3204 18.8779 44.8289 19.7229 44.4322 20.3524C43.958 21.0989 43.135 21.5509 42.2507 21.5509C41.3663 21.5509 40.5433 21.0988 40.0691 20.3524C39.6724 19.723 39.181 18.878 38.6722 17.9294C37.1633 18.5934 36.2148 19.6281 36.2148 20.6886C36.2149 22.5597 38.9827 24.1376 42.2507 24.1376Z" />
<path d="M42.2506 19.8113C42.5402 19.8113 42.8112 19.6686 42.9749 19.4297C45.0615 16.1445 48.2863 9.2982 48.2863 6.91838C48.2908 3.57887 45.59 0.866457 42.2505 0.856689C38.911 0.866457 36.2102 3.57878 36.2147 6.91838C36.2147 9.2982 39.4396 16.1445 41.5262 19.4297C41.6901 19.6686 41.961 19.8113 42.2506 19.8113ZM37.9393 6.89249C37.9393 4.5114 39.8695 2.58119 42.2506 2.58119C44.6317 2.58119 46.5619 4.5114 46.5619 6.89249C46.5611 9.2732 44.6313 11.2029 42.2506 11.2038C39.8695 11.2038 37.9393 9.27359 37.9393 6.89249Z" />
<path d="M44.8375 6.89247C44.8333 5.46559 43.6777 4.30986 42.2507 4.30566C40.8221 4.30566 39.6639 5.46383 39.6639 6.89247C39.6639 8.3211 40.8221 9.47927 42.2507 9.47927C43.6794 9.47927 44.8375 8.3211 44.8375 6.89247Z" />
<path d="M22.4187 44.832H21.5564C21.0802 44.832 20.6941 45.2181 20.6941 45.6943C20.6941 46.1705 21.0801 46.5566 21.5564 46.5566H22.4187C22.8949 46.5566 23.281 46.1706 23.281 45.6943C23.281 45.2181 22.895 44.832 22.4187 44.832Z" />
<path d="M32.8256 44.832H31.0909C30.6148 44.832 30.2286 45.2181 30.2286 45.6943C30.2286 46.1705 30.6147 46.5566 31.0909 46.5566H32.8256C33.3018 46.5566 33.6879 46.1706 33.6879 45.6943C33.6879 45.2181 33.3019 44.832 32.8256 44.832Z" />
<path d="M31.0759 28.4492C31.0759 27.973 30.6898 27.5869 30.2136 27.5869H28.479C28.0028 27.5869 27.6167 27.9729 27.6167 28.4492C27.6167 28.9254 28.0027 29.3115 28.479 29.3115H30.2136C30.6898 29.3114 31.0759 28.9254 31.0759 28.4492Z" />
<path d="M27.5242 21.5508H29.2588C29.735 21.5508 30.1211 21.1647 30.1211 20.6885C30.1211 20.2123 29.7351 19.8262 29.2588 19.8262H27.5242C27.048 19.8262 26.6619 20.2122 26.6619 20.6885C26.6619 21.1647 27.0479 21.5508 27.5242 21.5508Z" />
<path d="M23.4814 24.1968C23.852 24.1965 24.1809 23.9599 24.299 23.6086C24.4433 23.1808 24.6815 22.7906 24.9962 22.4668C25.3281 22.1249 25.3199 21.5789 24.9781 21.2471C24.6362 20.9153 24.0902 20.9234 23.7584 21.2652C23.2649 21.7747 22.891 22.3877 22.6637 23.0597C22.576 23.3228 22.62 23.612 22.7819 23.8372C22.9438 24.0624 23.2041 24.1961 23.4814 24.1968Z" />
<path d="M47.3977 31.8088C46.9937 32.0606 46.8702 32.5923 47.122 32.9964C47.397 33.4381 47.6266 33.9064 47.8074 34.3942C47.9325 34.7326 48.2551 34.9572 48.6158 34.9575C48.8979 34.9571 49.1619 34.8189 49.323 34.5873C49.484 34.3557 49.5218 34.0601 49.4241 33.7954C49.2028 33.1983 48.9218 32.6251 48.5854 32.0844C48.3336 31.6804 47.8018 31.557 47.3977 31.8088Z" />
<path d="M27.6226 44.832H25.8879C25.4118 44.832 25.0256 45.2181 25.0256 45.6943C25.0256 46.1705 25.4117 46.5566 25.8879 46.5566H27.6226C28.0988 46.5566 28.4849 46.1706 28.4849 45.6943C28.4849 45.2181 28.0989 44.832 27.6226 44.832Z" />
<path d="M49.1796 36.6451C48.7064 36.6219 48.3031 36.9849 48.2764 37.4581C48.2512 37.9772 48.1731 38.4924 48.0432 38.9956C47.9765 39.2541 48.0334 39.5287 48.1969 39.7395C48.3605 39.9504 48.6124 40.0737 48.8793 40.0734C49.2721 40.0726 49.6149 39.8069 49.7137 39.4267C49.8724 38.8097 49.968 38.1783 49.9992 37.5422C50.0189 37.0688 49.6529 36.6681 49.1796 36.6451Z" />
<path d="M36.2469 28.449C36.232 27.9667 35.8352 27.5841 35.3527 27.5867H33.682C33.2058 27.5867 32.8197 27.9727 32.8197 28.449C32.8197 28.9252 33.2057 29.3113 33.682 29.3113H35.4166C35.6421 29.31 35.8574 29.2177 36.0137 29.0554C36.1701 28.8929 36.2542 28.6742 36.2469 28.449Z" />
<path d="M47.8911 41.6232C47.5137 41.3332 46.9727 41.4038 46.6824 41.7809C46.3645 42.1943 46.0065 42.5752 45.6138 42.9181C45.3428 43.1543 45.2468 43.5339 45.373 43.8706C45.4992 44.2073 45.821 44.4302 46.1805 44.4301C46.3889 44.4304 46.5904 44.3548 46.7472 44.2174C47.226 43.7996 47.6624 43.3355 48.0499 42.8318C48.3396 42.4541 48.2686 41.9132 47.8911 41.6232Z" />
<path d="M41.4878 28.4555C41.491 27.9793 41.1077 27.5905 40.6315 27.5873L38.8859 27.5869C38.4097 27.5869 38.0236 27.9729 38.0236 28.4492C38.0236 28.9254 38.4096 29.3115 38.8859 29.3115L40.6078 29.3119H40.6197C41.0959 29.3151 41.4846 28.9317 41.4878 28.4555Z" />
<path d="M25.1193 28.7313C25.5046 28.7317 25.8434 28.4764 25.9491 28.1059C26.0549 27.7354 25.9022 27.3397 25.5748 27.1364C25.1912 26.8977 24.8653 26.5767 24.6208 26.1967C24.3634 25.7958 23.8297 25.6795 23.4289 25.937C23.028 26.1943 22.9117 26.728 23.1691 27.1289C23.5532 27.7242 24.0642 28.2271 24.6655 28.6017C24.8015 28.6865 24.9588 28.7314 25.1193 28.7313Z" />
<path d="M38.0287 44.832H36.2941C35.8179 44.832 35.4318 45.2181 35.4318 45.6943C35.4318 46.1705 35.8178 46.5566 36.2941 46.5566H38.0287C38.5049 46.5566 38.891 46.1706 38.891 45.6943C38.8909 45.2181 38.5049 44.832 38.0287 44.832Z" />
<path d="M45.491 30.8945C45.8667 30.8948 46.1995 30.6519 46.3136 30.294C46.4277 29.936 46.297 29.5454 45.9904 29.3283C45.4714 28.9609 44.9172 28.6463 44.3358 28.389C44.0541 28.2645 43.7273 28.2998 43.4786 28.4814C43.2299 28.6631 43.097 28.9638 43.13 29.27C43.163 29.5762 43.3569 29.8416 43.6386 29.9661C44.1148 30.177 44.5686 30.435 44.9935 30.7362C45.1389 30.8392 45.3128 30.8945 45.491 30.8945Z" />
<path d="M42.9193 44.4516C42.4249 44.6129 41.9154 44.7238 41.3986 44.7825C40.9444 44.834 40.6092 45.2309 40.6347 45.6874C40.6602 46.1438 41.0374 46.501 41.4945 46.5015C41.5271 46.5015 41.5598 46.4998 41.5922 46.496C42.2251 46.4241 42.8491 46.2884 43.4548 46.091C43.9075 45.9431 44.1547 45.4562 44.0068 45.0034C43.8589 44.5508 43.372 44.3037 42.9193 44.4516Z" />
<path d="M32.7657 21.5508H33.628C34.1042 21.5508 34.4903 21.1647 34.4903 20.6885C34.4903 20.2123 34.1043 19.8262 33.628 19.8262H32.7657C32.2896 19.8262 31.9034 20.2122 31.9034 20.6885C31.9035 21.1647 32.2896 21.5508 32.7657 21.5508Z" />
</g>
<defs>
<clipPath id="clip0_225_19">
<rect width="50" height="50" />
</clipPath>
</defs>
</svg>
<h3 className="text-white font-semibold text-4xl leading-none mt-4">
490
<br />
<small className="text-sm font-medium tracking-widest">
Covered Locations
</small>
</h3>
</aside>
</div>
</div>
</section>
<section className="py-20">
<div className="group container mx-auto">
<div className="flex items-center justify-center">
<article className="w-6/12 bg-white shadow-lg relative z-30 -mr-20 group-hover:-mr-56 rounded transition-all delay-200 ease-linear">
<div className="p-8">
<h2 className="text-6xl font-bold text-darkGray mb-3 uppercase">
About Me
<span className="inline-block bg-green w-40 h-1 ml-2"></span>
</h2>
<p className="text-sm text-darkGray mb-3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam
eius ullam rerum saepe, et optio dolore provident ratione
beatae doloribus aliquid, deleniti, maxime molestias
asperiores voluptatibus ad nesciunt laboriosam dolorum.
</p>
<p className="text-sm text-darkGray mb-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim
porro ullam laboriosam nesciunt tenetur perspiciatis
praesentium illum ducimus distinctio aut eos commodi, sit a
incidunt!
</p>
<p className="text-sm text-darkGray mb-3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam
eius ullam rerum saepe, et optio dolore provident ratione
beatae doloribus aliquid, deleniti, maxime molestias
asperiores voluptatibus ad nesciunt laboriosam dolorum.
</p>
<p className="text-sm text-darkGray">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim
porro ullam laboriosam nesciunt tenetur perspiciatis
praesentium illum ducimus distinctio aut eos commodi, sit a
incidunt!
</p>
<h3 className="text-darkGray text-xl font-semibold uppercase mt-8 mb-3">
Social Connection
<span className="inline-block bg-green w-40 h-0.5 ml-2"></span>
</h3>
<div className="flex gap-4">
<a
href=""
className="scale-100 hover:scale-125 transition-all ease-in-out"
>
<svg
width="35"
height="35"
viewBox="0 0 35 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-10 h-10"
>
<g clipPath="url(#clip0_31_216)">
<path
d="M35 17.5C35 7.83508 27.1649 0 17.5 0C7.83508 0 0 7.83494 0 17.5C0 26.2347 6.39953 33.4746 14.7656 34.7874V22.5586H10.3223V17.5H14.7656V13.6445C14.7656 9.25859 17.3783 6.83594 21.3756 6.83594C23.2903 6.83594 25.293 7.17774 25.293 7.17774V11.4844H23.0863C20.9122 11.4844 20.2344 12.8334 20.2344 14.2174V17.5H25.0879L24.312 22.5586H20.2344V34.7874C28.6005 33.4746 35 26.2348 35 17.5Z"
fill="#1877F2"
/>
<path
d="M24.312 22.5586L25.0879 17.5H20.2344V14.2174C20.2344 12.8332 20.9124 11.4844 23.0863 11.4844H25.293V7.17773C25.293 7.17773 23.2903 6.83594 21.3756 6.83594C17.3783 6.83594 14.7656 9.25859 14.7656 13.6445V17.5H10.3223V22.5586H14.7656V34.7874C15.6702 34.9292 16.5844 35.0002 17.5 35C18.4156 35.0003 19.3298 34.9292 20.2344 34.7874V22.5586H24.312Z"
fill="white"
/>
</g>
<defs>
<clipPath id="clip0_31_216">
<rect width="35" height="35" fill="white" />
</clipPath>
</defs>
</svg>
</a>
<a
href=""
className="scale-100 hover:scale-125 transition-all ease-in-out"
>
<svg
width="512"
height="512"
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-10 h-10"
>
<g clipPath="url(#clip0_723_3)">
<path
d="M314.757 147.525H197.243C190.714 147.525 184.249 148.811 178.217 151.309C172.185 153.808 166.704 157.47 162.087 162.087C157.47 166.703 153.808 172.184 151.31 178.216C148.811 184.249 147.525 190.714 147.525 197.243V314.757C147.525 327.943 152.764 340.589 162.087 349.913C166.704 354.53 172.185 358.192 178.217 360.69C184.249 363.189 190.714 364.475 197.243 364.475H314.757C327.943 364.475 340.589 359.236 349.913 349.912C359.236 340.589 364.474 327.943 364.474 314.757V197.243C364.475 190.714 363.189 184.249 360.69 178.217C358.192 172.185 354.53 166.704 349.913 162.087C345.296 157.47 339.816 153.808 333.784 151.309C327.751 148.811 321.286 147.525 314.757 147.525ZM256 324.391C242.474 324.391 229.251 320.38 218.004 312.865C206.758 305.35 197.992 294.669 192.815 282.172C187.639 269.675 186.285 255.924 188.924 242.657C191.562 229.391 198.076 217.205 207.641 207.64C217.205 198.076 229.391 191.562 242.658 188.923C255.925 186.284 269.676 187.639 282.172 192.815C294.669 197.991 305.351 206.757 312.865 218.004C320.38 229.251 324.391 242.473 324.391 256C324.391 264.981 322.622 273.874 319.185 282.172C315.748 290.47 310.711 298.009 304.36 304.36C298.009 310.71 290.47 315.748 282.172 319.185C273.875 322.622 264.982 324.391 256 324.391ZM327.242 201.58C324.024 201.58 320.878 200.626 318.202 198.838C315.527 197.05 313.441 194.509 312.209 191.536C310.978 188.563 310.655 185.292 311.283 182.135C311.911 178.979 313.46 176.08 315.736 173.804C318.011 171.528 320.91 169.979 324.067 169.351C327.223 168.723 330.495 169.045 333.468 170.276C336.441 171.508 338.982 173.593 340.77 176.269C342.558 178.945 343.512 182.091 343.512 185.309C343.512 189.624 341.798 193.763 338.747 196.814C335.696 199.865 331.558 201.58 327.242 201.58Z"
fill="url(#paint0_linear_723_3)"
/>
<path
d="M256 211.545C247.208 211.545 238.613 214.152 231.302 219.037C223.991 223.922 218.294 230.865 214.929 238.988C211.564 247.111 210.684 256.049 212.399 264.673C214.114 273.296 218.348 281.217 224.566 287.434C230.783 293.651 238.704 297.885 247.327 299.601C255.951 301.316 264.889 300.436 273.012 297.071C281.135 293.706 288.078 288.008 292.963 280.698C297.848 273.387 300.455 264.792 300.455 256C300.455 244.21 295.771 232.902 287.434 224.565C279.097 216.229 267.79 211.545 256 211.545Z"
fill="url(#paint1_linear_723_3)"
/>
<path
d="M256 0C114.615 0 0 114.615 0 256C0 397.385 114.615 512 256 512C397.385 512 512 397.385 512 256C512 114.615 397.385 0 256 0ZM389.333 312.5C389.332 332.877 381.237 352.419 366.828 366.828C352.419 381.237 332.877 389.332 312.5 389.333H199.5C179.123 389.332 159.58 381.237 145.171 366.828C130.762 352.42 122.667 332.877 122.666 312.5V199.5C122.667 179.123 130.762 159.58 145.171 145.171C159.58 130.763 179.123 122.668 199.5 122.667H312.5C332.877 122.668 352.419 130.763 366.828 145.172C381.237 159.581 389.332 179.123 389.333 199.5V312.5Z"
fill="url(#paint2_linear_723_3)"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_723_3"
x1="8.00038"
y1="504"
x2="506.325"
y2="5.6749"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFCB52" />
<stop offset="0.318" stopColor="#FF6341" />
<stop offset="0.658" stopColor="#CD39A2" />
<stop offset="1" stopColor="#515BCA" />
</linearGradient>
<linearGradient
id="paint1_linear_723_3"
x1="7.99997"
y1="504"
x2="506.325"
y2="5.67497"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFCB52" />
<stop offset="0.318" stopColor="#FF6341" />
<stop offset="0.658" stopColor="#CD39A2" />
<stop offset="1" stopColor="#515BCA" />
</linearGradient>
<linearGradient
id="paint2_linear_723_3"
x1="8"
y1="504"
x2="506.325"
y2="5.675"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFCB52" />
<stop offset="0.318" stopColor="#FF6341" />
<stop offset="0.658" stopColor="#CD39A2" />
<stop offset="1" stopColor="#515BCA" />
</linearGradient>
<clipPath id="clip0_723_3">
<rect width="512" height="512" fill="white" />
</clipPath>
</defs>
</svg>
</a>
<a
href=""
className="scale-100 hover:scale-125 transition-all ease-in-out"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 246.15 246.15"
className="w-10 h-10"
>
<path
d="M246.15,123.06A123,123,0,0,1,123.24,246.15h-.16c-2.94,0-5.84-.11-8.72-.31A123.07,123.07,0,1,1,246.15,123.06Z"
fill="#e60000"
/>
<path
d="M241.21,157.69a123.14,123.14,0,0,1-118.13,88.46c-2.94,0-5.84-.11-8.72-.31L58,154.42,187.73,90.54Z"
fill="#e60000"
/>
<rect
x="56.42"
y="74.49"
width="133.31"
height="97.14"
rx="26.11"
fill="#fff"
/>
<polygon
points="108.81 109.87 108.81 136.25 137.34 123.06 108.81 109.87"
fill="#e60000"
/>
</svg>
</a>
<a
href=""
className="scale-100 hover:scale-125 transition-all ease-in-out"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 500"
className="w-10 h-10"
>
<path
d="M500,250c0,138.07-111.93,250-250,250S0,388.07,0,250,111.93,0,250,0,500,111.93,500,250Z"
fill="#cb2128"
/>
<path
d="M270.17,334.78c-18.89-1.48-26.83-10.84-41.65-19.85-8.16,42.74-18.1,83.71-47.61,105.12-9.09-64.6,13.36-113.13,23.81-164.61-17.78-30,2.13-90.24,39.67-75.38,46.17,18.26-40,111.35,17.86,123,60.39,12.14,85-104.77,47.59-142.81-54.12-54.9-157.52-1.24-144.79,77.36,3.09,19.21,23,25,7.92,51.57-34.62-7.68-45-35-43.63-71.4,2.16-59.6,53.55-101.33,105.12-107.12,65.24-7.29,126.45,24,134.89,85.3,9.51,69.24-29.44,144.22-99.18,138.85Z"
fill="#f2f2f2"
/>
</svg>
</a>
<a
href=""
className="scale-100 hover:scale-125 transition-all delay-150"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 963.66 963.66"
className="w-10 h-10"
>
<circle
cx="481.83"
cy="481.83"
r="481.33"
stroke="#fff"
strokeMiterlimit="10"
/>
<path
d="M185.33,203,415.4,510.58,183.88,760.69H236l202.7-219,163.77,219H779.78l-243-324.92L752.26,203H700.15L513.48,404.63,362.65,203ZM262,241.34h81.46l359.72,481H621.68Z"
fill="#fff"
/>
</svg>
</a>
<a
href=""
className="scale-100 hover:scale-125 transition-all delay-150"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
className="w-10 h-10"
>
<path
d="M24,48A24,24,0,1,0,0,24,24,24,0,0,0,24,48Z"
fill="#25d366"
/>
<path
d="M24.79,37.35h0A14.31,14.31,0,0,1,18,35.62l-7.57,2,2-7.4a14.27,14.27,0,1,1,12.37,7.15ZM18.32,33l.43.26a11.84,11.84,0,0,0,6,1.65h0a11.86,11.86,0,1,0-10-5.56l.28.45-1.19,4.38Zm13.17-6.88a1.14,1.14,0,0,1,.49.33,2.94,2.94,0,0,1-.21,1.69,3.7,3.7,0,0,1-2.4,1.7,4.94,4.94,0,0,1-2.25-.14,21.51,21.51,0,0,1-2-.76,15.67,15.67,0,0,1-6-5.29L19,23.59h0a7,7,0,0,1-1.45-3.69A4,4,0,0,1,18.72,17a.46.46,0,0,1,.07-.07,1.29,1.29,0,0,1,.95-.45h.76c.21,0,.47,0,.72.61l.4,1c.3.75.64,1.57.7,1.69a.66.66,0,0,1,0,.63l-.05.1A2.16,2.16,0,0,1,22,21c-.06.07-.12.15-.19.22a5.26,5.26,0,0,1-.35.41.51.51,0,0,0-.15.72,10.3,10.3,0,0,0,2,2.47,9.28,9.28,0,0,0,2.63,1.67l.24.1c.35.18.56.15.77-.08s.89-1.05,1.13-1.4.47-.3.8-.18,2.08,1,2.44,1.16Z"
fill="#fdfdfd"
/>
</svg>
</a>
</div>
</div>
</article>
<aside className="w-4/12 relative z-0 transition-all delay-200 ease-linear">
<Image
src={traveler}
alt="Traveler"
width={550}
height={850}
className="w-full h-auto object-cover rounded"
/>
</aside>
</div>
</div>
</section>
<section className="bg-[url('/mountains.jpg')] bg-no-repeat bg-cover bg-center">
<div className="py-20 bg-black bg-opacity-20">
<div className="container mx-auto px-4">
<h2 className="text-6xl font-bold text-black mb-3 uppercase">
Gallery{" "}
<span className="inline-block bg-darkGray w-40 h-1 ml-2"></span>
</h2>
<p className="text-sm text-black w-full max-w-[750px]">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et dolor
est voluptatem recusandae! Architecto, laborum? Odio suscipit id
sed. At totam ipsam officia laboriosam sed ratione ipsa
exercitationem omnis sint.
</p>
<Gallery />
</div>
</div>
</section>
</>
);
};
export default Home;
Author:Geekboots