Webleb - Snippet di Codice -

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

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

Consigliato

numeri cardinali

Modulo di accesso moderno V2

Un codice di Metehan

HTML

CSS

JS

Consigliato

numeri cardinali

Modulo di accesso moderno V2

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS