Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

1 June 2025

Efeito de controle deslizante de imagem inicial do site

30 December 2024

body 
{
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
    color: #333;
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    padding: 20px;
}

.gallery-item {
    overflow: hidden;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item img:hover {
    transform: scale(1.1); /* Efeito de zoom na imagem */
}
header {
    background-color: goldenrod; /* Cor de fundo do cabeçalho */
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    width: 50px;
    margin-right: 20px;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {
    margin-right: 15px;
}

nav ul li a {
    color: white; /* Cor do texto do menu */
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
    text-decoration: underline;
}

main {
    padding: 20px;
    text-align: center;
}

.login-container, .register-container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    color: goldenrod; /* Cor dos títulos */
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
}

input[type="text"], input[type="password"], input[type="date"], input[type="email"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

button {
    
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: goldenrod; /* Cor dos botões */
    color: white;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #daa520; /* Efeito hover dos botões */
}

p {
    margin-top: 15px;
}

a {
    color: goldenrod; /* Cor dos links */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Recomendado

Efeito de controle deslizante de imagem inicial do site

Netflix

Um código por ytr3d3

HTML

CSS

JS

Recomendado

Efeito de controle deslizante de imagem inicial do site

Netflix

Um código por ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS