MTPN test

by Petr Haluza

HTML

<link rel="stylesheet" href="https://www.moto-pneu.cz/vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="https://www.moto-pneu.cz/css/style.css?v=1700651983">
<link rel="stylesheet" href="https://www.moto-pneu.cz/css/desktop-header.css?v=1700651982">
<link rel="stylesheet" href="https://www.moto-pneu.cz/css/mobile-header.css?v=1700651983">
<header class="site__header">
            <div class="header">
                <div class="header__megamenu-area megamenu-area"></div>
                <div class="header__topbar-start-bg"></div>
                <div class="header__topbar-start">
                    <div class="topbar topbar--spaceship-start">
                        <div class="topbar__item-text d-none d-xxl-flex"><i class="icon fa fa-phone"></i>&nbsp;(+420) 602 251 800 </div>
                        <div class="topbar__item-text d-none d-xxl-flex"><i class="icon fa fa-envelope"></i>&nbsp;<a href="mailto:[email protected]">[email protected]</a></div>
                    </div>
                </div>
                <div class="header__topbar-end-bg"></div>
                <div class="header__topbar-end">
                    <div class="topbar topbar--spaceship-end">
                        <div class="topbar__item-button">
                            <a class="topbar__button horn-message" href="/statics/partners"><i class="fas fa-bullhorn"></i> Hledáme partnerské pneuservisy</a>
                        </div>
                       
                        <div class="topbar__menu">
                            <button class="topbar__button topbar__button--has-arrow topbar__menu-button" type="button">
                                <span class="topbar__button-label">Jazyk:</span>
                                <span class="topbar__button-title">
                                    <img src="/images/languages/language-1.png" alt="">
                                                                                                       ...

CSS

form.search__body:before {content:""; background: linear-gradient(30deg, #ee775200 50px, #ee7752 50px, #ee775200 100px);background-position: 100% 50%;background-size: 200% 100%;	height: 100%;	width:100%}
.searchActivated.effect form.search__body:before{animation: gradient 3s ease ;}
@keyframes gradient {
	0% {background-position: -100% 50%;}
	50% {background-position: 50% 50%;}
	100% {background-position: 100% 50%;}
}
.search__button.on:after {background:#f0f0f0}
.search__button.on {color:red}
.search__input {
  width: 100%;
  
  padding: 20px 18px;
  
  margin: 0px 0;
  
  background: white;}

JavaScript

jQuery(document).ready(function() {
    setTimeout(function() {
      $('.header__logo').addClass('searchActivated');
			$('.header__search').addClass('searchActivated');
			$('.header__search').addClass('effect');
    }, 1000);
		setTimeout(function() {
      $('.header__logo').removeClass('searchActivated');
			$('.header__search').removeClass('searchActivated');
			$('.header__search').removeClass('effect');
    }, 2000);
		setTimeout(function() {
      $('.search__button').addClass('on');
    }, 2500);
});


$(".header__search").hover(function () {
	$('.header__logo').addClass('searchActivated');
	$('.header__search').addClass('searchActivated');
	$('.search__button').removeClass('on');
});