一款交通出行查询在线网站首页模板

h5, menu, car, transport

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3261
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const BOX_SEARCH_ACTIVE = 'box__header--searchActive';
const BOX_MENU_ACTIVE = 'box__header--menuActive';

let $boxHeader = $(".box__header");

let selectorVeichle = {
    attachHandler() {
            let $options = this.$el.find("li");

$options.on("click", function(e) {
                e.preventDefault();
                $options.removeClass("selected");
                $(this).addClass("selected");
            });
        },

init($el) {
            this.$el = $el;
            this.attachHandler();
        }
};

let search = {
    attachHandler() {
            this.$el.find("button").on(
                "click",
                function(e) {
                    $boxHeader.removeClass(BOX_MENU_ACTIVE);
                    $boxHeader.toggleClass(BOX_SEARCH_ACTIVE);
                }.bind(this)
            );
        },

init($el) {
            this.$el = $el;
            this.attachHandler();
        }
};

let menu = {
    attachHandler() {
            this.$el.find("button").on(
                "click",
                function(e) {
                    $boxHeader.removeClass(BOX_SEARCH_ACTIVE);
                    $boxHeader.toggleClass(BOX_MENU_ACTIVE);
                }.bind(this)
            );
        },

init($el) {
            this.$el = $el;
            this.attachHandler();
        }
};

selectorVeichle.init($boxHeader.find(".options"));
search.init($boxHeader.find(".search"));
menu.init($boxHeader.find(".menu"));

编译

CSS

@keyframes hiding {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(80px);
    }
}
@keyframes showing {
    0% {
        transform: translateY(80px);
    }
    100% {
        transform: translateY(0px);
    }
}
body {
    margin: 0;
    padding: 0;
    background-color: #fad8bc;
    background-image: -webkit-linear-gradient(-30deg, #fad8bc 49.99%, #fbe1ca 50%);
    min-height: 100vh;
}
.container {
    padding: 90px 50px;
}
.container__payoff {
    text-align: center;
    font-family: "Nothing You Could Do", cursive;
    font-size: 20px;
    color: #5c5c5c;
}
.container__title {
    font-family: "Encode Sans", sans-serif;
    text-align: center;
    font-weight: 100;
    letter-spacing: 4px;
    font-size: 35px;
    color: #5c5c5c;
    padding-bottom: 20px;
}
.box {
    width: 700px;
    height: 400px;
    margin: 0 auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}
.box__header {
    width: 100%;
    height: 100px;
    background-color: rgba(250, 240, 230, 0.7);
    display: flex;
    align-items: center;
    overflow: hidden;
}
.box__header .menu {
    flex-basis: 10%;
}
.box__header .menu svg {
    width: auto;
    height: 20px;
    display: block;
    padding: 0 30px;
    fill: #5c5c5c;
}
.box__header .menu svg:hover {
    cursor: pointer;
}
.box__header .menu button {
    border: none;
    background: transparent;
    outline: none;
}
.box__header .menu svg#hamburger {
    display: block;
}
.box__header .menu svg#ics {
    display: none;
}
.box__header .options {
    flex-basis: 80%;
}
.box__header .options ul li:nth-child(1) {
    animation-delay: 0.2s;
}
.box__header .options ul li:nth-child(2) {
    animation-delay: 0.5s;
}
.box__header .options ul li:nth-child(3) {
    animation-delay: 0;
}
.box__header .options ul li:nth-child(4) {
    animation-delay: 0.3s;
}
.box__header .options ul li {
    animation: showing 0.2s linear;
    animation-fill-mode: forwards;
    transform: translateY(80px);
    opacity: 0;
}
.box__header .options ul,
.box__header .menu__elements ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
}
.box__header .options ul li,
.box__header .menu__elements ul li {
    position: relative;
    opacity: 0.5;
    transition: opacity 0.5s ease-in-out;
}
.box__header .options ul li .icon svg,
.box__header .menu__elements ul li .icon svg {
    height: 40px;
    display: block;
    margin: 0 auto;
    fill: #5c5c5c;
}
.box__header .options ul li .text,
.box__header .menu__elements ul li .text {
    font-family: "Encode Sans", sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    text-align: center;
    display: block;
    font-weight: 400;
    color: #5c5c5c;
}
.box__header .options ul li:hover,
.box__header .menu__elements ul li:hover {
    opacity: 1;
    cursor: pointer;
}
.box__header .options ul li.selected,
.box__header .menu__elements ul li.selected {
    opacity: 1;
}
.box__header .options ul li.selected:after,
.box__header .menu__elements ul li.selected:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 3px;
    background-color: #ffb584;
    bottom: -21px;
}
.box__header .menu__elements {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 80%;
    top: 8px;
    height: 100px;
}
.box__header .menu__elements ul li:nth-child(1) {
    animation-delay: 1.1s;
}
.box__header .menu__elements ul li:nth-child(2) {
    animation-delay: 1.5s;
}
.box__header .menu__elements ul li:nth-child(3) {
    animation-delay: 1.3s;
}
.box__header .menu__elements ul li:nth-child(4) {
    animation-delay: 0.9s;
}
.box__header .menu__elements ul li {
    transform: translateY(100px);
    opacity: 0;
}
.box__header .search {
    flex-basis: 10%;
}
.box__header .search input {
    width: 400px;
    border: none;
    border-bottom: solid 3px #ffb584;
    background: transparent;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 35px;
    top: 30px;
    transform: translateY(80px);
    z-index: 2;
    outline: none;
    font-size: 14px;
    font-family: "Encode Sans", sans-serif;
}
.box__header .search button {
    border: none;
    background: transparent;
    outline: none;
}
.box__header .search svg {
    width: auto;
    height: 20px;
    display: block;
    padding: 0 30px;
    fill: #5c5c5c;
}
.box__header .search svg:hover {
    cursor: pointer;
}
.box__header .search svg#lens {
    display: block;
}
.box__header .search svg#ics {
    display: none;
}
.box__header--searchActive .options ul li,
.box__header--menuActive .options ul li {
    transform: translateY(0);
    animation: hiding 0.2s linear;
    animation-fill-mode: forwards;
}
.box__header--searchActive .options li:nth-child(1),
.box__header--menuActive .options li:nth-child(1) {
    animation-delay: 0.2s;
}
.box__header--searchActive .options li:nth-child(2),
.box__header--menuActive .options li:nth-child(2) {
    animation-delay: 0.5s;
}
.box__header--searchActive .options li:nth-child(3),
.box__header--menuActive .options li:nth-child(3) {
    animation-delay: 0;
}
.box__header--searchActive .options li:nth-child(4),
.box__header--menuActive .options li:nth-child(4) {
    animation-delay: 0.3s;
}
.box__header--menuActive .menu__elements ul li {
    animation: showing 0.2s linear;
    animation-fill-mode: forwards;
    opacity: 0.5;
}
.box__header--menuActive .menu svg#hamburger {
    display: none;
}
.box__header--menuActive .menu svg#ics {
    display: block;
}
.box__header--searchActive .search input {
    animation: showing 0.2s linear;
    animation-delay: 0.7s;
    animation-fill-mode: forwards;
}
.box__header--searchActive .search svg#lens {
    display: none;
}
.box__header--searchActive .search svg#ics {
    display: block;
}
.box__content {
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 3;
    background: #faf7f2;
    min-height: calc(100% - 100px);
}
.box__content p {
    font-family: "Encode Sans", sans-serif;
    font-size: 16px;
    color: #5c5c5c;
    text-align: center;
    margin: 0 auto;
    letter-spacing: 0.6px;
    margin-bottom: 25px;
    padding-top: 70px;
}
.box__content input {
    margin: 0 auto;
    width: 390px;
    border-radius: 3px;
    height: 36px;
    font-size: 14px;
    font-family: "Encode Sans", sans-serif;
    border: 1px solid #c2bab8;
    outline: none;
    padding: 0 15px;
    color: #5c5c5c;
    background: url("http://www.mantovanig.it/pen/svg/placeholder-filled-point.svg") no-repeat scroll;
    padding-right: 30px;
    background-size: 20px;
    background-position: calc(100% - 10px);
}
.box__content input::placeholder {
    color: #c2bab8;
}
.box__nav .next {
    position: absolute;
    bottom: 25px;
    right: 20px;
    z-index: 4;
}
.box__nav .next button {
    border: none;
    background: transparent;
    outline: none;
    font-family: "Encode Sans", sans-serif;
    color: #5c5c5c;
    letter-spacing: 2px;
    font-size: 14px;
}
.box__nav .next button:after {
    content: '';
    display: inline-block;
    background: url("http://www.mantovanig.it/pen/svg/arrow-pointing-to-right.svg") no-repeat scroll;
    background-size: 20px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-top: -4px;
    margin-left: 10px;
}

HTML

<div class="box">
        <div class="box__header">
            <div class="menu">
                <button>
                    <svg id="hamburger" version="1.1" id="Capa_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 53 53" style="enable-background:new 0 0 53 53;" xml:space="preserve">
                        <g>
                            <g>
                                <path d="M2,13.5h49c1.104,0,2-0.896,2-2s-0.896-2-2-2H2c-1.104,0-2,0.896-2,2S0.896,13.5,2,13.5z" />
                                <path d="M2,28.5h49c1.104,0,2-0.896,2-2s-0.896-2-2-2H2c-1.104,0-2,0.896-2,2S0.896,28.5,2,28.5z" />
                                <path d="M2,43.5h49c1.104,0,2-0.896,2-2s-0.896-2-2-2H2c-1.104,0-2,0.896-2,2S0.896,43.5,2,43.5z" />
                            </g>
                        </g>
                    </svg>
                    <svg id="ics" version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                        <g>
                            <g>
                                <path d="M505.943,6.058c-8.077-8.077-21.172-8.077-29.249,0L6.058,476.693c-8.077,8.077-8.077,21.172,0,29.249
              C10.096,509.982,15.39,512,20.683,512c5.293,0,10.586-2.019,14.625-6.059L505.943,35.306
              C514.019,27.23,514.019,14.135,505.943,6.058z" />
                            </g>
                        </g>
                        <g>
                            <g>
                                <path d="M505.942,476.694L35.306,6.059c-8.076-8.077-21.172-8.077-29.248,0c-8.077,8.076-8.077,21.171,0,29.248l470.636,470.636
              c4.038,4.039,9.332,6.058,14.625,6.058c5.293,0,10.587-2.019,14.624-6.057C514.018,497.866,514.018,484.771,505.942,476.694z" />
                            </g>
                        </g>
                    </svg>
                </button>
                <div class="menu__elements">
                    <ul>
                        <li>
                            <span class="icon">
              <svg version="1.1" id="Capa_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 502.643 502.643" style="enable-background:new 0 0 502.643 502.643;" xml:space="preserve">
<g>
	<g>
		<path d="M251.256,237.591c37.166,0,67.042-30.048,67.042-66.977c0.043-37.037-29.876-66.999-67.042-66.999
			c-36.908,0-66.869,29.962-66.869,66.999C184.387,207.587,214.349,237.591,251.256,237.591z"/>
		<path d="M305.032,248.506H197.653c-19.198,0-34.923,17.602-34.923,39.194v107.854c0,1.186,0.604,2.243,0.669,3.473h175.823
			c0.129-1.229,0.626-2.286,0.626-3.473V287.7C339.912,266.108,324.187,248.506,305.032,248.506z"/>
		<path d="M431.588,269.559c29.832,0,53.754-24.008,53.754-53.668s-23.922-53.711-53.754-53.711
			c-29.617,0-53.582,24.051-53.582,53.711C377.942,245.53,401.972,269.559,431.588,269.559z"/>
		<path d="M474.708,278.317h-86.046c-15.445,0-28.064,14.107-28.064,31.472v86.413c0,0.928,0.453,1.812,0.518,2.826h141.03
			c0.065-1.014,0.496-1.898,0.496-2.826v-86.413C502.707,292.424,490.11,278.317,474.708,278.317z"/>
		<path d="M71.011,269.559c29.789,0,53.733-24.008,53.733-53.668S100.8,162.18,71.011,162.18c-29.638,0-53.603,24.051-53.603,53.711
			S41.373,269.559,71.011,269.559L71.011,269.559z"/>
		<path d="M114.109,278.317H27.977C12.576,278.317,0,292.424,0,309.789v86.413c0,0.928,0.453,1.812,0.539,2.826h141.03
			c0.065-1.014,0.475-1.898,0.475-2.826v-86.413C142.087,292.424,129.489,278.317,114.109,278.317z"/>
	</g>
</g>
</svg>
            </span>
                            <span class="text">ABOUT</span>
                        </li>
                        <li>
                            <span class="icon">
              <svg version="1.1" id="Layer_1_1_" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<g>
	<path d="M48,34c0-0.265-0.105-0.52-0.293-0.707L47.414,33l0.293-0.293C47.895,32.52,48,32.265,48,32v-3.586l11.707-11.707
		l-1.414-1.414L52,21.586L42.414,12l6.293-6.293l-1.414-1.414L35.586,16H32c-0.265,0-0.52,0.105-0.707,0.293L31,16.586l-0.293-0.293
		l-0.379-0.379l-3.621-3.621C26.52,12.105,26.265,12,26,12h-1.586l-7.707-7.707l-1.414,1.414L17.586,8L8,17.586l-2.293-2.293
		l-1.414,1.414L12,24.414V30c0,0.265,0.105,0.52,0.293,0.707L15,33.414v3.172L4.293,47.293l1.414,1.414L11,43.414L20.586,53
		l-5.293,5.293l1.414,1.414L27.414,49H31c0.265,0,0.52-0.105,0.707-0.293L32.414,48h3.172l11.707,11.707l1.414-1.414L42.414,52
		L52,42.414l6.293,6.293l1.414-1.414L48,35.586V34z M41,13.414L50.586,23L47,26.586L37.414,17L41,13.414z M35.586,18L46,28.414
		v3.172L32.414,18H35.586z M46,34.414v1.172L35.586,46h-3.172L27,40.586v-1.172l1.293,1.293l1.414-1.414L18.328,27.914
		C18.117,27.702,18,27.421,18,27.121C18,26.503,18.503,26,19.121,26c0.3,0,0.581,0.117,0.793,0.328l7.379,7.379l1.414-1.414
		l-7.379-7.379C21.117,24.702,21,24.421,21,24.121C21,23.503,21.503,23,22.121,23c0.3,0,0.581,0.117,0.793,0.328l7.379,7.379
		l1.414-1.414l-7.379-7.379C24.117,21.702,24,21.421,24,21.121C24,20.503,24.503,20,25.121,20c0.3,0,0.581,0.117,0.793,0.328
		l7.379,7.379l1.414-1.414l-7.379-7.379C27.117,18.702,27,18.421,27,18.121C27,17.503,27.503,17,28.121,17
		c0.3,0,0.581,0.117,0.793,0.328l0.379,0.379L46,34.414z M19,9.414L22.586,13L13,22.586L9.414,19L19,9.414z M14,24.414L24.414,14
		h1.172l1.272,1.272c-1.06,0.472-1.804,1.516-1.847,2.739c-1.632,0.058-2.942,1.368-3,3c-1.632,0.058-2.942,1.368-3,3
		C17.342,24.07,16,25.438,16,27.121c0,0.834,0.325,1.618,0.914,2.207L17.586,30L16,31.586l-2-2V24.414z M22,51.586L12.414,42
		L16,38.414L25.586,48L22,51.586z M27.414,47L17,36.586v-3.172l2-2l6,6V41c0,0.265,0.105,0.52,0.293,0.707L30.586,47H27.414z
		 M41,50.586L37.414,47L47,37.414L50.586,41L41,50.586z"/>
	<rect x="44.586" y="41" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -16.2254 44.8284)" width="2.828" height="2"/>
	<rect x="20" y="45.586" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -27.0833 28.6152)" width="2" height="2.828"/>
	<rect x="16.586" y="13" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.6274 16.8284)" width="2.828" height="2"/>
	<rect x="41" y="16.586" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.4264 34.9706)" width="2" height="2.828"/>
</g>
</svg>

</span>
                            <span class="text">PARTNERS</span>
                        </li>
                        <li>
                            <span class="icon">
              <svg version="1.1" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 470 470" xmlns:xlink="https://www.w3.org/1999/xlink" enable-background="new 0 0 470 470">
  <g>
    <path d="M430.809,30h-40.491c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5,7.5,7.5h13.952c-2.827,4.673-4.457,10.148-4.457,15.997v354.509   c0,4.142,3.357,7.5,7.5,7.5s7.5-3.358,7.5-7.5V60.997c0-8.821,7.176-15.997,15.996-15.997c8.821,0,15.998,7.176,15.998,15.997   v354.509c0,21.777-17.717,39.494-39.494,39.494s-39.494-17.717-39.494-39.494V7.5c0-4.142-3.357-7.5-7.5-7.5H15.693   c-4.143,0-7.5,3.358-7.5,7.5v408.006C8.193,445.554,32.64,470,62.688,470h344.625c30.048,0,54.494-24.446,54.494-54.494V60.997   C461.807,43.905,447.901,30,430.809,30z M62.688,455c-21.777,0-39.494-17.717-39.494-39.494V15h329.625v400.506   c0,15.526,6.529,29.559,16.983,39.494H62.688z"/>
    <path d="m320.318,40h-264.625c-4.143,0-7.5,3.358-7.5,7.5v75c0,4.142 3.357,7.5 7.5,7.5h264.625c4.143,0 7.5-3.358 7.5-7.5v-75c0-4.142-3.357-7.5-7.5-7.5zm-7.5,75h-249.625v-60h249.625v60z"/>
    <path d="m320.318,145h-264.625c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5 7.5,7.5h264.625c4.143,0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5z"/>
    <path d="m320.318,205h-117.312c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5 7.5,7.5h117.313c4.143,0 7.5-3.358 7.5-7.5s-3.358-7.5-7.501-7.5z"/>
    <path d="m173.006,205h-117.313c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5 7.5,7.5h117.313c4.143,0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5z"/>
    <path d="m320.318,235h-117.312c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5 7.5,7.5h117.313c4.143,0 7.5-3.358 7.5-7.5s-3.358-7.5-7.501-7.5z"/>
    <path d="m173.006,235h-117.313c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5 7.5,7.5h117.313c4.143,0 7.5-3.358 7.5-7.5s-3.358-7.5-7.5-7.5z"/>
    <path d="m320.318,265h-117.312c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5 7.5,7.5h117.313c4.143,0 7.5-3.358 7.5-7.5s-3.358-7.5-7.501-7.5z"/>
    <path d="m320.318,295h-117.312c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5 7.5,7.5h117.313c4.143,0 7.5-3.358 7.5-7.5s-3.358-7.5-7.501-7.5z"/>
    <path d="m203.006,340h77.313c4.143,0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-77.313c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5 7.5,7.5z"/>
    <path d="m280.318,415h-77.313c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5 7.5,7.5h77.313c4.143,0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5z"/>
    <path d="m320.318,385h-117.312c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5 7.5,7.5h117.313c4.143,0 7.5-3.358 7.5-7.5s-3.358-7.5-7.501-7.5z"/>
    <path d="m173.006,265h-117.313c-4.143,0-7.5,3.358-7.5,7.5v150c0,4.142 3.357,7.5 7.5,7.5h117.313c4.143,0 7.5-3.358 7.5-7.5v-150c0-4.142-3.358-7.5-7.5-7.5zm-7.5,150h-102.313v-135h102.313v135z"/>
  </g>
</svg>

</span>
                            <span class="text">BLOG</span>
                        </li>
                        <li>
                            <span class="icon">
              <svg version="1.1" id="Capa_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 51.413 51.413" style="enable-background:new 0 0 51.413 51.413;" xml:space="preserve">
<g>
	<g>
		<path style="fill:#010002;" d="M25.989,12.274c8.663,0.085,14.09-0.454,14.823,9.148h10.564c0-14.875-12.973-16.88-25.662-16.88
			c-12.69,0-25.662,2.005-25.662,16.88h10.482C11.345,11.637,17.398,12.19,25.989,12.274z"/>
		<path style="fill:#010002;" d="M5.291,26.204c2.573,0,4.714,0.154,5.19-2.377c0.064-0.344,0.101-0.734,0.101-1.185H10.46H0
			C0,26.407,2.369,26.204,5.291,26.204z"/>
		<path style="fill:#010002;" d="M40.88,22.642h-0.099c0,0.454,0.039,0.845,0.112,1.185c0.502,2.334,2.64,2.189,5.204,2.189
			c2.936,0,5.316,0.193,5.316-3.374H40.88z"/>
		<path style="fill:#010002;" d="M35.719,20.078v-1.496c0-0.669-0.771-0.711-1.723-0.711h-1.555c-0.951,0-1.722,0.042-1.722,0.711
			v1.289v1h-11v-1v-1.289c0-0.669-0.771-0.711-1.722-0.711h-1.556c-0.951,0-1.722,0.042-1.722,0.711v1.496v1.306
			C12.213,23.988,4.013,35.073,3.715,36.415l0.004,8.955c0,0.827,0.673,1.5,1.5,1.5h40c0.827,0,1.5-0.673,1.5-1.5v-9
			c-0.295-1.303-8.493-12.383-11-14.987V20.078z M19.177,37.62c-0.805,0-1.458-0.652-1.458-1.458s0.653-1.458,1.458-1.458
			s1.458,0.652,1.458,1.458S19.982,37.62,19.177,37.62z M19.177,32.62c-0.805,0-1.458-0.652-1.458-1.458s0.653-1.458,1.458-1.458
			s1.458,0.652,1.458,1.458S19.982,32.62,19.177,32.62z M19.177,27.621c-0.805,0-1.458-0.652-1.458-1.458
			c0-0.805,0.653-1.458,1.458-1.458s1.458,0.653,1.458,1.458C20.635,26.969,19.982,27.621,19.177,27.621z M25.177,37.62
			c-0.805,0-1.458-0.652-1.458-1.458s0.653-1.458,1.458-1.458c0.806,0,1.458,0.652,1.458,1.458S25.983,37.62,25.177,37.62z
			 M25.177,32.62c-0.805,0-1.458-0.652-1.458-1.458s0.653-1.458,1.458-1.458c0.806,0,1.458,0.652,1.458,1.458
			S25.983,32.62,25.177,32.62z M25.177,27.621c-0.805,0-1.458-0.652-1.458-1.458c0-0.805,0.653-1.458,1.458-1.458
			c0.806,0,1.458,0.653,1.458,1.458C26.635,26.969,25.983,27.621,25.177,27.621z M31.177,37.62c-0.806,0-1.458-0.652-1.458-1.458
			s0.652-1.458,1.458-1.458s1.458,0.652,1.458,1.458S31.983,37.62,31.177,37.62z M31.177,32.62c-0.806,0-1.458-0.652-1.458-1.458
			s0.652-1.458,1.458-1.458s1.458,0.652,1.458,1.458S31.983,32.62,31.177,32.62z M31.177,27.621c-0.806,0-1.458-0.652-1.458-1.458
			c0-0.805,0.652-1.458,1.458-1.458s1.458,0.653,1.458,1.458C32.635,26.969,31.983,27.621,31.177,27.621z"/>
	</g>
