rattlesnakes-prototype/contact.html at main · bejarcode/rattlesnakes-prototype · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="description" content="Get in touch about prints, mural commissions, creative collaborations, or just to say hello.">
  <title>Contact — Rattlesnakes & Rainbows</title>
  <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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Raleway:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css?v=7">
  <link rel="stylesheet" href="css/pages/contact.css?v=7">
</head>
<body>

  <a class="skip-link" href="#main-content">Skip to main content</a>

  <nav class="site-nav" aria-label="Main navigation">
    <a href="index.html" class="site-nav-logo">Rattlesnakes & Rainbows</a>
    <div class="site-nav-links">
      <a href="shop.html">The Deck</a>
      <a href="murals.html">Murals</a>
      <a href="illustration.html">Illustration</a>
      <a href="about.html">About</a>
    </div>
    <button type="button" class="site-nav-cart" aria-label="Shopping cart">&#9901;</button>
    <button type="button" class="nav-hamburger" aria-label="Menu" aria-expanded="false" aria-controls="mobile-menu">
      <span></span><span></span><span></span>
    </button>
  </nav>

  <!-- Mobile menu overlay -->
  <nav class="mobile-menu" id="mobile-menu" aria-hidden="true" aria-label="Mobile navigation">
    <a href="shop.html">The Deck</a>
    <a href="murals.html">Murals</a>
    <a href="illustration.html">Illustration</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>

  <main id="main-content" class="contact-page">

    <section class="contact-hero">
      <h1>Let's Connect</h1>
      <p>Whether you're interested in a mural, have a question about the deck, or want to collaborate on something new, I'd love to hear from you. Choose what fits and I'll get back to you within a few days.</p>
    </section>

    <section class="contact-form-section">
      <div class="contact-form-inner">
        <form action="#" method="post">
          <div class="form-group">
            <label class="form-label" for="contact-name">Your name</label>
            <input class="form-input" type="text" id="contact-name" name="name" placeholder="Your name" required autocomplete="name">
          </div>
          <div class="form-group">
            <label class="form-label" for="contact-email">Your email</label>
            <input class="form-input" type="email" id="contact-email" name="email" placeholder="your@email.com" required autocomplete="email">
          </div>
          <div class="form-group">
            <label class="form-label" for="contact-type">What brings you here?</label>
            <select class="form-select" id="contact-type" name="type">
              <option value="">Choose an inquiry type</option>
              <option value="mural">Mural commission</option>
              <option value="print">Print question</option>
              <option value="illustration">Illustration or design project</option>
              <option value="collaboration">Collaboration or press</option>
              <option value="hello">Just saying hello</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label" for="contact-message">Tell me more</label>
            <textarea class="form-input" id="contact-message" name="message" placeholder="Tell me about your project, your question, or what card is calling to you..." required></textarea>
          </div>
          <button type="submit" class="btn btn-primary" style="width: 100%;">Send Message</button>
        </form>
        <p class="contact-alt">You can also reach me directly at perfectbotany@gmail.com or find me on Instagram at @rattlesnakesandrainbows.</p>
      </div>
    </section>

  </main>

  <footer class="site-footer">
    <div class="footer-inner">
      <div class="footer-top">
        <div class="footer-brand">
          <div class="footer-logo">Rattlesnakes & Rainbows</div>
          <p>Botanical tarot paintings by Sarah Stewart. 78 cards. 78 plants. 78 portals to healing.</p>
        </div>
        <div class="footer-col">
          <div class="footer-col-title">Explore</div>
          <a href="shop.html">The Deck</a>
          <a href="murals.html">Murals</a>
          <a href="illustration.html">Illustration</a>
          <a href="about.html">About Sarah</a>
          <a href="contact.html">Contact</a>
        </div>
        <div class="footer-col">
          <div class="footer-col-title">Connect</div>
          <a href="#">Instagram</a>
          <a href="#">Patreon</a>
          <a href="#">Substack</a>
          <a href="#">Email</a>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="footer-copyright">&copy; 2026 Rattlesnakes and Rainbows. All rights reserved.</div>
        <div class="footer-social">
          <a href="#">IG</a>
          <a href="#">PA</a>
          <a href="#">SS</a>
        </div>
      </div>
    </div>
  </footer>

  <script src="js/main.js"></script>
</body>
</html>