CSS-Debrief-Activity/index.html at main · JocelynCode/CSS-Debrief-Activity · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./assets/css/style.css" />
  </head>

  <body>
    <!-- Navigation -->
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Concert Schedule</a></li>
        <li><a href="#">Order Tickets</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>

    <!-- Header and Page Heading -->
    <header class="center-title">
      <h1>
        theReal <br />
        Harry Styles <br />
        Fanpage
      </h1>
    </header>

    <!-- Main Page Content -->
    <main>

    <!-- About Section -->
      <section id="about-sec">

        <h2>About.</h2>
        <p id="about-blurb">Harry Edward Styles is an English singer, songwriter and actor.
          His musical career began in 2010 as a solo contestant on the
          British music competition series The X Factor.
        </p>

        <div>
          <figure>
            <img src="./assets/images/harrystyles.png" alt="harrystyles">
            <!-- Figcaption element to caption your image -->
            <figcaption>
            Harry Styles performing free concert fundraiser for US wildfire relief
            <!-- Fake News -->
            </figcaption>
          </figure>

        <!-- Aside Content -->
          <aside>
            <p class="center-title">Facts</p>
            <ul>
                <li>Born: February 1, 1994 (age 28 years)</li>
                <li>From Redditch, United Kingdom</li>
                <li>Height: 6'0"</li>
                <li>Music Group: One Direction (since 2010)</li>
                <li><a href="">See Movies</a></li>
            </ul>
          </aside>
        </div>
      </section>

      <!-- Table - Concert Schedule -->
      <section id="concert-schedule-sec">
        <h3 class="center-title">Touring</h3>

        <table>

          <thead>
            <tr>
              <th colspan="3">Concert Schedule</th>
            </tr>
            <tr>
              <th>Date</th>
              <th>Time</th>
              <th>City</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>May 27, 2022</td>
              <td class="">09:00 pm</td>
              <td>Columbus</td>
            </tr>
            <tr>
              <td>May 28, 2022</td>
              <td class="">08:00 pm</td>
              <td>Lexington</td>
            </tr>
            <tr>
              <td>June 3, 2022</td>
              <td class="">09:00 pm</td>
              <td>Miami</td>
            </tr>
            <tr>
              <td>June 4, 2022</td>
              <td class="">07:00 pm</td>
              <td>Dallas</td>
            </tr>
            <tr>
              <td>June 10, 2022</td>
              <td class="">10:00 pm</td>
              <td>Bend</td>
            </tr>
          </tbody>
            </table>
        </section>

      <!-- Order Tickets Section -->
      <section id="ticket-form-sec">
        <h4 class="center-title">Get Tickets</h4>

        <!-- Form -->
        <form>

          <label for="name">Name</label>
          <input id="name" type="text" name="name" placeholder=
  "name" required>
          <br>

          <label for="email">Email</label>
          <input id="email" type="text" name="email" placeholder="email" required>
          <br>

          <label for="concert-date">Concert Date</label>
          <input id="concert-date" type="text" name="concert-date" placeholder="mm/dd/yy" required minlength="6">
          <br>

          <!--Radio button-->
          <span>Ticket delivery preference:</span>
          <br>
          <input id="paperless" type="radio" name="answer" value="paperless" required>
          <label for="paperless">paperless</label>
          <br>
          <input id="us mail" type="radio" name="answer" value="us mail" required>
          <label for="us mail">us mail</label>
          <br>

          <h4 class="center-title">Stay In Touch!</h4>
          <p>Send us a message -- keep us up to date with new things about Harry, or tell us about your user expereince on the site.</p>
          <!-- Textbox -->
          <label for="message"></label>
          <textarea id="message" rows="8" cols="40" required></textarea>
          <br>
          <input type="submit" value="Submit">
        </form>
      </section>

    </main>
    <footer>
      <p></p>
      <p></p>
    </footer>
  </body>
</html>