</g>
</svg>

</span>
                            <span class="text">CONTACT</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="options">
                <ul>
                    <li>
                        <span class="icon">
              <svg version="1.1" id="Capa_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 436.842 436.842" style="enable-background:new 0 0 436.842 436.842;" xml:space="preserve">
<path d="M343.746,154.841c-12.696,0-24.804,2.558-35.842,7.18l-26.394-51.211h36.89c4.002,0,7.258,3.256,7.258,7.258
	s-3.256,7.258-7.258,7.258h-7.871c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5,7.5,7.5h7.871c12.273,0,22.258-9.985,22.258-22.258
	s-9.984-22.258-22.258-22.258h-49.192c-2.615,0-5.042,1.363-6.404,3.596c-1.361,2.233-1.461,5.015-0.263,7.34l13.125,25.467H167.423
	l-10.92-21.403h17.269c4.143,0,7.5-3.358,7.5-7.5s-3.357-7.5-7.5-7.5h-49.193c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5,7.5,7.5h15.084
	l14.576,28.568l-17.132,26.543c-13.113-7.065-28.101-11.08-44.011-11.08C41.763,154.841,0,196.603,0,247.936
	c0,51.333,41.763,93.096,93.096,93.096c48.808,0,88.961-37.757,92.793-85.596h22.007l-8.549,27.818h-4.922
	c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5,7.5,7.5h27c4.143,0,7.5-3.358,7.5-7.5s-3.357-7.5-7.5-7.5h-6.386l9.869-32.114l62.406-96.327
	l7.269,14.103c-26.357,16.458-43.933,45.723-43.933,79.02c0,51.333,41.763,93.096,93.097,93.096
	c51.333,0,93.096-41.763,93.096-93.096C436.842,196.603,395.079,154.841,343.746,154.841z M162.121,154.826l43.678,85.61h-19.911
	c-2.162-26.985-15.882-50.758-36.193-66.359L162.121,154.826z M170.824,240.436h-63.96l34.661-53.699
	C157.734,199.592,168.745,218.724,170.824,240.436z M93.096,326.032C50.033,326.032,15,290.999,15,247.936
	c0-43.062,35.033-78.096,78.096-78.096c12.914,0,25.095,3.17,35.837,8.743l-42.139,65.285c-1.489,2.307-1.598,5.244-0.284,7.655
	c1.313,2.411,3.84,3.912,6.586,3.912h77.728C167.036,294.992,133.628,326.032,93.096,326.032z M218.819,232.949l-43.743-85.737
	h99.289L218.819,232.949z M343.746,326.032c-43.063,0-78.097-35.034-78.097-78.096c0-27.498,14.298-51.704,35.838-65.623
	l35.592,69.059c1.332,2.583,3.954,4.065,6.673,4.065c1.157,0,2.331-0.269,3.43-0.835c3.683-1.897,5.129-6.42,3.231-10.103
	l-35.603-69.079c8.956-3.586,18.714-5.581,28.936-5.581c43.063,0,78.096,35.034,78.096,78.096
	C421.842,290.999,386.809,326.032,343.746,326.032z"/>
              </svg>
            </span>
                        <span class="text">BICYCLE</span>
                    </li>
                    <li>
                        <span class="icon">
              <svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
                <g>
                  <g>
                    <path d="M478.153,189.467l-121.409-9.384l-10.975-54.729c-0.813-4.052-4.756-6.681-8.808-5.866
                      c-4.053,0.813-6.679,4.756-5.866,8.808l11.711,58.401l-0.562,1.793l-20.045-12.132l6.388-10.759
                      c2.11-3.553,0.939-8.145-2.615-10.255c-3.553-2.11-8.144-0.939-10.255,2.615l-21.874,36.841c-2.11,3.553-0.939,8.145,2.615,10.255
                      c1.198,0.711,2.514,1.05,3.813,1.05c2.555,0,5.043-1.308,6.441-3.665l7.845-13.213l23.074,13.965l-2.826,9.012h-63.962
                      l-16.816-53.238c-2.932-9.26-11.425-15.482-21.133-15.482c-2.248,0-4.487,0.343-6.676,1.027
                      c-11.65,3.681-18.136,16.155-14.46,27.809l28.39,89.884h-20.679l-15.138-44.907c-1.026-3.044-3.88-5.093-7.092-5.093h-56.261
                      l-13.749-22.403c-1.327-2.163-3.659-3.492-6.186-3.557l-8.613-27.277c-2.933-9.26-11.427-15.481-21.133-15.481
                      c-2.25,0-4.488,0.343-6.675,1.027c-11.654,3.682-18.141,16.158-14.46,27.81l4.396,13.91H21.955c-4.133,0-7.483,3.35-7.483,7.483
                      v98.907H7.483c-4.133,0-7.483,3.35-7.483,7.483c0,4.133,3.35,7.483,7.483,7.483h6.988v20.47c0,4.133,3.35,7.483,7.483,7.483
                      h22.242c3.722,32.106,31.064,57.115,64.151,57.115c35.62,0,64.599-28.979,64.599-64.599c0-35.62-28.979-64.599-64.599-64.599
                      c-33.087,0-60.429,25.009-64.151,57.115H29.438V307.59h2.349c4.133,0,7.483-3.35,7.483-7.483s-3.35-7.483-7.483-7.483h-2.349
                      v-53.443h11.812c16.595,0,30.095-13.495,30.095-30.083V201.2h45.317l35.78,58.301c6.69,10.9,18.79,17.672,31.58,17.672h91.55
                      c4.133,0,7.483-3.35,7.483-7.483s-3.35-7.483-7.483-7.483h-19.728l-29.813-94.389c-1.194-3.785,0.912-7.838,4.673-9.026
                      c0.72-0.224,1.456-0.339,2.19-0.339c3.152,0,5.912,2.023,6.863,5.029l18.467,58.462c0.983,3.113,3.872,5.229,7.136,5.229h64.751
                      l-10.989,35.034h-15.918c-4.133,0-7.483,3.35-7.483,7.483s3.35,7.483,7.483,7.483h21.414c3.27,0,6.162-2.123,7.14-5.244
                      l24.121-76.901l121.123,9.361c4.415,0.341,7.875,4.078,7.875,8.508v16.935c0,4.133,3.35,7.483,7.483,7.483s7.483-3.35,7.483-7.483
                      v-16.935C499.842,200.698,490.315,190.406,478.153,189.467z M108.348,278.428c27.367,0,49.632,22.265,49.632,49.632
                      c0,27.367-22.265,49.632-49.632,49.632c-27.367,0-49.632-22.265-49.632-49.632C58.716,300.693,80.98,278.428,108.348,278.428z
                       M56.378,209.098c0,8.335-6.787,15.116-15.128,15.116H29.438V201.2h26.94V209.098z M90.253,186.233l-5.82-18.418
                      c-1.195-3.783,0.912-7.834,4.675-9.024c0.72-0.224,1.455-0.338,2.189-0.338c3.152,0,5.912,2.023,6.864,5.028l7.184,22.753H90.253z
                       M184.022,262.206c-7.624,0-14.837-4.036-18.825-10.534l-15.035-24.499h41.701l11.81,35.034H184.022z"/>
                  </g>
                </g>
                <g>
                  <g>
                    <path d="M422.196,314.831c-1.611-3.806-5.999-5.587-9.808-3.977c-3.806,1.61-5.587,6.002-3.977,9.808
                      c0.99,2.339,1.492,4.828,1.492,7.398c0,10.487-8.532,19.019-19.019,19.019c-10.487,0-19.019-8.532-19.019-19.019
                      c0-10.487,8.532-19.019,19.019-19.019c4.133,0,7.483-3.35,7.483-7.483s-3.35-7.483-7.483-7.483
                      c-18.74,0-33.986,15.246-33.986,33.986c0,18.739,15.246,33.986,33.986,33.986c18.739,0,33.986-15.246,33.986-33.986
                      C424.871,323.477,423.97,319.026,422.196,314.831z"/>
                  </g>
                </g>
                <g>
                  <g>
                    <path d="M108.348,294.074c-18.74,0-33.986,15.246-33.986,33.986c0,18.739,15.246,33.986,33.986,33.986
                      c18.734,0,33.974-15.246,33.974-33.986C142.322,309.321,127.081,294.074,108.348,294.074z M108.348,347.079
                      c-10.487,0-19.019-8.532-19.019-19.019s8.532-19.019,19.019-19.019c10.481,0,19.008,8.532,19.008,19.019
                      S118.828,347.079,108.348,347.079z"/>
                  </g>
                </g>
                <g>
                  <g>
                    <path d="M504.517,292.623h-4.674v-32.858c0-4.133-3.35-7.483-7.483-7.483s-7.483,3.35-7.483,7.483v32.858h-15.6
                      c-4.133,0-7.483,3.35-7.483,7.483c0,4.133,3.35,7.483,7.483,7.483h15.6v12.987h-29.839c-3.722-32.105-31.064-57.115-64.151-57.115
                      c-33.088,0-60.429,25.009-64.152,57.115h-138.66c-4.133,0-7.483,3.35-7.483,7.483s3.35,7.483,7.483,7.483h138.659
                      c3.722,32.106,31.064,57.115,64.152,57.115c33.087,0,60.429-25.009,64.151-57.115h37.322c4.133,0,7.483-3.35,7.483-7.483v-20.47
                      h4.674c4.133,0,7.483-3.35,7.483-7.483S508.65,292.623,504.517,292.623z M390.885,377.692c-27.367,0-49.632-22.265-49.632-49.632
                      c0-27.367,22.265-49.632,49.632-49.632c27.367,0,49.632,22.265,49.632,49.632C440.517,355.427,418.252,377.692,390.885,377.692z"
                      />
                  </g>
                </g>
                <g>
                  <g>
                    <path d="M465.269,216.961c-17.565,0-31.856,14.291-31.856,31.856c0,17.572,14.291,31.868,31.856,31.868
                      c4.133,0,7.483-3.35,7.483-7.483v-48.757C472.753,220.311,469.402,216.961,465.269,216.961z M457.786,263.967
                      c-5.569-2.765-9.406-8.517-9.406-15.15c0-6.627,3.837-12.376,9.406-15.139V263.967z"/>
                  </g>
                </g>
                </svg>
            </span>
                        <span class="text">CAR</span>
                    </li>
                    <li class="selected">
                        <span class="icon">
              <svg version="1.1" id="Capa_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 452 452" style="enable-background:new 0 0 452 452;" xml:space="preserve">
<g>
	<path d="M418.09,101.5H123.75c-29.467,0-54.269,21.113-58.973,50.203l-15.021,92.92c-1.524,9.43-0.663,19.184,2.488,28.204
		c2.418,6.928,6.073,13.228,10.775,18.673H24v-6c0-3.313-2.687-6-6-6s-6,2.687-6,6v6H6c-3.313,0-6,2.687-6,6s2.687,6,6,6h6v41
		c0,3.313,2.687,6,6,6s6-2.687,6-6v-41h53.397c8.871,5.244,18.905,8,29.303,8h97.592c2.491,21.915,21.137,39,43.708,39
		s41.216-17.085,43.708-39H418.09c18.698,0,33.91-15.212,33.91-33.91V135.41C452,116.712,436.788,101.5,418.09,101.5z M402,293.64
		v5.86h-9v-60h47v25h-8.86C415.072,264.5,402,277.572,402,293.64z M381,299.5h-60.869V179.921c0-9.606,7.815-17.421,17.422-17.421
		h26.025c9.606,0,17.422,7.815,17.422,17.421V299.5z M76.623,153.618c3.76-23.246,23.579-40.118,47.127-40.118h294.34
		c12.081,0,21.91,9.829,21.91,21.91v92.09h-47v-47.579c0-16.223-13.198-29.421-29.422-29.421h-26.025
		c-16.224,0-29.422,13.198-29.422,29.421V227.5H64.68L76.623,153.618z M80.253,291.067c-7.768-5.514-13.535-13.189-16.679-22.196
		c-2.496-7.145-3.178-14.867-1.972-22.333l1.138-7.038h245.391v60h-18.352l-7.558-20.111c-0.879-2.34-3.117-3.889-5.616-3.889
		h-57.21c-2.5,0-4.737,1.55-5.616,3.89l-7.557,20.11H106.7C97.172,299.5,88.026,296.584,80.253,291.067z M248,338.5
		c-17.295,0-31.43-13.792-31.983-30.955l7.533-20.045h48.899l7.534,20.045C279.43,324.708,265.295,338.5,248,338.5z M418.09,299.5
		H414v-5.86c0-9.451,7.688-17.14,17.14-17.14H440v1.09C440,289.671,430.171,299.5,418.09,299.5z"/>
	<path d="M91,216.5h146.783c8.391,0,15.217-6.826,15.217-15.217v-35.566c0-8.391-6.826-15.217-15.217-15.217H113.496
		c-11.84,0-21.916,8.854-23.438,20.596l-5.008,38.633c-0.222,1.711,0.304,3.436,1.443,4.732C87.632,215.757,89.274,216.5,91,216.5z
		 M241,165.717v35.566c0,1.774-1.443,3.217-3.217,3.217H184v-42h53.783C239.557,162.5,241,163.943,241,165.717z M101.958,172.639
		c0.749-5.78,5.71-10.139,11.538-10.139H172v42H97.828L101.958,172.639z"/>
	<path d="M248,288.313c-10.028,0-18.188,8.159-18.188,18.188s8.159,18.188,18.188,18.188s18.188-8.159,18.188-18.188
		S258.028,288.313,248,288.313z M248,312.688c-3.412,0-6.188-2.776-6.188-6.188s2.775-6.188,6.188-6.188s6.188,2.776,6.188,6.188
		S251.412,312.688,248,312.688z"/>
	<path d="M337.781,215.5h-6.563c-3.313,0-6,2.687-6,6s2.687,6,6,6h6.563c3.313,0,6-2.687,6-6S341.095,215.5,337.781,215.5z"/>
