We Keep Coding

Hack for adding images in 'select' list of html

I want to add the images to my select list using only HTML CSS JS. (no library) I know the browsers don't support the images inside dropdown i.e., the select option of HTML.
Is there any way around/a hack to achieve this?
A: How it should look like before the user clicks on the dropdown.
B: How it should look like after the user clicks on the dropdown.
A:
B:
I tried using,
HTML
<select class="dropdown" name="payment-provider" id="payment-provider" form="payment">
<option value="BitCoin">BTC</option>
<option value="Ethereum">ETH</option>
<option value="Cardano">ADA</option>
<option value="Tether">USDT</option>
</select>
CSS
select#payment-provider option[value="BitCoin"] {
background: url(/_assets/images/svg/BTC.svg) no-repeat right;
width: 22px;
height: 22px;
}
But this code was only supported by the Firefox browser, however even Firefox has now withdraw this support.
Will appriciate the help.
Thanks

Check the snippet below. I created a custom component using UL>LI.
var placeholder = document.getElementById('placeholder');
var dropdown = document.getElementById('custom-select');
placeholder.addEventListener('click', function() {
if(dropdown.classList.contains('active')) {
dropdown.classList.remove('active')
} else {
dropdown.classList.add('active')
}
})
.custom-select .dropdown {
list-style: none;
padding: 0;
display: none;
}
.dropdown .img-wrapper,
.placeholder .img-wrapper {
display: inline-block;
max-width: 30px;
}
.dropdown img,
.placeholder img {
max-width: 100%;
}
.placeholder {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
position: relative;
}
.placeholder::before,
.placeholder::after {
content: "";
display: inline-block;
height: 2px;
width: 10px;
background-color: #aaa;
position: absolute;
right: 0;
}
.placeholder::before {
transform: rotate(45deg);
right: 20px;
}
.placeholder::after {
transform: rotate(-45deg);
right: 15px;
}
.custom-select.active .placeholder::after {
right: 20px;
}
.custom-select.active .placeholder::before {
right: 15px;
}
.custom-select.active .dropdown {
display: flex;
flex-direction: column;
box-shadow: 1px 1px 6px 1px #ddd;
position: absolute;
top: 40px;
right: 0;
left: 0;
min-width: 200px;
}
.dropdown li {
display: flex;
align-items: center;
background-color: #fff;
padding: 10px;
transition: all 0.3s ease;
cursor: pointer;
}
.dropdown li:not(:last-child) {
border-bottom: 1px solid #aaa;
}
.dropdown li:hover {
box-shadow: 0px 0px 11px 1px rgba(182, 182, 182, 0.75) inset;
}
.custom-select {
display: inline-flex;
flex-direction: column;
position: relative;
width: 100px;
}
input {
border: 0;
outline: none;
box-shadow: none;
width: 40px;
display: inline-block;
height: 30px;
text-align: right;
}
.wrapper {
display: inline-flex;
position: relative;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 50px;
align-items: center;
}
.input-label {
position: absolute;
background-color: #fff;
top: -6px;
display: inline-block;
left: 10px;
padding: 0 5px;
color: #aaa;
}
<section class="wrapper">
<label for="" class="input-label">You Receive</label>
<input type="number" readonly value=".32" />
<div class="custom-select" id="custom-select">
<span id="placeholder" class="placeholder">
<span class="img-wrapper">
<img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
</span>
<span class="text"> BTC</span>
</span>
<ul class="dropdown" id="dropdown">
<li class="dd-item">
<span class="img-wrapper">
<img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
</span>
<span class="text">Bitcoin (BTC)</span>
</li>
<li class="dd-item">
<span class="img-wrapper">
<img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" />
</span>
<span class="text">Ethereum (ETH)</span>
</li>
<li class="dd-item">
<span class="img-wrapper">
<img src="https://cryptologos.cc/logos/cardano-ada-logo.png" />
</span>
<span class="text">Cardano (ADA)</span>
</li>
</ul>
</div>
</section>

How can i fix the navbar? Problem with height

