mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-23 01:47:00 +00:00
added sevice ,portfolio , layer,slider component's and added some more template not much tho, fixed some responsive issue's in header component's
This commit is contained in:
merajjahir
@@ -189,7 +189,691 @@
|
||||
|
||||
<!-- section 3 end -->
|
||||
|
||||
<!-- section 4 start -->
|
||||
|
||||
<section class="section_divider">
|
||||
<div>Section 4 (about me template)</div>
|
||||
</section>
|
||||
<!-- about -->
|
||||
<!-- component -->
|
||||
<div class="container mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 h-screen">
|
||||
<div class="max-h-96 md:h-screen">
|
||||
<img class="w-screen h-screen object-cover object-top" src="https://images.pexels.com/photos/270373/pexels-photo-270373.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
|
||||
</div>
|
||||
<div class="flex bg-gray-100 p-10">
|
||||
<div class="mb-auto mt-auto max-w-lg">
|
||||
<h1 class="text-3xl uppercase">Jun Santilla</h1>
|
||||
<p class="font-semibold mb-5">Web Developer</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
||||
<button class="bg-black rounded-md py-3 px-7 mt-6 text-white">Email Me</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- about -->
|
||||
<!-- section 4 end -->
|
||||
|
||||
|
||||
<!-- section 5 start -->
|
||||
<section class="section_divider">
|
||||
<div>Section 5 ( about 2 ) </div>
|
||||
</section>
|
||||
<!-- ====== About Section Start -->
|
||||
<section class="pt-20 lg:pt-[120px] pb-12 lg:pb-[90px] overflow-hidden dark:bg-gray-800">
|
||||
<div class="container mx-auto">
|
||||
<div class="flex flex-wrap justify-between items-center ">
|
||||
<div class="w-full lg:w-6/12 px-4">
|
||||
<div class=" flex justify-center ">
|
||||
<div class="w-full xl:w-1/2 px-3 sm:px-4">
|
||||
<div class="py-3 sm:py-4">
|
||||
<img
|
||||
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-1.jpg"
|
||||
alt=""
|
||||
class="rounded-2xl w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="py-3 sm:py-4">
|
||||
<img
|
||||
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-2.jpg"
|
||||
alt=""
|
||||
class="rounded-2xl w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full xl:w-1/2 px-3 sm:px-4">
|
||||
<div class="my-4 relative z-10">
|
||||
<img
|
||||
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-3.jpg"
|
||||
alt=""
|
||||
class="rounded-2xl w-full"
|
||||
/>
|
||||
<span class="absolute -right-7 -bottom-7 z-[-1]">
|
||||
<svg
|
||||
width="134"
|
||||
height="106"
|
||||
viewBox="0 0 134 106"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3334"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3334 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="104"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 104)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="89.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 89.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="89.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 89.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="89.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 89.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="89.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 89.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="89.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 89.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="89.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 89.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="89.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 89.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="89.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 89.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="89.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 89.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="89.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 89.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="74.6673"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 74.6673)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="31.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 31.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="31.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 31.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="31.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 31.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="31.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 31.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="30.9998"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 30.9998)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="30.9998"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 30.9998)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="30.9998"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 30.9998)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="30.9998"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 30.9998)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="30.9998"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 30.9998)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="74.6668"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 74.6668)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="30.9998"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 30.9998)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="60.0003"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 60.0003)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="16.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 16.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="45.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 45.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="1.66667"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 1.66667 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="45.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 45.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="16.3333"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 16.3333 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="45.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 45.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="31"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 31 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="45.3333"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 45.3333)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="45.6667"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 45.6667 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="45.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 45.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="60.3333"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 60.3333 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="45.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 45.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="88.6667"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 88.6667 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="45.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 45.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="117.667"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 117.667 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="45.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 45.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="74.6667"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 74.6667 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="45.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 45.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="103"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 103 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="45.3338"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 45.3338)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
<circle
|
||||
cx="132"
|
||||
cy="1.66683"
|
||||
r="1.66667"
|
||||
transform="rotate(-90 132 1.66683)"
|
||||
fill="#3056D3"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-1/2 xl:w-5/12 px-4">
|
||||
<div class="mt-10 lg:mt-0">
|
||||
<span class="font-semibold text-lg text-primary mb-2 block dark:text-gray-100">
|
||||
Why Choose Us
|
||||
</span>
|
||||
<h2 class="font-bold text-3xl sm:text-4xl text-dark mb-8 dark:text-cyan-200">
|
||||
Make your customers happy by giving services.
|
||||
</h2>
|
||||
<p class="text-base text-body-color mb-8 dark:text-emerald-100">
|
||||
It is a long established fact that a reader will be distracted
|
||||
by the readable content of a page when looking at its layout.
|
||||
The point of using Lorem Ipsum is that it has a more-or-less.
|
||||
</p>
|
||||
<p class="text-base text-body-color mb-12 dark:text-emerald-100">
|
||||
A domain name is one of the first steps to establishing your
|
||||
brand. Secure a consistent brand image with a domain name that
|
||||
matches your business.
|
||||
</p>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="
|
||||
py-4
|
||||
px-10
|
||||
lg:px-8
|
||||
xl:px-10
|
||||
inline-flex
|
||||
items-center
|
||||
justify-center
|
||||
text-center text-white text-base
|
||||
bg-black
|
||||
hover:bg-opacity-90
|
||||
font-normal
|
||||
rounded-lg
|
||||
"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ====== About Section End -->
|
||||
|
||||
<!-- section 5 end -->
|
||||
|
||||
<!-- section 6 start -->
|
||||
|
||||
|
||||
<!-- section 6 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
|
||||
Reference in New Issue
Block a user