API tools faq
paste
Advertisement
carlosluisb24

Untitled

carlosluisb24
Dec 12th, 2019
188
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.14 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Vive Cantando</title>
  8. <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap" rel="stylesheet">
  9. <style>
  10. table, body{
  11. background: #f3f3f3;
  12. background-color: #f3f3f3;
  13. padding: 50px;
  14. font-family: "Arial";
  15. }
  16. .logo{
  17. background-image: url("https://ks-email.s3-sa-east-1.amazonaws.com/mailing_flujo_interactivo/logo-negro.png");
  18. width: 220px;
  19. background-size: contain;
  20. height: 50px;
  21. background-repeat: no-repeat;
  22. margin: auto;
  23. margin-top: 25px;
  24. }
  25. .white-box{
  26. background: #fff;
  27. padding: 50px 70px;
  28. margin-top: 40px;
  29. margin-bottom: 40px;
  30. }
  31. .mail-title{
  32. font-weight: bold;
  33. text-align: center;
  34. color: #000;
  35. font-size: 2.46em;
  36. }
  37. .mail-title .name-color{
  38. color: #00C4CB;
  39. }
  40. .mail-subtitle{
  41. text-align: center;
  42. font-size: 1.2em;
  43. margin-bottom: 40px;
  44. color: #000;
  45. }
  46. .list-container{
  47. padding-left: 20px;
  48. }
  49. .list-item {
  50. font-size: 1em;
  51. margin-bottom: 30px;
  52. list-style: none;
  53. color: #000;
  54. }
  55. .checklist-icon{
  56. background-image: url("https://ks-email.s3-sa-east-1.amazonaws.com/mailing_flujo_interactivo/Check.png");
  57. display: inline-block;
  58. height: 30px;
  59. background-repeat: no-repeat;
  60. background-size: contain;
  61. vertical-align: middle;
  62. margin-right: 26px;
  63. width: 6%;
  64. min-width: 20px;
  65. }
  66. .list-text{
  67. display: inline-block;
  68. width: 88%;
  69. vertical-align: middle;
  70. line-height: 23px;
  71. }
  72. .sing-experience-text{
  73. font-size: 1.2em;
  74. text-align: center;
  75. margin-top: 50px;
  76. margin-bottom: 30px;
  77. color: #000;
  78. }
  79. button{
  80. text-align: center;
  81. width: 270px;
  82. height: 52px;
  83. border-radius: 30px;
  84. border: none;
  85. margin: auto;
  86. display: block;
  87. font-size: 1em;
  88. background: #00C4CB;
  89. color: #fff;
  90. font-weight: bold;
  91. }
  92. .star{
  93. background-image: url("https://ks-email.s3-sa-east-1.amazonaws.com/mailing_flujo_interactivo/staryou.png");
  94. height: 260px;
  95. background-position: center 15%;
  96. background-repeat: no-repeat;
  97. width: 68%;
  98. margin: auto;
  99. margin-top: 35px;
  100. background-size: 110%;
  101. }
  102. .need-help-text{
  103. font-size: 1em;
  104. text-align: center;
  105. line-height: 25px;
  106. color: #000;
  107. margin-bottom: 40px;
  108. }
  109. .need-help-text span{
  110. display: block;
  111. font-weight: bold;
  112. }
  113. .ks-team-menber .lucero-img{
  114. background-image: url("https://ks-emails.s3-sa-east-1.amazonaws.com/promo/lucero.png");
  115. background-size: 60px;
  116. background-repeat: no-repeat;
  117. height: 60px;
  118. background-position: right;
  119. width: 45%;
  120. display: inline-block;
  121. }
  122. .lucero-description{
  123. width: 51%;
  124. float: right;
  125. line-height: 23px;
  126. font-size: 16px;
  127. color: #000;
  128. }
  129. .lucero-description p{
  130. margin: 0;
  131. margin-top: 9px;
  132. color: #000;
  133. }
  134. .lucero-description p span{
  135. display: block;
  136. font-weight: bold;
  137. }
  138. hr{
  139. margin-bottom: 40px;
  140. margin-top: 40px;
  141. }
  142. .follow-us-text{
  143. text-align: center;
  144. font-size: 1em;
  145. color: #000;
  146. opacity: 0.6;
  147. }
  148. .get-ks-text{
  149. text-align: center;
  150. color: #000;
  151. opacity: 0.6;
  152. margin-bottom: 30px;
  153. line-height: 23px;
  154. }
  155. .get-ks-text span{
  156. font-weight: bold;
  157. }
  158. .unsubscribe-text{
  159. text-align: center;
  160. width: 80%;
  161. margin: auto;
  162. margin-bottom: 30px;
  163. color: #000;
  164. opacity: 0.6;
  165. line-height: 23px;
  166. }
  167. .unsubscribe-text a{
  168. text-decoration: underline;
  169. font-weight: bold;
  170. color: #000;
  171. }
  172. .terms-and-conditions-text{
  173. text-align: center;
  174. color: #000;
  175. opacity: 0.6;
  176. line-height: 23px;
  177. }
  178. .terms-and-conditions-text a{
  179. text-decoration: underline;
  180. color: #000;
  181. }
  182. .copyright{
  183. text-align: center;
  184. margin-top: 30px;
  185. font-size: 0.8em;
  186. color: #000;
  187. opacity: 0.6;
  188. }
  189. .social-container{
  190. list-style: none;
  191. text-align: center;
  192. margin-top: 20px;
  193. margin-bottom: 20px;
  194. padding-left: 0;
  195. }
  196. .social-container li{
  197. display: inline-block;
  198. list-style: none;
  199. }
  200. .social-container li a{
  201. display: block;
  202. }
  203. .social-image{
  204. width: 30px;
  205. }
  206. .social-margin{
  207. margin-right: 10px;
  208. }
  209. .data-container{
  210. margin-top: 40px;
  211. margin-bottom: 60px;
  212. }
  213. .data{
  214. text-align: center;
  215. font-size: 1.2em;
  216. color: #000;
  217. text-overflow: ellipsis;
  218. }
  219. .data span{
  220. font-weight: bold;
  221. }
  222. .payment-box{
  223. padding: 25px;
  224. background: #E5F9FA;
  225. border: 0.7px solid #00C4CB;
  226. border-radius: 5px;
  227. max-width: 450px;
  228. margin: auto;
  229. }
  230. .line-blue{
  231. margin-top: 20px;
  232. margin-bottom: 20px;
  233. width: 100%;
  234. height: 0.7px;
  235. background-color: #00C4CB;
  236. }
  237. .payment-box .row .col-1{
  238. width: 49%;
  239. display: inline-block;
  240. vertical-align: middle;
  241. height: 50px;
  242. }
  243. .payment-box .row .col-2{
  244. width: 49%;
  245. display: inline-block;
  246. vertical-align: middle;
  247.  
  248. }
  249. .plan-premium{
  250. font-weight: bold;
  251. font-size: 1.2em;
  252. display: block;
  253. margin-bottom: 5px;
  254. color: #000;
  255. }
  256. .plan-name{
  257. font-size: 1.2em;
  258. color: #000;
  259. }
  260. .plan-price{
  261. font-size: 1.2em;
  262. font-weight: bold;
  263. color: #000;
  264. text-align: right;
  265. display: block;
  266. }
  267. @media (min-width: 900px){
  268. .line-blue{
  269. height: 1px;
  270. }
  271. }
  272. @media (min-width: 700px) and (max-width: 799px) {
  273. .white-box{
  274. padding: 50px 30px;
  275. }
  276. }
  277. @media (min-width: 600px) and (max-width: 699px) {
  278. .white-box{
  279. padding: 50px 30px;
  280. }
  281. .list-text{
  282. width: 87%;
  283. }
  284. .mail-title{
  285. font-size: 2em;
  286. }
  287. .star{
  288. width: 82%;
  289. }
  290. .payment-box .row .col-2{
  291. width: 48%;
  292. }
  293. }
  294. @media (min-width: 500px) and (max-width: 599px) {
  295. .white-box{
  296. padding: 50px 30px;
  297. }
  298. .mail-title{
  299. font-size: 1.5em;
  300. }
  301. .list-text{
  302. width: 82%;
  303. }
  304. .star{
  305. width: 100%;
  306. }
  307. .payment-box .row .col-2{
  308. width: 48%;
  309. }
  310. .plan-premium{
  311. font-size: 1em;
  312. }
  313. .plan-name{
  314. font-size: 1em;
  315. }
  316. .plan-price{
  317. font-size: 1em;
  318. }
  319. .data span{
  320. display: block;
  321. }
  322. }
  323. @media (max-width: 499px) {
  324. table, body{
  325. padding: 25px;
  326. }
  327. .white-box{
  328. padding: 50px 30px;
  329. }
  330. .mail-title{
  331. font-size: 1.2em;
  332. }
  333. .mail-subtitle{
  334. font-size: 0.9em;
  335. }
  336. .list-container{
  337. padding-left: 0;
  338. }
  339. .list-text{
  340. width: 74%;
  341. font-size: 0.9em;
  342. }
  343. .star{
  344. width: 100%;
  345. }
  346. .unsubscribe-text{
  347. width: 100%;
  348. }
  349. .sing-experience-text{
  350. font-size: 0.9em;
  351. }
  352. a.button{
  353. width: 240px;
  354. }
  355. .payment-box .row .col-2{
  356. width: 47%;
  357. }
  358. .plan-premium{
  359. font-size: 0.9em;
  360. }
  361. .plan-name{
  362. font-size: 0.9em;
  363. }
  364. .plan-price{
  365. font-size: 0.9em;
  366. }
  367. .data span{
  368. display: block;
  369. }
  370. }
  371. </style>
  372. </head>
  373. <body>
  374.  
  375. <table width=100% bgColor=#f3f3f3>
  376. <div class="logo"></div>
  377.  
  378. <div class="white-box">
  379. <h1 class="mail-title">Divirta-se sendo Premium</h1>
  380. <p class="mail-subtitle">Obrigada pela sua inscrição!</p>
  381. <div class="payment-box">
  382. <div class="row">
  383. <div class="col-1">
  384. <span class="plan-premium">Plano Premium</span>
  385. <span class="plan-name">Anual</span>
  386. </div>
  387. <div class="col-2">
  388. <span class="plan-price">$12.00</span>
  389. </div>
  390. </div>
  391. <div class="line-blue"></div>
  392. <div class="row">
  393. <div class="col-1">
  394. <span class="plan-premium" style="margin-top: 15px;">Total</span>
  395. </div>
  396. <div class="col-2">
  397. <span class="plan-price">$12.00</span>
  398. </div>
  399. </div>
  400. </div>
  401. <div class="data-container">
  402. <p class="data"><span>Email: </span>raquel@karaokesmart.co</p>
  403. <p class="data"><span>Forma de pagamento: </span>Visa</p>
  404. <p class="data"><span>Detalhes do pagamento: </span>######5647</p>
  405. </div>
  406.  
  407. <p class="unsubscribe-text">Ao adquirir a assinatura Premium você aceita que seja debitado automaticamente o valor do plano até que cancele a inscrição. O cancelamento pode ser realizado a qualquer momento <a target="_blank" href="https://karaokesmart.com.br/">aquí.</a></p>
  408. </div>
  409.  
  410. <div class="footert-section">
  411. <ul class="social-container">
  412. <li><a target="_blank" href="https://www.facebook.com/karaokesmart.co/"><img class="social-image social-margin" src="https://ks-emails.s3-sa-east-1.amazonaws.com/promo/facebook.png"></a></li>
  413. <li><a target="_blank" href="https://www.instagram.com/karaokesmart.br/"><img class="social-image social-margin" src="https://ks-emails.s3-sa-east-1.amazonaws.com/promo/instagram.png"></a></li>
  414. <li><a target="_blank" href="https://www.youtube.com/channel/UCoE0MdrYjh1lWHm4_e5ef1w"><img class="social-image" src="https://ks-emails.s3-sa-east-1.amazonaws.com/promo/youtube.png"></a></li>
  415. </ul>
  416. <p class="get-ks-text">Obtenha Karaoke Smart para: <span>IPhone</span> | <span>Android</span> | <span>Smart TV</span></p>
  417. <p class="get-ks-text">Esta mensagem foi gerada automaticamente. Por favor não responder a mesma.</p>
  418. <p class="unsubscribe-text">Se tem alguma dúvida ou queixa, entre em contato com a nossa área de atenção ao cliente <span style="font-weight: bold;">+51 941 410 822</span></p>
  419. <p class="terms-and-conditions-text"><a target="_blank" href="https://karaokesmart.com.br/termsAndConditions">Términos e Condições</a> | <a target="_blank" href="https://karaokesmart.com.br/faqs">Perguntas frequentes</a> | <a target="_blank" href="https://karaokesmart.com.br/">Cancelar inscrição</a></p>
  420. <p class="copyright">©2019 Karaoke Smart LLC., Delaware, USA</p>
  421. </div>
  422. </table>
  423. </body>
  424. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!