</g>
</svg>
            </span>
                        <span class="text">CARAVAN</span>
                    </li>
                    <li>
                        <span class="icon">
              <svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 467.16 467.16" style="enable-background:new 0 0 467.16 467.16;" xml:space="preserve">
<g>
	<g>
		<g>
			<path d="M391.083,210.102c-10.262,0-20.05,2.054-28.991,5.754l-4.204-7.886c10.289-4.373,21.533-6.766,33.195-6.766
				c14.523,0,28.863,3.744,41.472,10.826c3.608,2.028,8.183,0.746,10.212-2.866c2.028-3.611,0.745-8.184-2.866-10.212
				c-14.846-8.339-31.727-12.748-48.817-12.748c-14.184,0-27.84,3.01-40.273,8.49l-7.419-13.917c0.697,0.047,1.398,0.08,2.107,0.08
				h17.363c4.143,0,7.5-3.358,7.5-7.5v-48.49c0-4.142-3.357-7.5-7.5-7.5h-17.363c-11.763,0-22.005,6.624-27.203,16.335
				l-13.238-24.832c-1.303-2.445-3.848-3.972-6.618-3.972h-35.33c-4.143,0-7.5,3.358-7.5,7.5c0,4.142,3.357,7.5,7.5,7.5h30.828
				l12.748,23.913c-1.641-1.205-3.383-2.306-5.232-3.278c-11.296-5.936-24.958-6.282-36.543-0.927l-23.357,10.8
				c-8.455,3.909-15.074,10.358-19.271,18.091c-6.716-7.44-16.062-12.511-26.711-13.715L81.73,141.913
				c-5.808-0.657-11.636,1.2-15.994,5.092c-4.357,3.893-6.857,9.477-6.857,15.32v32.943c-1.436,0.62-2.85,1.281-4.235,1.995
				c-25.867,13.334-44.631,37.128-51.48,65.28c-0.979,4.025,1.49,8.081,5.515,9.061c0.596,0.145,1.192,0.214,1.779,0.214
				c3.379,0,6.447-2.3,7.282-5.729c5.821-23.925,21.777-44.152,43.778-55.493c7.854-4.049,16.868-6.189,26.068-6.189h10.355h120.262
				v21.75H146.89c-12.899-10.042-29.069-16.052-46.575-16.052c-39.079,0-71.561,29.868-75.634,67.969H7.5
				c-4.142,0-7.5,3.358-7.5,7.5v24.938c0,4.142,3.358,7.5,7.5,7.5h23.716c12.314,26.667,39.442,44.25,69.1,44.25
				c29.658,0,56.786-17.583,69.1-44.25H221.1c16.36,0,29.842-12.538,31.354-28.509c13.915-5.003,25.737-15.026,32.921-28.55
				l35.532-69.341c2.005-5.34,2.823-10.867,2.584-16.278l14.085,26.421c-18.799,11.922-33.568,30.048-41.125,52.147
				c-1.34,3.919,0.751,8.183,4.67,9.523c0.804,0.275,1.622,0.405,2.428,0.405c3.118,0,6.03-1.96,7.096-5.075
				c6.297-18.414,18.478-33.591,34.006-43.729l4.212,7.902c-20.399,13.661-33.859,36.912-33.859,63.252
				c0,41.95,34.129,76.078,76.078,76.078c41.949,0,76.078-34.128,76.078-76.078S433.032,210.102,391.083,210.102z M97.942,189.407
				v0.001H87.586H73.88v-27.083c0-2.159,1.159-3.516,1.85-4.134c0.691-0.617,2.174-1.616,4.315-1.374l113.841,12.869
				c11.285,1.276,20.311,9.268,23.278,19.721H97.942z M192.058,241.158l19.21,36.917H175.95
				c-1.466-13.71-6.618-26.346-14.425-36.917H192.058z M100.316,225.106c30.824,0,56.523,23.15,60.514,52.969H39.802
				C43.793,248.257,69.491,225.106,100.316,225.106z M100.316,347.263c-21.4,0-41.16-11.401-52.12-29.25h9.511
				c10.045,13.46,25.669,21.391,42.609,21.391c16.939,0,32.564-7.931,42.609-21.391h9.511
				C141.477,335.862,121.716,347.263,100.316,347.263z M79.176,318.013h42.28c-6.162,4.108-13.462,6.391-21.14,6.391
				C92.638,324.403,85.338,322.121,79.176,318.013z M221.1,303.013H15v-9.938h221.239
				C233.697,298.918,227.868,303.013,221.1,303.013z M272.129,253.917c-7.917,14.901-23.317,24.159-40.191,24.159h-3.76
				l-19.21-36.917h16.737c4.142,0,7.5-3.358,7.5-7.5v-29.25h65.227L272.129,253.917z M306.864,186.339l-1.152,3.069h-73.178
				c-0.101-0.567-0.216-1.129-0.339-1.688c0.309-10.016,6.196-19.326,15.653-23.699l23.357-10.8
				c7.379-3.411,16.077-3.19,23.271,0.59C306.191,159.966,311.517,173.95,306.864,186.339z M329.664,150.023v-1.824
				c0-8.73,7.104-15.833,15.834-15.833h9.863v33.49h-9.863C336.768,165.856,329.664,158.753,329.664,150.023z M366.842,256.654
				l8.286,15.542c1.35,2.531,3.943,3.973,6.625,3.973c1.19,0,2.397-0.284,3.521-0.883c3.655-1.948,5.038-6.491,3.09-10.146
				l-8.292-15.555c3.489-1.052,7.183-1.624,11.01-1.624c21.074,0,38.219,17.145,38.219,38.219c0,21.074-17.145,38.219-38.219,38.219
				c-21.074,0-38.219-17.145-38.219-38.219C352.863,274.3,358.313,263.669,366.842,256.654z M391.083,347.258
				c-33.679,0-61.078-27.399-61.078-61.078c0-20.614,10.275-38.862,25.962-49.928l3.726,6.989
				c-13.222,9.692-21.828,25.326-21.828,42.939c0,29.345,23.874,53.219,53.219,53.219c29.345,0,53.219-23.874,53.219-53.219
				c0-29.345-23.874-53.219-53.219-53.219c-6.378,0-12.496,1.13-18.168,3.197l-3.723-6.984c6.801-2.621,14.178-4.073,21.891-4.073
				c33.679,0,61.078,27.4,61.078,61.079S424.761,347.258,391.083,347.258z"/>
			<path d="M384.153,289.049c0.083,0.197,0.058,0.134,0.02,0.04c2.038,4.737,8.528,6.184,12.21,2.39c2.896-2.815,2.893-7.783,0-10.6
				c-2.452-2.526-6.564-2.878-9.47-0.94c-2.949,1.967-4.059,5.806-2.77,9.076C384.103,288.918,384.073,288.848,384.153,289.049z"/>
		</g>
	</g>
