Webleb - Snippets de Código -

3387 bhanu.sharma55

Abrir no Editor Publique Seu Código

Recomendado

13 October 2024

Exemplo de formulário de login animado em HTML

10 November 2024

Barra de navegação simples

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;

}

Recomendado

minha mídia social

Exemplo de formulário de login animado em HTML

Barra de navegação simples

HTML

CSS

JS

Recomendado

minha mídia social

Exemplo de formulário de login animado em HTML

Barra de navegação simples

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS