Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- </head>
- <style>
- /* Newsletter */
- body {
- background-color: #fff;
- margin: 0;
- }
- .outer {
- margin: 0 auto;
- max-width: 700px;
- min-width: 280px;
- width:100%;
- border: 1px solid #ebebeb;
- }
- .header-outer {
- padding:30px 0;
- border-bottom: none;
- }
- .middle-outer {
- border-bottom: none;
- }
- .middle .outer {
- background-color: #ffffff;
- border-radius:4px;
- }
- .footer-outer {
- border-top: none;
- background: #f5f5f5;
- }
- /*.header {
- margin-top: 30px!important;
- }*/
- .header,
- .middle,
- .footer {
- margin:0 5px;
- text-align: center;
- table-layout: fixed;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
- border-top: none;
- }
- .header,
- .middle {
- background-color: #fff;
- }
- /* Basic Styles */
- a {
- color: black;
- text-decoration: none;
- }
- a span {
- color: #0077cc;
- }
- a img {
- border: 0;
- }
- div, p, td {
- -webkit-font-smoothing: subpixel-antialiased;
- }
- table {
- border-collapse: collapse;
- }
- .h1 {
- font-family: 'helvetica', arial;
- font-size: 24px;
- color: #333333;
- text-align: left;
- line-height: 30px;
- }
- p,
- .paragraph {
- font-family: helvetica, arial;
- font-size: 14px;
- color: black;
- text-align: left;
- line-height: 16px;
- }
- p {
- Margin: 1em 0;
- }
- .quote {
- font-style: italic;
- color: #999999;
- }
- .cover {
- padding: 0;
- width: 80px;
- height: 120px;
- }
- .cover img {
- height: auto;
- max-width: 80px;
- height: auto;
- display: block;
- border-radius: 4px 4px 0 0;
- }
- /* Buttons */
- .button {
- width:auto;
- margin: auto;
- }
- .button td {
- padding:0;
- }
- .button-link {
- font-family: helvetica;
- font-size: 14px;
- color:#ffffff;
- font-weight: bold;
- text-decoration: none;
- background-color: #333333;
- border:#333333 10px solid;
- border-radius: 25px;
- display: inline-block;
- }
- .button-link span {
- display: inline-block;
- border-left:#333333 20px solid;
- border-right:#333333 20px solid;
- color:#ffffff;
- }
- /* Custom CSS */
- .contacts .h1 {
- text-align: center;
- }
- .contacts .paragraph {
- text-align: center;
- }
- .content {
- padding:0 0 0 0;
- }
- .credits .paragraph {
- color: #999999;
- font-size: 12px;
- text-align: center;
- }
- .header .h1 {
- text-align: center;
- }
- .header .paragraph {
- text-align: center;
- font-size: 11px;
- color:#666666;
- }
- .header-wrap {
- padding:30px 30px;
- }
- .footer-wrap {
- padding: 40px 30px 20px 30px;
- }
- .main-wrap {
- padding:0 30px;
- }
- .paragraph {
- padding: 0 30px;
- }
- .product-column {
- padding: 0 30px;
- }
- /* Multicolumns */
- .one-column, .two-columns, .three-columns, .four-columns {
- text-align: center;
- font-size: 0;
- }
- /*.two-columns, .four-columns {
- padding-left: 0px;
- padding-right: 0px;
- }
- */
- .column {
- width: 100%;
- display: inline-block;
- vertical-align: top;
- font-size: 14px;
- }
- .one-column .one-whole,
- .two-columns .one-whole,
- .three-columns .one-whole,
- .four-columns .one-whole {
- max-width: 100%
- }
- .one-column .one-half,
- .two-columns .one-half,
- .three-columns .one-half,
- .four-columns .one-half {
- max-width: 50%
- }
- .one-column .hidden,
- .two-columns .hidden,
- .three-columns .hidden,
- .four-columns .hidden {
- display: none
- }
- .one-column .three-quarter,
- .two-columns .three-quarter,
- .three-columns .three-quarter,
- .four-columns .three-quarter {
- max-width: 75%;
- }
- .one-column .two-quarter,
- .two-columns .two-quarter,
- .three-columns .two-quarter,
- .four-columns .two-quarter {
- max-width: 25%;
- }
- .one-column .two-sixteenths,
- .two-columns .two-sixteenths,
- .three-columns .two-sixteenths,
- .four-columns .two-sixteenths {
- max-width: 12.5%;
- }
- .one-column .fourteen-sixteenths,
- .two-columns .fourteen-sixteenths,
- .three-columns .fourteen-sixteenths,
- .four-columns .fourteen-sixteenths {
- max-width: 87.5%;
- }
- .one-column .three-sixteenths,
- .two-columns .three-sixteenths,
- .three-columns .three-sixteenths,
- .four-columns .three-sixteenths {
- max-width: 18.75%;
- }
- .one-column .thirteen-sixteenths,
- .two-columns .thirteen-sixteenths,
- .three-columns .thirteen-sixteenths,
- .four-columns .thirteen-sixteenths {
- max-width: 81.25%;
- }
- .site-link {
- color: #636363;
- font-family: Arial;
- font-size: 14px;
- font-weight: 400;
- line-height: 16px;
- text-decoration: underline;
- }
- .site-link--turquoise {
- color:#5aadc3;
- }
- .site-link--black {
- color:black;
- }
- .site-link--mr5 {
- margin-right: 5px;
- }
- .site-link--small {
- font-size: 11px;
- }
- .copyright {
- color: #636363;
- font-family: Arial;
- font-size: 11px;
- font-weight: 400;
- line-height: 16px;
- white-space: nowrap;
- }
- .site-link:hover {
- text-decoration: underline;
- color: black;
- }
- .phone {
- color: #010101;
- font-family: Arial;
- font-size: 13px;
- font-weight: 400;
- white-space: nowrap;
- text-align: right;
- }
- .phone--hidden {
- display: none;
- }
- .paragraph--right {
- text-align: right!important;
- }
- .paragraph--left {
- text-align: left!important;
- }
- .paragraph--handling p {
- margin-top: 20px;
- margin-bottom: 20px;
- }
- .paragraph--handling .main-text {
- font-size: 18px!important;
- }
- .main-text {
- color: #010101;
- font-family: Arial;
- font-size: 18px;
- font-weight: 400;
- }
- .product {
- padding: 20px 0;
- border-top: 1px solid #ebebeb;
- }
- .product-info {
- text-align: left;
- padding: 0;
- vertical-align: top;
- }
- .product-name {
- font-size: 14px;
- font-weight: 400;
- line-height: 16px;
- margin-bottom: 15px;
- }
- .product-article {
- font-size: 14px;
- font-weight: 400;
- line-height: 16px;
- margin-bottom: 24px;
- }
- .product-price {
- color: black;
- font-family: Arial;
- font-size: 14px;
- font-weight: 400;
- line-height: 16px;
- }
- .text-center {
- text-align: center;
- }
- .text-left {
- text-align: left;
- }
- .text-right {
- text-align: right;
- }
- .order {
- padding-top: 25px;
- color: black;
- font-family: Arial;
- font-size: 14px;
- font-weight: 400;
- line-height: 28px;
- border-top: 1px solid #ebebeb;
- }
- .order__main {
- text-align: left;
- }
- .order__sub {
- text-align: right;
- }
- .order-param {
- margin-top: 17px;
- }
- .order-param p {
- color: black;
- font-family: Arial;
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- margin: 0;
- }
- .order-param .order-param__info{
- font-size: 16px;
- font-weight: 700;
- line-height: 40px;
- margin-top: 25px;
- }
- .signature {
- color: #898989;
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- }
- .order-param .signature {
- margin-top: 45px;
- margin-bottom: 20px;
- color: #898989;
- }
- .footer p {
- color: black;
- font-family: Arial;
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- margin: 0;
- }
- .footer .footer__info{
- font-size: 16px;
- font-weight: 700;
- line-height: 16px;
- margin-bottom: 14px;
- margin-top: 25px;
- }
- .hidden {
- display: none;
- }
- .shown {
- display: block;
- }
- .mb15 {
- margin-bottom: 15px;
- }
- @media screen and (min-width: 420px) and (max-width: 639px) {
- .lap-mb15 {
- margin-bottom: 15px;
- }
- .main-wrap {
- padding:0 15px;
- }
- .header-wrap {
- padding: 30px 15px;
- }
- .footer-wrap {
- padding: 30px 15px 20px 15px;
- }
- .product-column,
- .product,
- .paragraph {
- padding: 0 15px;
- }
- .product {
- padding: 15px 0;
- }
- .lap--hidden{
- display: none;
- }
- .lap--shown{
- display: block;
- }
- /* Text */
- .lap--text-center {
- text-align: center;
- }
- .lap--text-left {
- text-align: left;
- }
- .lap--text-right {
- text-align: right;
- }
- /* Grid */
- .one-column .column,
- .two-columns .column,
- .three-columns .column,
- .four-columns .column {
- max-width: 100%;
- }
- .one-column .one-whole,
- .two-columns .one-whole,
- .three-columns .one-whole,
- .four-columns .one-whole {
- max-width: 100%
- }
- .one-column .lap-one-half,
- .two-columns .lap-one-half,
- .three-columns .lap-one-half,
- .four-columns .lap-one-half {
- max-width: 50%
- }
- .one-column .lap-hidden,
- .two-columns .lap-hidden,
- .three-columns .lap-hidden,
- .four-columns .lap-hidden {
- display: none
- }
- .one-column .lap-three-quarter,
- .two-columns .lap-three-quarter,
- .three-columns .lap-three-quarter,
- .four-columns .lap-three-quarter {
- max-width: 75%;
- }
- .one-column .lap-two-quarter,
- .two-columns .lap-two-quarter,
- .three-columns .lap-two-quarter,
- .four-columns .lap-two-quarter {
- max-width: 25%;
- }
- .one-column .lap-two-sixteenths,
- .two-columns .lap-two-sixteenths,
- .three-columns .lap-two-sixteenths,
- .four-columns .lap-two-sixteenths {
- max-width: 12.5%;
- }
- .one-column .lap-fourteen-sixteenths,
- .two-columns .lap-fourteen-sixteenths,
- .three-columns .lap-fourteen-sixteenths,
- .four-columns .lap-fourteen-sixteenths {
- max-width: 87.5%;
- }
- .one-column .lap-three-sixteenths,
- .two-columns .lap-three-sixteenths,
- .three-columns .lap-three-sixteenths,
- .four-columns .lap-three-sixteenths {
- max-width: 18.75%;
- }
- .one-column .lap-thirteen-sixteenths,
- .two-columns .lap-thirteen-sixteenths,
- .three-columns .lap-thirteen-sixteenths,
- .four-columns .lap-thirteen-sixteenths {
- max-width: 81.25%;
- }
- }
- @media only screen and (max-width: 419px) {
- .palm-mb15 {
- margin-bottom: 15px;
- }
- .product-column,
- .product,
- .paragraph {
- padding: 0 15px;
- }
- .product {
- padding: 15px 0;
- }
- .footer-wrap {
- padding: 30px 15px 20px 15px;
- }
- .header-wrap {
- padding: 30px 15px;
- }
- .main-wrap {
- padding:0 15px;
- }
- /* Text */
- .palm--text-center {
- text-align: center;
- }
- .palm--text-left {
- text-align: left;
- }
- .palm--text-right {
- text-align: right;
- }
- .paragraph--handling p {
- font-size: 12px;
- }
- /* Grid */
- .one-column .palm-one-whole,
- .two-columns .palm-one-whole,
- .three-columns .palm-one-whole,
- .four-columns .palm-one-whole {
- max-width: 100%
- }
- .one-column .palm-three-quarter,
- .two-columns .palm-three-quarter,
- .three-columns .palm-three-quarter,
- .four-columns .palm-three-quarter {
- max-width: 75%;
- }
- .one-column .palm-one-half,
- .two-columns .palm-one-half,
- .three-columns .palm-one-half,
- .four-columns .palm-one-half {
- max-width: 50%;
- }
- .one-column .palm-two-quarter,
- .two-columns .palm-two-quarter,
- .three-columns .palm-two-quarter,
- .four-columns .palm-two-quarter {
- max-width: 25%;
- }
- .one-column .palm-three-sixteenths,
- .two-columns .palm-three-sixteenths,
- .three-columns .palm-three-sixteenths,
- .four-columns .palm-three-sixteenths {
- max-width: 18.75%;
- }
- .one-column .palm-thirteen-sixteenths,
- .two-columns .palm-thirteen-sixteenths,
- .three-columns .palm-thirteen-sixteenths,
- .four-columns .palm-thirteen-sixteenths {
- max-width: 81.25%;
- }
- .one-column .palm-three-sixteenths,
- .two-columns .palm-three-sixteenths,
- .three-columns .palm-three-sixteenths,
- .four-columns .palm-three-sixteenths {
- max-width: 18.75%;
- }
- .one-column .palm-thirteen-sixteenths,
- .two-columns .palm-thirteen-sixteenths,
- .three-columns .palm-thirteen-sixteenths,
- .four-columns .palm-thirteen-sixteenths {
- max-width: 81.25%;
- }
- }
- </style>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; 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="stylesheet" href="styles.css">
- </head>
- <body>
- <div class="header">
- <table class="outer header-outer" cellpadding="0" align="center">
- <tbody>
- <tr>
- <td class="three-columns header-wrap">
- <div class="column one-whole lap-one-whole mb15 palm-one-whole lap-mb15 palm-mb15">
- <table width="100%">
- <tbody><tr>
- <td>
- <table width="100%">
- <tbody><tr>
- <td class="text-center palm--text-center lap--text-center">
- <a href="http://nepovtorimie.ru" class="main-logo">
- <img src="http://breadhead.ru/x/nepovtorimie-letters/logo.png" width="175" height="20" alt="Nepovtorimie"/>
- </a>
- </td>
- </tr>
- </tbody></table>
- </td>
- </tr>
- </tbody></table>
- </div>
- <div class="column one-whole lap-one-whole palm-one-whole">
- <table width="100%">
- <tbody><tr>
- <td>
- <table width="100%">
- <tbody><tr>
- <td class="text-center palm--text-center lap--text-center">
- <a href="#" class="site-link site-link--turquoise site-link--mr5">nepovtorimie.ru</a>
- <span class="phone">+7 (800) 250-28-60</span>
- </td>
- </tr>
- </tbody></table>
- </td>
- </tr>
- </tbody></table>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="middle">
- <table class="outer middle-outer" cellpadding="0" align="center">
- <tbody>
- <tr>
- <td class="one-column paragraph">
- <div class="column one-whole lap-one-whole palm-one-whole">
- <table width="100%" cellpadding="0" align="center">
- <tbody><tr>
- <td>
- <table width="100%">
- <tbody>
- <tr height="10"></tr>
- <tr>
- <td class="paragraph--handling">
- <p class="main-text">Здравствуйте, <span>Александр</span>.</p>
- <p>Ваш заказ <span>236957</span> был принят в обработку.</p>
- <p class="order-info-title"><strong>Информация о заказе</strong></p>
- </td>
- </tr>
- <tr height="10"></tr>
- </tbody></table>
- </td>
- </tr>
- </tbody></table>
- </div>
- </td>
- </tr>
- <tr>
- <td class="one-column product-column">
- <div class="column">
- <table width="100%">
- <tbody>
- <tr>
- <td class="two-columns product">
- <div class="column one-whole">
- <table width="100%">
- <tbody><tr>
- <td>
- <table width="100%">
- <tbody>
- <tr>
- <td class="cover">
- <a href="#" target="_blank">
- <img src="http://breadhead.ru/x/nepovtorimie-letters/123.png" width="80">
- </a>
- </td>
- <td width="20"></td>
- <td class="product-info">
- <a href="#" class="site-link site-link--black">Платье приталенное в цветочек, 42</a>
- <p class="product__article">Артикул 7901011</p>
- <p class="product__price"><span>1 X</span> 4 000 Р</p>
- </td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody></table>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </td>
- </tr>
- <tr>
- <td class="one-column product-column">
- <div class="column">
- <table width="100%">
- <tbody>
- <tr>
- <td class="two-columns product">
- <div class="column one-whole">
- <table width="100%">
- <tbody><tr>
- <td>
- <table width="100%">
- <tbody>
- <tr>
- <td class="cover">
- <a href="#" target="_blank">
- <img src="http://breadhead.ru/x/nepovtorimie-letters/123.png" width="80">
- </a>
- </td>
- <td width="20"></td>
- <td class="product-info">
- <a href="#" class="site-link site-link--black">Платье приталенное в цветочек, 42</a>
- <p class="product__article">Артикул 7901011</p>
- <p class="product__price"><span>1 X</span> 4 000 Р</p>
- </td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody></table>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </td>
- </tr>
- <tr>
- <td class="two-columns product-column">
- <div class="column">
- <table width="100%">
- <tbody>
- <tr>
- <td class="order">
- <table width="100%">
- <tbody>
- <tr>
- <td class="order__main">
- Сумма покупки
- </td>
- <td class="order__sub">
- 11 200 Р
- </td>
- </tr>
- <tr>
- <td class="order__main">
- Скидка по карте
- </td>
- <td class="order__sub">
- -2 200 Р
- </td>
- </tr>
- <tr>
- <td class="order__main">
- Доставка
- </td>
- <td class="order__sub">
- 250 Р
- </td>
- </tr>
- <tr>
- <td class="order__main">
- Итоговая стоимость
- </td>
- <td class="order__sub">
- 22 250 Р
- </td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </td>
- </tr>
- <tr>
- <td class="two-columns main-wrap">
- <div class="column">
- <table width="100%">
- <tbody>
- <tr>
- <td>
- <table class="order-param" width="100%">
- <tbody>
- <tr>
- <td>
- <p class="order-param__info">Способ доставки</p>
- <p>Курьерская доставка, от 1 до 4 рабочих дней</p>
- <p class="order-param__info">Способ оплаты</p>
- <p>Наличными при получении</p>
- <p class="order-param__info">Личные данные</p>
- <p>
- Константин Константинопольский<br>
- <a href="mailto:konstantinopolski@gmail.com" class="site-link">konstantinopolski@gmail.com</a><br>
- +7 911 888 00 00<br>
- ул. Кораблестроителей, д. 32/1, кв. 102, 2 подъезд, 5 этаж
- </p>
- <p class="signature">С уважением, команда #Nepovtorimie.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="footer">
- <table class="outer footer-outer" cellpadding="0" align="center">
- <tbody>
- <tr>
- <td class="two-columns main-wrap">
- <div class="column one-whole lap-one-whole palm-one-whole">
- <table width="100%">
- <tbody>
- <tr>
- <td>
- <table width="100%">
- <tbody>
- <tr>
- <td>
- <p class="footer__info">Ищите #nepovtorimie в соц сетях</p>
- <p>
- <a href="#" class="site-link site-link--mr5">Instagram</a>
- <a href="#" class="site-link site-link--mr5">Vkontakte</a>
- <a href="#" class="site-link site-link--mr5">Facebook</a>
- <a href="#" class="site-link site-link--mr5">Whatsapp</a>
- </p>
- <p class="footer__info">Нужна помощь?</p>
- <p>Свяжитесь с нами по электронной почте <a href="mailto:help@nepovtorimie.ru" class="site-link">help@nepovtorimie.ru</a> или по телефону +7 (800) 250-28-60 (ежедневно с 10:00 до 22:00)</p>
- </td>
- </tr>
- </tbody>
- </table>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </td>
- </tr>
- <tr>
- <td class="two-columns footer-wrap">
- <div class="column one-half lap-one-whole palm-one-whole lap-mb15 palm-mb15">
- <table width="100%">
- <tbody><tr>
- <td>
- <table width="100%">
- <tbody><tr>
- <td class="text-left palm--text-center lap--text-center">
- <a href="#" class="site-link site-link--small site-link--mr5">Платья Черешня</a>
- <a href="#" class="site-link site-link--small site-link--mr5">Адреса магазинов</a>
- <a href="#" class="site-link site-link--small site-link--mr5">Наша миссия</a>
- </td>
- </tr>
- </tbody></table>
- </td>
- </tr>
- </tbody></table>
- </div>
- <div class="column one-half lap-one-whole palm-one-whole">
- <table width="100%">
- <tbody><tr>
- <td>
- <table width="100%">
- <tbody><tr>
- <td class="text-right palm--text-center lap--text-center">
- <a href="#" class="site-link site-link--small site-link--turquoise site-link--mr5">nepovtorimie.ru</a>
- <span class="copyright">© 2015 Nepovtorimie</span>
- </td>
- </tr>
- </tbody></table>
- </td>
- </tr>
- </tbody></table>
- </div>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </body>
- </html>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement