Kod Za Navigaciju Sa Slikama

<!
DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>
/* Please ❤ this if you like it! */
@import url('https://fonts.googleapis.com/css2?
family=Roboto:wght@400;500;700;900&display=swap');
*,
*::before,
*::after {
box-sizing: border-box;
body{
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 1.4;
color: #fff;
background-color: green;
overflow-x: hidden;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg');
background-position: center;
background-repeat: repeat;
background-size: 4%;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
padding-top: 100px;
padding-bottom: 300px;
.sec-center {
position: relative;
max-width: 100%;
text-align: center;
z-index: 200;
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
position: absolute;
left: -9999px;
opacity: 0;
pointer-events: none;
.dark-light:checked + label,
.dark-light:not(:checked) + label{
position: fixed;
top: 40px;
right: 40px;
z-index: 20000;
display: block;
border-radius: 50%;
width: 46px;
height: 46px;
cursor: pointer;
transition: all 200ms linear;
box-shadow: 0 0 25px rgba(255,235,167,.45);
.dark-light:checked + label{
transform: rotate(360deg);
.dark-light:checked + label:after,
.dark-light:not(:checked) + label:after{
position: absolute;
content: '';
top: 1px;
left: 1px;
overflow: hidden;
z-index: 2;
display: block;
border-radius: 50%;
width: 44px;
height: 44px;
background-color: #102770;
background-image: url('https://assets.codepen.io/1462889/moon.svg');
background-size: 20px 20px;
background-repeat: no-repeat;
opacity: 0;
.dark-light:checked + label:after {
opacity: 1;
.dark-light:checked + label:before,
.dark-light:not(:checked) + label:before{
position: absolute;
content: '';
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
display: block;
border-radius: 50%;
width: 46px;
height: 46px;
background-color: #48dbfb;
background-image: url('https://assets.codepen.io/1462889/sun.svg');
background-size: 25px 25px;
background-repeat: no-repeat;
.dark-light:checked + label:before{
.light-back{
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-color: #fff;
overflow: hidden;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg');
background-repeat: repeat;
background-size: 4%;
height: 100%;
width: 100%;
opacity: 0;
.dark-light:checked ~ .light-back{
opacity: 1;
.dropdown:checked + label,
.dropdown:not(:checked) + label{
position: relative;
font-weight: 500;
font-size: 15px;
line-height: 2;
height: 50px;
border-radius: 4px;
width: 220px;
letter-spacing: 1px;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
text-align: center;
border: none;
background-color: #ffeba7;
cursor: pointer;
color: #102770;
box-shadow: 0 12px 35px 0 rgba(255,235,167,.15);
.dark-light:checked ~ .sec-center .for-dropdown{
color: #ffeba7;
box-shadow: 0 12px 35px 0 rgba(16,39,112,.25);
.dropdown:checked + label:before,
.dropdown:not(:checked) + label:before{
position: fixed;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
z-index: -1;
cursor: auto;
.dropdown:checked + label:before{
pointer-events: auto;
.dropdown:not(:checked) + label .uil {
font-size: 24px;
margin-left: 10px;
transition: transform 200ms linear;
.dropdown:checked + label .uil {
font-size: 24px;
margin-left: 10px;
.section-dropdown {
position: absolute;
padding: 5px;
top: 70px;
left: 0;
width: 100%;
border-radius: 4px;
display: block;
box-shadow: 0 14px 35px 0 rgba(9,9,12,0.4);
z-index: 2;
opacity: 0;
transform: translateY(20px);

}
.dark-light:checked ~ .sec-center .section-dropdown {
background-color: #fff;
box-shadow: 0 14px 35px 0 rgba(9,9,12,0.15);
.dropdown:checked ~ .section-dropdown{
opacity: 1;
transform: translateY(0);
.section-dropdown:before {
position: absolute;
top: -20px;
left: 0;
width: 100%;
height: 20px;
content: '';
display: block;
z-index: 1;
.section-dropdown:after {
position: absolute;
top: -7px;
left: 30px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #111;
content: '';
display: block;
z-index: 2;
.dark-light:checked ~ .sec-center .section-dropdown:after {
border-bottom: 8px solid #fff;
a{
position: relative;
color: #fff;
font-weight: 500;
font-size: 15px;
border-radius: 2px;
padding: 5px 0;
padding-left: 20px;
padding-right: 15px;
margin: 2px 0;
text-align: left;
text-decoration: none;
display: flex;
justify-content: space-between;
-ms-flex-pack: distribute;
.dark-light:checked ~ .sec-center .section-dropdown a {

color: #102770;
a:hover {
color: #102770;
.dark-light:checked ~ .sec-center .section-dropdown a:hover {
color: #ffeba7;
a .uil {
font-size: 22px;
.dropdown-sub:checked + label,
.dropdown-sub:not(:checked) + label{
position: relative;
color: #fff;
font-weight: 500;
font-size: 15px;
border-radius: 2px;
padding: 5px 0;
padding-left: 20px;
padding-right: 15px;
text-align: left;
text-decoration: none;
display: flex;
justify-content: space-between;
-ms-flex-pack: distribute;
cursor: pointer;
.dropdown-sub:checked + label .uil,
.dropdown-sub:not(:checked) + label .uil{
font-size: 22px;
.dropdown-sub:not(:checked) + label .uil {
.dropdown-sub:checked + label .uil {
.dropdown-sub:checked + label:hover,
.dropdown-sub:not(:checked) + label:hover{
color: #102770;
.dark-light:checked ~ .sec-center .section-dropdown .for-dropdown-sub{
color: #102770;
.dark-light:checked ~ .sec-center .section-dropdown .for-dropdown-sub:hover{
color: #ffeba7;
.section-dropdown-sub {
position: relative;
display: block;
width: 100%;
opacity: 0;
max-height: 0;
padding-left: 10px;
padding-right: 3px;
overflow: hidden;
.dropdown-sub:checked ~ .section-dropdown-sub{
opacity: 1;
max-height: 999px;
.section-dropdown-sub a {
font-size: 14px;
.section-dropdown-sub a .uil {
font-size: 20px;
.logo {
position: fixed;
top: 50px;
left: 40px;
display: block;
z-index: 11000000;
background-color: transparent;
border-radius: 0;
padding: 0;
.logo:hover {
background-color: transparent;
.logo img {
height: 26px;
width: auto;
display: block;
.dark-light:checked ~ .logo img{
filter: brightness(10%);
@media screen and (max-width: 991px) {
.logo {
top: 30px;
left: 20px;
.dark-light:checked + label,
.dark-light:not(:checked) + label{
top: 20px;
right: 20px;
</style>
</head>
<body>
<input class="dark-light" type="checkbox" id="dark-light" name="dark-light"/>

<label for="dark-light"></label>
<div class="light-back"></div>
<a href="https://front.codes/" class="logo" target="_blank">
<img src="https://assets.codepen.io/1462889/fcy.png" alt="">
</a>
<div class="sec-center">
<input class="dropdown" type="checkbox" id="dropdown" name="dropdown"/>
<label class="for-dropdown" for="dropdown">Dropdown Menu <i class="uil uil-

arrow-down"></i></label>
<div class="section-dropdown">
<a href="#">Dropdown Link <i class="uil uil-arrow-right"></i></a>
<input class="dropdown-sub" type="checkbox" id="dropdown-sub"

name="dropdown-sub"/>
<label class="for-dropdown-sub" for="dropdown-sub">Dropdown Sub <i

class="uil uil-plus"></i></label>
<div class="section-dropdown-sub">
</div>
</div>
</div>
<div class="sec-center1">
<P> Koma </P>
</div>
</body>
</html>

Kod Za Navigaciju Sa Slikama

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Kod Za Navigaciju Sa Slikama

Uploaded by

Copyright:

Available Formats

<!

/* Please ❤ this if you like it! */

font-family: 'Roboto', sans-serif;

transition: all 200ms linear;

box-shadow: 0 0 25px rgba(255,235,167,.45);

background-size: 20px 20px;

background-size: 25px 25px;

transition: all 200ms linear;

transition: all 200ms linear;

font-family: 'Roboto', sans-serif;

transition: all 200ms linear;

box-shadow: 0 12px 35px 0 rgba(255,235,167,.15);

.dark-light:checked ~ .sec-center .for-dropdown{

box-shadow: 0 12px 35px 0 rgba(16,39,112,.25);

.dropdown:not(:checked) + label .uil {

transition: transform 200ms linear;

.dropdown:checked + label .uil {

transition: transform 200ms linear;

box-shadow: 0 14px 35px 0 rgba(9,9,12,0.4);

transition: all 200ms linear;

.dark-light:checked ~ .sec-center .section-dropdown {

box-shadow: 0 14px 35px 0 rgba(9,9,12,0.15);

border-left: 8px solid transparent;

border-right: 8px solid transparent;

border-bottom: 8px solid #111;

transition: all 200ms linear;

.dark-light:checked ~ .sec-center .section-dropdown:after {

border-bottom: 8px solid #fff;

transition: all 200ms linear;

font-family: 'Roboto', sans-serif;

.dark-light:checked ~ .sec-center .section-dropdown a {

.dark-light:checked ~ .sec-center .section-dropdown a:hover {

transition: all 200ms linear;

font-family: 'Roboto', sans-serif;

.dropdown-sub:checked + label .uil,

.dropdown-sub:not(:checked) + label .uil{

.dropdown-sub:not(:checked) + label .uil {

transition: transform 200ms linear;

.dropdown-sub:checked + label .uil {

transition: transform 200ms linear;

.dark-light:checked ~ .sec-center .section-dropdown .for-dropdown-sub{

.dark-light:checked ~ .sec-center .section-dropdown .for-dropdown-sub:hover{

transition: all 200ms linear;

transition: all 200ms linear;

.dark-light:checked ~ .logo img{

@media screen and (max-width: 991px) {

<input class="dark-light" type="checkbox" id="dark-light" name="dark-light"/>

<a href="https://front.codes/" class="logo" target="_blank">

<img src="https://assets.codepen.io/1462889/fcy.png" alt="">

<input class="dropdown" type="checkbox" id="dropdown" name="dropdown"/>

<label class="for-dropdown" for="dropdown">Dropdown Menu <i class="uil uil-

<a href="#">Dropdown Link <i class="uil uil-arrow-right"></i></a>

<input class="dropdown-sub" type="checkbox" id="dropdown-sub"

<label class="for-dropdown-sub" for="dropdown-sub">Dropdown Sub <i

<a href="#">Dropdown Link <i class="uil uil-arrow-right"></i></a>

<a href="#">Dropdown Link <i class="uil uil-arrow-right"></i></a>

<a href="#">Dropdown Link <i class="uil uil-arrow-right"></i></a>

<a href="#">Dropdown Link <i class="uil uil-arrow-right"></i></a>

<P> Koma </P>

You might also like