Hello everyone, I am with you my new portfolio project: e-mail marketing of HabitHarbor. It is totally fictional app.
Here is the HTML link:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Welcome to HabitHarbor</title>
<style>
/* Reset and basic styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f6f8;
color: #333333;
}
.container {
max-width: 600px;
margin: 40px auto;
background-color: #ffffff;
padding: 30px 40px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
h1 {
color: #2a6ebb;
font-size: 28px;
margin-bottom: 20px;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
a.button {
display: inline-block;
background-color: #2a6ebb;
color: #fff;
padding: 14px 28px;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
margin: 20px 0;
}
a.link {
color: #2a6ebb;
text-decoration: none;
}
a.link:hover {
text-decoration: underline;
}
.section-title {
font-weight: bold;
font-size: 18px;
margin-top: 30px;
margin-bottom: 10px;
color: #1f4e79;
}
.footer {
font-size: 14px;
color: #777777;
margin-top: 40px;
border-top: 1px solid #dddddd;
padding-top: 15px;
text-align: center;
}
@media screen and (max-width: 620px) {
.container {
margin: 20px 15px;
padding: 20px 25px;
}
h1 {
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to HabitHarbor — Your Safe Harbor for Great Habits!</h1>
<p>Hi <strong>[First Name]</strong>,</p>
<p>Thank you for joining <strong>HabitHarbor</strong> — your safe harbor for building and keeping great habits!</p>
<p>We’re excited to help you turn your goals into lasting routines. To get started, here are some resources to guide you on your habit-building journey:</p>
<div>
<p class="section-title">⭐️ Discover Our Best Tips</p>
<p>Check out our most popular blog post on making habits stick:<br/>
<a href="https://yourapp.com/blog/habit-tips" target="_blank" class="link">5 Simple Tricks to Build Habits That Last</a>
</p>
</div>
<div>
<p class="section-title">👋 Get to Know Us</p>
<p>Learn about the story behind HabitHarbor and how we’re supporting thousands of habit builders like you:<br/>
<a href="https://yourapp.com/about" target="_blank" class="link">About HabitHarbor</a>
</p>
</div>
<div>
<p class="section-title">💬 Stay Connected</p>
<p>Have questions, feedback, or want to share your progress? We’d love to hear from you!<br/>
Just reply to this email or reach out at <a href="mailto:support@yourapp.com" class="link">support@yourapp.com</a>.
</p>
</div>
<p>Welcome aboard — here’s to smooth sailing and successful habits!</p>
<p>Cheers,<br/>
The HabitHarbor Team</p>
<div class="footer">
© 2025 HabitHarbor. All rights reserved.<br/>
You received this email because you signed up for HabitHarbor.
</div>
</div>
</body>
</html>