RoshanPaudel/Email-Message-Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Roshan476
2026-01-02 16:00:21 +05:45
parent eb81a20a6f
commit cccd53cdb9
2 changed files with 224 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
new-wishing.html
View File

@@ -2,6 +2,10 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="https://www.bibhutisolutions.com/wp-content/uploads/2022/05/cropped-main-logo-32x32.png" sizes="32x32">
<link rel="icon" href="https://www.bibhutisolutions.com/wp-content/uploads/2022/05/cropped-main-logo-192x192.png" sizes="192x192">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<title>Bibhuti Solutions Newsletter</title> <title>Bibhuti Solutions Newsletter</title>
<style> <style>
* { * {
@@ -17,6 +21,25 @@
background-image: url("./background.png"); /* your logo */ background-image: url("./background.png"); /* your logo */
} }
.newsletter {
position: relative;
z-index: 1;
overflow: hidden;
}
.newsletter::before {
content: "";
position: absolute;
inset: 0;
background-image: url("./image.png"); /* same or different image */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* filter: grayscale(100%) blur(6px); */
opacity: 0.1;
z-index: -1;
}
@@ -103,6 +126,9 @@
} }
/* GRID */ /* GRID */
.left-img{
background-color: white;
}
.content-grid { .content-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@@ -187,16 +213,55 @@
font-size: 18px; font-size: 18px;
} }
/* FOOTER */
.footer { /* FOOTER */
background: #bd2727; .footer {
color: #fff; background: #bd2727;
text-align: center; color: #fff;
padding: 20px; text-align: center;
border-top-right-radius:20px; padding: 25px 20px;
border-top-left-radius:20px; border-top-right-radius: 20px;
} border-top-left-radius: 20px;
}
.footer-contact p {
margin: 8px 0;
font-size: 14px;
}
.footer-contact i {
margin-right: 6px;
}
.footer-social {
margin-top: 15px;
}
.footer-social a {
color: #fff;
margin: 0 10px;
font-size: 18px;
transition: color 0.3s ease, transform 0.3s ease;
padding: 5px;
border-radius: 7px;
}
.footer-social a:hover {
color: #CF9A45;
background-color:white ;
transform: translateY(-3px);
}
hr{
margin: 12px 0px;
}
.phone1 {
font-family: serif;
}
a{
text-decoration: none;
color: white;
}
/* RESPONSIVE */ /* RESPONSIVE */
@media (max-width: 768px) { @media (max-width: 768px) {
.hero-container { .hero-container {
@@ -252,7 +317,7 @@
<!-- HEADER --> <!-- HEADER -->
<header class="header animate-on-scroll"> <header class="header animate-on-scroll">
<div class="logo"> <div class="logo">
<img src="logo.png" alt="Bibhuti Solutions"> <a href="https://www.bibhutisolutions.com/"><img src="logo.png" alt="Bibhuti Solutions"></a>
</div> </div>
<h1>NEW YEAR GREETINGS</h1> <h1>NEW YEAR GREETINGS</h1>
<div class="meta"> <div class="meta">
@@ -287,7 +352,7 @@
<!-- CONTENT GRID --> <!-- CONTENT GRID -->
<section class="content-grid"> <section class="content-grid">
<div class="card animate-on-scroll"> <div class="card animate-on-scroll left-img">
<h2>A Year of Gratitude</h2> <h2>A Year of Gratitude</h2>
<p> <p>
As we welcome the New Year, we would like to express our sincere As we welcome the New Year, we would like to express our sincere
@@ -331,14 +396,40 @@
</div> </div>
</section> </section>
<!-- FOOTER -->
<footer class="footer animate-on-scroll"> <!-- FOOTER -->
<footer class="footer animate-on-scroll">
<p>
Warm Regards,<br>
<strong>Team Bibhuti Solutions</strong><br>
Wishing you a Happy, Healthy, and Prosperous New Year!
</p>
<hr>
<div class="footer-contact">
<p class="phone1">
<i class="fas fa-phone"></i>
<a href="tel:+977015913641">+977 01 - 5913641</a> |
<i class="fas fa-envelope"></i>
<a href="mailto:contact@bibhutisolutions.com">
contact@bibhutisolutions.com
</a>
</p>
<p> <p>
Warm Regards,<br> <a href="https://maps.app.goo.gl/xJnZGa9WrfYUiw3s7">
<strong>Team Bibhuti Solutions</strong><br> <i class="fas fa-location-dot"></i> Bhubaneswar, Odisha, India
Wishing you a Happy, Healthy, and Prosperous New Year! 🎉 </a>
</p> </p>
</footer> </div>
<div class="footer-social">
<a href="https://www.facebook.com/bibhutisolutions/" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.linkedin.com/company/bibhuti-solutions/" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>
</footer>
</div> </div>

134
product.html
View File

@@ -4,7 +4,10 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Product Newsletter</title> <title>Product Newsletter</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" href="https://www.bibhutisolutions.com/wp-content/uploads/2022/05/cropped-main-logo-192x192.png" sizes="192x192">
<link rel="icon" href="https://www.bibhutisolutions.com/wp-content/uploads/2022/05/cropped-main-logo-32x32.png" sizes="32x32">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head> </head>
<style> <style>
@@ -17,6 +20,7 @@
body { body {
background: #f4f4f4; background: #f4f4f4;
font-family: "Georgia", serif; font-family: "Georgia", serif;
background-image: url(./background.png);
} }
.newsletter { .newsletter {
@@ -41,7 +45,7 @@ body {
line-height: 1.1; line-height: 1.1;
} }
.website { .website a{
color: #b08d57; color: #b08d57;
margin-top: 10px; margin-top: 10px;
} }
@@ -77,10 +81,39 @@ strong{
} }
/* LEFT CONTENT */ /* LEFT CONTENT */
.content-left {
position: relative;
display: flex;
flex-direction: column;
gap: 30px;
z-index: 1;
overflow: hidden;
}
/* Watermark background */
.content-left::before {
content: "";
position: absolute;
inset: 0;
background-image: url("./image.png"); /* update path */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* filter: grayscale(100%) blur(6px); */
opacity: 0.12;
z-index: -1;
}
.content-left h2 { .content-left h2 {
font-size: 32px; font-size: 32px;
color: #bd2727; color: white;
margin-bottom: 20px; margin-bottom: 20px;
background: #b08d57;
padding: 15px;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
} }
.content-left p { .content-left p {
@@ -101,6 +134,7 @@ strong{
background: #A01515; background: #A01515;
color: #fff; color: #fff;
padding: 30px; padding: 30px;
border-radius: 5px;
} }
.top-news h3 { .top-news h3 {
@@ -124,6 +158,8 @@ strong{
width: 100%; width: 100%;
height: 230px; height: 230px;
object-fit: cover; object-fit: cover;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
} }
.image-caption { .image-caption {
@@ -131,20 +167,48 @@ strong{
color: #fff; color: #fff;
padding: 15px; padding: 15px;
font-weight: bold; font-weight: bold;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
} }
/* FOOTER */ /* FOOTER */
.footer { .footer {
background: #A01515; background: #bd2727;
display: flex;
align-items: center;
padding: 20px 40px;
color: #fff; color: #fff;
justify-content: center; text-align: center;
border-top-right-radius: 12px; padding: 25px 20px;
border-top-left-radius: 12px; border-top-right-radius: 20px;
border-top-left-radius: 20px;
} }
.footer-contact p {
margin: 8px 0;
font-size: 14px;
}
.footer-contact i {
margin-right: 6px;
}
.footer-social {
margin-top: 15px;
}
.footer-social a {
color: #fff;
margin: 0 10px;
font-size: 18px;
transition: color 0.3s ease, transform 0.3s ease;
padding: 5px;
border-radius: 7px;
}
.footer-social a:hover {
color: #CF9A45;
background-color:white ;
transform: translateY(-3px);
}
.page { .page {
@@ -155,7 +219,19 @@ strong{
order: -1; order: -1;
} */ } */
hr{
margin: 12px 0px;
color: white;
border-width: 2px;
opacity: 1;
}
.phone1 {
font-family: serif;
}
a{
text-decoration: none;
color: white;
}
@media (max-width: 992px) { @media (max-width: 992px) {
@@ -229,10 +305,10 @@ strong{
<div class="header"> <div class="header">
<div class="col-lg-6 header-left"> <div class="col-lg-6 header-left">
<h1>PRODUCT<br>NEWSLETTER</h1> <h1>PRODUCT<br>NEWSLETTER</h1>
<p class="website">www.yourproduct.com</p> <p class="website"><a href="bibhutisolutions.com">www.bibhutisolutions.com</a></p>
</div> </div>
<div class="col-lg-6 header-right"> <div class="col-lg-6 header-right">
<div class="logo"><img src="./logo.png" alt=""></div> <div class="logo"><a href="https://www.bibhutisolutions.com/"><img src="./logo.png" alt=""></a></div>
<p class="date">Friday, March 17, 2023</p> <p class="date">Friday, March 17, 2023</p>
</div> </div>
</div> </div>
@@ -292,13 +368,35 @@ strong{
<!-- FOOTER --> <!-- FOOTER -->
<!-- FOOTER --> <!-- FOOTER -->
<footer class="footer animate-on-scroll"> <footer class="footer animate-on-scroll">
<p>
<strong>Team Bibhuti Solutions</strong>
</p>
<hr>
<div class="footer-contact">
<p class="phone1">
<i class="fas fa-phone"></i>
<a href="tel:+977015913641">+977 01 - 5913641</a> |
<i class="fas fa-envelope"></i>
<a href="mailto:contact@bibhutisolutions.com">
contact@bibhutisolutions.com
</a>
</p>
<p> <p>
<a href="https://maps.app.goo.gl/xJnZGa9WrfYUiw3s7">
<strong>Team Bibhuti Solutions</strong><br> <i class="fas fa-location-dot"></i> Bhubaneswar, Odisha, India
</a>
</p> </p>
</footer> </div>
<div class="footer-social">
<a href="https://www.facebook.com/bibhutisolutions/" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.linkedin.com/company/bibhuti-solutions/" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>
</footer>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>