Skip to content

Instantly share code, notes, and snippets.

@gilsonnunesfilho

gilsonnunesfilho/paper-lab-amp4email-styles.html

Created April 30, 2021 21:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gilsonnunesfilho/0a95467e2f1e9f0d865c326c92c419ba to your computer and use it in GitHub Desktop.
Save gilsonnunesfilho/0a95467e2f1e9f0d865c326c92c419ba to your computer and use it in GitHub Desktop.
Download ZIP
Raw
paper-lab-amp4email-styles.html
<!DOCTYPE html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&display=swap"
rel="stylesheet"
/>
<style amp4email-boilerplate>
body {
visibility: hidden;
}
</style>
<style amp-custom>
* {
margin: 0;
box-sizing: border-box;
}
a {
color: inherit;
}
ul {
padding: 0;
list-style: none;
}
body {
background-color: #c6d1d5;
color: #56788c;
font-family: sans-serif;
width: 100%;
}
@media (min-width: 600px) {
body {
padding: 3rem 0 5rem;
}
}
h1 {
color: #a99189;
font-family: 'Quattrocento', serif;
font-weight: bold;
font-size: 2.125rem;
line-height: 1.2;
}
h2 {
color: #a99189;
font-family: 'Quattrocento', serif;
font-weight: bold;
font-size: 1.75rem;
line-height: 1.2;
}
h3 {
color: #a99189;
font-family: 'Quattrocento', serif;
font-weight: bold;
font-size: 1.0625rem;
line-height: 1.375rem;
}
p {
font-size: 1.0625;
line-height: 1.375;
}
main,
aside,
footer {
max-width: 37.5rem;
margin: 0 auto;
}
main {
background-color: #e8ecef;
}
footer {
color: #c6d1d5;
background-color: #56788c;
}
.intro-section {
background-color: #fff;
padding: 1.25rem;
}
.intro-section > * + * {
margin-top: 0.5rem;
}
.intro-section h2 {
margin-top: 1.5rem;
border-bottom: 1px solid #c6d1d5;
}
.intro-section ul {
display: flex;
flex-wrap: wrap;
margin: 0.5rem -0.25rem;
}
.intro-section li {
display: flex;
flex-direction: column;
flex: 1 1 15rem;
padding: 0.25rem;
}
.order-section {
padding: 2rem 0.5rem;
}
.order-section header {
background-color: #fff;
}
.order-section header h2 {
padding: 1rem 0.75rem 0;
}
.order-meta {
padding: 0.5rem;
display: flex;
flex-direction: column;
}
.order-number,
.order-datetime {
padding: 0.5rem;
border-radius: 0.25rem;
}
.order-number {
background-color: #56788c;
color: #fff;
}
.products {
background-color: white;
}
.products > * + * {
border-top: 1px solid #c6d1d5;
}
.product {
padding: 0.75rem;
display: flow-root;
position: relative;
}
.product figure {
width: 104px;
height: 136px;
background-color: #ebe2e4;
margin-right: 0.5rem;
position: absolute;
top: 0.75rem;
left: 0.75rem;
}
.product-details {
flex: 1;
flex-direction: column;
font-size: 0.75rem;
line-height: 1rem;
min-height: 8.5rem;
position: relative;
padding-left: 7rem;
padding-bottom: 2rem;
}
.product-details > * + * {
margin-top: 0.5rem;
}
.product .price {
position: absolute;
bottom: 0;
right: 0;
left: 7rem;
}
.price {
margin-top: auto;
background-color: #e8ecef;
padding: 0.25rem;
border-radius: 0.25rem;
text-align: right;
font-size: 1rem;
line-height: 1.3125rem;
}
.total {
padding: 0.75rem;
background-color: #ebe2e4;
position: relative;
min-height: 3.5rem;
}
.total span {
position: relative;
top: 0.375rem;
}
.total .price {
background-color: #a99189;
color: #fff;
position: absolute;
right: 0.75rem;
top: 0.75rem;
}
.total:last-of-type {
background-color: #d6bdb8;
}
.details {
background-color: #fff;
display: flex;
flex-wrap: wrap;
}
.detail {
padding: 1.25rem;
flex: 1 1 15rem;
}
.detail h2 {
border-bottom: 1px solid #c6d1d5;
margin-bottom: 0.5rem;
}
footer {
padding: 1.25rem;
position: relative;
}
footer .brand {
margin: 0 auto;
position: relative;
}
.social-link {
position: absolute;
top: 1.25rem;
right: 1.25rem;
display: inline-block;
font-size: 0.6875rem;
padding: 0.25rem 1rem;
height: 80px;
border: 1px solid #c6d1d5;
border-radius: 4px;
text-decoration: none;
text-align: center;
}
.copyright {
padding: 1.25rem 1.25rem 2.5rem;
text-align: center;
font-size: 0.75rem;
line-height: 1rem;
}
</style>
</head>
<body>
<main>
<header class="intro-section">
<div class="brand">
<!-- TODO: Add this image -->
<amp-img
src="./logo.svg"
alt="Marca Paper Lab"
width="188"
height="80"
>
</amp-img>
</div>
<h1>Obrigado pela sua compra!</h1>
<p>
Assim que seu pedido sair para entrega nós enviaremos um e-mail com as
informações de rastreamento.
</p>
<h2>Ficou com dúvidas?</h2>
<ul>
<li>
<!-- TODO: Get the correct number and time -->
<strong>Telefone (das 8h às 17h):</strong>
<span>(81) 0000-0000 </span>
</li>
<li>
<!-- TODO: Get the correct email -->
<strong>Email:</strong>
<span>
<a href="mailto:sac@paperlab.love">sac@paperlab.love</a>
</span>
</li>
</ul>
</header>
<!-- End Intro -->
<section class="order-section">
<header>
<h2>Seu pedido</h2>
<div class="order-meta">
<span class="order-number">
<!-- TODO: Make this dynamic -->
#%%ORDER_ID%%
</span>
<span class="order-datetime">
<!-- TODO: Make these dynamic -->
Realizado em %%ORDER_DATE%% às ##ORDER_TIME%%
</span>
</div>
</header>
<!-- End Order > Header -->
<ul class="products">
<!-- TODO: Make this list dynamic -->
<li class="product">
<figure class="product-img">
<amp-img
src="https://a"
alt=""
width="104"
height="136"
></amp-img>
</figure>
<div class="product-details">
<!-- TODO: Make these dynamic -->
<h3>%%PRODUCT_NAME%%</h3>
<p>Miolo: %%PRODUCT_PAPER_STYLE%%</p>
<p>Nome na capa: %%PRODUCT_NAME_AT_COVER%%</p>
<p class="price">%%PRODUCT_PRICE%%</p>
</div>
</li>
<li class="product">
<figure class="product-img">
<amp-img
src="https://a"
alt=""
width="104"
height="136"
></amp-img>
</figure>
<div class="product-details">
<!-- TODO: Make these dynamic -->
<h3>%%PRODUCT_NAME%%</h3>
<p>Miolo: %%PRODUCT_PAPER_STYLE%%</p>
<p class="price">%%PRODUCT_PRICE%%</p>
</div>
</li>
<!-- ...repeat n times -->
</ul>
<!-- End Order > Products -->
<div class="totals">
<!-- TODO: Make these dynamic -->
<div class="total">
<span>Subtotal</span>
<span class="price">%%ORDER_SUBTOTAL%%</span>
</div>
<div class="total">
<span>Frete</span>
<span class="price">%%ORDER_DELIVERY_FEE%%</span>
</div>
<div class="total">
<span>Valor total</span>
<span class="price">%%ORDER_TOTAL%%</span>
</div>
</div>
<!-- End Order > Totals -->
</section>
<!-- End Order -->
<section class="details">
<!-- TODO: Make these dynamic -->
<div class="detail">
<h2>Destinatário</h2>
<p>%%CLIENT_NAME%%</p>
<p>CEP: %%ADDRESS_ZIP_CODE%%</p>
<p>%%ADDRESS_STREET%%, %%ADDRESS_STREET_NUMBER%%</p>
<p>%%ADDRESS_NEIGHBORHOOD%%, %%ADDRESS_CITY%% – %%ADDRESS_STATE%%</p>
</div>
<div class="detail">
<!-- TODO: If boleto, show link -->
<h2>Pagamento</h2>
<p>%%PAYMENT_MODE%%</p>
<p>Acesse o <a href="%%BOLETO_URL%%">boleto aqui</a></p>
</div>
</section>
<!-- End Details -->
</main>
<!-- End Main -->
<footer>
<div class="brand">
<!-- TODO: Add this image -->
<amp-img
src="./logo-negative.svg"
alt="Marca Paper Lab"
width="188"
height="80"
></amp-img>
</div>
<a href="https://instagram.com/paperl.a.b" class="social-link">
<!-- TODO: Add this image -->
<amp-img
src="./instagram-icon.svg"
alt="Ícone Instagram"
width="40"
height="40"
></amp-img>
<div>Siga&nbsp;a&nbsp;gente</div>
<div>@paperl.a.b</div>
</a>
</footer>
<!-- End Footer -->
<aside class="copyright">
<!-- TODO: Correct Info -->
<div>
<p>© 2021 Paper Lab - 21.397.962/0001-05</p>
<p>Rua Jader de Andrade, 344, Casa Forte, Recife – PE</p>
</div>
</aside>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment