<link rel="stylesheet" href="https://giantsmarket.ca/wp-content/uploads/2024/03/labs.css">
<nav id="menu_dfk">
<label for="tm" id="toggle-menu_dfk">Navigation <span class="drop-icon">▾</span></label>
<input type="checkbox" id="tm">
<ul class="main-menu_dfk cf">
<li><a href="/k-beauty/">k-beauty
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm3">▾</label>
</a>
<input type="checkbox" id="sm3">
<ul class="sub-menu_dfk">
<li><a href="/skincare-2/">skincare
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm4">▾</label>
</a>
</li>
<li><a href="/by-concern/">by concern
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm5">▾</label>
</a>
<input type="checkbox" id="sm5">
</a>
<ul class="sub-menu_dfk">
<li><a href="/acne-prone-skin/">acne-prone skin</a></li>
<li><a href="/poresoliy-skin/">pores&oliy skin</a></li>
<li><a href="/blemishes-darkspots/">blemishes&darkspots</a></li>
<li><a href="/wrinkles-and-fine-lines-dry-skin/">wrinkles and fine lines / dry skin</a></li>
<li><a href="/sensitive/">Sensitive</a></li>
</ul>
</li>
<li><a href="/makeup/">makeup
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/cleanser/">cleanser
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/sunscreen/">sunscreen
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/masks/">masks
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/hair-body-care/">hair&body care
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/mens/">men’s
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/gift-sets/">gift sets
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/beauty-device/">beauty device
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
</ul>
</li>
<li><a href="/k-fashion/">k-fashion</a></li>
<li><a href="/k-shoes/">k-shoes</a></li>
<li><a href="/k-pop/">k-pop</a></li>
<li><a href="/kitchen/">kitchen</a></li>
<li><a href="/books/">Books</a></li>
</ul>
</nav>
<link rel="stylesheet" href="https://giantsmarket.ca/wp-content/uploads/2024/03/labs.css">
<nav id="menu_dfk">
<label for="tm" id="toggle-menu_dfk">Navigation <span class="drop-icon">▾</span></label>
<input type="checkbox" id="tm">
<ul class="main-menu_dfk cf">
<li><a href="/k-beauty/">k-beauty
<span class="drop-icon">▾</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm3">▾</label>
</a>
<input type="checkbox" id="sm3">
<ul class="sub-menu_dfk">
<li><a href="/skincare-2/">skincare
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm4">▾</label>
</a>
</li>
<li><a href="/by-concern/">by concern
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm5">▾</label>
</a>
<input type="checkbox" id="sm5">
</a>
<ul class="sub-menu_dfk">
<li><a href="/acne-prone-skin/">acne-prone skin</a></li>
<li><a href="/poresoliy-skin/">pores&oliy skin</a></li>
<li><a href="/blemishes-darkspots/">blemishes&darkspots</a></li>
<li><a href="/wrinkles-and-fine-lines-dry-skin/">wrinkles and fine lines / dry skin</a></li>
<li><a href="/sensitive/">Sensitive</a></li>
</ul>
</li>
<li><a href="/makeup/">makeup
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/cleanser/">cleanser
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/sunscreen/">sunscreen
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/masks/">masks
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/hair-body-care/">hair&body care
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/mens/">men’s
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/gift-sets/">gift sets
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
<li><a href="/beauty-device/">beauty device
<span class="drop-icon">▸</span>
<label title="Toggle Drop-down" class="drop-icon" for="sm6">▾</label>
</a>
</li>
</ul>
</li>
<li><a href="/k-fashion/">k-fashion</a></li>
<li><a href="/k-shoes/">k-shoes</a></li>
<li><a href="/k-pop/">k-pop</a></li>
<li><a href="/kitchen/">kitchen</a></li>
<li><a href="/books/">Books</a></li>
</ul>
</nav>
labs.css
/**
* RESET
* Reference: http://meyerweb.com/eric/tools/css/reset/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display: block;
}
body {
line-height: 1.618;
font-family: Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration: none;
}
code, pre, samp {
font-family: monospace;
}
/**
* BASIC TYPE
*/
img, video {
max-width: 100%;
vertical-align: middle;
}
p {
margin: 0 0 1em;
}
h1, h2, h3, h4 {
margin: .5em 0 .75em;
line-height: 1.3;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1.125em;
}
h4 {
font-size: 1em;
}
/**
* BOX HACKING
*/
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/**
* CLEAR FLOATS
* Reference: http://w3bits.com/clearfix
*/
.cf:after,
.lab-grid:after {
content: "";
display: table;
clear: both;
}
/**
* CONTENT WRAPPER
*/
.wrapper {
margin-left: auto;
margin-right: auto;
padding-top: 1.5em;
padding-right: 1.5em;
padding-left: 1.5em;
max-width: 1080px;
}
/**
* ICON SYSTEM
*/
.icon {
height: 1em;
width: 1em;
display: inline-block;
vertical-align: middle;
fill: currentColor;
}
/**
* BUTTONS
*/
.buttons {
margin: 1.5em 0;
}
.button {
padding: 1em 1.5em;
color: rgba(255, 255, 255, 0.75);
border-radius: 3px;
}
.button:hover {
color: rgba(255, 255, 255, 0.9);
}
.green-sea {
background: #16a085;
}
.button.green-sea:hover {
background: #1abc9c;
}
.belize-hole {
background: #2980b9;
}
.button.belize-hole:hover {
background: #3498db;
}
.pomegranate {
background: #c0392b;
}
.button.pomegranate:hover {
background: #e74c3c;
}
/**
* Carbon
*/
#carbonads {
font-family: inherit;
position: relative;
display: block;
overflow: hidden;
box-sizing: border-box;
margin: 0 auto 1.5em;
max-width: 728px;
font-size: 22px;
color: inherit;
}
#carbonads a {
text-decoration: none;
color: inherit;
}
#carbonads a:hover {
color: inherit;
}
.carbon-wrap {
display: flex;
align-items: center;
}
.carbon-img {
display: block;
float: left;
margin: 0;
line-height: 1;
}
.carbon-img img {
display: block;
width: auto;
height: 90px;
}
.carbon-text {
display: block;
float: left;
padding: 0 1em;
max-width: calc(100% - 130px - 2em);
text-align: left;
line-height: 1.35;
}
.carbon-poweredby {
position: absolute;
right: 0;
bottom: 0;
display: block;
padding: 6px 10px;
border-top-left-radius: 4px;
text-align: center;
text-transform: uppercase;
letter-spacing: .5px;
font-weight: 600;
font-size: 8px;
line-height: 1;
}
/**
* HYPERLINKS & NAVIGATION
*/
.lab-nav {
width: 100%;
}
.lab-nav--fixed {
position: fixed;
}
.lab-nav--top {
top: 0;
}
.lab-nav--bottom {
bottom: 0;
}
.lab-nav,
.lab-follow {
font-size: 13px;
line-height: 1;
}
.lab-theme-light body {
color: rgba(0, 0, 0, .75);
}
.lab-theme-light .lab-nav,
.lab-theme-light .lab-follow {
background: rgba(0, 0, 0, 0.05);
}
.lab-theme-light .lab-nav,
.lab-theme-light .lab-follow,
.lab-theme-light .lab-nav a {
color: rgba(0, 0, 0, 0.35);
}
.lab-theme-light .lab-nav a:hover,
.lab-theme-light .lab-nav a:active,
.lab-theme-light .lab-nav a:focus,
.lab-theme-light .lab-follow:hover,
.lab-theme-light .lab-follow:active,
.lab-theme-light .lab-follow:focus {
background: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.5);
}
.lab-theme-light #carbonads {
border-color: rgba(0, 0, 0, 0.05);
background: rgba(0, 0, 0, 0.05);
}
.lab-theme-light #carbonads:hover,
.lab-theme-light #carbonads:active,
.lab-theme-light #carbonads:focus {
border-color: rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.1);
}
.lab-theme-light .carbon-poweredby {
background: repeating-linear-gradient(-45deg,
transparent,
transparent 5px,
rgba(0, 0, 0, 0.05) 5px,
rgba(0, 0, 0, 0.025) 10px) rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, .5);
}
.lab-theme-light .lab-article-button {
color: rgba(0, 0, 0, .25);
border: 3px solid rgba(0, 0, 0, .1);
}
.lab-theme-light .lab-article-button:hover,
.lab-theme-light .lab-article-button:active,
.lab-theme-light .lab-article-button:focus {
color: rgba(0, 0, 0, .3);
border-color: rgba(0, 0, 0, .15);
}
.lab-theme-dark body {
color: rgba(255, 255, 255, .75);
}
.lab-theme-dark .lab-nav,
.lab-theme-dark .lab-follow {
background: rgba(255, 255, 255, 0.05);
}
.lab-theme-dark .lab-nav,
.lab-theme-dark .lab-nav a,
.lab-theme-dark .lab-follow {
color: rgba(255, 255, 255, 0.35);
}
.lab-theme-dark .lab-nav a:hover,
.lab-theme-dark .lab-nav a:active,
.lab-theme-dark .lab-nav a:focus,
.lab-theme-dark .lab-follow:hover,
.lab-theme-dark .lab-follow:active,
.lab-theme-dark .lab-follow:focus {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.5);
}
.lab-theme-dark #carbonads {
border-color: rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.05);
}
.lab-theme-dark #carbonads:hover,
.lab-theme-dark #carbonads:active,
.lab-theme-dark #carbonads:focus {
border-color: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.1);
}
.lab-theme-dark .carbon-poweredby {
background: repeating-linear-gradient(-45deg,
transparent,
transparent 5px,
rgba(255, 255, 255, 0.05) 5px,
rgba(255, 255, 255, 0.025) 10px) rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, .5);
}
.lab-theme-dark .lab-article-button {
color: rgba(255, 255, 255, .25);
border: 3px solid rgba(255, 255, 255, .1);
}
.lab-theme-dark .lab-article-button:hover,
.lab-theme-dark .lab-article-button:active,
.lab-theme-dark .lab-article-button:focus {
color: rgba(255, 255, 255, .3);
border-color: rgba(255, 255, 255, .15);
}
.lab-follow,
.lab-article-link,
.lab-share a {
padding: 1.25em .75em;
display: inline-block;
vertical-align: bottom;
text-decoration: none;
}
.lab-follow,
.lab-article-link span,
.lab-share-link span {
letter-spacing: 1px;
text-transform: uppercase;
}
.lab-follow {
display: none;
}
.lab-follow .icon {
vertical-align: top;
}
.lab-article-link {
float: left;
}
.lab-share {
float: right;
text-align: right;
}
.lab-share ul {
margin: 0;
}
.lab-share li {
display: inline;
margin: 0;
}
.lab-article-button {
font-weight: 700;
display: block;
margin: 2em 0;
padding: 1.25em;
text-align: center;
}
/**
* Grid
*/
.lab-grid {
width: 100%;
}
.lab-grid .lab-grid-cell {
margin-bottom: 1.5em;
}
.lab-grid .lab-grid-cell--mb-2x {
margin-bottom: 3em;
}
.lab-grid-cell {
padding-left: 0;
}
.w-full {
width: 100%;
}
.w-three-quarters {
width: 75%;
}
.w-two-thirds {
width: 66.66666%;
}
.w-half {
width: 50%;
}
.w-third {
width: 33.33333%;
}
.w-quarter {
width: 25%;
}
/**
* Pagination
*/
.labs-pagination {
display: flex;
justify-content: center;
}
.labs-pagination span,
.labs-pagination a {
vertical-align: middle;
margin: .5em;
}
.labs-pagination span a {
padding: .5em 1em;
}
.bsap {
display: flex !important;
justify-content: center;
}
.single-demo
#carbonads {
display: flex;
position: absolute;
bottom: 1em;
left: 1em;
max-width: 330px;
margin-bottom: 0;
z-index: 100;
}
.single-demo #carbonads span {
position: relative;
display: block;
overflow: hidden;
}
.single-demo #carbonads .carbon-wrap {
align-items: center;
display: flex;
}
.single-demo #carbonads .carbon-img {
display: block;
margin: 0;
line-height: 1;
}
.single-demo #carbonads .carbon-img img {
display: block;
}
.single-demo #carbonads .carbon-text {
font-size: 13px;
padding: 10px;
margin-bottom: 16px;
line-height: 1.5;
text-align: left;
}
.single-demo #carbonads .carbon-poweredby {
display: block;
padding: 6px 8px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
font-size: 8px;
line-height: 1;
border-top-left-radius: 3px;
position: absolute;
bottom: 0;
right: 0;
}
/**
* MEDIA SETTINGS
*/
@media only screen and (min-width: 320px) and (max-width: 759px) {
.carbon-text {
font-size: 14px;
}
}
@media only screen and (min-width: 1024px) {
h1 {
font-size: 2em;
}
h2 {
font-size: 1.65em;
}
h3 {
font-size: 1.25em;
}
h4 {
font-size: 1em;
}
.w-full--d {
width: 100%;
}
.w-three-quarters--d {
width: 75%;
}
.w-two-thirds--d {
width: 66.66666%;
}
.w-half--d {
width: 50%;
}
.w-third--d {
width: 33.33333%;
}
.w-quarter--d {
width: 25%;
}
}
@media only screen and (max-width: 767px) {
.lab-article-link span,
.lab-share span {
display: none;
}
}
@media only screen and (min-width: 1024px) {
.lab-follow {
display: inline-block;
position: fixed;
right: -34px;
bottom: 20%;
transform: rotate(-90deg);
}
}
@media only screen and (min-width: 768px) {
.lab-grid {
margin-left: -1.5em;
width: calc( 100% + 1.5em );
}
.lab-grid-cell {
float: left;
padding-left: 1.5em;
}
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
h1 {
font-size: 1.75em;
}
h2 {
font-size: 1.45em;
}
.lab-grid--3 .lab-grid-cell {
width: 50%;
}
.w-full--t {
width: 100%;
}
.w-three-quarters--t {
width: 75%;
}
.w-two-thirds--t {
width: 66.66666%;
}
.w-half--t {
width: 50%;
}
.w-third--t {
width: 33.33333%;
}
.w-quarter--t {
width: 25%;
}
}
@media only screen and (max-width: 767px) {
.lab-share {
text-align: right;
}
.w-full--m {
width: 100%;
}
.w-three-quarters--m {
width: 75%;
}
.w-two-thirds--m {
width: 66.66666%;
}
.w-half--m {
width: 50%;
}
.w-third--m {
width: 33.33333%;
}
.w-quarter--m {
width: 25%;
}
}
Customizing Additional CSS
/* dfk menu */
#menu_dfk_dfk ul {
margin: 0;
padding: 0;
}
#menu_dfk .main-menu_dfk {
display: none;
}
#tm:checked + .main-menu_dfk {
display: block;
}
#menu_dfk input[type="checkbox"],
#menu_dfk ul span.drop-icon {
display: none;
}
#menu_dfk li,
#toggle-menu_dfk,
#menu_dfk .sub-menu_dfk {
border-style: solid;
border-color: rgba(0, 0, 0, .05);
}
#menu_dfk li,
#toggle-menu_dfk {
border-width: 0 0 1px;
}
#menu_dfk .sub-menu_dfk {
background-color: #444;
border-width: 1px 1px 0;
margin: 0 1em;
}
#menu_dfk .sub-menu_dfk li:last-child {
border-width: 0;
}
#menu_dfk li,
#toggle-menu_dfk,
#menu_dfk a {
position: relative;
display: block;
color: white;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}
#menu_dfk {
background-color: #d35d2c;
}
#toggle-menu_dfk {
background: #333;
}
#toggle-menu_dfk,
#menu_dfk a {
padding: 1em 1.5em;
}
#menu_dfk a {
transition: all .125s ease-in-out;
-webkit-transition: all .125s ease-in-out;
}
#menu_dfk a:hover {
background-color: #eb8e53;
color: #444;
}
#menu_dfk .sub-menu_dfk {
display: none;
}
#menu_dfk input[type="checkbox"]:checked + .sub-menu_dfk {
display: block;
}
#menu_dfk .sub-menu_dfk a:hover {
color: #444;
}
#toggle-menu_dfk .drop-icon,
#menu_dfk li label.drop-icon {
position: absolute;
right: 0;
top: 0;
}
#menu_dfk label.drop-icon, #toggle-menu_dfk span.drop-icon {
padding: 1em;
font-size: 1em;
text-align: center;
background-color: rgba(0, 0, 0, .125);
text-shadow: 0 0 0 transparent;
color: rgba(255, 255, 255, .75);
}
@media only screen and (min-width: 1024px) {
#menu_dfk .main-menu_dfk {
display: block;
}
#toggle-menu_dfk,
#menu_dfk label.drop-icon {
display: none;
}
#menu_dfk ul span.drop-icon {
display: inline-block;
}
#menu_dfk li {
float: left;
border-width: 0 1px 0 0;
}
#menu_dfk .sub-menu_dfk li {
float: none;
}
#menu_dfk .sub-menu_dfk {
border-width: 0;
margin: 0;
position: absolute;
top: 100%;
left: 0;
width: 16em;
z-index: 3000;
}
#menu_dfk .sub-menu_dfk,
#menu_dfk input[type="checkbox"]:checked + .sub-menu_dfk {
display: none;
}
#menu_dfk .sub-menu_dfk li {
border-width: 0 0 1px;
}
#menu_dfk .sub-menu_dfk .sub-menu_dfk {
top: 0;
left: 100%;
}
#menu_dfk .sub-menu_dfk .drop-icon {
position: absolute;
top: 0;
right: 0;
padding: 1em;
}
#menu_dfk li:hover > input[type="checkbox"] + .sub-menu_dfk {
display: block;
}
}