i'm trying to put my menu horizontally on mobile version like that:
But, when i modified the values to:
.left-side (white):
width: 100%
height: 40vh
and
.menu (right side black):
width: 100%;
height: 60vh;
But when I do, the menu breaks. The right menu is at the top.
I have seen that if I change the height by 100% for the nav, it works. But then when I go back to desktop version, when using the element inspector, the menu is at the top all the time (the layer) (I can't select texts). I tried with z-index and nothing. The nav i think should be height: 80px in desktop and 100vh but i don't know.
CodePen here: https://codepen.io/ZeR0ByTe/pen/KKdzmJV?editors=0100
<nav id="navbar">
<div id="left-side" class="left-side">
<div class="profile">
<img class="picture" src="img/foto.jpg" alt="">
</div>
</div>
<div id="menu" class="menu">
Home
Education
Experience
Languages
Skills
Portfolio
References
Contact me
</div>
<div class="containerIconMobile">
<div id="toggle" class="iconMobile">
</div>
</div>
</nav>
<header>
<div class="overlay"></div>
<div class="header-content">
<div class="content">
<h1 class="main-title">Diego J. <span>Franchina</span></h1>
<h2 class="second-title">Web <span>Designer</span> / Web <span>Developer</span></h2>
</div>
<div class="social-icons">
<i class="social-icon fa fa-facebook-official fa-2x" aria-hidden="true"></i>
<i class="social-icon fa fa-instagram fa-2x" aria-hidden="true"></i>
<i class="social-icon fa fa-linkedin fa-2x" aria-hidden="true"></i>
<i class="social-icon fa fa-github fa-2x" aria-hidden="true"></i>
</div>
</div>
</header>
<main>
<div class="container">
<div class="title-section">
<h2>EDUCATION</h2>
<hr class="line-titles">
</div>
<div class="container-education">
<div class="education-schools">
<h3 class="item-school">Instituto Superior Argentino de Computación</h3>
<h4 class="item-title-school">Analista de Sistemas</h4>
<p class="item-description-school">Legalizado y Certificado en el Ministerio de Relaciones Exteriores para poder trabajar en el Exterior.</p>
<hr class="line-separator">
</div>
<div class="education-years">
<p class="item-description-school">2009 - 2012</p>
</div>
<hr class="line-separator">
</div>
<div class="container-education">
<div class="education-schools">
<h3 class="item-school">Nuestra Sra. del Buen y Perpetuo Socorro</h3>
<h4 class="item-title-school">Bachillerato</h4>
<p class="item-description-school">Perito Mercantil.</p>
<hr class="line-separator">
</div>
<div class="education-years">
2009 - 2012
</div>
</div>
</div>
<div class="container">
<div class="title-section">
<h2>EDUCATION</h2>
<hr class="line-titles">
</div>
<div class="container-education">
<div class="education-schools">
<h3 class="item-school">Instituto Superior Argentino de Computación</h3>
<h4 class="item-title-school">Analista de Sistemas</h4>
<p class="item-description-school">Legalizado y Certificado en el Ministerio de Relaciones Exteriores para poder trabajar en el Exterior.</p>
<hr class="line-separator">
</div>
<div class="education-years">
<p class="item-description-school">2009 - 2012</p>
</div>
<hr class="line-separator">
</div>
<div class="container-education">
<div class="education-schools">
<h3 class="item-school">Nuestra Sra. del Buen y Perpetuo Socorro</h3>
<h4 class="item-title-school">Bachillerato</h4>
<p class="item-description-school">Perito Mercantil.</p>
<hr class="line-separator">
</div>
<div class="education-years">
2009 - 2012
</div>
</div>
</div>
<div class="container">
<div class="title-section">
<h2>EDUCATION</h2>
<hr class="line-titles">
</div>
<div class="container-education">
<div class="education-schools">
<h3 class="item-school">Instituto Superior Argentino de Computación</h3>
<h4 class="item-title-school">Analista de Sistemas</h4>
<p class="item-description-school">Legalizado y Certificado en el Ministerio de Relaciones Exteriores para poder trabajar en el Exterior.</p>
<hr class="line-separator">
</div>
<div class="education-years">
<p class="item-description-school">2009 - 2012</p>
</div>
<hr class="line-separator">
</div>
<div class="container-education">
<div class="education-schools">
<h3 class="item-school">Nuestra Sra. del Buen y Perpetuo Socorro</h3>
<h4 class="item-title-school">Bachillerato</h4>
<p class="item-description-school">Perito Mercantil.</p>
<hr class="line-separator">
</div>
<div class="education-years">
2009 - 2012
</div>
</div>
</div>
</main>
CSS
$grey: #222222;
$secondTitle: #999999;
$pink: #fd5c63;
$white: #ffffff;
$black: #000000;
$primary-color: #ffc20e;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Lato", sans-serif;
}
html {
overflow-x: hidden;
}
span {
color: $primary-color;
font-weight: bolder;
}
body {
color: $white;
width: 100%;
background-color: $grey;
}
header {
width: 100%;
height: 100vh;
position: relative;
background: url(../img/wall2.jpg);
background-position: center;
background-size: cover;
.overlay {
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 0;
}
.header-content {
width: 40%;
height: 100vh;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
padding: 50px;
text-align: center;
z-index: 1;
.main-title {
font-size: 54px;
font-weight: bold;
text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.7);
}
.second-title {
text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.7);
padding: 20px;
}
.social-icons {
display: flex;
justify-content: space-between;
padding: 10px;
.social-icon {
text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.7);
padding: 10px;
transition: 1s ease;
&:hover {
color: $primary-color;
}
}
}
}
}
nav {
display: flex;
width: 100%;
height: 80px;
color: $black;
position: fixed;
top: 0;
z-index: 4;
.left-side {
width: 40%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(119, 116, 116, 0.95);
position: absolute;
left: -100%;
transition: 1s ease;
z-index: 5;
&.left-effect {
left: 0 !important;
}
.profile {
.picture {
border-radius: 50%;
width: 200px;
height: 200px;
object-fit: cover;
border: 5px solid $primary-color;
}
}
}
.menu {
position: absolute;
right: -100%;
width: 60%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: 1s ease;
&.right-effect {
right: 0;
}
a {
display: flex;
flex-direction: column;
text-decoration: none;
color: #999999;
font-size: 24px;
font-weight: bolder;
letter-spacing: 5px;
padding: 10px 0;
transition: 1s;
text-transform: uppercase;
&:hover {
color: $primary-color;
}
}
}
.containerIconMobile {
position: absolute;
top: 30px;
right: 30px;
.iconMobile {
width: 30px;
height: 30px;
position: relative;
cursor: pointer;
&:before {
content: '';
position: absolute;
top: 7px;
width: 100%;
height: 2px;
background-color: $white;
transition: 1s ease;
}
&:after {
content: '';
position: absolute;
bottom: 7px;
width: 100%;
height: 2px;
background-color: $white;
transition: 1s ease;
}
&.active {
&:before {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
&:after {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
}
}
}
}
main {
.container {
width: 98%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
z-index: 4;
.title-section {
text-align: center;
font-size: 24px;
margin: 20px;
}
.line-titles {
border: 3px solid #ffc20e;
width: 25%;
margin: 10px auto;
}
}
.container-education {
width: 70%;
display: flex;
justify-content: center;
align-items: center;
}
.education-schools {
width: 70%;
margin-bottom: 30px;
.item-school {
font-size: 24px;
}
.item-title-school {
font-size: 22px;
color: #999999;
}
.item-description-school {
font-size: 20px;
margin: 10px 0;
}
.line-separator {
border: 3px solid #999999;
width: 25%;
margin: 30px auto 0 auto;
}
}
.education-years {
width: 30%;
font-size: 20px;
text-align: right;
}
}
#media (max-width: 480px) {
body {
header {
.header-content {
width: 100%;
.main-title {
font-size: 35px;
}
.second-title {
font-size: 18px;
}
}
}
nav {
.left-side {
top: 0;
background-color: rgba(119, 116, 116, .9);
z-index: 2;
.profile {
.picture {
width: 120px;
height: 120px;
}
}
}
.menu {
z-index: 2;
background-color: rgba(0, 0, 0, 0.9);
right: -100% !important;
// bottom: -825%;
&.right-effect {
right: 0 !important;
}
a {
font-size: 18px;
}
}
.containerIconMobile {
z-index: 4;
.iconMobile {
&:before {
background-color: $white;
}
&:after {
background-color: $white;
}
}
}
}
main {
.container-education {
width: 90%;
flex-direction: column;
}
}
}
}
JS
const toggle = document.getElementById("toggle");
const leftSide = document.getElementById("left-side");
const navbar = document.getElementById("navbar");
const menu = document.getElementById("menu");
toggle.addEventListener("click", () =>{
// navbar.classList.toggle("active")
toggle.classList.toggle("active");
leftSide.classList.toggle("left-effect");
menu.classList.toggle("right-effect");;
})
Hope someone can help and undestand my post. If not i will try be more specific
Thanks

you can use below code in your media query
I believe for nav toggle btn to work you need to add little z-index to it
nav .left-side {
width: 100%;
height: 40vh;
}
nav .menu {
width: 100%;
height: 60vh;
margin-top: 45vh;
}
nav .containerIconMobile {
z-index: 9;
}

Fluid responsive navigation with dropdown

I have designed a navigation system for my project which is built on flexbox like unsplash
Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ===========================
For Main Navigation
=========================== */
.cm-navigation-area {
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.6s ease-in-out;
z-index: 5;
display: block;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
.cm-navigation {
background: #ffffff;
height: 70px;
display: flex;
justify-content: space-between;
}
#media (max-width: 768px) {
.cm-navigation {
margin: 0 -5%;
}
}
.cm-burger-nav {
display: flex;
justify-content: center;
align-items: center;
}
#burger-nav {
fill: #575757;
}
.cm-logo {
display: flex;
justify-content: center;
align-items: center;
}
.cm-logo a img {
width: auto;
height: 50px;
}
#media (max-width: 991px) {
.cm-logo a img {
width: 80px;
height: auto;
}
}
.cm-nav nav {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.cm-nav nav ul {
margin: 0;
padding: 0;
display: flex;
}
.cm-nav nav ul li {
list-style: none;
display: flex;
}
.cm-nav nav ul li:not(:last-child) {
margin-right: 1.8em;
}
#media (max-width: 991px) {
.cm-nav nav ul li:not(:last-child) {
margin-right: 10;
}
}
.cm-nav nav ul li a {
font-size: 0.9em;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: gray;
font-weight: 300;
}
.cm-nav nav ul li a span {
padding-right: 0.4em;
}
.cm-nav nav ul li a span img {
width: 13px;
height: auto;
}
#media (max-width: 991px) {
.cm-nav nav ul li a span img {
width: 18px;
height: auto;
}
}
#media (max-width: 768px) {
.nav-r-text {
display: none;
}
}
.cm-currency {
font-size: 0.8em;
}
.cm-currency .cm-currency-link span {
margin-right: 0 !important;
}
.cm-currency .cm-currency-link span img {
width: 10px !important;
}
.cm-dots {
margin-right: 2.5em !important;
}
.cm-submit-photo {
margin-right: 48px !important;
}
.cm-submit-photo-link {
transition: all 0.2s ease-in-out;
display: flex;
background: #fff;
border: 1px solid #dddddd;
color: gray !important;
text-decoration: none;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: 100 !important;
font-size: 14px;
text-transform: uppercase;
height: 32px;
}
.cm-submit-photo-link:hover {
border: 1px solid #dedede;
color: #dedede;
}
.cm-join-button {
position: relative;
}
.cm-join-button:before {
position: absolute;
top: 0;
left: -24px;
display: inline-block;
width: 1px;
height: 32px;
content: "";
background-color: gray;
}
.cm-join-button-link {
transition: all 0.3s ease-in-out;
display: flex;
background: green;
color: #ffffff !important;
text-decoration: none;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: 100 !important;
font-size: 14px;
text-transform: uppercase;
height: 32px;
}
.cm-join-button-link:hover {
background: #004d00;
}
.cm-user-link img {
height: 30px;
width: auto;
}
.cm-cart {
min-height: 30px;
}
#cm-cart-link {
position: relative;
}
#cm-cart-link .cart-img {
width: 16px;
height: auto;
}
#cm-cart-link .cm-cart-badge:after {
position: absolute;
right: -6px;
top: 0;
content: attr(data-count);
font-size: 60%;
width: 16px;
height: 16px;
padding: 0.3em;
border-radius: 50%;
line-height: 1em;
color: white;
background: green;
text-align: center;
min-width: 1.2em;
}
/* ===================================
Navbar Search Integrations
=================================== */
.cm-nav-searchbar {
display: flex;
flex: 1;
align-items: center;
height: 100%;
padding: 0 1em;
}
#media (max-width: 1200px) {
.cm-nav-searchbar {
display: none;
}
}
.cm-nav-searchbar .field-container {
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 50px;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.cm-nav-searchbar .icons-container {
position: absolute;
top: 12px;
right: 4px;
width: 35px;
height: 35px;
overflow: hidden;
}
.cm-nav-searchbar .icon-search {
position: relative;
top: 5px;
left: 8px;
width: 40%;
height: 40%;
opacity: 1;
border-radius: 50%;
border: 2px solid #bebebe;
transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.cm-nav-searchbar .icon-search:after {
content: "";
position: absolute;
bottom: -7px;
right: -2px;
width: 2px;
border-radius: 3px;
transform: rotate(-45deg);
height: 8px;
background-color: #bebebe;
}
.cm-nav-searchbar .search-field {
border: 0;
width: 100%;
height: 100%;
padding: 10px 20px;
background: #f7f7f7;
border-radius: 3px;
transition: all 0.4s ease;
}
.cm-nav-searchbar .search-field:focus {
outline: none;
}
.cm-nav-searchbar .search-field:focus+.icons-container .icon-close {
opacity: 1;
transform: translateX(0);
}
.cm-nav-searchbar .search-field:focus+.icons-container .icon-search {
opacity: 0;
transform: translateX(200%);
}
/* ========================
Mobile Searchbar
======================== */
.cm-nav-searchbars {
display: flex;
flex: 1;
align-items: center;
height: 100%;
margin-top: 70px;
}
#media (min-width: 1200px) {
.cm-nav-searchbars {
display: none;
}
}
.cm-nav-searchbars .field-containers {
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 50px;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.cm-nav-searchbars .icons-containers {
position: absolute;
top: 12px;
right: 4px;
width: 35px;
height: 35px;
overflow: hidden;
}
.cm-nav-searchbars .icon-searchs {
position: relative;
top: 5px;
left: 8px;
width: 40%;
height: 40%;
opacity: 1;
border-radius: 50%;
border: 2px solid #bebebe;
transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}
.cm-nav-searchbars .icon-searchs:after {
content: "";
position: absolute;
bottom: -7px;
right: -2px;
width: 2px;
border-radius: 3px;
transform: rotate(-45deg);
height: 8px;
background-color: #bebebe;
}
.cm-nav-searchbars .search-fields {
border: 0;
width: 100%;
height: 100%;
padding: 10px 20px;
background: #f7f7f7;
border-radius: 3px;
transition: all 0.4s ease;
}
.cm-nav-searchbars .search-fields:focus {
outline: none;
}
.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-closes {
opacity: 1;
transform: translateX(0);
}
.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-searchs {
opacity: 0;
transform: translateX(200%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<!--=============================
Main Navigation
=============================-->
<div class="cm-navigation-area">
<div class="cm-navigation px-5-percent">
<!--Off Canvas Mobile Optimize Burger Menu -->
<div class="cm-burger-nav d-flex d-md-none">
<span>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="32px" id="burger-nav" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
</svg>
</span>
</div>
<!--End Off Canvas Mobile Optimize Burger Menu -->
<div class="cm-logo">
<a class="cm-logo-link" href="">
<img src="https://i.imgur.com/lAMzwZj.png" alt="codesign">
</a>
</div>
<div class="cm-nav-searchbar">
<fieldset class="field-container">
<input type="text" placeholder="Search Photos Here" class="search-field" />
<div class="icons-container">
<div class="icon-search"></div>
</div>
</fieldset>
</div>
<div class="cm-nav mr-md-2">
<nav>
<ul>
<li class="cm-currency">
<a class="cm-currency-link" href="">
<span>BDT</span>
<span><img src="https://i.imgur.com/HSaVJVb.png" alt=""></span>
</a>
</li>
<li class="cm-explore">
<a href="image-category.html">
<span><img src="https://i.imgur.com/NezIKT7.png" alt=""></span>
<span class="nav-r-text">Explore</span>
</a>
</li>
<li class="cm-collection d-none d-md-flex">
<a href="./dashboard/dashboard-images.html">
<span><img width="25px" src="https://i.imgur.com/8amvUJB.png" alt=""></span>
<span class="nav-r-text">Collection</span>
</a>
</li>
<li class="cm-dots d-none d-md-flex">
<a href="">
<img width="25" src="https://i.imgur.com/Yu0uhKs.png" alt="">
</a>
</li>
<li class="cm-cart">
<a id="cm-cart-link" href="javascript:void(0)">
<span class="cm-cart-badge has-badge" data-count="2"></span>
<span><img class="cart-img" src="https://i.imgur.com/XMiXKD4.png" alt=""></span>
</a>
</li>
<li class="cm-user d-flex d-md-none">
<a class="cm-user-link" href="">
<span>
<img width="25" src="https://i.imgur.com/4vD2Hwp.png" alt="">
</span>
<span class="nav-r-text">Login</span>
</a>
</li>
<li class="cm-submit-photo d-none d-md-flex">
<a class="cm-submit-photo-link" href="submit-image.html">
<!--<span>-->
<!--<img src="images/s_photo.svg" alt="">-->
<!--</span>-->
<span> Submit a photo </span>
</a>
</li>
<!--<li class="cm-user">-->
<!--<a class="cm-user-link" href="">-->
<!--<span>-->
<!--<img src="images/user.svg" alt="">-->
<!--</span>-->
<!--<span class="nav-r-text">Login</span>-->
<!--</a>-->
<!--</li>-->
<li class="cm-join-button d-none d-md-flex">
<a class="cm-join-button-link" href="">Login | Signup</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="cm-nav-searchbars">
<fieldset class="field-containers">
<input type="text" placeholder="Search Photos Here" class="search-fields" />
<div class="icons-containers">
<div class="icon-searchs"></div>
</div>
</fieldset>
</div>
Its look responsive but some how its not align and looks not beautiful on responsive, also I have to need a drop down like unsplash on dot hover or click event.
Thanks in advance

Rotate div without rotating inner section

I want to create this Image style with css. I have created section but I am facing difficulty to rotate it. I want green section straight but when I am rotating main wrapper all things are rotate. but that is wrong.
for reference please check Image
http://prntscr.com/jempp4
Any type of help will be appreciated. Not sure If I have explained my problem is good way.
Thanks in advance.
.banner-bg{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
transform: rotate(-15deg);
}
.banner-bg .banner-bg-sec{
width: 33.3333%;
position: relative;
}
.bg-green{
background: #528E72;
}
.bg-blue{
background: #4C6CC1;
}
.bg-blue2{
background: #4475D4;
}
.bg-red{
background: #CB431B;
}
.bg-red2{
background: #F54F1D;
}
.bg-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
font-size: 28px;
color: rgba(255,255,255,0.6);
}
.bg-icon{
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li{
display: inline-block;
vertical-align: middle;
}
.bg-icon li a{
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
<a href="#">
F
</a>
</li>
<li>
<a href="#">
T
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
</ul>
</div>
</div>
</div>

you can rotate only the title of the column and use clip-path to crop the main container, push the blue one a bit to the bottom and to make the title cover the whole width, widen it a little bit and use overflow-x:hidden for its parent, see the result in this fiddle : https://jsfiddle.net/fyhv9r8h/
#header {
background: url('https://kilianvalkhof.com/wp-content/themes/kvsixteen/static/img/bg2.jpg');
width: 100%;
height: 230px;
position: absolute;
}
.banner-bg {
position: absolute;
top: 100px;
width: 100%;
height: 160px;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
clip-path: polygon(0% 38%, 100% 0%, 100% 100%, 0% 100%);
}
.banner-bg .banner-bg-sec {
width: 33.3333%;
position: relative;
overflow-x: hidden;
}
.bg-green {
background: #528E72;
}
.bg-blue {
background: #4C6CC1;
top: 38px;
}
.bg-blue2 {
background: #4475D4;
}
.bg-red {
background: #CB431B;
}
.bg-red2 {
background: #F54F1D;
}
.bg-inner {
position: absolute;
top: 0;
left: -10px;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0, 0, 0, 0.2);
transform: rotate(-6deg)
}
.bg-text {
font-size: 28px;
color: rgba(255, 255, 255, 0.6);
}
.bg-icon {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li {
display: inline-block;
vertical-align: middle;
}
.bg-icon li a {
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div id="header">
</div>
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
F
</li>
<li>
T
</li>
<li>
I
</li>
</ul>
</div>
</div>
</div>

Hmm interesting.. maybe have a look at transform:skewY instead of rotate... though you'll have to "unskew" the text or find other way to place it...
.banner-bg{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
transform: skewY(-15deg);
}
span, ul {
transform: skewY(15deg) rotate(-15deg);
}
.banner-bg .banner-bg-sec{
width: 33.3333%;
position: relative;
}
.bg-green{
background: #528E72;
}
.bg-blue{
background: #4C6CC1;
}
.bg-blue2{
background: #4475D4;
}
.bg-red{
background: #CB431B;
}
.bg-red2{
background: #F54F1D;
}
.bg-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0px 4px 1px -2px rgba(0,0,0,0.2);
}
.bg-text{
font-size: 28px;
color: rgba(255,255,255,0.6);
}
.bg-icon{
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
.bg-icon li{
display: inline-block;
vertical-align: middle;
}
.bg-icon li a{
text-decoration: none;
display: block;
font-size: 22px;
color: #fff;
padding-right: 20px;
}
<div class="banner-bg">
<div class="banner-bg-sec bg-blue">
<div class="bg-inner bg-text bg-blue2">
<span>HIGH SCHOOLS</span>
</div>
</div>
<div class="banner-bg-sec bg-green"></div>
<div class="banner-bg-sec bg-red">
<div class="bg-inner bg-red2">
<ul class="bg-icon">
<li>
<a href="#">
F
</a>
</li>
<li>
<a href="#">
T
</a>
</li>
<li>
<a href="#">
I
</a>
</li>
</ul>
</div>
</div>
</div>

Why is my jquery animation going slow and laggy?

Hey i am using the textillate.js plug in for my portfolio and i was testing the animation and it is really slow and laggy. dont know if its my laptop or not. The animation is my heading class and also whenever i did the animation in a separate page with only the header only it worked smoothly. is it possible my pages load time is affecting the animation?
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body>
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper">
<div class = "heading tlt">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading tlt">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
<!------------------------------------------------------------ABOUT ME-------------------------------------------------------------------->
<div class = "about-container">
<div id = "underline">
<h1 class = "title" id = "about-me">About Me</h1>
</div>
<div class = "about-me-wrapper">
<div class = "details selfie wow fadeIn" data-wow-duration="2s"></div>
<div class = "details wow fadeIn" data-wow-duration="2s">
<p id = "sum"><br>Lorem Ipsum </p>
</div>
<div class = "details wow fadeIn" data-wow-duration="2s">
<div id = "details-hobbies">
<div class = "square">
<div class = "square-cont">
<div class = "ion-code ion-cont">
<p class = "under-img">Coding
</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-ios-basketball ion-cont">
<p class = "under-img">Basketball
</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-ios-people ion-cont">
<p class = "under-img">Family</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-university ion-cont">
<p class = "under-img">School</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------SKILLS------------------------------------------------------------------->
<div class = "skills-container">
<div id = "underline-second">
<h1 class = "title second" id = "skills">Skills</h1>
</div>
<div class = "skills-wrapper wow bounceInUp" data-wow-duration="3s">
<div class = "skills">
<div class = "logo">
<div class = "ion-social-html5">
<p class = "des">HTML5</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-css3">
<p class = "des">CSS3</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-javascript">
<p class = "des">JAVASCRIPT</p>
</div>
</div>
</div>
<div class = "skills last">
<div class = "logo">
<div class = "ion-social-angular">
<p class = "des">ANGULAR JS</p>
</div>
</div>
</div>
</div>
</div>
<!--------------------------------------------------------------PORTFOLIO----------------------------------------------------------------->
<div class = "portfolio-container">
<div id = "underline-last">
<h1 class = "title last" id = "portfolio">Portfolio</h1>
</div>
<div class = "portfolio-wrapper">
<a href = "#" class = "tiles wow slideInUp" data-wow-offset="280">
<div class = "port"><img src = "bg.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #1</h3>
<p class="content-text">Dallas Mavericks</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg2.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
</div>
</div>
<!-------------------------------------------------------------CONTACT-------------------------------------------------------------------->
<div id = "contact-container">
<div id = "contact-underline">
<h1 id = "contact-title">Hey Lets Keep In Touch!</h1>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="text" placeholder="email"/>
<input type="text" placeholder="subject"/>
<textarea placeholder="messge" rows = "7" cols = "60"></textarea>
<button>create</button>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "jquery-3.1.0.js"></script>
<script src="index.js"></script>
<script src = "jquery.lettering.js"></script>
<script src = "jquery.textillate.js"></script>
<script src= "wow.min.js"></script>
<script>new WOW().init();</script>
<!--<script src="viewportchecker.js"></script>-->
</body>
</html>
<!----------------------CSS-------------------------------------------->
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
/*----------------------------------------------------------HEADER-----------------------------------------------------------------------*/
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
/*-----------------------------------------------------------ABOUT ME--------------------------------------------------------------------*/
.about-container{
position: relative;
width: 100%;
height: 700px;
background-color: #ededed;
margin-top: 0;
padding: 0;
}
#underline{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #0A0A0A;
margin-bottom: 40px;
}
.title{
color: #0A0A0A;
text-align: center;
margin-bottom: 0px;
padding-top: 40px;
font-family:'Raleway', sans-serif;
font-size: 55px;
}
.about-me-wrapper{
position: relative;
margin: auto;
width: 1200px;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.details{
position: relative;
width: 370px;
height: 470px;
margin-top: 10px;
}
.details.selfie{
background-image: url(selfie2.png);
background-size: cover;
background-repeat:no-repeat;
border-radius: 10px;
}
#details-hobbies{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
}
.square{
width: 50%;
height: 50%;
}
.square-cont{
position: relative;
width: 100%;
height: 100%;
}
.ion-cont{
position: absolute;
color: #0A0A0A;
text-align: center;
font-size: 105px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.under-img{
font-size: 25px;
color: #0A0A0A;
margin-top: -5px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
text-align: center;
}
/*-------------------------------------------------------------------SKILLS--------------------------------------------------------------*/
.skills-container{
position: relative;
width: 100%;
height: 700px;
background-color: #e1e1e1;
margin-top: 0;
padding: 0;
margin-top: 0;
padding: 0;
bottom: 0;
}
.title.second{
color: black;
text-align: center;
margin-bottom: 0px;
padding-top: 40px;
font-family:'Raleway', sans-serif;
font-size: 55px;
}
#underline-second{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid black;
margin-bottom: 40px;
}
.skills-wrapper{
position: relative;
margin: auto;
width: 1200px;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.skills{
width: 280px;
height: 470px;
margin-top: 10px;
border-right: 4px solid black;
}
.skills.last{
border: none;
}
.logo{
width: 265px;
height: 340px;
margin-top: 10px;
}
.ion-social-html5{
text-align: center;
font-size: 280px
}
.des{
font-size: 25px;
margin-top: 0px;
color: black;
}
.ion-social-css3{
text-align: center;
font-size: 280px
}
.ion-social-javascript{
text-align: center;
font-size: 280px
}
.ion-social-angular{
text-align: center;
font-size: 280px
}
/*--------------------------------------------------------------------PORTFOLIO---------------------------------------------------------*/
.portfolio-container{
position: relative;
width: 100%;
height: 870px;
background-color: #444444;
top: 0;
padding: 0;
}
#underline-last{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #f5f5f5;
margin-bottom: 40px;
}
.title.last{
color:#f5f5f5;
}
.portfolio-wrapper{
position: relative;
max-width: 990px;
height: auto;
margin: 0 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.port{
position: relative;
width: 280px;
height: 315px;
margin-top: 15px;
display:inline-block;
background-repeat: no-repeat;
}
.port:hover{
outline: #4169E1 solid 3px;
}
img{
position: relative;
max-width: 100%;
height: 100%;
}
.content-overlay{
background: rgba(0,0,0,0.9);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.port:hover .content-overlay{
opacity: 1;
}
.content-details {
position: absolute;
text-align: center;
font-family: 'Raleway',sans-serif;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.port:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3{
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p{
color: #fff;
font-size: 0.8em;
}
.fadeIn-bottom{
top: 80%;
}
/*--------------------------------------------------------------CONTACT ME---------------------------------------------------------------*/
#contact-container{
position: relative;
width: 100%;
height: 650px;
background: rgba(32,157,229,1);
background: -moz-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(32,157,229,1)), color-stop(100%, rgba(32,108,229,1)));
background: -webkit-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -o-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -ms-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: linear-gradient(to right, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#209de5', endColorstr='#206ce5', GradientType=1 );
}
#contact-underline{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #e1e1e1;
margin-bottom: 40px;
padding-top: 20px;
}
#contact-title{
font-family: 'Raleway',sans-serif;
margin-bottom: 10px;
text-align: center;
color: white;
}
.login-page{
width: 400px;
margin: auto;
height: 400px;
}
.form{
position: relative;
background: #FFFFFF;
max-width: 360px;
/*margin: 0 auto 80px;*/
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input{
font-family: "Raleway", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form textarea{
font-family: "Raleway", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Raleway", sans-serif;
text-transform: uppercase;
outline: 0;
background: #1148a0;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
<!-------------------------------------JS--------------------------------->
$(document).ready(function(){
$('.heading').textillate({
in: {
effect: 'fadeInDown',
delay: 1000,
sync: true
}
});
});
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});