Today I'm going to do a project for myself, say the project feels terrible kaka, in general see people challenging #100DaysOfCode . Should try to follow everyone kaka star, First incarnate into someone who doesn't know anything about code, to challenge #100DaysOfCode
Day 1: The first day I went to school ... and the teacher taught many things and I got home doing the homework like this: do the homework create a Form Login Using Html + Css
First, I looked at the interface above and I implemented the code as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Login</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"> </head> <body> <div class="form_hoa"> <div class="box_login"> <form action="" method="POST"> <h2>Login Cpanel</h2> <div class="row-item"> <label for="email">Email</label> <input type="email" name="email" placeholder="Enter Email" /> </div> <div class="row-item"> <label for="password">Password</label> <input type="password" name="password" placeholder="Enter Password" /> </div> <div class="row-item"> <button type="submit">Login</button> </div> </form> </div> </div> </body> </html> The above code I wrote a form html, and at the same time I inserted a google font library to make the fonts beautiful and beautiful, in general, I'm bad at the interface, everyone will feel ugly :)
Next, I write CSS for Form Login above as follows:
*{margin:0;padding:0} body{ width:100%; margin: 0 auto; max-width: 1350px; font-family: 'Oswald', sans-serif; background: #F0E4E4; } .form_hoa{ width: 40%; margin: auto; } .form_hoa>.box_login{ width: 100%; margin-top: 30%; background-color: #d5d5d5; box-shadow: 0 0 2px #000; border-radius: 10px; padding: 20px; box-sizing: border-box; } .box_login form h2{ text-align: center; color:#000; font-size: 30px; } .box_login form>div{ padding: 5px 0px; } .box_login form label{ padding: 3px 0; display: block; font-weight: bold; } .box_login form input{ width: 100%; border:none; background-color: #fff; padding: 15px; border-radius: 5px; box-sizing: border-box; } .box_login form button{ width: 100%; border:none; background: #333; color:#fff; padding: 11px; border-radius: 5px; box-sizing: border-box; text-align: center; font-size: 20px; } Okay, that's it, it's just HTML / CSS, so it's quite complicated for a newcomer like me, in general that's fine (Day 1 #100DaysOfCode )
The post: Create a Login Form Using Html/Css
Top comments (0)