akhaliq/anycoder-coffee-multi
1
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <meta name="description" content="Get in touch with AnyCoder Coffee - reservations, events, and inquiries">7 <title>Contact Us - AnyCoder Coffee</title>8 <link rel="stylesheet" href="assets/css/styles.css">9 <link rel="preconnect" href="https://fonts.googleapis.com">10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>11 <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">12</head>13<body>14 <header>15 <div class="container">16 <div class="logo">17 <h1><span class="logo-code"></></span> AnyCoder Coffee</h1>18 </div>19 <nav>20 <button class="mobile-menu-toggle" aria-label="Toggle navigation menu">21 <span></span>22 <span></span>23 <span></span>24 </button>25 <ul class="nav-menu">26 <li><a href="index.html">Home</a></li>27 <li><a href="about.html">About</a></li>28 <li><a href="contact.html" class="active">Contact</a></li>29 </ul>30 </nav>31 </div>32 </header>33 34 <main>35 <section class="page-hero">36 <div class="container">37 <h1>Get In Touch</h1>38 <p>We'd love to hear from you</p>39 </div>40 </section>41 42 <section class="contact-content">43 <div class="container">44 <div class="contact-grid">45 <div class="contact-info">46 <h2>Visit Us</h2>47 <div class="info-item">48 <h3>Address</h3>49 <p>123 Developer Avenue<br>Tech City, TC 10101</p>50 </div>51 <div class="info-item">52 <h3>Hours</h3>53 <p>Mon-Fri: 7:00 AM - 11:00 PM<br>54 Saturday: 8:00 AM - 11:00 PM<br>55 Sunday: 9:00 AM - 10:00 PM</p>56 </div>57 <div class="info-item">58 <h3>Contact</h3>59 <p>Email: hello@anycodercoffee.com<br>60 Phone: (555) 123-CODE</p>61 </div>62 </div>63 64 <div class="contact-form-container">65 <h2>Send us a message</h2>66 <form class="contact-form" id="contactForm">67 <div class="form-group">68 <label for="name">Name</label>69 <input type="text" id="name" name="name" required>70 </div>71 <div class="form-group">72 <label for="email">Email</label>73 <input type="email" id="email" name="email" required>74 </div>75 <div class="form-group">76 <label for="subject">Subject</label>77 <select id="subject" name="subject" required>78 <option value="">Select a subject</option>79 <option value="general">General Inquiry</option>80 <option value="reservation">Reservation</option>81 <option value="event">Event Space</option>82 <option value="feedback">Feedback</option>83 <option value="other">Other</option>84 </select>85 </div>86 <div class="form-group">87 <label for="message">Message</label>88 <textarea id="message" name="message" rows="5" required></textarea>89 </div>90 <button type="submit" class="btn">Send Message</button>91 </form>92 <div id="formMessage" class="form-message"></div>93 </div>94 </div>95 </div>96 </section>97 98 <section class="map-section">99 <div class="container">100 <h2>Find Your Way</h2>101 <div class="map-placeholder">102 <p>Interactive map would be displayed here</p>103 <span>123 Developer Avenue, Tech City</span>104 </div>105 </div>106 </section>107 </main>108 109 <footer>110 <div class="container">111 <div class="footer-content">112 <div class="footer-section">113 <h3>AnyCoder Coffee</h3>114 <p>Where code meets coffee perfection</p>115 </div>116 <div class="footer-section">117 <h4>Connect</h4>118 <ul>119 <li><a href="#">GitHub</a></li>120 <li><a href="#">Twitter</a></li>121 <li><a href="#">LinkedIn</a></li>122 </ul>123 </div>124 <div class="footer-section">125 <h4>Resources</h4>126 <ul>127 <li><a href="#">Tech Events</a></li>128 <li><a href="#">Developer Blog</a></li>129 <li><a href="#">Coffee Recipes</a></li>130 </ul>131 </div>132 </div>133 <div class="footer-bottom">134 <p>© 2023 AnyCoder Coffee. All rights reserved.</p>135 </div>136 </div>137 </footer>138 139 <script src="assets/js/main.js"></script>140</body>141</html>