calebPerkinsLoginUIProject/index.html at main · caleb-p93/calebPerkinsLoginUIProject · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!--formerly known as login.html (changed to index.html for portfolio)-->
<html> <!--opening html tag-->


  <head> <!--opening head tag-->

    <link rel="stylesheet" href="login-styles.css"> <!--link to stylesheet with name of "login-styles.css"-->

  </head> <!--closing head tag-->


  <body> <!--opening body tag-->

    <div class="container"> <!--opening div tag for container; makes a section for the container displayed on webpage-->

    <div class="login-box"> <!--opening div tag for container; makes a section for the container displayed on webpage-->


        <h1> Login </h1> <!--header 1 tag for output of header for webpage with "Login" as text-->


        <form> <!--opening tag for form to be displayed on webpage (login form in this case)-->

          <div class="input-group"> <!--*opening div tag/ section for input-group elements to follow (connected to coordinating style class in css file); makes a "section" for input-group items to be displayed within container on webpage-->

            <label for="username"> Username </label> <!-- label for username field with "Username" as displayed text -->

            <input type="text" id="username" placeholder="Username"> <!--generates text input box with styling from "username" style class and placeholder text of "Username"-->

          </div> <!--closing div tag for this input-group section-->

          <div class="input-group"> <!--*opening div tag/ section for input-group elements to follow (connected to coordinating style class in css file); makes a "section" for input-group items to be displayed within container on webpage-->

            <label for="password">Password</label>  <!-- label for username field with "Password" as displayed text -->

            <input type="password" id="password" placeholder="Password"> <!--generates text input box with styling from "password" style class and placeholder text of "Password"-->

          </div> <!--closing div tag for this input-group section-->

          <button type="submit">Log In</button> <!--submission button with text of "Log In" on it-->

        </form> <!--closing tag for form to be displayed on webpage (login form in this case)-->


      </div> <!--closing div tag for login box section-->

    </div> <!--closing div for container section-->

  </body> <!--closing body tag-->


</html> <!--closing html tag-->