Assignment_3/index.html at main · FreddyJ23/Assignment_3 · 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <nav class="nav">
      <img src="./logo.png" alt="" class="logoimg" />
      <div class="navbarlistings">
        <div class="navbarlist">Download</div>
        <div class="navbarlist">Learn more</div>
        <div class="navbarlist">Pricing</div>
        <div class="navbarlist">Help</div>
        <div class="navbarlist" id="accountlist">Account</div>
      </div>
    </nav>
    <main>
      <div class="div1">
        <p class="checkout">Checkout</p>
        <div>
          <div class="yourbasicinfocontainer">
            <div class="one"><p>1</p></div>
            <p class="yourbasicinfo">Your Basic Information</p>
          </div>
          <div class="firstandlastname">
            <div class="firstname">
              <p>First Name</p>
              <input type="text" class="firstnameinput" placeholder="Jane" />
            </div>

            <div class="firstname">
              <p>Last Name</p>
              <input type="text" class="firstnameinput" placeholder="Doe" />
            </div>
          </div>
          <div class="emailcontainer">
            <div class="firstname">
              <p>E-mail</p>
              <input
                type="email"
                class="emailinput"
                placeholder="janedoe@example.com"
              />
            </div>
          </div>

          <div id="basicinfo">
            <div class="yourbasicinfocontainer">
              <div class="one"><p>2</p></div>
              <p class="yourbasicinfo">Your Payment Information</p>
            </div>
            <div class="firstandlastname">
              <div class="firstname">
                <p>Credit Card</p>
                <input
                  type="text"
                  class="cardinput"
                  placeholder="Card Number                                                     MM/YY                 CVC"
                />
              </div>
            </div>
          </div>

          <div class="bottom">
            <button class="button">
              <p class="buttontext">Buy WP Pusher</p>
            </button>
          </div>
          <div class="footer">
            <div class="questionmark">?</div>
            <p class="footertext">
              <span class="help">Need any help?</span> Don’t hesitate to contact
              support!
            </p>
          </div>
          <div class="footerbtncontainer">
            <button class="footerbtn">
              <p class="">Powered by <span class="stripe">Stripe</span></p>
            </button>
          </div>
        </div>
      </div>

      <div class="div2">
        <div class="top">
          <p class="freelancer">Freelancer</p>
          <p>
            <span class="dollar">$</span> <span class="ninetynine">99</span>
            <span class="yearr">/ year</span>
          </p>
          <p class="renewal">Automatically renews after 1 year</p>
        </div>

        <div class="middle">
          <div class="middlelisting">
            <img src="/check.png" alt="" class="check" />
            <p>Use on 5 client sites</p>
          </div>
          <div class="middlelisting">
            <img src="/check.png" alt="" class="check" />
            <p>Private Repositories</p>
          </div>
          <div class="middlelisting">
            <img src="/check.png" alt="" class="check" />
            <p>Email support</p>
          </div>

          <div class="need20clientcontainer">
            <p class="need20client">
              Need <span class="twenty"> 20 </span>client sites?
              <span class="switch">Switch to the Agency plan.</span>
            </p>
          </div>
        </div>

        <div class="footer2">
          <p class="ftp">
            FTP is horrible to deal with. <span class="wppusher">WP Pusher </span> solves that
            issue, and the customer support is awesome!
          </p>

          <div class="footerimgcont">
            <img src="/Bitmap.png" alt="" class="bitmap" />
            <p class="kirk">Kirk Beard</p>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>