Hugging Face's logo

Spaces:
akhaliq
/
anycoder-coffee
Running

App Files Community
anycoder-coffee
File size: 14,661 Bytes
ed083eb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Anycoder Coffee - Premium Coffee for Developers. Specializing in coffee blends that fuel creativity and coding sessions.">
    <meta name="keywords" content="coffee, developer, programming, caffeine, espresso, brew">
    <title>Anycoder Coffee - Premium Coffee for Developers</title>
    <link rel="stylesheet" href="assets/css/styles.css">
    <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=Montserrat:wght@400;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <h1>Anycoder Coffee</h1>
                </div>
                <nav class="main-nav">
                    <button id="menu-toggle" class="menu-toggle" aria-label="Toggle menu">
                        <span class="bar"></span>
                        <span class="bar"></span>
                        <span class="bar"></span>
                    </button>
                    <ul class="nav-list">
                        <li><a href="#" class="active">Home</a></li>
                        <li><a href="#">Blends</a></li>
                        <li><a href="#">Brew Guides</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="container">
                <div class="hero-content">
                    <h2>Coffee That Powers Your Code</h2>
                    <p>Specialty coffee blends crafted for developers, by developers</p>
                    <a href="#" class="btn btn-primary">Shop Our Blends</a>
                </div>
            </div>
        </section>

        <section class="features">
            <div class="container">
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7L2 17L12 22L22 17L22 7L12 2Z"></path><polyline points="2 17 12 12 22 17"></polyline><polyline points="12 22 12 12"></polyline></svg>
                        </div>
                        <h3>Code-Focused Blends</h3>
                        <p>Specialty roasts designed to keep you focused during long coding sessions</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14H12L11 22L21 10H12L13 2Z"></path></svg>
                        </div>
                        <h3>Energy Boosting</h3>
                        <p>Premium caffeine content to spark creativity and problem-solving</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7V17L12 22L22 17V7L12 2Z"></path></svg>
                        </div>
                        <h3>Developer Approved</h3>
                        <p>Tested and approved by programmers from top tech companies</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="featured-blends">
            <div class="container">
                <h2 class="section-title">Featured Blends</h2>
                <div class="blends-grid">
                    <div class="blend-card">
                        <div class="blend-img">
                            <img src="https://images.unsplash.com/photo-1559056199-641a0ac8b55e?auto=format&fit=crop&w=500&q=80" alt="Dark Roast">
                        </div>
                        <div class="blend-info">
                            <h3> Midnight Debugging</h3>
                            <p>Dark roast with notes of chocolate and walnut</p>
                            <div class="blend-price">$18.99</div>
                            <button class="btn btn-secondary">Add to Cart</button>
                        </div>
                    </div>
                    <div class="blend-card">
                        <div class="blend-img">
                            <img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?auto=format&fit=crop&w=500&q=80" alt="Medium Roast">
                        </div>
                        <div class="blend-info">
                            <h3> Syntax Success</h3>
                            <p>Medium roast with caramel and citrus undertones</p>
                            <div class="blend-price">$16.99</div>
                            <button class="btn btn-secondary">Add to Cart</button>
                        </div>
                    </div>
                    <div class="blend-card">
                        <div class="blend-img">
                            <img src="https://images.unsplash.com/photo-1559056199-641a0ac8b55e?auto=format&fit=crop&w=500&q=80" alt="Espresso">
                        </div>
                        <div class="blend-info">
                            <h3> Code Espresso</h3>
                            <p>Intense espresso blend with berry and floral notes</p>
                            <div class="blend-price">$20.99</div>
                            <button class="btn btn-secondary">Add to Cart</button>
                        </div>
                    </div>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-outline">View All Blends</a>
                </div>
            </div>
        </section>

        <section class="brewing-tips">
            <div class="container">
                <div class="brew-content">
                    <div class="brew-text">
                        <h2>Perfect Brew for Every Sprint</h2>
                        <p>Learn how to prepare the perfect cup of coffee to fuel your programming sessions. Our guides will help you achieve the ideal extraction for maximum flavor and focus.</p>
                        <a href="#" class="btn btn-outline"> brewing Guides</a>
                    </div>
                    <div class="brew-image">
                        <img src="https://images.unsplash.com/photo-1515827324473-cbae8c4e74cd?auto=format&fit=crop&w=800&q=80" alt="Coffee brewing">
                    </div>
                </div>
            </div>
        </section>

        <section class="testimonials">
            <div class="container">
                <h2 class="section-title">Developer Testimonials</h2>
                <div class="testimonials-slider">
                    <div class="testimonial-card active">
                        <div class="testimonial-content">
                            <p>"Anycoder Coffee has become my go-to during late night debugging sessions. The focus boost is real!"</p>
                        </div>
                        <div class="testimonial-author">
                            <span class="author-name">Sarah K.</span>
                            <span class="author-title">Senior DevOps Engineer</span>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-content">
                            <p>"Finally, a coffee that understands a programmer's needs. The Syntax Success blend is perfection!"</p>
                        </div>
                        <div class="testimonial-author">
                            <span class="author-name">Michael T.</span>
                            <span class="author-title">Full Stack Developer</span>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-content">
                            <p>"I've tried every coffee out there. This is the only one that keeps me sharp through 8 hours of coding."</p>
                        </div>
                        <div class="testimonial-author">
                            <span class="author-name">Jamie L.</span>
                            <span class="author-title">Lead Frontend Developer</span>
                        </div>
                    </div>
                </div>
                <div class="slider-controls">
                    <button id="prev-testimonial" class="slider-btn" aria-label="Previous testimonial">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
                    </button>
                    <button id="next-testimonial" class="slider-btn" aria-label="Next testimonial">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
                    </button>
                </div>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-col footer-about">
                    <h3>Anycoder Coffee</h3>
                    <p>Premium coffee blends crafted specifically for developers and tech professionals.</p>
                    <div class="social-links">
                        <a href="#" aria-label="Facebook">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
                        </a>
                        <a href="#" aria-label="Twitter">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
                        </a>
                        <a href="#" aria-label="Instagram">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
                        </a>
                    </div>
                </div>
                <div class="footer-col footer-links">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#">Our Blends</a></li>
                        <li><a href="#">Brewing Guides</a></li>
                        <li><a href="#">Subscription</a></li>
                        <li><a href="#">Developer Discounts</a></li>
                    </ul>
                </div>
                <div class="footer-col footer-contact">
                    <h3>Contact Us</h3>
                    <address>
                        <div class="contact-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
                            <span>123 Code Street, Tech City</span>
                        </div>
                        <div class="contact-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
                            <a href="mailto:brew@anycoder.coffee">brew@anycoder.coffee</a>
                        </div>
                        <div class="contact-item">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
                            <a href="tel:+1234567890">+1 (234) 567-890</a>
                        </div>
                    </address>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="copyright">
                    <p>&copy; 2023 Anycoder Coffee. All rights reserved.</p>
                </div>
                <div class="footer-bottom-links">
                    <a href="#">Privacy Policy</a>
                    <a href="#">Terms of Service</a>
                </div>
            </div>
        </div>
    </footer>

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