<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1">
<title>caKao.ai - AI-Powered Health & Nutrition</title>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
font-family:
'Inter', sans-serif;
background:
#f9fafb;
color: #111827;
}
header {
background:
linear-gradient(to right, #6ee7b7, #3b82f6);
color: white;
text-align:
center;
padding: 100px
20px;
background-image:
url('https://images.unsplash.com/photo-1541696432-82c6da8ce7bf?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');
background-size:
cover;
background-position: center;
position:
relative;
}
header::after {
content:
"";
position:
absolute;
top: 0; left: 0;
right: 0; bottom: 0;
background:
rgba(0, 0, 0, 0.5);
}
header h1, header
p, header a {
position:
relative;
z-index: 1;
}
header h1 {
font-size: 3rem;
margin: 0 0
10px;
}
header p {
font-size:
1.2rem;
}
.button {
display:
inline-block;
margin-top:
20px;
padding: 12px
30px;
background-color: #10b981;
color: white;
text-decoration:
none;
border-radius:
9999px;
font-weight: 600;
transition:
background 0.3s;
}
.button:hover {
background-color: #059669;
}
nav {
background:
white;
padding: 10px;
text-align:
center;
}
nav a {
margin: 0 15px;
text-decoration:
none;
color: #0f766e;
font-weight:
600;
}
section {
padding: 60px
20px;
max-width:
1000px;
margin: auto;
}
section h2 {
text-align:
center;
font-size: 2rem;
margin-bottom:
20px;
}
.steps {
display: flex;
flex-wrap: wrap;
justify-content:
center;
gap: 30px;
margin-top:
40px;
}
.step {
background:
white;
border-radius:
12px;
box-shadow: 0
4px 10px rgba(0,0,0,0.05);
padding: 30px;
text-align:
center;
width: 260px;
transition:
transform 0.3s;
}
.step:hover {
transform:
translateY(-5px);
}
.step img {
width: 80px;
margin-bottom:
15px;
}
form {
background:
white;
padding: 30px;
border-radius:
12px;
box-shadow: 0
4px 10px rgba(0,0,0,0.05);
max-width:
500px;
margin: 40px
auto 0;
}
input, textarea {
width: 100%;
padding: 12px;
margin-bottom:
20px;
border: 1px
solid #d1d5db;
border-radius:
8px;
}
footer {
text-align:
center;
padding: 20px;
font-size:
0.9rem;
background:
#e0f2fe;
}
@media (max-width:
768px) {
.steps {
flex-direction: column;
align-items:
center;
}
}
</style>
</head>
<body>
<header>
<h1>Empowering
Wellness Through AI</h1>
<p>Simple.
Personal. Beautiful Health Guidance.</p>
<a
href="#contact" class="button">Get in Touch</a>
</header>
<nav>
<a
href="#about">About</a>
<a
href="#how">How It Works</a>
<a
href="#contact">Contact</a>
</nav>
<section id="about">
<h2>About
caKao.ai</h2>
<p>At caKao,
we believe health should feel simple, friendly, and within reach for everyone.
Using the power of AI, we hide complexity behind intuitive tools that help you
live better — every day.</p>
</section>
<section id="how">
<h2>How It
Works</h2>
<div
class="steps">
<div
class="step">
<img
src="https://img.icons8.com/ios/100/camera--v1.png"
alt="Snap">
<h3>Snap</h3>
<p>Take a
photo of your meal effortlessly.</p>
</div>
<div
class="step">
<img
src="https://img.icons8.com/ios/100/ai.png"
alt="Analyze">
<h3>Analyze</h3>
<p>AI
instantly reveals calories and nutrition facts.</p>
</div>
<div
class="step">
<img
src="https://img.icons8.com/ios/100/health-book.png"
alt="Track">
<h3>Track</h3>
<p>Follow
your health journey with ease.</p>
</div>
</div>
</section>
<section id="contact">
<h2>Contact
Us</h2>
<form
action="mailto:cakaoaiapp@gmail.com" method="post"
enctype="text/plain">
<input
type="text" name="Name" placeholder="Your Name"
required>
<input
type="email" name="Email" placeholder="Your
Email" required>
<textarea
name="Message" placeholder="Your Message"
rows="5" required></textarea>
<button
type="submit" class="button">Send Message</button>
</form>
</section>
<footer>
© 2025
caKao.ai. All rights reserved.
</footer>
</body>
</html>