</g>
</svg>
            </span>
                        <span class="text">MOTOR</span>
                    </li>
                </ul>
            </div>
            <div class="search">
                <input type="text" placeholder="BMW X3, Audi..." />
                <button>
                    <svg id="lens" version="1.1" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="https://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
                        <g>
                            <path d="M51.6,96.7c11,0,21-3.9,28.8-10.5l35,35c0.8,0.8,1.8,1.2,2.9,1.2s2.1-0.4,2.9-1.2c1.6-1.6,1.6-4.2,0-5.8l-35-35   c6.5-7.8,10.5-17.9,10.5-28.8c0-24.9-20.2-45.1-45.1-45.1C26.8,6.5,6.5,26.8,6.5,51.6C6.5,76.5,26.8,96.7,51.6,96.7z M51.6,14.7   c20.4,0,36.9,16.6,36.9,36.9C88.5,72,72,88.5,51.6,88.5c-20.4,0-36.9-16.6-36.9-36.9C14.7,31.3,31.3,14.7,51.6,14.7z"
                            />
                        </g>
                    </svg>
                    <svg id="ics" version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                        <g>
                            <g>
                                <path d="M505.943,6.058c-8.077-8.077-21.172-8.077-29.249,0L6.058,476.693c-8.077,8.077-8.077,21.172,0,29.249
              C10.096,509.982,15.39,512,20.683,512c5.293,0,10.586-2.019,14.625-6.059L505.943,35.306
              C514.019,27.23,514.019,14.135,505.943,6.058z" />
                            </g>
                        </g>
                        <g>
                            <g>
                                <path d="M505.942,476.694L35.306,6.059c-8.076-8.077-21.172-8.077-29.248,0c-8.077,8.076-8.077,21.171,0,29.248l470.636,470.636
              c4.038,4.039,9.332,6.058,14.625,6.058c5.293,0,10.587-2.019,14.624-6.057C514.018,497.866,514.018,484.771,505.942,476.694z" />
                            </g>
                        </g>
                    </svg>
                </button>
            </div>
        </div>
        
        <div class="box__content box__content--step1">
            <div>
                <p>From where will you depart?</p>
                <input placeholder="Limassol, Cyprus" />
            </div>
        </div>
        
        <div class="box__nav">
            <div class="next">
                <button>NEXT</button>
            </div>
        </div>
        
    </div>
    
</div>

h5, menu, car, transport

编辑器支持Emmet

快捷键

h5, menu, car, transport

HTML5一款不规则大小瓦片堆叠风格的新闻网站首页模板

HTML5 CSS3很棒的一个弹性框栅格网站首页布局模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：