trying to get new templates to work

This commit is contained in:
Sam
2021-03-15 10:49:17 +00:00
parent 5714a661aa
commit a920a9fa61
6 changed files with 214 additions and 31 deletions

View File

@@ -0,0 +1,176 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap"
rel="stylesheet"
/>
<title>Interés en copra de producto</title>
<style>
.body {
color: #374493;
font-family: 'Poppins', sans-serif;
background-color: #8cead8;
}
.mail {
margin: 50px auto;
width: 60%;
padding: 30px;
min-height: 400px;
background-color: white;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.header {
display: flex;
flex-direction: column;
align-content: center;
}
.latienda-logo {
max-width: 300px;
margin: auto;
}
.title {
font-size: 1.5rem;
text-align: center;
margin-top: 60px;
padding-bottom: 5px;
display: flex;
flex-direction: column;
}
.main {
display: flex;
flex-direction: column;
align-content: center;
padding: 0 30px 30px 30px;
}
.product-data {
display: flex;
flex-direction: column;
align-items: center;
max-width: 400px;
margin: auto;
margin-bottom: 20px;
font-weight: 400;
}
.product-image {
max-width: 250px;
margin-bottom: 5px;
}
.product-link {
margin-bottom: 5px;
}
.product-price {
font-weight: 700;
}
.client-info {
max-width: fit-content;
}
.client-data {
font-size: 1.2rem;
margin-top: 20px;
margin-bottom: 50px;
font-family: 'Noto Sans', sans-serif;
align-self: left;
}
.name {
font-size: 1.2rem;
font-weight: 700;
display: inline;
}
.value {
margin: 0;
display: inline;
font-weight: 400;
}
@media all and (min-width: 780px) {
.mail {
width: 40%;
}
}
@media all and (max-width: 780px) {
.title {
font-size: 1.2rem;
}
h2 {
font-size: 1.2rem;
}
.value,
.name {
font-size: 1rem;
}
}
</style>
</head>
<body class="body">
<div class="mail">
<header class="header">
<a href="https://latienda.coop/" target="_blank">
<img
src="https://latienda.coop/_nuxt/img/latienda-logo.3e53761.svg"
alt=""
class="latienda-logo"
/>
</a>
<h1 class="title">
<span>Interés en compra</span>
<span>de producto</span>
</h1>
</header>
<main class="main">
<div class="product-data">
<a
href="https://latiendacoop.s3.amazonaws.com/products/0101UNADEGATOBERMEJO.jpeg"
target="_blank"
>
<img
src="https://latiendacoop.s3.amazonaws.com/products/0101UNADEGATOBERMEJO.jpeg"
alt=""
class="product-image"
/>
</a>
<a
href="https://latienda.coop/productos/356"
class="product-link"
>Enlace al producto</a
>
<span class="product-name">Nombre del producto: {{product.name}}</span>
<span class="product-id-sku">{{product.sku}}</span>
<span class="product-price">{{product.price}}</span>
</div>
<div class="client-info">
<h2>Datos cliente</h2>
<dl class="client-data">
<dt class="name">Nombre:</dt>
<dd class="value">{{user.full_name}}<br /></dd>
<dt class="name">Email:</dt>
<dd class="value">{{user.email}}<br /></dd>
<dt class="name">Teléfono:</dt>
<dd class="value">{{telephone}}<br /></dd>
<dt class="name">Comentarios:</dt>
<dd class="value">{{comment}}<br/>
</dd>
</dl>
</div>
</main>
<footer class="footer">
<span>2021 La Tienda.Coop</span>
</footer>
</div>
</body>
<!-- V1 version -->
</html>

View File

@@ -6,9 +6,6 @@
>
<head>
<title> </title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
@@ -144,9 +141,9 @@
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
@@ -230,9 +227,9 @@
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
@@ -244,7 +241,7 @@
</td>
</tr>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
@@ -285,9 +282,9 @@
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
@@ -344,9 +341,9 @@
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
@@ -358,7 +355,7 @@
</td>
</tr>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
@@ -399,9 +396,9 @@
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
@@ -548,9 +545,9 @@
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
@@ -562,7 +559,7 @@
</td>
</tr>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
@@ -602,9 +599,9 @@
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:300px;"
>
@@ -788,9 +785,9 @@
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
@@ -802,7 +799,7 @@
</td>
</tr>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
@@ -860,7 +857,7 @@
</td>
</tr>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
@@ -901,9 +898,9 @@
>
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
@@ -1008,9 +1005,9 @@
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
@@ -1025,4 +1022,5 @@
<![endif]-->
</div>
</body>
<!-- V2 version -->
</html>