<svg class="hidden">
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 " />
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z" />
<path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z" />
</symbol>
<symbol id="icon-codepen" viewBox="0 0 24 24">
<title>CodePen</title>
<path d="m24 7.598c-.044-.264-.08-.47-.36-.641-11.449-6.791-11.287-7.297-12.03-6.848-8.677 5.394-11.092 6.597-11.439 7.017-.315.323-.171.818-.171 8.298-.021.851 7.743 5.462 11.519 8.404.333.237.752.199 1.003-.029 11.224-7.956 11.497-7.636 11.478-8.375 0 0-.012-7.927 0-7.826zm-1.5 6.491-3.876-2.359 3.876-2.697zm-5.277-3.212-4.473-2.722v-6.07l9.126 5.555zm-5.223 3.633-3.876-2.697 3.876-2.359 3.876 2.359zm-.75-12.426v6.074c-1.739 1.079-3.209 1.98-4.451 2.734l-4.675-3.252zm-5.857 9.658c-1.874 1.127-3.098 1.843-3.893 2.32v-5.029zm1.33.924 4.527 3.149v5.999l-9.126-6.349zm6.027 9.149v-5.999l4.527-3.149 4.599 2.799z" />
</symbol>
<symbol id="icon-cart">
<title>cart</title>
<path d="M11 21c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path d="M22 21c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path>
<path d="M23.8 5.4c-0.2-0.3-0.5-0.4-0.8-0.4h-16.2l-0.8-4.2c-0.1-0.5-0.5-0.8-1-0.8h-4c-0.6 0-1 0.4-1 1s0.4 1 1 1h3.2l0.8 4.2c0 0 0 0.1 0 0.1l1.7 8.3c0.3 1.4 1.5 2.4 2.9 2.4 0 0 0 0 0.1 0h9.7c1.5 0 2.7-1 3-2.4l1.6-8.4c0-0.3 0-0.6-0.2-0.8zM20.4 14.2c-0.1 0.5-0.5 0.8-1 0.8h-9.7c-0.5 0-0.9-0.3-1-0.8l-1.5-7.2h14.6l-1.4 7.2z"></path>
</symbol>
<symbol id="icon-caret" viewBox="0 0 16 24">
<title>caret</title>
<path d="M15.45 2.8L12.65 0l-12 12 12 12 2.8-2.8-9.2-9.2z" />
</symbol>
</svg>
<main>
<div class="content content--fixed">
<div class="page-header">
<h1 class="page-header__title">
<span class="page-header__title-inner">LikeNuShus</span>
<span class="page-header__title-sub">man & woman</span>
</h1>
<ul class="social">
<li class="social__item">
<a class="social__item-link" href="https://codepen.io/DivineBlow" target="_blank">
<svg class="icon icon--social icon--codepen">
<use xlink:href="#icon-codepen"></use>
</svg>
.
.
.
*,
*::after,
*::before {
box-sizing: border-box;
}
html {
background: #fff;
}
body {
--color-text: #000;
--color-bg: #fff;
--color-link: #000;
--color-link-hover: #858585;
--color-nav-bg: #fff;
--color-nav-hover: #858585;
--color-cart-bg: #000;
--color-cart: #fff;
--color-details-hover: #858585;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
min-height: 100vh;
color: #57585c;
color: var(--color-text);
background-color: #fff;
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
a {
text-decoration: none;
color: var(--color-link);
outline: none;
}
a:hover,
a:focus {
color: var(--color-link-hover);
}
button:focus,
a:focus {
outline: none;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
.
.
.
{
//The Slide class
class Slide {
constructor(el, settings) {
this.DOM = { el: el };
this.settings = {
detailsEl: null,
onHideDetails: () => {
return false;
}
};
Object.assign(this.settings, settings);
this.DOM.wrap = this.DOM.el.querySelector(".slide__wrap");
this.DOM.img = this.DOM.wrap.querySelector(".slide__img");
this.DOM.titleWrap = this.DOM.wrap.querySelector(".slide__title-wrap");
this.DOM.detailsItems = Array.from(
this.settings.detailsEl.querySelectorAll(".details__item")
);
this.totalDetailItems = this.DOM.detailsItems.length;
this.DOM.hideDetailsCtrl = this.DOM.detailsItems.filter((item) =>
item.classList.contains("details__item--close")
)[0];
this.DOM.hideDetailsCtrl.addEventListener("click", () =>
this.settings.onHideDetails()
);
.
.
.
