Nah ,. Kali ini saya
akan mempublikasikan kode css dan kode html menu navigation paling atas versi
web Lazada . semua pasti tau ya dengan took online lazada .
Sekarang banyak
sekali toko online startup Indonesia dengan tampilan web yang sangat menarik
perhatian bagi pengguna internet . dengan tampilan web yang bagus , akan
semakin menarik pengunjung untuk mengunjungi web anda .
Tetapi ingat ini gan
jika web anda dengan tampilan design yang sangat keren tetapi terlalu banyak
mengandung kode css , javascript, dank ode html yang tidak berguna akan
mengandung resiko dalam search engine google nih.
jadi teman-teman
hati hati ya dalam measukkan css , javascript dan html dalam blog/web anda yang
bisa berujung dengan resiko search engine
nah langsung aja nih
gan untuk kode css nya
1. letakkan
kode css di tag html <style> KODE LETAK DISINI </style>
atau sobat boleh
letakkan di <b:skin> KODE LETAK
DISINI </b:skin>
2. sekarang
copykan kode css lazada yang ada dibawah ini!
.c-user-scroll_disabled
{
overflow-x: hidden;
overflow-y: hidden;
}
.c-sticker {
position: relative;
}
.c-sticker__body {
top: 0;
transform: translateZ(0px);
}
.c-sticker_stuck
.c-sticker__body {
position: fixed;
}
.c-sticker_freeze
.c-sticker__body {
position: absolute;
}
.c-sticker_debounce
.c-sticker__body {
position: absolute;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: top;
transition-timing-function: ease;
}
.c-top-bar {
font-size: 11px;
line-height: 25px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
max-width: 1200px;
min-width: 1000px;
position: relative;
text-align: right;
}
.c-top-bar__item {
display: inline-block;
padding-bottom: 0;
padding-left: 17px;
padding-right: 17px;
padding-top: 0;
text-align: left;
vertical-align: middle;
}
.c-top-bar__item:last-child
{
padding-right: 0;
}
.c-top-bar__item:hover
.c-top-bar__item-caption {
color: rgb(255, 255, 255);
}
.c-top-bar__item-caption
{
color: #a8b2b7;
cursor: pointer;
display: inline-block;
text-transform: uppercase;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: color;
transition-timing-function: ease;
vertical-align: middle;
white-space: nowrap;
}
.c-top-bar__item-caption_color_orange
{
color: #ff7941;
}
.c-top-bar__item-caption_color_cyan
{
color: #37cfdd;
}
.c-dropdown_theme_select
{
width: 100%;
}
.c-dropdown_theme_select
> .c-dropdown__caption::before {
display: none;
}
.c-dropdown_theme_select
> .c-dropdown__popup {
width: 100%;
}
.c-dropdown_theme_select
> .c-dropdown__popup::before {
display: none;
}
.c-dropdown_theme_select.c-dropdown_valign_top
> .c-dropdown__popup {
margin-bottom: 0;
}
.c-dropdown_theme_select.c-dropdown_valign_bottom
> .c-dropdown__popup {
margin-top: 0;
}
.c-dropdown_theme_tooltip-gray
> .c-dropdown__caption::before {
display: none;
}
.c-dropdown_theme_tooltip-gray
> .c-dropdown__popup {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #f8f8f8;
border-bottom-color: #ccc;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: #ccc;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #ccc;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #ccc;
border-top-style: solid;
border-top-width: 1px;
color: #646464;
font-size: 11px;
}
.c-dropdown_theme_tooltip-gray
> .c-dropdown__popup::before {
background-color: #f8f8f8;
border-bottom-color: #ccc;
border-left-color: #ccc;
border-right-color: #ccc;
border-top-color: #ccc;
}
.c-dropdown_theme_tooltip-orange
> .c-dropdown__caption::before {
display: none;
}
.c-dropdown_theme_tooltip-orange
> .c-dropdown__popup {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-bottom-color: #f37022;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: #f37022;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #f37022;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #f37022;
border-top-style: solid;
border-top-width: 1px;
}
.c-dropdown_theme_tooltip-orange
> .c-dropdown__popup::before {
border-bottom-color: #f37022;
border-left-color: #f37022;
border-right-color: #f37022;
border-top-color: #f37022;
}
.c-dropdown {
display: inline-block;
position: relative;
}
.c-dropdown__caption
{
display: block;
transition-delay: 0s;
transition-duration: 0.1s;
transition-property: color;
transition-timing-function: ease;
}
.c-dropdown__caption::before
{
content: "";
height: 50%;
left: 0;
line-height: 0;
opacity: 0;
padding-top: 7px;
position: absolute;
visibility: hidden;
width: 100%;
z-index: 1;
}
.c-dropdown__popup {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #fff;
border-bottom-color: #bfbfbf;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: #bfbfbf;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #bfbfbf;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #bfbfbf;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
position: absolute;
transition-delay: 0s;
transition-duration: 0.3s;
transition-property: all;
transition-timing-function: ease;
visibility: hidden;
z-index: 1;
}
.c-dropdown__popup::before
{
background-color: #fff;
border-bottom-color: #bfbfbf;
border-left-color: #bfbfbf;
border-right-color: #bfbfbf;
border-top-color: #bfbfbf;
content: "";
height: 10px;
position: absolute;
transform: rotate(45deg);
width: 10px;
}
.c-dropdown__close-button
{
color: #757575;
cursor: pointer;
position: absolute;
right: 5px;
top: 5px;
}
.c-dropdown__close-button_size_small
{
font-size: 16px;
}
.c-dropdown_toggler_yes
.c-dropdown__caption {
cursor: pointer;
}
.c-dropdown_deactivated
.c-dropdown__caption {
cursor: initial;
}
.c-dropdown_active
> .c-dropdown__popup {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
.c-dropdown_active
> .c-dropdown__caption::before {
opacity: 1;
visibility: visible;
}
.c-dropdown_align_center
> .c-dropdown__popup {
left: 50%;
transform: translateX(-50%);
}
.c-dropdown_align_center.c-dropdown_valign_top
> .c-dropdown__popup::before,
.c-dropdown_align_center.c-dropdown_valign_bottom >
.c-dropdown__popup::before {
left: 50%;
transform: translateX(-50%) rotate(45deg);
}
.c-dropdown_align_center.c-dropdown_valign_left
> .c-dropdown__popup::before,
.c-dropdown_align_center.c-dropdown_valign_right >
.c-dropdown__popup::before {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.c-dropdown_align_left
> .c-dropdown__popup {
left: 0;
}
.c-dropdown_align_left.c-dropdown_valign_top
> .c-dropdown__popup::before,
.c-dropdown_align_left.c-dropdown_valign_bottom >
.c-dropdown__popup::before {
left: 15px;
}
.c-dropdown_align_left.c-dropdown_valign_left
> .c-dropdown__popup::before,
.c-dropdown_align_left.c-dropdown_valign_right >
.c-dropdown__popup::before {
top: 15px;
}
.c-dropdown_align_right
> .c-dropdown__popup {
right: 0;
}
.c-dropdown_align_right.c-dropdown_valign_top
> .c-dropdown__popup::before,
.c-dropdown_align_right.c-dropdown_valign_bottom >
.c-dropdown__popup::before {
right: 15px;
}
.c-dropdown_align_right.c-dropdown_valign_left
> .c-dropdown__popup::before,
.c-dropdown_align_right.c-dropdown_valign_right >
.c-dropdown__popup::before {
bottom: 15px;
}
.c-dropdown_valign_top
> .c-dropdown__caption::before {
bottom: 100%;
}
.c-dropdown_valign_top
> .c-dropdown__popup {
bottom: 150%;
margin-bottom: 10px;
}
.c-dropdown_valign_top
> .c-dropdown__popup::before {
border-bottom-style: solid;
border-bottom-width: 1px;
border-right-style: solid;
border-right-width: 1px;
bottom: -6px;
}
.c-dropdown_valign_top.c-dropdown_active
> .c-dropdown__popup {
bottom: 100%;
}
.c-dropdown_valign_top.c-dropdown_align_left
> .c-dropdown__popup {
margin-left: -10px;
}
.c-dropdown_valign_top.c-dropdown_align_right
> .c-dropdown__popup {
margin-right: -10px;
}
.c-dropdown_valign_bottom
> .c-dropdown__caption::before {
top: 100%;
}
.c-dropdown_valign_bottom
> .c-dropdown__popup {
margin-top: 10px;
top: 150%;
}
.c-dropdown_valign_bottom
> .c-dropdown__popup::before {
border-left-style: solid;
border-left-width: 1px;
border-top-style: solid;
border-top-width: 1px;
top: -6px;
}
.c-dropdown_valign_bottom.c-dropdown_active
> .c-dropdown__popup {
top: 100%;
}
.c-dropdown_valign_bottom.c-dropdown_align_left
> .c-dropdown__popup {
margin-left: -10px;
}
.c-dropdown_valign_bottom.c-dropdown_align_right
> .c-dropdown__popup {
margin-right: -10px;
}
.c-dropdown_valign_left
> .c-dropdown__caption::before {
top: 100%;
}
.c-dropdown_valign_left
> .c-dropdown__popup {
left: 150%;
margin-left: 10px;
right: auto;
top: 50%;
transform: translateY(-50%);
}
.c-dropdown_valign_left
> .c-dropdown__popup::before {
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
left: -6px;
}
.c-dropdown_valign_left.c-dropdown_active
> .c-dropdown__popup {
left: 100%;
}
.c-dropdown_valign_right
> .c-dropdown__caption::before {
top: 100%;
}
.c-dropdown_valign_right
> .c-dropdown__popup {
left: auto;
margin-right: 10px;
right: 150%;
top: 50%;
transform: translateY(-50%);
}
.c-dropdown_valign_right
> .c-dropdown__popup::before {
border-right-style: solid;
border-right-width: 1px;
border-top-style: solid;
border-top-width: 1px;
right: -6px;
}
.c-dropdown_valign_right.c-dropdown_active
> .c-dropdown__popup {
right: 100%;
}
.c-order-tracking-form
{
font-family: "Helvetica
Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: 300;
padding-bottom: 15px;
padding-left: 21px;
padding-right: 21px;
padding-top: 25px;
width: 220px;
}
.c-order-tracking-form__title
{
color: #254a5f;
font-size: 16px;
line-height: 18px;
margin-bottom: 15px;
}
.c-order-tracking-form__order-list
{
list-style-type: none;
margin-bottom: 15px;
}
.c-order-tracking-form__order-item
{
margin-bottom: 3px;
}
.c-order-tracking-form__form-row
{
margin-bottom: 10px;
}
.c-order-tracking-form__label
{
color: #646464;
display: block;
}
.c-order-tracking-form__input
{
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-attachment: scroll;
background-clip: border-box;
background-color: #f0f0f0;
background-image: none;
background-origin: padding-box;
background-position-x: 0;
background-position-y: 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: -moz-use-text-color;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: none;
border-bottom-width: medium;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: -moz-use-text-color;
border-left-style: none;
border-left-width: medium;
border-right-color: -moz-use-text-color;
border-right-style: none;
border-right-width: medium;
border-top-color: -moz-use-text-color;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: none;
border-top-width: medium;
box-shadow: 0 3px 0 0 #dfdfdf inset;
box-sizing: border-box;
color: #000;
height: 36px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
width: 100%;
}
.c-order-tracking-form__input:focus
{
outline-color: -moz-use-text-color;
outline-style: none;
outline-width: medium;
}
.c-order-tracking-form__input-group
{
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
display: table;
overflow-x: hidden;
overflow-y: hidden;
}
.c-order-tracking-form__input-group
.c-order-tracking-form__input {
display: table-cell;
height: 38px;
}
.c-order-tracking-form__button-container
{
background-attachment: scroll;
background-clip: border-box;
background-color: #f36f36;
background-image: none;
background-origin: padding-box;
background-position-x: 0;
background-position-y: 0;
background-repeat: repeat;
background-size: auto auto;
display: table-cell;
font-size: 0;
line-height: normal;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
position: relative;
vertical-align: middle;
white-space: nowrap;
width: 1%;
}
.c-order-tracking-form__button
{
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
background-position-x: 0;
background-position-y: 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: -moz-use-text-color;
border-bottom-style: none;
border-bottom-width: medium;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: -moz-use-text-color;
border-left-style: none;
border-left-width: medium;
border-right-color: -moz-use-text-color;
border-right-style: none;
border-right-width: medium;
border-top-color: -moz-use-text-color;
border-top-style: none;
border-top-width: medium;
height: 38px;
width: 28px;
}
.c-order-tracking-form__button:focus
{
outline-color: -moz-use-text-color;
outline-style: none;
outline-width: medium;
}
.c-order-tracking-form__icon
{
display: inline-block;
height: 20px;
vertical-align: text-top;
width: 13px;
}
.c-order-tracking-form__help-text
{
color: #646464;
margin-bottom: 10px;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
}
.c-order-tracking-form__status
{
color: #d2232a;
display: none;
margin-bottom: 10px;
}
.c-profile-menu {
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
padding-top: 25px;
}
.c-profile-menu__item
{
color: #3a3a3a;
display: block;
font-size: 13px;
font-weight: 300;
line-height: 1.3;
margin-bottom: 15px;
padding-bottom: 5px;
padding-left: 40px;
padding-right: 0;
padding-top: 5px;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: color;
transition-timing-function: ease;
white-space: nowrap;
}
.c-profile-menu__item:last-child
{
margin-bottom: 0;
}
.c-profile-menu__item:hover
{
color: #f36f36;
}
.c-language-switcher
{
display: table;
font-family: "Helvetica
Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
line-height: 1.3;
padding-bottom: 20px;
padding-left: 0;
padding-right: 0;
padding-top: 20px;
width: 260px;
}
.c-language-switcher__item
{
color: #545454;
display: table-cell;
padding-bottom: 0;
padding-left: 50px;
padding-right: 20px;
padding-top: 0;
position: relative;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: color;
transition-timing-function: ease;
vertical-align: middle;
width: 50%;
}
.c-language-switcher__item:hover
{
color: #545454;
text-decoration-color: -moz-use-text-color;
text-decoration-line: none;
text-decoration-style: solid;
}
.c-language-switcher__icon
{
height: 40px;
left: 25px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 40px;
}
.c-language-switcher__checked
{
height: 10px;
position: absolute;
right: 14px;
top: 50%;
transform: translate(50%, -50%);
width: 9px;
}
.c-language-switcher__item_state_inactive
{
color: #b8b8b8;
padding-right: 10px;
}
.c-language-switcher__item_state_inactive
.c-language-switcher__checked {
display: none;
}
.c-logo {
display: inline-block;
vertical-align: top;
}
.c-logo__image {
height: 39px;
width: 124px;
}
.c-cart-button {
display: block;
height: 38px;
position: relative;
width: 40px;
}
.c-cart-button__icon
{
height: 24px;
left: 50%;
margin-bottom: 0;
margin-left: -14px;
margin-right: 0;
margin-top: -12px;
position: absolute;
top: 50%;
width: 27px;
}
.c-cart-button__num
{
background-attachment: scroll;
background-clip: border-box;
background-color: #f36e36;
background-image: none;
background-origin: padding-box;
background-position-x: 0;
background-position-y: 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
box-sizing: border-box;
color: #fff;
font-size: 13px;
height: 20px;
line-height: 14px;
min-width: 20px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
position: absolute;
right: -7px;
text-align: center;
top: -3px;
}
.c-cart-button_empty
.c-cart-button__num {
display: none;
}
.c-header-info-badges
{
font-size: 0;
font-weight: 300;
}
.c-header-info-badges__item
{
display: inline-block;
margin-left: 10px;
vertical-align: top;
width: 100px;
}
.c-header-info-badges__item:first-child
{
margin-left: 0;
}
.c-header-info-badges__caption
{
color: rgb(255, 255, 255);
display: inline-block;
font-size: 11px;
line-height: 1.2;
padding-left: 29px;
vertical-align: top;
}
.c-header-info-badges__content
{
box-sizing: border-box;
color: #3a3a3a;
font-size: 12px;
line-height: 1.4;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
width: 330px;
}
.c-header-info-badges__title
{
font-size: 16px;
font-weight: 300;
margin-bottom: 15px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
}
.c-header-info-badges__caption_shipping
{
padding-left: 38px;
}
.c-header-info-badges__content_protection-logo
{
padding-left: 90px;
}
.c-header-info-badges__content_shipping-logo
{
padding-left: 90px;
}
.c-main-navigation {
box-shadow: 0 3px 0 rgba(0, 0, 0, 0), 0 0 0
5000px rgba(0, 0, 0, 0);
font-weight: 300;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: box-shadow;
transition-timing-function: ease;
}
.c-main-navigation__nav-wrapper
{
background-attachment: scroll;
background-clip: border-box;
background-color: #183544;
background-image: none;
background-origin: padding-box;
background-position-x: 0;
background-position-y: 0;
background-repeat: repeat;
background-size: auto auto;
}
.c-main-navigation__nav
{
display: table;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
max-width: 1220px;
min-width: 1020px;
width: 100%;
}
.c-main-navigation__item
{
color: rgb(255, 255, 255);
cursor: pointer;
display: table-cell;
font-size: 0;
line-height: 0;
padding-bottom: 0;
padding-left: 5px;
padding-right: 5px;
padding-top: 0;
text-align: center;
}
.c-main-navigation__item_style_bold-orange
{
color: #ff783d;
}
.c-main-navigation__item_style_bold-cyan
{
color: #2dc8d9;
}
.c-main-navigation__item_type_button
{
transition-delay: 0s, 0s;
transition-duration: 0.1s, 0.1s;
transition-property: background-color,
color;
transition-timing-function: ease-in,
ease-in;
}
.c-main-navigation__item_type_button:hover,
.c-main-navigation__item_type_button.c-main-navigation__item_active {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: none;
background-origin: padding-box;
background-position-x: 0;
background-position-y: 0;
background-repeat: repeat;
background-size: auto auto;
color: #142d3a;
}
.c-main-navigation__item_type_button:hover
.c-main-navigation__item-caption,
.c-main-navigation__item_type_button.c-main-navigation__item_active
.c-main-navigation__item-caption {
border-bottom-color: #f36f36;
border-left-color: #f36f36;
border-right-color: #f36f36;
border-top-color: #f36f36;
}
.c-main-navigation__item_type_link:hover
{
text-decoration-color: -moz-use-text-color;
text-decoration-line: underline;
text-decoration-style: solid;
}
.c-main-navigation__item-caption
{
border-bottom-color: transparent;
border-bottom-style: solid;
border-bottom-width: 4px;
box-sizing: border-box;
display: inline-block;
font-size: 12px;
line-height: 14px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 9px;
padding-left: 0;
padding-right: 0;
padding-top: 13px;
text-overflow: ellipsis;
transition-delay: 0s;
transition-duration: 0.1s;
transition-property: border-color;
transition-timing-function: ease-in;
white-space: nowrap;
}
.c-main-navigation__second-menu-wrapper
{
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: none;
background-origin: padding-box;
background-position-x: 0;
background-position-y: 0;
background-repeat: repeat;
background-size: auto auto;
max-height: calc(100vh - 143px);
overflow-y: auto;
}
.c-main-navigation__second-menu
{
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
max-width: 1220px;
min-width: 1020px;
width: 100%;
}
.c-main-navigation__second-menu-item
{
display: none;
}
.c-main-navigation__second-menu-item_active
{
display: block;
}
.c-main-navigation_active
{
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2), 0 0
0 5000px rgba(0, 0, 0, 0.19);
}
.c-second-menu {
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
}
.c-second-menu__row
{
display: table;
width: 100%;
}
.c-second-menu__row_banners
{
display: block;
margin-bottom: 0;
margin-left: -10px;
margin-right: -10px;
margin-top: 25px;
}
.c-second-menu__column
{
border-spacing: 40px;
display: table-cell;
padding-right: 5px;
}
.c-second-menu__item
{
color: #838383;
font-size: 12px;
line-height: 14px;
margin-bottom: 5px;
}
.c-second-menu__item
a {
color: inherit;
}
.c-second-menu__item
a:hover {
color: inherit;
text-decoration-color: -moz-use-text-color;
text-decoration-line: underline;
text-decoration-style: solid;
}
.c-second-menu__item_style_heading1
{
color: #f36e36;
font-size: 13px;
line-height: 16px;
margin-top: 18px;
text-transform: uppercase;
}
.c-second-menu__item_style_heading1:first-child
{
margin-top: 0;
}
.c-second-menu__item_style_heading2
{
color: rgb(0, 0, 0);
font-size: 13px;
font-weight: 300;
line-height: 16px;
}
.c-second-menu__item_style_menu-item
+ .c-second-menu__item_style_heading2 {
margin-top: 18px;
}
.c-l-row {
font-size: 0;
line-height: 1;
white-space: normal;
}
.c-l-row_gap {
margin-left: -10px;
margin-right: -10px;
}
.c-l-row_gap
> .c-l-column {
padding-left: 10px;
padding-right: 10px;
}
.c-l-row_gap_small {
margin-left: -3px;
margin-right: -3px;
}
.c-l-row_gap_small
> .c-l-column {
padding-left: 3px;
padding-right: 3px;
}
.c-l-column {
box-sizing: border-box;
display: inline-block;
font-size: 12px;
position: relative;
vertical-align: top;
}
.c-l-column_valign_middle
{
vertical-align: middle;
}
.c-l-column_2_1 {
width: 50%;
}
.c-l-column_offset-2_1
{
margin-left: 50%;
}
.c-l-column_2_2 {
width: 100%;
}
.c-l-column_offset-2_2
{
margin-left: 100%;
}
.c-l-column_2_3 {
width: 150%;
}
.c-l-column_offset-2_3
{
margin-left: 150%;
}
.c-l-column_2_4 {
width: 200%;
}
.c-l-column_offset-2_4
{
margin-left: 200%;
}
.c-l-column_2_5 {
width: 250%;
}
.c-l-column_offset-2_5
{
margin-left: 250%;
}
.c-l-column_2_6 {
width: 300%;
}
.c-l-column_offset-2_6
{
margin-left: 300%;
}
.c-l-column_2_7 {
width: 350%;
}
.c-l-column_offset-2_7
{
margin-left: 350%;
}
.c-l-column_2_8 {
width: 400%;
}
.c-l-column_offset-2_8
{
margin-left: 400%;
}
.c-l-column_2_9 {
width: 450%;
}
.c-l-column_offset-2_9
{
margin-left: 450%;
}
.c-l-column_2_10 {
width: 500%;
}
.c-l-column_offset-2_10
{
margin-left: 500%;
}
.c-l-column_2_11 {
width: 550%;
}
.c-l-column_offset-2_11
{
margin-left: 550%;
}
.c-l-column_2_12 {
width: 600%;
}
.c-l-column_offset-2_12
{
margin-left: 600%;
}
.c-l-column_4_1 {
width: 25%;
}
.c-l-column_offset-4_1
{
margin-left: 25%;
}
.c-l-column_4_2 {
width: 50%;
}
.c-l-column_offset-4_2
{
margin-left: 50%;
}
.c-l-column_4_3 {
width: 75%;
}
.c-l-column_offset-4_3
{
margin-left: 75%;
}
.c-l-column_4_4 {
width: 100%;
}
.c-l-column_offset-4_4
{
margin-left: 100%;
}
.c-l-column_4_5 {
width: 125%;
}
.c-l-column_offset-4_5
{
margin-left: 125%;
}
.c-l-column_4_6 {
width: 150%;
}
.c-l-column_offset-4_6
{
margin-left: 150%;
}
.c-l-column_4_7 {
width: 175%;
}
.c-l-column_offset-4_7
{
margin-left: 175%;
}
.c-l-column_4_8 {
width: 200%;
}
.c-l-column_offset-4_8
{
margin-left: 200%;
}
.c-l-column_4_9 {
width: 225%;
}
.c-l-column_offset-4_9
{
margin-left: 225%;
}
.c-l-column_4_10 {
width: 250%;
}
.c-l-column_offset-4_10
{
margin-left: 250%;
}
.c-l-column_4_11 {
width: 275%;
}
.c-l-column_offset-4_11
{
margin-left: 275%;
}
.c-l-column_4_12 {
width: 300%;
}
.c-l-column_offset-4_12
{
margin-left: 300%;
}
.c-l-column_6_1 {
width: 16.6667%;
}
.c-l-column_offset-6_1
{
margin-left: 16.6667%;
}
.c-l-column_6_2 {
width: 33.3333%;
}
.c-l-column_offset-6_2
{
margin-left: 33.3333%;
}
.c-l-column_6_3 {
width: 50%;
}
.c-l-column_offset-6_3
{
margin-left: 50%;
}
.c-l-column_6_4 {
width: 66.6667%;
}
.c-l-column_offset-6_4
{
margin-left: 66.6667%;
}
.c-l-column_6_5 {
width: 83.3333%;
}
.c-l-column_offset-6_5
{
margin-left: 83.3333%;
}
.c-l-column_6_6 {
width: 100%;
}
.c-l-column_offset-6_6
{
margin-left: 100%;
}
.c-l-column_6_7 {
width: 116.667%;
}
.c-l-column_offset-6_7
{
margin-left: 116.667%;
}
.c-l-column_6_8 {
width: 133.333%;
}
.c-l-column_offset-6_8
{
margin-left: 133.333%;
}
.c-l-column_6_9 {
width: 150%;
}
.c-l-column_offset-6_9
{
margin-left: 150%;
}
.c-l-column_6_10 {
width: 166.667%;
}
.c-l-column_offset-6_10
{
margin-left: 166.667%;
}
.c-l-column_6_11 {
width: 183.333%;
}
.c-l-column_offset-6_11
{
margin-left: 183.333%;
}
.c-l-column_6_12 {
width: 200%;
}
.c-l-column_offset-6_12
{
margin-left: 200%;
}
.c-l-column_8_1 {
width: 12.5%;
}
.c-l-column_offset-8_1
{
margin-left: 12.5%;
}
.c-l-column_8_2 {
width: 25%;
}
.c-l-column_offset-8_2
{
margin-left: 25%;
}
.c-l-column_8_3 {
width: 37.5%;
}
.c-l-column_offset-8_3
{
margin-left: 37.5%;
}
.c-l-column_8_4 {
width: 50%;
}
.c-l-column_offset-8_4
{
margin-left: 50%;
}
.c-l-column_8_5 {
width: 62.5%;
}
.c-l-column_offset-8_5
{
margin-left: 62.5%;
}
.c-l-column_8_6 {
width: 75%;
}
.c-l-column_offset-8_6
{
margin-left: 75%;
}
.c-l-column_8_7 {
width: 87.5%;
}
.c-l-column_offset-8_7
{
margin-left: 87.5%;
}
.c-l-column_8_8 {
width: 100%;
}
.c-l-column_offset-8_8
{
margin-left: 100%;
}
.c-l-column_8_9 {
width: 112.5%;
}
.c-l-column_offset-8_9
{
margin-left: 112.5%;
}
.c-l-column_8_10 {
width: 125%;
}
.c-l-column_offset-8_10
{
margin-left: 125%;
}
.c-l-column_8_11 {
width: 137.5%;
}
.c-l-column_offset-8_11
{
margin-left: 137.5%;
}
.c-l-column_8_12 {
width: 150%;
}
.c-l-column_offset-8_12
{
margin-left: 150%;
}
.c-l-column_10_1 {
width: 10%;
}
.c-l-column_offset-10_1
{
margin-left: 10%;
}
.c-l-column_10_2 {
width: 20%;
}
.c-l-column_offset-10_2
{
margin-left: 20%;
}
.c-l-column_10_3 {
width: 30%;
}
.c-l-column_offset-10_3
{
margin-left: 30%;
}
.c-l-column_10_4 {
width: 40%;
}
.c-l-column_offset-10_4
{
margin-left: 40%;
}
.c-l-column_10_5 {
width: 50%;
}
.c-l-column_offset-10_5
{
margin-left: 50%;
}
.c-l-column_10_6 {
width: 60%;
}
.c-l-column_offset-10_6
{
margin-left: 60%;
}
.c-l-column_10_7 {
width: 70%;
}
.c-l-column_offset-10_7
{
margin-left: 70%;
}
.c-l-column_10_8 {
width: 80%;
}
.c-l-column_offset-10_8
{
margin-left: 80%;
}
.c-l-column_10_9 {
width: 90%;
}
.c-l-column_offset-10_9
{
margin-left: 90%;
}
.c-l-column_10_10 {
width: 100%;
}
.c-l-column_offset-10_10
{
margin-left: 100%;
}
.c-l-column_10_11 {
width: 110%;
}
.c-l-column_offset-10_11
{
margin-left: 110%;
}
.c-l-column_10_12 {
width: 120%;
}
.c-l-column_offset-10_12
{
margin-left: 120%;
}
.c-l-column_12_1 {
width: 8.33333%;
}
.c-l-column_offset-12_1
{
margin-left: 8.33333%;
}
.c-l-column_12_2 {
width: 16.6667%;
}
.c-l-column_offset-12_2
{
margin-left: 16.6667%;
}
.c-l-column_12_3 {
width: 25%;
}
.c-l-column_offset-12_3
{
margin-left: 25%;
}
.c-l-column_12_4 {
width: 33.3333%;
}
.c-l-column_offset-12_4
{
margin-left: 33.3333%;
}
.c-l-column_12_5 {
width: 41.6667%;
}
.c-l-column_offset-12_5
{
margin-left: 41.6667%;
}
.c-l-column_12_6 {
width: 50%;
}
.c-l-column_offset-12_6
{
margin-left: 50%;
}
.c-l-column_12_7 {
width: 58.3333%;
}
.c-l-column_offset-12_7
{
margin-left: 58.3333%;
}
.c-l-column_12_8 {
width: 66.6667%;
}
.c-l-column_offset-12_8
{
margin-left: 66.6667%;
}
.c-l-column_12_9 {
width: 75%;
}
.c-l-column_offset-12_9
{
margin-left: 75%;
}
.c-l-column_12_10 {
width: 83.3333%;
}
.c-l-column_offset-12_10
{
margin-left: 83.3333%;
}
.c-l-column_12_11 {
width: 91.6667%;
}
.c-l-column_offset-12_11
{
margin-left: 91.6667%;
}
.c-l-column_12_12 {
width: 100%;
}
.c-l-column_offset-12_12
{
margin-left: 100%;
}
@media (max-width:
1020px) {
.c-l-column_sm-2_1 {
width: 50%;
}
.c-l-column_sm-2_2 {
width: 100%;
}
.c-l-column_sm-2_3 {
width: 150%;
}
.c-l-column_sm-2_4 {
width: 200%;
}
.c-l-column_sm-2_5 {
width: 250%;
}
.c-l-column_sm-2_6 {
width: 300%;
}
.c-l-column_sm-2_7 {
width: 350%;
}
.c-l-column_sm-2_8 {
width: 400%;
}
.c-l-column_sm-2_9 {
width: 450%;
}
.c-l-column_sm-2_10
{
width: 500%;
}
.c-l-column_sm-2_11
{
width: 550%;
}
.c-l-column_sm-2_12
{
width: 600%;
}
.c-l-column_sm-4_1 {
width: 25%;
}
.c-l-column_sm-4_2 {
width: 50%;
}
.c-l-column_sm-4_3 {
width: 75%;
}
.c-l-column_sm-4_4 {
width: 100%;
}
.c-l-column_sm-4_5 {
width: 125%;
}
.c-l-column_sm-4_6 {
width: 150%;
}
.c-l-column_sm-4_7 {
width: 175%;
}
.c-l-column_sm-4_8 {
width: 200%;
}
.c-l-column_sm-4_9 {
width: 225%;
}
.c-l-column_sm-4_10
{
width: 250%;
}
.c-l-column_sm-4_11
{
width: 275%;
}
.c-l-column_sm-4_12
{
width: 300%;
}
.c-l-column_sm-6_1 {
width: 16.6667%;
}
.c-l-column_sm-6_2 {
width: 33.3333%;
}
.c-l-column_sm-6_3 {
width: 50%;
}
.c-l-column_sm-6_4 {
width: 66.6667%;
}
.c-l-column_sm-6_5 {
width: 83.3333%;
}
.c-l-column_sm-6_6 {
width: 100%;
}
.c-l-column_sm-6_7 {
width: 116.667%;
}
.c-l-column_sm-6_8 {
width: 133.333%;
}
.c-l-column_sm-6_9 {
width: 150%;
}
.c-l-column_sm-6_10
{
width: 166.667%;
}
.c-l-column_sm-6_11
{
width: 183.333%;
}
.c-l-column_sm-6_12
{
width: 200%;
}
.c-l-column_sm-8_1 {
width: 12.5%;
}
.c-l-column_sm-8_2 {
width: 25%;
}
.c-l-column_sm-8_3 {
width: 37.5%;
}
.c-l-column_sm-8_4 {
width: 50%;
}
.c-l-column_sm-8_5 {
width: 62.5%;
}
.c-l-column_sm-8_6 {
width: 75%;
}
.c-l-column_sm-8_7 {
width: 87.5%;
}
.c-l-column_sm-8_8 {
width: 100%;
}
.c-l-column_sm-8_9 {
width: 112.5%;
}
.c-l-column_sm-8_10
{
width: 125%;
}
.c-l-column_sm-8_11
{
width: 137.5%;
}
.c-l-column_sm-8_12
{
width: 150%;
}
.c-l-column_sm-10_1
{
width: 10%;
}
.c-l-column_sm-10_2
{
width: 20%;
}
.c-l-column_sm-10_3
{
width: 30%;
}
.c-l-column_sm-10_4
{
width: 40%;
}
.c-l-column_sm-10_5
{
width: 50%;
}
.c-l-column_sm-10_6
{
width: 60%;
}
.c-l-column_sm-10_7
{
width: 70%;
}
.c-l-column_sm-10_8
{
width: 80%;
}
.c-l-column_sm-10_9
{
width: 90%;
}
.c-l-column_sm-10_10
{
width: 100%;
}
.c-l-column_sm-10_11
{
width: 110%;
}
.c-l-column_sm-10_12
{
width: 120%;
}
.c-l-column_sm-12_1
{
width: 8.33333%;
}
.c-l-column_sm-12_2
{
width: 16.6667%;
}
.c-l-column_sm-12_3
{
width: 25%;
}
.c-l-column_sm-12_4
{
width: 33.3333%;
}
.c-l-column_sm-12_5
{
width: 41.6667%;
}
.c-l-column_sm-12_6
{
width: 50%;
}
.c-l-column_sm-12_7
{
width: 58.3333%;
}
.c-l-column_sm-12_8
{
width: 66.6667%;
}
.c-l-column_sm-12_9
{
width: 75%;
}
.c-l-column_sm-12_10
{
width: 83.3333%;
}
.c-l-column_sm-12_11
{
width: 91.6667%;
}
.c-l-column_sm-12_12
{
width: 100%;
}
}
@media (min-width:
1220px) {
.c-l-column_bg-2_1 {
width: 50%;
}
.c-l-column_bg-2_2 {
width: 100%;
}
.c-l-column_bg-2_3 {
width: 150%;
}
.c-l-column_bg-2_4 {
width: 200%;
}
.c-l-column_bg-2_5 {
width: 250%;
}
.c-l-column_bg-2_6 {
width: 300%;
}
.c-l-column_bg-2_7 {
width: 350%;
}
.c-l-column_bg-2_8 {
width: 400%;
}
.c-l-column_bg-2_9 {
width: 450%;
}
.c-l-column_bg-2_10
{
width: 500%;
}
.c-l-column_bg-2_11
{
width: 550%;
}
.c-l-column_bg-2_12
{
width: 600%;
}
.c-l-column_bg-4_1 {
width: 25%;
}
.c-l-column_bg-4_2 {
width: 50%;
}
.c-l-column_bg-4_3 {
width: 75%;
}
.c-l-column_bg-4_4 {
width: 100%;
}
.c-l-column_bg-4_5 {
width: 125%;
}
.c-l-column_bg-4_6 {
width: 150%;
}
.c-l-column_bg-4_7 {
width: 175%;
}
.c-l-column_bg-4_8 {
width: 200%;
}
.c-l-column_bg-4_9 {
width: 225%;
}
.c-l-column_bg-4_10
{
width: 250%;
}
.c-l-column_bg-4_11
{
width: 275%;
}
.c-l-column_bg-4_12
{
width: 300%;
}
.c-l-column_bg-6_1 {
width: 16.6667%;
}
.c-l-column_bg-6_2 {
width: 33.3333%;
}
.c-l-column_bg-6_3 {
width: 50%;
}
.c-l-column_bg-6_4 {
width: 66.6667%;
}
.c-l-column_bg-6_5 {
width: 83.3333%;
}
.c-l-column_bg-6_6 {
width: 100%;
}
.c-l-column_bg-6_7 {
width: 116.667%;
}
.c-l-column_bg-6_8 {
width: 133.333%;
}
.c-l-column_bg-6_9 {
width: 150%;
}
.c-l-column_bg-6_10
{
width: 166.667%;
}
.c-l-column_bg-6_11
{
width: 183.333%;
}
.c-l-column_bg-6_12
{
width: 200%;
}
.c-l-column_bg-8_1 {
width: 12.5%;
}
.c-l-column_bg-8_2 {
width: 25%;
}
.c-l-column_bg-8_3 {
width: 37.5%;
}
.c-l-column_bg-8_4 {
width: 50%;
}
.c-l-column_bg-8_5 {
width: 62.5%;
}
.c-l-column_bg-8_6 {
width: 75%;
}
.c-l-column_bg-8_7 {
width: 87.5%;
}
.c-l-column_bg-8_8 {
width: 100%;
}
.c-l-column_bg-8_9 {
width: 112.5%;
}
.c-l-column_bg-8_10
{
width: 125%;
}
.c-l-column_bg-8_11
{
width: 137.5%;
}
.c-l-column_bg-8_12
{
width: 150%;
}
.c-l-column_bg-10_1
{
width: 10%;
}
.c-l-column_bg-10_2
{
width: 20%;
}
.c-l-column_bg-10_3
{
width: 30%;
}
.c-l-column_bg-10_4
{
width: 40%;
}
.c-l-column_bg-10_5
{
width: 50%;
}
.c-l-column_bg-10_6
{
width: 60%;
}
.c-l-column_bg-10_7
{
width: 70%;
}
.c-l-column_bg-10_8
{
width: 80%;
}
.c-l-column_bg-10_9
{
width: 90%;
}
.c-l-column_bg-10_10
{
width: 100%;
}
.c-l-column_bg-10_11
{
width: 110%;
}
.c-l-column_bg-10_12
{
width: 120%;
}
.c-l-column_bg-12_1
{
width: 8.33333%;
}
.c-l-column_bg-12_2
{
width: 16.6667%;
}
.c-l-column_bg-12_3
{
width: 25%;
}
.c-l-column_bg-12_4
{
width: 33.3333%;
}
.c-l-column_bg-12_5
{
width: 41.6667%;
}
.c-l-column_bg-12_6
{
width: 50%;
}
.c-l-column_bg-12_7
{
width: 58.3333%;
}
.c-l-column_bg-12_8
{
width: 66.6667%;
}
.c-l-column_bg-12_9
{
width: 75%;
}
.c-l-column_bg-12_10
{
width: 83.3333%;
}
.c-l-column_bg-12_11
{
width: 91.6667%;
}
.c-l-column_bg-12_12
{
width: 100%;
}
}
.c-banner {
background-color: rgba(128, 128, 128, 0.1);
display: block;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
transition-delay: 0s, 0s;
transition-duration: 0.15s, 0.15s;
transition-property: filter,
-webkit-filter;
transition-timing-function: ease-in,
ease-in;
}
.c-banner_state_hover:hover
{
filter: brightness(1.2);
}
.c-banner__image {
max-width: 100%;
}
.c-banner
.c-banner__background {
display: block;
height: 100%;
width: 100%;
}
.c-banner
.c-banner__image {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.c-banner__product-card
{
bottom: 10px;
position: absolute;
right: 10px;
top: 10px;
width: calc(50% - 10px);
}
.c-banner_size_relative
{
height: 100%;
width: 100%;
}
.c-product-item {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-x-system-font: none;
background-color: rgb(255, 255, 255);
border-bottom-color: transparent;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: transparent;
border-left-style: solid;
border-left-width: 1px;
border-right-color: transparent;
border-right-style: solid;
border-right-width: 1px;
border-top-color: transparent;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(28, 28, 28);
display: block;
font-family: "Helvetica
Neue",Helvetica,Arial,sans-serif;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-size: 12px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant-alternates: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-variant-position: normal;
font-weight: normal;
line-height: 1.4;
position: relative;
text-align: left;
text-decoration-color: -moz-use-text-color;
text-decoration-line: none;
text-decoration-style: solid;
transition-delay: 0s;
transition-duration: 0.15s;
transition-property: border-color;
transition-timing-function: ease-in;
}
3. Nah
sesudah css diletakkan sekarang kami akan mengatifkan kode css nya
Copy html dibawah
ini . (letakkan kode html di bagian yang akan ditampilkan(harus di bagian tag
<body> KODE HTML </body>)
<footer class='header__bottom-bar'>
<div
class='header__main-navigation'>
<div
class='c-main-navigation
c-main-navigation_js_inited'>
<div
class='c-main-navigation__nav-wrapper'>
<label
class='show-menu' for='show-menu'><i class='fa fa-bars
fa-2'/></label>
<input autocomplete='off' id='show-menu'
role='button' type='checkbox'/>
<nav
class='c-main-navigation__nav'>
<span
class='c-main-navigation__item c-main-navigation__item_style_default
c-main-navigation__item_type_button' data-id='2'
data-tracking-nav-header='Elektronik'>
<span
class='c-main-navigation__item-caption'>
Elektronik
</span>
</span>
<span
class='c-main-navigation__item c-main-navigation__item_style_default
c-main-navigation__item_type_button' data-id='3'
data-tracking-nav-header='Fashion Wanita'>
<span
class='c-main-navigation__item-caption'>
Fashion Wanita
</span>
</span>
<span
class='c-main-navigation__item c-main-navigation__item_style_default
c-main-navigation__item_type_button' data-id='4'
data-tracking-nav-header='Fashion Pria'>
<span
class='c-main-navigation__item-caption'>
Fashion Pria
</span>
</span>
<span
class='c-main-navigation__item c-main-navigation__item_style_default
c-main-navigation__item_type_button' data-id='5'
data-tracking-nav-header='Peralatan Rumah Tangga'>
<span
class='c-main-navigation__item-caption'>
Peralatan Rumah Tangga
</span>
</span>
<span
class='c-main-navigation__item c-main-navigation__item_style_default
c-main-navigation__item_type_button' data-id='6'
data-tracking-nav-header='Kesehatan & Kecantikan'>
<span
class='c-main-navigation__item-caption'>
Kesehatan &
Kecantikan
</span>
</span>
<span
class='c-main-navigation__item c-main-navigation__item_style_default
c-main-navigation__item_type_button' data-id='7' data-tracking-nav-header='Bayi
& Mainan Anak'>
<span
class='c-main-navigation__item-caption'>
Bayi & Mainan
Anak
</span>
</span>
<span
class='c-main-navigation__item c-main-navigation__item_style_default
c-main-navigation__item_type_button' data-id='8'
data-tracking-nav-header='Olahraga & Travel'>
<span
class='c-main-navigation__item-caption'>
Olahraga &
Travel
</span>
</span>
<span
class='c-main-navigation__item c-main-navigation__item_style_default
c-main-navigation__item_type_button' data-id='9'
data-tracking-nav-header='Groceries, Otomotif & Media'>
<span
class='c-main-navigation__item-caption'>
Groceries, Otomotif
& Media
</span>
</span>
<span
class='c-main-navigation__item c-main-navigation__item_style_bold-orange
c-main-navigation__item_type_button' data-id='10'
data-tracking-nav-header='Highlight'>
<span
class='c-main-navigation__item-caption'>
Highlight
</span>
</span>
<span
class='c-main-navigation__item c-main-navigation__item_style_bold-cyan
c-main-navigation__item_type_button' data-id='11'
data-tracking-nav-header='Shop Brands'>
<span
class='c-main-navigation__item-caption'>
Shop Brands
</span>
</span>
</nav>
</div>
</div>
</div>
<ul
class='c-notifier c-notifier_js_inited'>
</ul>
</footer>
4. Nah
sekarang anda tinggal save ! dan lihat tampilan blog anda!
(menu ini tidak
responsive , anda bisa mengeditnya menjadi responsive )
Tidak ada komentar:
Posting Komentar
Selamat datang Di Websiteaeria , kami sangat menghargai bagi yang mengunjungi Blog kami .