• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Panel logowania pomoc z prawidłowym ustawieniem rzeczy ja początkujący

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
311 wizyt
pytanie zadane 1 lipca 2022 w HTML i CSS przez Lawly111 Nowicjusz (120 p.)

Ogólnie jestem początkujący w tym temacie i prosiłbym o pomoc żeby ktoś mi wyjaśnił co zrobić żeby było poprawnie 

robiłem sobie panel logowania w html i css od tego pana https://www.youtube.com/watch?v=9JYOWKmFWzw&t=0s

zrobiłem wszystko dokładnie tak samo jak osoba z tego filmiku. i większość rzeczy jest, ale nie wiem co zrobić żeby ramka była do góry i napis login nad tym. obraz poniżej 

Jeśli chodzi o kod w którym jest napisane także załączam :

*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
body {
  display: flex;
  height: 100vh;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: #151515;
}
.login-form {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: auto;
  background: #1b1b1b;
  padding: 300px 200px 80px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: inset 0 0 1px #272727;
}
.text {
  text-align: center;
  font-size: 30px;
  color: #c7c7c7;
  margin-bottom: 2rem;
  font-weight: 600;
  letter-spacing: 2px;
  
}
form {
  margin-top: 40px;
}
form .field {
  margin-top: 20px;
  display: flex;
}
.field .fas {
  height: 50px;
  width: 60px;
  color: #868686;
  font-size: 20px;
  line-height: 50px;
  border: 1px solid #444;
  border-right: none;
  border-radius: 5px;
  background: linear-gradient(#333,#222);
}

.field input,form button {
  height: 50px;
  width: 100%;
  outline: none;
  font-size: 19px;
  color: #868686;
  padding: 0 15px;
  border-radius: 5px;
  border: 1px solid #444;
  caret-color: #339933;
  background: linear-gradient(#333,#222);

}
input:focus{
  color: #339933;
  box-shadow: 0 0 5px rgba(0,255,0,.2),
              inset 0 0 5px rgba(0,255,0,.1);
  background: linear-gradient(#333933,#222922);
  animation: glow .8s ease-out infinite alternate;
}
@keyframes glow {
  100%{
    border-color: #339933;
    box-shadow: 0 0 5px rgba(0,255,0,.2)
                inset 0 0 5px rgba(0,0,0,.1)
  }

}
button {
  margin-top: 30px;
  border-radius: 5px!important;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
}
button:hover{
  color: #339933;
  border: 1px solid #339933;
  box-shadow: 0 0 5px rgba(0,255,0,.3),
              0 0 10px rgba(0,255,0,.2),
              0 0 15px rgba(0,255,0,.2),
              0 2px 0 black;
}
.link {
  margin-top: 25px;
  color: #868686;
}
.link a{
  color: #339933;
  text-decoration: none;
}
.link a:hover{
  text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Glowing login</title>
    <link rel="stylesheet" href="testcss.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="login-form"></div>
    <div class="text">LOGIN</div>
    <form>
      <div class="field">
      <div class="fas fa-envelope"></div>
      <input type="text" placeholder="Email or Phone">
      </div>
      <div class="field">
        <div class="fas fa-lock"></div>
        <input type="password" placeholder="Password">
        </div>
        <button>LOGIN</button>
        <div class="link">
          Not a member?
          <a href="#">Signup now</a>
        </div>
    </form>
  </div>


  </body>
</html>

 

1 odpowiedź

0 głosów
odpowiedź 1 lipca 2022 przez VBService Ekspert (255,900 p.)
edycja 1 lipca 2022 przez VBService

Masz w linii 10 domknięty div, a dla którego "domknięcie" jest w linii 27

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Glowing login</title>
    <link rel="stylesheet" href="testcss.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="login-form"></div>
    <div class="text">LOGIN</div>
    <form>
      <div class="field">
      <div class="fas fa-envelope"></div>
      <input type="text" placeholder="Email or Phone">
      </div>
      <div class="field">
        <div class="fas fa-lock"></div>
        <input type="password" placeholder="Password">
        </div>
        <button>LOGIN</button>
        <div class="link">
          Not a member?
          <a href="#">Signup now</a>
        </div>
    </form>
  </div>
 
 
  </body>
</html>

 

no i w css musisz poprawić

.login-form {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: auto;
  background: #1b1b1b;
  padding: 300px 200px 80px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: inset 0 0 1px #272727;
}

 

tu brakuje przecinka

@keyframes glow {
  100%{
    border-color: #339933;
    box-shadow: 0 0 5px rgba(0,255,0,.2)
                inset 0 0 5px rgba(0,0,0,.1)
  }

Podobne pytania

0 głosów
1 odpowiedź 118 wizyt
pytanie zadane 30 maja 2017 w HTML i CSS przez Nightmare43 Użytkownik (630 p.)
0 głosów
1 odpowiedź 415 wizyt
pytanie zadane 30 listopada 2016 w HTML i CSS przez Alex.Ironside Stary wyjadacz (14,900 p.)
0 głosów
2 odpowiedzi 284 wizyt
pytanie zadane 4 czerwca 2015 w HTML i CSS przez Arjen Użytkownik (860 p.)

93,109 zapytań

142,088 odpowiedzi

321,611 komentarzy

62,450 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...