|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Your Personalized Style Curation</title> |
|
|
<style> |
|
|
|
|
|
body { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
width: 100%; |
|
|
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; |
|
|
line-height: 1.6; |
|
|
color: #2C2C2C; |
|
|
background-color: #FAF9F6; |
|
|
} |
|
|
|
|
|
.nlbackgroundcontainer { |
|
|
max-width: 600px; |
|
|
margin: 0 auto; |
|
|
padding: 30px; |
|
|
background-color: #FFFFFF; |
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|
|
border: 1px solid #DDDDDD; |
|
|
} |
|
|
|
|
|
.nlheader { |
|
|
text-align: center; |
|
|
padding: 20px 0; |
|
|
border-bottom: 1px solid #CCCCCC; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
|
|
|
.nlheader img { |
|
|
max-width: 200px; |
|
|
height: auto; |
|
|
} |
|
|
|
|
|
.nlsection { |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
h1, h2, h3 { |
|
|
font-family: 'Didot', serif; |
|
|
color: #333333; |
|
|
margin-bottom: 15px; |
|
|
} |
|
|
|
|
|
.nlsection-row { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
justify-content: space-between; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
.bought-item, .product { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
width: calc(50% - 10px); |
|
|
margin: 10px 0; |
|
|
text-align: center; |
|
|
padding: 20px; |
|
|
background-color: #F9F9F9; |
|
|
border-radius: 8px; |
|
|
border: 1px solid #DDDDDD; |
|
|
transition: transform 0.3s ease; |
|
|
color: rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
@media screen and (max-width: 600px) { |
|
|
.nlsection-row { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.bought-item, .product { |
|
|
width: 100%; |
|
|
margin: 10px 0; |
|
|
} |
|
|
} |
|
|
|
|
|
.bought-item:hover, .product:hover { |
|
|
transform: scale(1.02); |
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.deal-box { |
|
|
background-color: #F4F4F4; |
|
|
color: rgba(0,0,0,0.1); |
|
|
padding: 20px; |
|
|
margin: 15px 0; |
|
|
border-radius: 8px; |
|
|
text-align: center; |
|
|
border: 1px solid #CCCCCC; |
|
|
} |
|
|
|
|
|
.nlbutton { |
|
|
display: inline-block; |
|
|
padding: 12px 25px; |
|
|
background-color: #5A5A5A; |
|
|
color: #FFFFFF; |
|
|
text-decoration: none; |
|
|
border-radius: 5px; |
|
|
font-weight: 600; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 1px; |
|
|
transition: background-color 0.3s ease; |
|
|
} |
|
|
|
|
|
.nlbutton:hover { |
|
|
background-color: #333333; |
|
|
} |
|
|
|
|
|
.nlfooter { |
|
|
text-align: center; |
|
|
padding: 20px; |
|
|
background-color: #F4F4F4; |
|
|
border-top: 1px solid #CCCCCC; |
|
|
font-size: 0.9em; |
|
|
} |
|
|
|
|
|
a { |
|
|
color: rgba(0,0,0,0.1); |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
a:hover { |
|
|
text-decoration: underline; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="nlbackgroundcontainer"> |
|
|
|
|
|
<div class="nlheader" style="display: flex; justify-content: center; align-items: center;"> |
|
|
<img src="${brand_logo}" alt="Brand Logo"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="nlsection"> |
|
|
<p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; line-height: 1.5; color: black; letter-spacing: 0.5px; text-align: left;"> |
|
|
${greeting} </p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="nlsection"> |
|
|
|
|
|
<p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;"> ${intro} </p> |
|
|
<h2 style="color:black;"> Your recent selections </h2> |
|
|
<div class="nlsection-row"> |
|
|
<div class="bought-item"> |
|
|
<img src= ${transaction_url} alt="Previous Product 1"> |
|
|
<h3 style="color:black;"> ${transaction_name} </h3> |
|
|
</div> |
|
|
<div class="bought-item"> |
|
|
<img src= ${transaction_url} alt="Previous Product 2"> |
|
|
<h3 style="color:black;">${transaction_name}</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;"> |
|
|
${recommendations} </p> |
|
|
<div class="nlsection"> |
|
|
<div class="nlsection-row"> |
|
|
<div class="product"> |
|
|
<img src=${recommendation_url} alt="Recommended Product 1"> |
|
|
<h3 style="color:black;">${recommendation_name}</h3> |
|
|
<a href="#" class="nlbutton" >Explore</a> |
|
|
</div> |
|
|
<div class="product"> |
|
|
<img src=${recommendation_url} alt="Recommended Product 2"> |
|
|
<h3 style="color:black;">${recommendation_name}</h3> |
|
|
<a href="#" class="nlbutton">Explore</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="nlsection"> |
|
|
<h2 style="color: #8B6914;">Not Your Style?</h2> |
|
|
<p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;"> |
|
|
Well, I always try my best and recommend what I think would suit you well, but hey, we all make mistakes, right? </p> |
|
|
<p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;"> |
|
|
No worries though, I still have a lot of stuff for you! Take a look at these weekly deals! </p> |
|
|
<div class="deal-box"> |
|
|
<h3 style="color:black;"> 30% OFF ALL DRESSES</h3> |
|
|
<p style="color:black;">Exclusive Code: LSF30</p> |
|
|
</div> |
|
|
<div class="deal-box"> |
|
|
<h3 style="color:black;"> BUY 2 GET 1 FREE</h3> |
|
|
<p style="color:black;">On our curated accessories collection</p> |
|
|
</div> |
|
|
<p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;"> |
|
|
${closing} </p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="nlsection" style="text-align: center;"> |
|
|
<h2 style="color:black;">Ready to Refine Your Wardrobe?</h2> |
|
|
<a href="#" class="nlbutton">View New Arrivals</a> |
|
|
<a href="#" class="nlbutton" style="background-color: #5D4037;">Book Styling Consultation</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="nlfooter"> |
|
|
<p style="font-weight: bold; color:black">The ${brand_name} Team</p> |
|
|
<p style="color:black;"> |
|
|
<small> |
|
|
You're receiving this curated selection because you're part of our stylish community. |
|
|
<a href="#">Unsubscribe</a> | <a href="#">View in Browser</a> |
|
|
</small> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
