lizyum

Hello thank you you are very sppedy but there some issues

1- There are some corruptions in the original version of the theme. For example, the theme has expanded. Some shadows have been removed. // 2- I did not want the button added to the right of the logo. 3- There is a misunderstanding about the log in button. I wanted the button itself to be replaced. You made a dropdown menu. // 4- You have taken the middle search area too high. 1-2-3 boxes are too close to the search area. // 5- Logo and menu texts are not aligned. // 6- Let's use the Twitter icon as a circle. // 7- There should be no menu icon on mobile. // 8- The links in the Popular Service area will be 2 columns on mobile and will be left aligned. 2. They should not slip into the line. // 9- FAQ and Sitelink search box schemas are not added.

<div class="absolute right-0 mt-3 rounded-md bg-white opacity-0 pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100 transition duration-400 shadow-sm" style="width:248px;z-index:2;">
<span class="block w-4 h-4 absolute -top-2 right-2 bg-red-50 rotate-45"></span>
<div class="px-3 py-3 bg-red-50 rounded-tl rounded-tr">
    <div class="flex justify-between items-center">
        <img src="images/premium.png" alt="Premium" width="144" height="43" class="w-16 h-auto" />
        <span class="text-sm">to 9,90 TL per month</span>
        <svg fill="currentColor" class="si text-red-500 bi-chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
    </div>
    <div class=" mt-2 bg-white flex px-2 py-2 rounded">
        <div class="mr-2">
            <img src="images/call-center.png" width="24" height="24" alt="Call">
        </div>
        <div class="font-semibold text-gray-900">
            Priority Call Center
        </div>
    </div>
</div>
<ul>
    <li><a href="#!" class="block px-3 py-3 leading-none font-semibold text-gray-900 hover:text-gray-500" title="Log in">Log In</a></li>
    <li><a href="#!" class="block px-3 py-3 leading-none font-semibold text-gray-900 hover:text-gray-500" title="Become a member">Become a Memeber</a></li>
    <hr>
    <li><a href="#!" class="block px-3 py-3 leading-none font-semibold text-gray-900 hover:text-gray-500" title="My orders">My Orders</a></li>
    <li><a href="#!" class="block px-3 py-3 leading-none font-semibold text-gray-900 hover:text-gray-500" title="Questions and requests">Questions and Requests</a></li>
    <li><a href="#!" class="block px-3 py-3 leading-none font-semibold text-gray-900 hover:text-gray-500" title="Special for you">Special for You</a></li>
    <li><a href="#!" class="block px-3 py-3 leading-none font-semibold text-gray-900 hover:text-gray-500" title="Hepsipay">Hepsipay</a></li>
    <li><a href="#!" class="block px-3 py-3 leading-none font-semibold text-gray-900 hover:text-gray-500" title="My user information">My User Information</a></li>
    <li><a href="#!" class="block px-3 py-3 leading-none font-semibold text-gray-900 hover:text-gray-500" title="My Reviews">My Reviews</a></li>
    <hr>
    <li><a href="#!" class="block px-3 py-3 leading-none font-semibold text-gray-900 hover:text-gray-500" title="What I liked">What I liked</a></li>
    <li><a href="#!" class="block px-3 py-3 leading-none font-semibold text-gray-900 hover:text-gray-500" title="All my lists">All My Lists</a></li>
    <hr>
    <li><a href="#!" class="block px-3 py-3 leading-none font-semibold text-gray-900 hover:text-gray-500" title="My Coupons">My Coupons</a></li>
</ul>
</div>

<label for="header-menu-toggle" class="inline-block cursor-pointer text-blue-500">
    <svg fill="currentColor" class="si" xmlns="http://www.w3.org/2000/svg" style="width:2em;height:2em;" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
</label>

<!-- css only offcanvas menu start -->
<input id="header-menu-toggle" title="Open Menu" type="checkbox" class="hidden">
<div>
    <label id="header-menu-overlay" for="header-menu-toggle" class="cursor-pointer"></label>
    <div id="header-menu" class="fixed flex flex-col bg-white">
        <div class="header-menu-title flex-shrink-0 border-b px-1 flex justify-end">
            <label for="header-menu-toggle" class="inline-flex items-center px-3 py-3 mb-0 cursor-pointer hover:text-blue-500">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="si bi-x-circle" style="width:2em;height:2em;" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                    <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
                </svg>
                <span class="ml-2 font-semibold">Close</span>
            </label>
        </div>
        <div class="overflow-auto" style="padding:1px 0 25px 0;">
            <ul>
                <li>
                    <a href="./clening.html" title="Cleaning" class="block py-2 px-3 border-b font-semibold hover:text-blue-500">Cleaning</a>
                </li>
                <li>
                    <a href="./renovation.html" title="Renovation" class="block py-2 px-3 border-b font-semibold hover:text-blue-500">Renovation</a>
                </li>
                <li>
                    <a href="./transport.html" title="Transport" class="block py-2 px-3 border-b font-semibold hover:text-blue-500">Transport</a>
                </li>
                <li>
                    <a href="./repair.html" title="Repair" class="block py-2 px-3 border-b font-semibold hover:text-blue-500">Repair</a>
                </li>
                <li>
                    <a href="./private-lesson.html" title="private lesson" class="block py-2 px-3 border-b font-semibold hover:text-blue-500">Private Lesson</a>
                </li>
                <li>
                    <a href="./technology.html" title="Technology" class="block py-2 px-3 border-b font-semibold hover:text-blue-500">Technology</a>
                </li>
                <li>
                    <a href="./other.html" title="Other" class="block py-2 px-3 border-b font-semibold hover:text-blue-500">Other</a>
                </li>
            </ul>
        </div>
        <div class="mt-auto">
            <a href="login.html" title="Login" class="flex items-center justify-start px-3 py-3 border-t border-b bg-blue-500 hover:bg-white border-blue-500 text-white hover:text-blue-500 transition">
                <svg class="si mr-3" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z"/></svg>
                <span class="font-semibold">Log In</span>
            </a>
            <a href="provide-service.html" title="Other services" class="flex items-center justify-start px-3 py-3 border-b border-blue-500 hover:bg-blue-50 text-gray-900 hover:text-blue-500">
                <svg class="si mr-3" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4h54.1l109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109V104c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7H352c-8.8 0-16-7.2-16-16V102.6c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"/></svg>
                <span class="font-semibold">Provide Service</span>
            </a>
        </div>
    </div>
</div>
<!-- css only offcanvas menu end -->



#header-menu{width:280px;max-width:90%;top:0;bottom:0;right:-200px;opacity:0;z-index:10;pointer-events:none;transition:all 400ms ease;}
#header-menu-toggle:checked + div #header-menu{right: 0;opacity:1;pointer-events:auto;}
#header-menu-toggle:checked + div #header-menu-overlay{background-color:rgba(0,0,0,0.3);position:fixed;top:0;left:0;right:0;bottom:0;margin:0;display:block;z-index:10;}

(function(){
    var scrollToTop = document.getElementById('scroll-to-top');
    var isScrollingUp = false, prevScroll = 0;
    function handleScrolling() {
        var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
        if (currentScroll > 100) {
            scrollToTop.style.opacity = '1';
        } else {
            scrollToTop.style.opacity = '0';
        }
        prevScroll = currentScroll;
      }
    window.addEventListener('scroll', handleScrolling);
})();

rexwebmedia / lizyum Goto Github PK

lizyum's Introduction

lizyum

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent