Webleb - Code-Snippets -

3831 bhanu.sharma55

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

13 June 2025

Karteikarte mit sicherem Pastellregister

15 May 2025

Ein Code von Mete

HTML

<!DOCTYPE html>

<head>

<title>Responsive_Navbar</title>

</head>

<body>

<nav>

</label>

<ul>

<li><a href="#">About-Us</a></li>

<li><a href="#">Service</a></li>

<li><a href="#">Contact-Us</a></li>

<li><a href="#">Feedback</a></li>

</ul>

</nav>

</body>

</html>

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */                                           
* {

margin: 0;

padding: 0;

text-decoration: none;

list-style: none;

box-sizing: border-box;

}

body {

font-family: monospace;

}

nav {

background-color: rgb(17, 17, 51);

height: 80px;

width: 100%;

}

.logo {

color: white;

font-size: 35px;

line-height: 80px;

padding: 0 100px;

font-weight: bold;

}

nav ul {

float: right;

margin-right: 20px;

}

nav ul li {

display: inline-block;

line-height: 80px;

margin: 0 5px;

}

nav ul li a {

color: white;

font-size: 17px;

padding: 7px 13px;

border-radius: 3px;

text-transform: uppercase;

}

.active,a:hover {

background: #1B9BFF;

transition: .5s;

}

.checkbtn {

font-size: 30px;

color: white;

float: right;

line-height: 80px;

margin-right: 40px;

cursor: pointer;

display: none;

}

#check {

display: none;

}

.main {

background-image: url("background.jpg");

width: 100%;

height: 89vh;

background-repeat: no-repeat;

background-size: cover;

}

@media (max-width : 950px) {

.logo {

font-size: 30px;

padding-left: 50px;

}

nav ul li a {

font-size: 16px;

}

@media (max-width : 850px) {

.checkbtn {

display: block;

}

ul {

position: fixed;

width: 100%;

height: 100vh;

background: #2C3E50;

top: 80px;

left: -100%;

text-align: center;

transition: all .5s;

}

nav ul li {

display: block;

margin: 50px 0;

line-height: 30px;

}

nav ul li a {

font-size: 20px;

}

a:hover,.active {

background: none;

color: #0083E6;

}

#check:checked ~ ul {

left: 0;

}

Empfohlen

Ein Code von Metehan

Karteikarte mit sicherem Pastellregister

Ein Code von Mete

HTML

CSS

JS

Empfohlen

Ein Code von Metehan

Karteikarte mit sicherem Pastellregister

Ein Code von Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS