API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 12th, 2019
144
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.87 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: "Montserrat";
  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. }
  45. .list-container{
  46. padding-left: 20px;
  47. }
  48. .list-item {
  49. font-size: 1em;
  50. margin-bottom: 30px;
  51. list-style: none;
  52. color: #000;
  53. }
  54. .checklist-icon{
  55. background-image: url("https://ks-email.s3-sa-east-1.amazonaws.com/mailing_flujo_interactivo/Check.png");
  56. display: inline-block;
  57. height: 30px;
  58. background-repeat: no-repeat;
  59. background-size: contain;
  60. vertical-align: middle;
  61. margin-right: 26px;
  62. width: 6%;
  63. min-width: 20px;
  64. }
  65. .list-text{
  66. display: inline-block;
  67. width: 88%;
  68. vertical-align: middle;
  69. line-height: 23px;
  70. }
  71. .sing-experience-text{
  72. font-size: 1.2em;
  73. text-align: center;
  74. margin-top: 50px;
  75. margin-bottom: 30px;
  76. color: #000;
  77. }
  78. button{
  79. text-align: center;
  80. width: 270px;
  81. height: 52px;
  82. border-radius: 30px;
  83. border: none;
  84. margin: auto;
  85. display: block;
  86. font-size: 1em;
  87. background: #00C4CB;
  88. color: #fff;
  89. font-weight: bold;
  90. }
  91. .star{
  92. background-image: url("https://ks-email.s3-sa-east-1.amazonaws.com/mailing_flujo_interactivo/staryou.png");
  93. height: 260px;
  94. background-position: center 15%;
  95. background-repeat: no-repeat;
  96. width: 68%;
  97. margin: auto;
  98. margin-top: 35px;
  99. background-size: 110%;
  100. }
  101. .need-help-text{
  102. font-size: 1em;
  103. text-align: center;
  104. line-height: 25px;
  105. color: #000;
  106. margin-bottom: 40px;
  107. }
  108. .need-help-text span{
  109. display: block;
  110. font-weight: bold;
  111. }
  112. .ks-team-menber .lucero-img{
  113. background-image: url("https://ks-emails.s3-sa-east-1.amazonaws.com/promo/lucero.png");
  114. background-size: 60px;
  115. background-repeat: no-repeat;
  116. height: 60px;
  117. background-position: right;
  118. width: 45%;
  119. display: inline-block;
  120. }
  121. .lucero-description{
  122. width: 51%;
  123. float: right;
  124. line-height: 23px;
  125. font-size: 16px;
  126. color: #000;
  127. }
  128. .lucero-description p{
  129. margin: 0;
  130. margin-top: 9px;
  131. color: #000;
  132. }
  133. .lucero-description p span{
  134. display: block;
  135. font-weight: bold;
  136. }
  137. hr{
  138. margin-bottom: 40px;
  139. margin-top: 40px;
  140. }
  141. .follow-us-text{
  142. text-align: center;
  143. font-size: 1em;
  144. color: #000;
  145. opacity: 0.6;
  146. }
  147. .get-ks-text{
  148. text-align: center;
  149. color: #000;
  150. opacity: 0.6;
  151. margin-bottom: 30px;
  152. line-height: 23px;
  153. }
  154. .get-ks-text span{
  155. font-weight: bold;
  156. }
  157. .unsubscribe-text{
  158. text-align: center;
  159. width: 80%;
  160. margin: auto;
  161. margin-bottom: 30px;
  162. color: #000;
  163. opacity: 0.6;
  164. line-height: 23px;
  165. }
  166. .unsubscribe-text a{
  167. text-decoration: underline;
  168. font-weight: bold;
  169. color: #000;
  170. }
  171. .terms-and-conditions-text{
  172. text-align: center;
  173. color: #000;
  174. opacity: 0.6;
  175. line-height: 23px;
  176. }
  177. .terms-and-conditions-text a{
  178. text-decoration: underline;
  179. color: #000;
  180. }
  181. .copyright{
  182. text-align: center;
  183. margin-top: 30px;
  184. font-size: 0.8em;
  185. color: #000;
  186. opacity: 0.6;
  187. }
  188. .social-container{
  189. list-style: none;
  190. text-align: center;
  191. margin-top: 20px;
  192. margin-bottom: 20px;
  193. padding-left: 0;
  194. }
  195. .social-container li{
  196. display: inline-block;
  197. list-style: none;
  198. }
  199. .social-container li a{
  200. display: block;
  201. }
  202. .social-image{
  203. width: 30px;
  204. }
  205. .social-margin{
  206. margin-right: 10px;
  207. }
  208. .data-container{
  209. margin-top: 40px;
  210. margin-bottom: 60px;
  211. }
  212. .data{
  213. text-align: center;
  214. font-size: 1.2em;
  215. color: #000;
  216. text-overflow: ellipsis;
  217. }
  218. .data span{
  219. font-weight: bold;
  220. }
  221. .payment-box{
  222. padding: 25px;
  223. background: #E5F9FA;
  224. border: 0.7px solid #00C4CB;
  225. border-radius: 5px;
  226. max-width: 450px;
  227. margin: auto;
  228. }
  229. .line-blue{
  230. margin-top: 20px;
  231. margin-bottom: 20px;
  232. width: 100%;
  233. height: 0.7px;
  234. background-color: #00C4CB;
  235. }
  236. .payment-box .row .col-1{
  237. width: 49%;
  238. display: inline-block;
  239. vertical-align: middle;
  240. height: 50px;
  241. }
  242. .payment-box .row .col-2{
  243. width: 49%;
  244. display: inline-block;
  245. vertical-align: middle;
  246.  
  247. }
  248. .plan-premium{
  249. font-weight: bold;
  250. font-size: 1.2em;
  251. display: block;
  252. margin-bottom: 5px;
  253. color: #000;
  254. }
  255. .plan-name{
  256. font-size: 1.2em;
  257. color: #000;
  258. }
  259. .plan-price{
  260. font-size: 1.2em;
  261. font-weight: bold;
  262. color: #000;
  263. text-align: right;
  264. display: block;
  265. }
  266. @media (min-width: 700px) and (max-width: 799px) {
  267. .white-box{
  268. padding: 50px 30px;
  269. }
  270. }
  271. @media (min-width: 600px) and (max-width: 699px) {
  272. .white-box{
  273. padding: 50px 30px;
  274. }
  275. .list-text{
  276. width: 87%;
  277. }
  278. .mail-title{
  279. font-size: 2em;
  280. }
  281. .star{
  282. width: 82%;
  283. }
  284. .payment-box .row .col-2{
  285. width: 48%;
  286. }
  287. }
  288. @media (min-width: 500px) and (max-width: 599px) {
  289. .white-box{
  290. padding: 50px 30px;
  291. }
  292. .mail-title{
  293. font-size: 1.5em;
  294. }
  295. .list-text{
  296. width: 82%;
  297. }
  298. .star{
  299. width: 100%;
  300. }
  301. .payment-box .row .col-2{
  302. width: 48%;
  303. }
  304. .plan-premium{
  305. font-size: 1em;
  306. }
  307. .plan-name{
  308. font-size: 1em;
  309. }
  310. .plan-price{
  311. font-size: 1em;
  312. }
  313. .data span{
  314. display: block;
  315. }
  316. }
  317. @media (max-width: 499px) {
  318. table, body{
  319. padding: 25px;
  320. }
  321. .white-box{
  322. padding: 50px 30px;
  323. }
  324. .mail-title{
  325. font-size: 1.2em;
  326. }
  327. .mail-subtitle{
  328. font-size: 0.9em;
  329. }
  330. .list-container{
  331. padding-left: 0;
  332. }
  333. .list-text{
  334. width: 74%;
  335. font-size: 0.9em;
  336. }
  337. .star{
  338. width: 100%;
  339. }
  340. .unsubscribe-text{
  341. width: 100%;
  342. }
  343. .sing-experience-text{
  344. font-size: 0.9em;
  345. }
  346. a.button{
  347. width: 240px;
  348. }
  349. .payment-box .row .col-2{
  350. width: 48%;
  351. }
  352. .plan-premium{
  353. font-size: 0.9em;
  354. }
  355. .plan-name{
  356. font-size: 0.9em;
  357. }
  358. .plan-price{
  359. font-size: 0.9em;
  360. }
  361. .data span{
  362. display: block;
  363. }
  364. }
  365. </style>
  366. </head>
  367. <body>
  368.  
  369. <table width=100% bgColor=#f3f3f3>
  370. <div class="logo"></div>
  371.  
  372. <div class="white-box">
  373. <h1 class="mail-title">Diviértete siendo Premium</h1>
  374. <p class="mail-subtitle">¡Gracias por tu suscripción!</p>
  375. <div class="payment-box">
  376. <div class="row">
  377. <div class="col-1">
  378. <span class="plan-premium">Plan Premium</span>
  379. <span class="plan-name">Anual</span>
  380. </div>
  381. <div class="col-2">
  382. <span class="plan-price">$12.00</span>
  383. </div>
  384. </div>
  385. <div class="line-blue"></div>
  386. <div class="row">
  387. <div class="col-1">
  388. <span class="plan-premium" style="margin-top: 15px;">Total</span>
  389. </div>
  390. <div class="col-2">
  391. <span class="plan-price">$12.00</span>
  392. </div>
  393. </div>
  394. </div>
  395. <div class="data-container">
  396. <p class="data"><span>Email: </span>raquel@karaokesmart.co</p>
  397. <p class="data"><span>Forma de Pago: </span>Visa</p>
  398. <p class="data"><span>Detalles de Pago: </span>######5647</p>
  399. </div>
  400.  
  401. <p class="unsubscribe-text">Aceptas que se te debite automáticamente por ser Premium hasta que canceles tu suscripción. Puedes cancelar tu suscripción en cualquier momento <a target="_blank" href="https://karaokesmart.co">aquí.</a></p>
  402. </div>
  403.  
  404. <div class="footert-section">
  405. <ul class="social-container">
  406. <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>
  407. <li><a target="_blank" href="https://www.instagram.com/karaokesmart/"><img class="social-image social-margin" src="https://ks-emails.s3-sa-east-1.amazonaws.com/promo/instagram.png"></a></li>
  408. <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>
  409. </ul>
  410. <p class="get-ks-text">Obtén Karaoke Smart para: <span>IPhone</span> | <span>Android</span> | <span>Smart TV</span></p>
  411. <p class="get-ks-text">Este mensaje fue originado automáticamente. Por favor, no responder al mismo.</p>
  412. <p class="unsubscribe-text">Si tienes alguna duda o queja, comunicate con nuestra área de atención al cliente al <span style="font-weight: bold;">+51 941 410 822</span></p>
  413. <p class="terms-and-conditions-text"><a target="_blank" href="https://karaokesmart.co/termsAndConditions">Términos y condiciones</a> | <a target="_blank" href="https://karaokesmart.co/ayuda">Preguntas Frecuentes</a> | Contáctanos: 0800-76766</p>
  414. <p class="copyright">©2019 Karaoke Smart LLC., Delaware, USA</p>
  415. </div>
  416. </table>
  417. </body>
  418. </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!