Matrix est un répertoire de page d'accueil

608 Metehan

Ouvrir dans l'éditeur Publiez votre code

Matrix est un répertoire de page d'accueil

Recommandé

17 September 2024

Calculateur de date

30 April 2024

Modèle de notation des étoiles animées

1 June 2024

Animation de bouton gratuite CSS

HTML

CSS

body {

background-color: #f9e74d; /* Arka plan rengi */

background-image: repeating-linear-gradient(

45deg,

rgba(255, 255, 255, 0.3) 0%,

rgba(255, 255, 255, 0.3) 25%,

rgba(255, 255, 255, 0.5) 25%,

rgba(255, 255, 255, 0.5) 50%

); /* Matris deseni */

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

.login-container {

background-color: white;

padding: 40px;

border-radius: 15px;

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);

text-align: center;

width: 350px;

}

h1 {

color: #333;

margin-bottom: 20px;

}

.input-group {

margin-bottom: 15px;

}

input[type="text"], input[type="password"] {

width: 100%;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

transition: border-color 0.3s;

}

input[type="text"]:focus, input[type="password"]:focus {

border-color: #f9d74d; /* Sarı ton */

outline: none;

}

button {

background-color: #f9e74d; /* Sarı ton */

border: none;

padding: 10px;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

transition: background-color 0.3s;

}

button:hover {

background-color: #e6c72e; /* Daha koyu sarı */

}

#message {

color: red;

margin-top: 10px;

}

.footer {

margin-top: 20px;

}

.footer p {

color: #666;

}

.footer a {

color: #f9e74d;

text-decoration: none;

}

.footer a:hover {

text-decoration: underline;

}

Recommandé

Calculateur de date

Modèle de notation des étoiles animées

Animation de bouton gratuite CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS