lumina-creative/contact.html at main · ethanmrubenstein/lumina-creative · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <title>Contact Lumina Creative</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
      integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <header class="header" role="banner">
      <div class="container container-sm header-flex">
        <img src="images/logo.png" alt="Lumina Creative" class="logo" />
        <nav>
          <ul class="main-menu" aria-label="Main Menu">
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="about.html">About</a>
            </li>
            <li>
              <a class="active" href="contact.html">Contact</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <section class="hero bg-dark">
      <div class="container container-sm">
        <h2>
          <span class="bg-primary">Enthusiastic</span> thinkers, creating unique
          endeavors, powered by <span class="bg-primary">creativity</span>
        </h2>
      </div>
    </section>

    <section class="contact-form">
      <div class="container container-sm">
        <h2 class="section-heading">Contact Us</h2>
        <p>
          Have a question? Leave your information below and we will get back to
          you as soon as possible.
        </p>
        <form>
          <div class="form-group">
            <label for="first-name" class="visually-hidden">First Name</label>
            <input
              type="text"
              name="first-name"
              id="first-name"
              placeholder="First Name"
            />
          </div>
          <div class="form-group">
            <label for="last-name" class="visually-hidden">Last Name</label>
            <input
              type="text"
              name="last-name"
              id="last-name"
              placeholder="Last Name"
            />
          </div>
          <div class="form-group">
            <label for="email" class="visually-hidden">Email Address</label>
            <input
              type="email"
              name="email"
              id="email"
              placeholder="Email Address"
            />
          </div>
          <div class="form-group">
            <label for="message" class="visually-hidden">Message</label>
            <textarea
              name="message"
              id="message"
              placeholder="Message"
            ></textarea>
          </div>
          <div class="form-group">
            <button class="btn" type="submit">Send Message</button>
          </div>
        </form>
      </div>
    </section>

    <footer class="footer">
      <div class="container footer-flex">
        <img src="images/logo.png" alt="Lumina Creative" />

        <div class="contact">
          <h4>Contact Us</h4>
          <ul aria-label="Contact Information">
            <li>(555) 555-5555</li>
            <li>contact@lumina.com</li>
            <li>10 Main Street, Boston, MA</li>
          </ul>
        </div>

        <div class="social">
          <h4>Follow Us</h4>
          <a href="#" aria-label="Follow us on Facebook"
            ><i class="fab fa-facebook fa-2x"></i
          ></a>
          <a href="#" aria-label="Follow us on Twitter"
            ><i class="fab fa-twitter fa-2x"></i
          ></a>
          <a href="#" aria-label="Follow us on Instagram"
            ><i class="fab fa-instagram fa-2x"></i
          ></a>
          <a href="#" aria-label="Follow us on Pinterest"
            ><i class="fab fa-pinterest fa-2x"></i
          ></a>
          <a href="#" aria-label="Follow us on Tumblr"
            ><i class="fab fa-tumblr fa-2x"></i
          ></a>
        </div>
      </div>
    </footer>
  </body>
</html>