Webleb - Snippet di Codice -

1504 fastcode214

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

21 August 2025

Contenitore di animazione CSS con conto alla rovescia

25 November 2025

Bestiame pazzo 3D

20 September 2025

Modello HTML per portfolio sviluppatori

HTML

CSS

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;
}

Consigliato

Contenitore di animazione CSS con conto alla rovescia

Bestiame pazzo 3D

Modello HTML per portfolio sviluppatori

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS