-
Notifications
You must be signed in to change notification settings - Fork 33
/
Copy pathabout.html
176 lines (149 loc) · 7.42 KB
/
about.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - EatNFun</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="about.css">
</head>
<body class="light-mode">
<nav class="light-mode" id="navbar">
<a href="#"><img src="images/logo.png" id="logo" alt="Logo"></a>
<div class="nav-center">
<div class="nav-elem">
<a href="index.html">Home</a>
</div>
<div class="nav-elem">
<a href="#">Services</a>
<div class="dropdown">
<a href="#">Consultation</a>
<a href="#">Support</a>
<a href="#">Maintenance</a>
</div>
</div>
<div class="nav-elem">
<a href="#">Products</a>
<div class="dropdown">
<a href="#">Shakes</a>
<a href="#">Cold Coffee</a>
<a href="#">Ginger Tea</a>
</div>
</div>
<div class="nav-elem">
<a href="about.html">About Us</a>
</div>
<div class="nav-elem">
<a href="Contact_Us/contact.html">Contact</a>
</div>
</div>
<button id="mode-toggle">🌙</button>
</nav>
<!-- about us section starts here -->
<section id="about-us">
<div class="parallax">
<div id="heading">
<h1>Welcome To <br> <span>Eat-<span id="word">N</span>-Fun</span>
</h1>
</div>
</div>
</section>
<section id="about">
<div class="container container-about">
<div id="left"><h2>About Us</h2><br><br>
<p>At Cafe Name, we believe in creating moments that matter. Our cafe isn't just a place to grab a coffee—it's a community hub where people can gather, connect, and relax. Whether you're looking for a quiet corner to enjoy your morning brew or a lively space to meet friends, we offer a warm and welcoming environment.We pride ourselves on sourcing the finest ingredients for our coffee and dishes, ensuring every sip and bite is crafted with care. From locally sourced coffee beans roasted to perfection, to fresh, organic ingredients used in our meals, quality is at the heart of everything we do.
With a passion for sustainability, we strive to reduce our environmental footprint by using eco-friendly packaging, minimizing waste, and partnering with local farmers and suppliers who share our values.</p></div>
<div id="right">
<img src="https://images.pexels.com/photos/1024359/pexels-photo-1024359.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
</div>
</div>
</section>
<section id="history">
<div class="container container-history">
<div id="lefta">
<div id="leftu"></div>
<div id="leftd">
<p>How it all started</p>
</div>
</div>
<div id="righta">
<h1>Our Story</h1><br><br><br><br>
<p>Cafe Name was born out of a love for coffee and community. Our founders, [Owner’s Name] and
[Co-Owner’s Name], started with a small pop-up stall in 20XX, serving handcrafted coffee in a bustling market. Their passion for quality and dedication to their craft quickly gained a loyal following, and they dreamed of opening a permanent space where coffee lovers could feel at home.</p>
<!-- <p>In [Year], that dream became a reality when they opened Cafe Name, a cozy, inviting space designed to bring people together. From the rustic wooden interiors to the carefully curated playlist, every detail was chosen to create an atmosphere where guests can relax, recharge, and enjoy the simple pleasure of a well-made coffee.</p> -->
<!-- <p>Over the years, we’ve grown from a single cafe to a beloved spot in the community, hosting events like open mic nights, art shows, and coffee workshops. We’re proud to be a place where creativity thrives, and where every customer feels like family.</p>
<p>Our commitment to excellence extends beyond our coffee. We believe in giving back to the community that supports us, which is why we donate a portion of our proceeds to local charities and community projects. We also support small, independent coffee growers from around the world, ensuring that our beans are ethically sourced and fair-trade certified.</p> -->
</div>
</div>
</section>
<section id="team">
<div class="container container-team">
<h1>
WHO ARE <span>WE</span>?
</h1>
<div class="profile">
<img alt="Portrait of Drew, Visual Communication Specialist" height="200" src="https://storage.googleapis.com/a1aa/image/jIoRoUwgfxzFUCqc4frg4Aw403eLLAtnUIn92OGeN5j6x3iOB.jpg" width="200"/>
<div class="name">
DREW
</div>
<div class="title">
OWNER
</div>
</div>
<div class="profile">
<img alt="Portrait of Claudia, Digital Content Creator" height="200" src="https://storage.googleapis.com/a1aa/image/xOZvNViF6UY5Bdee0VULx0qweNbiZJNxLF3HtubpcJJ44bRnA.jpg" width="200"/>
<div class="name">
CLAUDIA
</div>
<div class="title">
CO-OWNER
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-content">
<h2 class="brand-name">EatNFun</h2>
<br><br>
<div class="social-icons">
<a href="#" class="social-icon"><i class='bx bxl-facebook'></i></a>
<a href="#" class="social-icon"><img src="twitter-x.png" alt="Social Icon" ></a>
<a href="#" class="social-icon"><i class='bx bxl-instagram'></i></a>
<a href="#" class="social-icon"><i class='bx bxl-linkedin'></i></a>
</div>
<button id="scrollBtn"><i class="bx bx-up-arrow-alt"></i></button>
</div>
<p class="footer-bottom-text">© 2024 EatNFun. All Rights Reserved.</p>
</footer>
</body>
<script>
const modeToggle = document.getElementById('mode-toggle');
const body = document.body;
if (localStorage.getItem('theme') === 'dark') {
body.classList.add('dark-mode');
}
modeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
} else {
localStorage.setItem('theme', 'light');
}
});
const scrollBtn = document.getElementById('scrollBtn');
window.onscroll = () => {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollBtn.style.display = "block";
} else {
scrollBtn.style.display = "none";
}
};
scrollBtn.addEventListener('click', () => {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
</script>
</html>