wie findet ihr mein login feld?
habe ein kleines login feld gemacht und später kommt noch python dazu
code html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="haha.css">
</head>
<body>
<header>
</header>
<main>
<div id="Anmeldefeld">
<form action="">
<h1 class="h1" >login</h1>
<input type="email" name="" placeholder="E-mail eingeben" id="" required="required"> <br>
<input type="password" name="" placeholder="password eingeben" id="" required="required"> <br>
<h4> <a href="#">Password vergessen?</a></h4>
<input type="submit" value="Anmelden">
</form>
</div>
</main>
<footer>
</footer>
</body>
</html>
css
body {
float: inline-start;
margin-top: 15%;
}
h1 {
font-family: sans-serif;
color: darkblue;
}
#Anmeldefeld {
display: flex;
align-items: center;
justify-content: center;
box-shadow: 20px 20px 10px gray;
border-style: solid;
}
3 Antworten
Dafür das du noch nicht so weit ist, ist das schon gut. 👍
Und es ist wie bei @yippijaja erwähnt, responsive.
Du könntest noch:
den Text zentrieren (css:text-align:center;)
die Schriftart auf auf das "Passwort vergessen" anwenden
border-radius auf die karte anwenden
Login groß schreiben
width bei der karte nicht auf 100% setzten, nur so viel wie benötigt
abstand nach unten beim Login button machen.
Du kannst dich auch bei anderen Frameworks inspirieren lassen oder sie auch verwenden. Meine Favoriten sind MDL (Material design lite) und Bootstrap.
Und lass dich nicht entmutigen, es ist am Anfang gar nicht mal so einfach einen Guten Loginscreen zu programmieren.
Und nach etwas:
Das ganze ist ja schon 5 Monate her, du könntest wenn du Lust hast ja nochmal eins ohne Hilfe bauen und es mit dem alten vergleichen
Es ist responsive. Passt also schon einmal.
Ansonsten kannst du mehr styles reinpacke und ich würde auch den box-shadow und border reduzieren. Außerdem gibt es kein Design. Man hat grundlegende Farben. Ein Layout und integriert es dann bestmöglichst. Auch hat das Formular kein Design.
Ich denke Du bist noch Anfänger. Meine ersten "Designs" sahen genauso aus :). Bleib dran :)
Beim nächsten Mal nutz einen Online-Dienst wie Pastebin oder github, dann musst den Quellcode hier nicht reinstellen.
Dran bleiben und von den Leuten hier nicht entmutigen lassen!
Du kannst einfach auf pastebin.com den Code einsetzen und bei Syntax Highlighting HTML auswählen
nimm dir doch mal ein framework von styles .
ich nenne mal das einfachste was nciht schön ist aber für den anfang eben einfach .
https://www.w3schools.com/w3css/w3css_input.asp
rechts oben auf bei der weltkugel deutsch stellen .
ein tutorial für CSS gibt es auch . damit du weisst wie du classen etc nutzen musst .
das w3.css kann man auch downloaden und direkt einbinden .
die vorlagen sehen wenigstens schon mal stimmig aus .
Das Ding ist als ich des optimiert habe ist des bissl nach unten gerutscht und es gibt gibt jetzt mehr Abstand
soll dir alles als vorlage dienen , was so mindestens sein sollte.
danke ich bin auch anfänger