border add to image

This commit is contained in:
2024-12-11 12:22:12 -05:00
parent 18fff7ba8a
commit 96e0e4fbc2
+20 -20
View File
@@ -36,10 +36,10 @@
<div class="flex flex-wrap w-full justify-between items-center">
<div class="flex w-55percent justify-start">
<div class="px-5 bg-lightgray mr-15 ld-fancy-heading relative">
<h6 class="ld-fh-element relative text-11 m-0 text-black">Update </h6>
<h6 class="ld-fh-element relative text-11 m-0 text-black">Overview </h6>
</div>
<div class="mr-15 ld-fancy-heading relative">
<p class="ld-fh-element relative text-13 m-0">Sign up and receive 20% bonus discount on checkout 👋</p>
<p class="ld-fh-element relative text-13 m-0"> About Tokslaw👋</p>
</div>
<a href="#" class="text-13 text-text btn btn-naked btn-icon-right btn-hover-swp btn-has-label">
<span data-text="Learn more" class="btn-txt">Learn more </span>
@@ -176,7 +176,7 @@
</div>
</div>
<a href="#contact-modal" class="btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-solid mr-15 text-14 tracking-0/1 text-purple-500 lg:mr-0" data-lity="#contact-modal">
<span data-text="Join the community" class="btn-txt">Join the community </span>
<span data-text="Join the community" class="btn-txt">My Internet World </span>
<span class="btn-icon mr-10 w-35 h-35 bg-purple-500 rounded-full">
<svg class="text-14" xmlns="http://www.w3.org/2000/svg" width="19.25" height="19.25" viewBox="0 0 19.25 19.25">
<path d="M-5.581-5.711V-7.733H-7.6A2.027,2.027,0,0,0-9.625-5.711,2.027,2.027,0,0,0-7.6-3.688,2.027,2.027,0,0,0-5.581-5.711Zm1.019,0V-.647A2.027,2.027,0,0,0-2.539,1.375,2.027,2.027,0,0,0-.517-.647V-5.711A2.027,2.027,0,0,0-2.539-7.733,2.027,2.027,0,0,0-4.562-5.711Zm2.022-8.12H-.517v-2.022a2.027,2.027,0,0,0-2.022-2.022,2.027,2.027,0,0,0-2.022,2.022A2.027,2.027,0,0,0-2.539-13.831Zm0,1.019H-7.6a2.027,2.027,0,0,0-2.022,2.022A2.027,2.027,0,0,0-7.6-8.767h5.063A2.027,2.027,0,0,0-.517-10.789,2.027,2.027,0,0,0-2.539-12.812Zm8.12,2.022v2.022H7.6a2.027,2.027,0,0,0,2.022-2.022A2.027,2.027,0,0,0,7.6-12.812,2.027,2.027,0,0,0,5.581-10.789Zm-1.019,0v-5.063a2.027,2.027,0,0,0-2.022-2.022A2.027,2.027,0,0,0,.517-15.853v5.063A2.027,2.027,0,0,0,2.539-8.767,2.027,2.027,0,0,0,4.562-10.789ZM2.539-2.669H.517V-.647A2.027,2.027,0,0,0,2.539,1.375,2.027,2.027,0,0,0,4.562-.647,2.027,2.027,0,0,0,2.539-2.669Zm0-1.019H7.6A2.027,2.027,0,0,0,9.625-5.711,2.027,2.027,0,0,0,7.6-7.733H2.539A2.027,2.027,0,0,0,.517-5.711,2.027,2.027,0,0,0,2.539-3.688Z" transform="translate(9.625 17.875)" fill="#fff"></path>
@@ -184,7 +184,7 @@
</span>
</a>
<a href="#contact-modal" class="btn btn-solid btn-hover-txt-switch-change btn-hover-txt-switch btn-hover-txt-switch-y btn-icon-right bg-blue-700 text-13 text-white font-medium rounded-100 shadow-md module-btn-sm lg:hidden" data-lity="#contact-modal">
<span data-text="Get the App" class="btn-txt" data-transition-delay="true" data-delay-options='{"elements": ".lqd-chars" , "delayType": "animation" , "startDelay": 0, "delayBetween": 32.5}' data-split-text="true" data-split-options='{"type": "chars, words"}'> Get the App </span>
<span data-text="Get the App" class="btn-txt" data-transition-delay="true" data-delay-options='{"elements": ".lqd-chars" , "delayType": "animation" , "startDelay": 0, "delayBetween": 32.5}' data-split-text="true" data-split-options='{"type": "chars, words"}'> Connect </span>
<span class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="8.75" height="8.75" viewBox="0 0 8.75 8.75">
<path d="M2.926-9.324H8.75V-3.5H7.574V-7.355L.82-.574,0-1.395,6.754-8.176H2.926Z" transform="translate(0 9.324)" fill="#fff"></path>
@@ -1033,17 +1033,17 @@
<div class="lqd-section-flow-panel-start-inner sticky top-0 left-0">
<div class="lqd-section-flow-item absolute top-0 left-0 w-full overflow-hidden">
<div class="h-vh-100 lqd-section-flow-item-inner">
<img class="h-full object-cover" decoding="async" src="./assets/images/demo/start-hub-8/AI-concept.png" title="section-flow-11" alt="section-flow-11">
<img class="h-full object-cover" decoding="async" src="./assets/images/demo/start-hub-8/AI-concept.png" title="section-flow-11" alt="section-flow-11" style="border-radius: 50px;">
</div>
</div>
<div class="lqd-section-flow-item absolute top-0 left-0 w-full overflow-hidden">
<div class="h-vh-100 lqd-section-flow-item-inner">
<img class="h-full object-cover" decoding="async" src="./assets/images/demo/start-hub-8/Connect-Family.png" title="img-3" alt="img-3">
<img class="h-full object-cover" decoding="async" src="./assets/images/demo/start-hub-8/Connect-Family.png" title="img-3" alt="img-3" style="border-radius: 50px;">
</div>
</div>
<div class="lqd-section-flow-item absolute top-0 left-0 w-full overflow-hidden">
<div class="h-vh-100 lqd-section-flow-item-inner">
<img class="h-full object-cover" decoding="async" src="./assets/images/demo/start-hub-8/SoftwareDesign.png" title="section-flow-11" alt="section-flow-11">
<img class="h-full object-cover" decoding="async" src="./assets/images/demo/start-hub-8/SoftwareDesign.png" title="section-flow-11" alt="section-flow-11" style="border-radius: 50px;">
</div>
</div>
</div>
@@ -1052,7 +1052,7 @@
<div class="lqd-section-flow-item flex items-center">
<div class="lqd-section-flow-item-inner">
<div class="lqd-section-flow-content-mobile">
<img decoding="async" src="./assets/images/demo/start-hub-8/AI-concept.png" title="section-flow-11" alt="section-flow-11">
<img class="h-full object-cover" decoding="async" src="./assets/images/demo/start-hub-8/AI-concept.png" title="section-flow-11" alt="section-flow-11" style="border-radius: 30px;">
</div>
<div class="flex flex-wrap py-10percent" data-custom-animations="true" data-ca-options='{"animationTarget": "h2, .animation-element, .iconbox, .btn", "duration" : 1000 , "startDelay" : 300 , "delay" : 100 , "ease": "expo.out", "initValues": {"x": "60px", "opacity" : 0} , "animations": {"x": "0px", "opacity" : 1}}'>
<div class="flex flex-wrap pb-200 module-content">
@@ -1220,14 +1220,14 @@
<div class="col col-12 col-md-8 mb-60 p-0 text-center" data-custom-animations="true" data-ca-options='{"animationTarget": ".animation-element, figure, .lqd-split-lines .lqd-lines .split-inner", "duration" : 1000 , "delay" : 100 , "ease": "expo.out", "initValues": {"y": "60px", "opacity" : 0} , "animations": {"y": "0px", "opacity" : 1}}'>
<div class="flex flex-col items-center px-20">
<div class="ld-fancy-heading relative mask-text">
<p class="ld-fh-element relative lqd-split-lines text-18 mb-1/5em text-slate-400" data-split-text="true" data-split-options='{"type": "lines"}'> Trusted by these amazing companies</p>
<p class="ld-fh-element relative lqd-split-lines text-18 mb-1/5em text-slate-400" data-split-text="true" data-split-options='{"type": "lines"}'> Trusted by Enterprise Architects , Full Stack Engineers, Product & Software Lovers</p>
</div>
<div class="ld-fancy-heading relative mask-text">
<h2 class="mb-0 ld-fh-element relative lqd-split-lines" data-split-text="true" data-split-options='{"type": "lines"}'> Testimonials</h2>
<h2 class="mb-0 ld-fh-element relative lqd-split-lines" data-split-text="true" data-split-options='{"type": "lines"}'> Intuitive</h2>
</div>
<div class="ld-fancy-heading relative mask-text">
<h2 class="ld-fh-element relative lqd-highlight-classic lqd-highlight-grow-left lqd-split-lines h2 mb-0/75em" data-split-text="true" data-split-options='{"type": "lines"}'>
<span class="lqd-adv-txt-item">People</span>
<span class="lqd-adv-txt-item">Blog</span>
<span class="relative z-3 lqd-adv-txt-item">
<span class="relative inline-flex rounded-full vertical-top -mr-30">
<img class="lqd-adv-txt-fig w-55 border-5 border-white rounded-full" decoding="async" width="58" height="58" src="./assets/images/demo/start-hub-8/Shape-avatar-1.jpg" alt="testimonials avatar">
@@ -1243,7 +1243,7 @@
<img class="lqd-adv-txt-fig w-55 border-5 border-white rounded-full" decoding="async" width="58" height="58" src="./assets/images/demo/start-hub-8/Shape-avatar-1.jpg" alt="testimonials avatar">
</span>
</span>
<span class="lqd-adv-txt-item">are talking.</span>
<span class="lqd-adv-txt-item">Articles.</span>
</h2>
</div>
<div class="flex py-10 pr-15 pl-25 items-center bg-gray-100 rounded-6 animation-element sm:w-full">
@@ -1255,7 +1255,7 @@
</div>
</div>
<div class=" ml-10 ld-fancy-heading relative animation-element">
<p class="ld-fh-element relative text-14 font-medium m-0 text-slate-600">Trustpilot reviews</p>
<p class="ld-fh-element relative text-14 font-medium m-0 text-slate-600">Riverting information</p>
</div>
<div class="star-rating pl-10 text-slate-600 animation-element" title="5/5">
<i class="star-full">&#9733;</i>
@@ -1278,7 +1278,7 @@
<div class="lqd-testi-quote text-green-600">
<blockquote>
<p class="text-18">
Bring your ideas to life an intuitive visual editor. Create, edit, and customize your site visually and see the changes instantly.
Bring your ideas to life an intuitive Enterprise Architect. Full Stack Engineer, and Security Lover & customize your site and see the changes instantly.
</p>
</blockquote>
</div>
@@ -1384,7 +1384,7 @@
<div class="lqd-testi-quote text-green-600">
<blockquote>
<p class="text-18">
Bring your ideas to life an intuitive visual editor. Create, edit, and customize your site visually and see the changes instantly.
Bring your ideas to life an intuitive Enterprise Architect. Full Stack Engineer, and Security Lover. Customize your site and see the changes instantly.
</p>
</blockquote>
</div>
@@ -1586,7 +1586,7 @@
<h2 class="ld-fh-element inline-block relative lqd-split-lines mb-0/5em text-70" data-split-text="true" data-split-options='{"type": "lines"}'> Have a project in mind?👋</h2>
</div>
<div class="ld-fancy-heading relative mask-text w-410 max-w-full">
<p class="ld-fh-element inline-block relative lqd-split-lines mb-0/5em text-16 leading-20" data-split-text="true" data-split-options='{"type": "lines"}'> Looking for collaboration? Send an email to <a href="mailto:info@tokslaw.com" class="text-dark">info@tokslaw.com</a> to for vailable for enquires and collaborations, </p>
<p class="ld-fh-element inline-block relative lqd-split-lines mb-0/5em text-16 leading-20" data-split-text="true" data-split-options='{"type": "lines"}'> Looking for collaboration? Send an email to <a href="mailto:contact@tokslaw.com" class="text-dark">contact@tokslaw.com</a> to for available for enquires and collaborations, </p>
</div>
</div>
</div>
@@ -1753,7 +1753,7 @@
<h6 class="ld-fh-element inline-block relative mb-0/5em text-9 uppercase tracking-1 text-white-30">REACH ME DIRECTLY</h6>
</div>
<div class="ld-fancy-heading relative">
<p class="ld-fh-element relative mb-1/65em text-18 font-medium text-white">info@tokslaw.com</p>
<p class="ld-fh-element relative mb-1/65em text-18 font-medium text-white">contact@tokslaw.com</p>
</div>
</div>
<div class="w-35percent mb-30 ml-5percent text-center sm:w-full lg:m-0">
@@ -1761,11 +1761,11 @@
<div class="ld-fancy-heading relative">
<h4 class="ld-fh-element mb-1/75em relative text-18 text-white">
<span class="text-1/5em mr-0/25em">🎉</span>
Join the community
Join My World
</h4>
</div>
<div class="ld-fancy-heading relative">
<p class="ld-fh-element relative mb-1/5em text-16 leading-20 text-white-40 hover:text-white-80">Bring your ideas to life an intuitive visual editor. Create, edit, and </p>
<p class="ld-fh-element relative mb-1/5em text-16 leading-20 text-white-40 hover:text-white-80">Bring your ideas to life with an intuitive Enterprise Architect. Full Stack Engineer, and Security Lover. </p>
</div>
<a href="#contact-modal" target="_blank" rel="nofollow" class="btn btn-solid btn-md btn-hover-txt-switch-change btn-hover-txt-switch btn-hover-txt-switch-y btn-icon-shaped bg-green-50 text-green-400 rounded-100" data-lity="#contact-modal">
<span data-text="Join the community" class="btn-txt" data-transition-delay="true" data-delay-options='{"elements": ".lqd-chars" , "delayType": "animation" , "startDelay": 0, "delayBetween": 32.5}' data-split-text="true" data-split-options='{"type": "chars, words"}'> Join the community </span>
@@ -1881,7 +1881,7 @@
</div>
<div class="ld-fancy-heading relative">
<p class="ld-fh-element relative mb-0/5em">
<a href="#" class="text-16 font-bold leading-1/2em">info@tokslaw.com </a>
<a href="#" class="text-16 font-bold leading-1/2em">contact@tokslaw.com </a>
</p>
</div>
</div>