Webleb - Snippet di Codice -

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

4 December 2024

Concetto di orologio di reazione

15 May 2025

* {
  box-sizing: border-box;
  }
  
  *:focus {
    outline: none;
  }
  body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000000; 
  font-family: 'Arial', sans-serif;
  overflow: hidden;
  }
.button{
    display: flex;
  justify-content: center;
  align-items: center;
}
 .form-container {
  width: 420px;
  border: 1px solid #414141;
  padding: 32px 24px;
  font-size: 14px;
  font-family: inherit;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  border-radius: 16px;
}

.form-container button:active {
  scale: 0.95;
}

.form-container .form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-container .form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-container .form-group label {
  display: block;
  margin-bottom: 5px;
  color: #717171;
  font-weight: 600;
  font-size: 12px;
}

.form-container .form-group input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  background-color: transparent;
  border: 1px solid #414141;
}

.form-container .form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  resize: none;
  color: #fff;
  height: 96px;
  border: 1px solid #414141;
  background-color: transparent;
  font-family: inherit;
}

.form-container .form-group input::placeholder {
  opacity: 0.5;
}

.form-container .form-group input:focus {
  outline: none;
  border-color: #e81cff;
}

.form-container .form-group textarea:focus {
  outline: none;
  border-color: #e81cff;
}

.form-container .form-submit-btn {
  font-family: inherit;
  color: #717171;
  font-weight: 600;
  width: 40%;
  background: #313131;
  border: 1px solid #414141;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 6px;
}

.form-container .form-submit-btn:hover {
  background-color: #fff;
  border-color: #fff;
}

Consigliato

Concetto di orologio di reazione

Il codice di Mete

Un codice di hanyhelmy119

HTML

CSS

JS

Consigliato

Concetto di orologio di reazione

Il codice di Mete

Un codice di hanyhelmy119

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS