Skip to content

Instantly share code, notes, and snippets.

@thdtt
Created February 9, 2023 17:46
Show Gist options
  • Save thdtt/1fa9c6af201742e52fb043c94d180d53 to your computer and use it in GitHub Desktop.
Save thdtt/1fa9c6af201742e52fb043c94d180d53 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<head>
<style>
a {
text-decoration: none;
}
a.website,
a.email {
color: red;
}
ul {
margin: 0;
}
tr td:last-child {
width: 1%;
white-space: nowrap;
}
li {
margin: 10px 0;
}
.container {
padding-top: 112px;
/* display: grid; */
position: relative;
border-color: transparent;
background-color: #ededf0;
font-size: 20px;
font-weight: 400;
font-family: Arial, Helvetica, sans-serif;
}
.content {
/* display: grid; */
margin: auto;
background-color: rgb(255, 255, 255, 1);
max-width: 1030px;
padding-top: 43px;
}
.mysign {
position: relative;
/* display: flex; */
background-color: #ff0000;
align-items: center;
margin: 0px 40px;
}
.mysign-logo {
width: 130px;
height: 130px;
/* margin: auto 0 auto 18px; */
margin: 10px 0 10px 18px;
border-radius: 30px;
}
.mysign-slogan {
margin-right: 80px;
color: white;
}
.mysign-slogan>ul {
list-style-type: disclosure-closed;
}
.sub-slogan {
text-align: left;
font-weight: 700;
line-height: 133.522733%;
font-stretch: normal;
font-size: 27px;
}
.sub-slogan>span {
position: relative;
left: 8px;
right: 100px;
}
.message {
position: relative;
margin-top: 43px;
margin-left: 80px;
margin-right: 200px;
bottom: 0;
}
.ca-details {
margin-left: 40px;
padding-left: 0;
}
.customer {
margin-bottom: 1em;
}
.bold {
font-weight: 700;
text-align: left;
}
.email-signature {
/* display: grid; */
justify-content: space-between;
}
.download {
/* display: flex; */
justify-content: space-between;
position: relative;
margin-left: 80px;
margin-right: 60px;
margin-bottom: 20px;
}
.download-image {
/* display: flex; */
}
.store {
/* display: grid; */
margin: auto 0;
}
.store>img {
width: 248px;
height: 73px;
border-radius: 24px;
}
.appstore {
margin-bottom: 5px;
}
.playstore {
margin-top: 5px;
margin-bottom: 2px;
}
.signature-logo {
/* margin: auto 0 auto 50px; */
}
.qrcode {
width: 164px;
height: 164px;
}
.signatureImage {
width: 288px;
height: 222px;
}
.signature {
margin-left: 80px;
margin-right: 100px;
padding-bottom: 15px;
font-style: italic;
color: rgb(114, 114, 114);
}
.footer {
text-align: center;
/* display: grid; */
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.guild {
margin-top: 30px;
margin-bottom: 5px;
}
.app-name {
color: red;
font-size: 29px;
font-weight: 400;
font-stretch: normal;
margin-right: 0;
margin-bottom: 0;
text-decoration: none;
text-align: center;
margin-top: 30px;
}
.contact-info {
/* display: flex; */
margin: auto;
}
.info {
color: rgb(255, 30, 0);
height: auto;
font-size: 20px;
align-self: auto;
text-align: left;
font-weight: 400;
line-height: 168.523%;
font-stretch: normal;
text-decoration: none;
padding: 0 15px;
}
.heading {
color: rgb(131, 130, 130);
}
.info.middle {
border-left: 2px solid;
border-right: 2px solid;
border-color: rgb(131, 130, 130);
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="mysign">
<table>
<tr>
<!-- <td>-->
<!-- <img src="cid:mysignLogo" class="mysign-logo" />-->
<!-- </td>-->
<td>
<img src="mysignLogo.jpg" class="mysign-logo" />
</td>
<td>
<div class="mysign-slogan">
<ul>
<li>
<span class="sub-slogan">
Dịch vụ ký số từ xa chuẩn an toàn bảo mật quốc tế.
</span>
</li>
<li>
<span class="sub-slogan">
Tiết kiệm 80% thời gian ký kết.
</span>
</li>
<li>
<span class="sub-slogan">
Giảm 90% chi phí quản lý tài liệu.
</span>
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
<div class="message">
<div class="customer">
<span>Xin chào</span>
<span id="customer-name1"> PHẠM VĂN HIẾU, </span>
</div>
<div class="message-details">
<span>Tài khoản dịch vụ MySign của Quý khách đã được tạo thành công bởi
Viettel CA.</span>
<div class="account bold">
<span>Tài khoản: </span>
<span id="identity"> CMT_0272000026511, </span>
<span>Mật khẩu: </span>
<span id="password"> 123456qazXSW@ </span>
</div>
<ul class="ca-details">
<li>
<span class="bold">Số serial: </span>
<span id="serial"> 125594204_2428964_20220909101557 </span>
</li>
<li>
<span class="bold">Thông tin thuê bao: </span>
<span>
EMAILADDRESS=phamngocdat20052000@gmail.com,
UID=CMND:027200002611, CN=PHAM NGOC DAT, L=NINH BINH, C=VN
</span>
</li>
<li>
<span class="bold">Tổ chức phát hành: </span>
<span> C=VN, O=Viettel Group, CN=Viettel-CA RS </span>
</li>
<li>
<span class="bold">Ngày bắt đầu:</span>
<span id="fromdate"> 31/01/2023 </span>
</li>
<li>
<span class="bold">Ngày kết thúc:</span>
<span id="toDate"> 31/01/2024 </span>
</li>
</ul>
</div>
</div>
<div class="email-signature" style="flex-direction: column">
<div class="download">
<div class="mysign-download">
<div class="thank">
<span>Trân trọng cảm ơn quý khách đã sử dụng dịch vụ của
Viettel!</span>
</div>
<div class="guild">
<span>Tải ứng dụng MySign tại đây:</span>
</div>
<table style="width:100%">
<tr>
<td>
<img src="appstore.jpg" class="appstore" />
<img src="playstore.jpg" class="playstore" />
</td>
<td><img src="qrCode.jpg" class="qrcode" /></td>
<td><img src="signatureImage.jpg" class="signatureImage" /></td>
</tr>
</table>
</div>
<div class="signature-logo">
<!-- <img src="cid:signatureImage" class="signatureImage" /> -->
</div>
</div>
<div class="signature">
<span>Đây là email được gửi từ hệ thống, vui lòng không phản hồi lại
email này.</span>
</div>
</div>
</div>
<div class="footer" style="flex-direction: column">
<div class="app-name">
<span>MYSIGN</span>
</div>
<div class="contact-info">
<span class="info">
<span class="heading">Hotline:</span>
<span class="hotline">1800 8000(Nhánh1)</span>
</span>
<span class="info middle">
<span class="heading">Website:</span>
<a href="http://viettel-ca.vn/" class="website" style="color: red !important">viettel-ca.vn</a>
</span>
<span class="info">
<span class="heading">Email:</span>
<a class="email" style="color: red !important">cskh@viettel.com.vn</a>
</span>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment