gilsonnunesfilho/boleto.html

## boleto.html
<p>Acesse o <a href="%%BOLETO_URL%%">boleto aqui</a></p>

## paper-lab-amp4email.html
<!DOCTYPE html>
<html ⚡4email data-css-strict>
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp4email-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
    <style amp-custom>
      * {
        margin: 0;
      }
      h1 {
        margin: 1rem;
      }
    </style>
  </head>
  <body>
    <aside>
      <!-- TODO: Is this link possible? -->
      <p>
        Não consegue visualizar corretamente esse e-mail? Visualize a
        <a href="https://a">versão online</a>.
      </p>
    </aside>
    <!-- End Aside -->

    <main>
      <section class="intro-section">
        <div class="brand">
          <!-- TODO: Add this image -->
          <amp-img
            src="https://a"
            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>
      </section>
      <!-- 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 -->
          %%PRODUCT%%
          <!-- ...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">
          <h2>Pagamento</h2>
          <p>%%PAYMENT_MODE%%</p>
          <!-- TODO: If boleto, show link -->
          %%BOLETO%%
        </div>
      </section>
      <!-- End Details -->
    </main>
    <!-- End Main -->

    <footer>
      <div class="brand">
        <!-- TODO: Add this image -->
        <amp-img
          src="https://a"
          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="https://a"
          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>

## product.html
<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>
	<!DOCTYPE html>
	<html ⚡4email data-css-strict>
	<head>
	<meta charset="utf-8" />
	<script async src="https://cdn.ampproject.org/v0.js"></script>
	<style amp4email-boilerplate>
	body {
	visibility: hidden;
	}
	</style>
	<style amp-custom>
	* {
	margin: 0;
	}
	h1 {
	margin: 1rem;
	}
	</style>
	</head>
	<body>
	<aside>
	<!-- TODO: Is this link possible? -->
	<p>
	Não consegue visualizar corretamente esse e-mail? Visualize a
	<a href="https://a">versão online</a>.
	</p>
	</aside>
	<!-- End Aside -->

	<main>
	<section class="intro-section">
	<div class="brand">
	<!-- TODO: Add this image -->
	<amp-img
	src="https://a"
	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>
	</section>
	<!-- 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 -->
	%%PRODUCT%%
	<!-- ...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">
	<h2>Pagamento</h2>
	<p>%%PAYMENT_MODE%%</p>
	<!-- TODO: If boleto, show link -->
	%%BOLETO%%
	</div>
	</section>
	<!-- End Details -->
	</main>
	<!-- End Main -->

	<footer>
	<div class="brand">
	<!-- TODO: Add this image -->
	<amp-img
	src="https://a"
	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="https://a"
	alt="Ícone Instagram"
	width="40"
	height="40"
	></amp-img>
	<div>Siga a 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>
	<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>