API tools faq
paste
carlosluisb24

Untitled

carlosluisb24
Dec 12th, 2019
114
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.78 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. padding: 50px;
  13. font-family: "Montserrat";
  14. }
  15. .logo{
  16. background-image: url("https://ks-email.s3-sa-east-1.amazonaws.com/mailing_flujo_interactivo/logo-negro.png");
  17. width: 220px;
  18. background-size: contain;
  19. height: 50px;
  20. background-repeat: no-repeat;
  21. margin: auto;
  22. margin-top: 25px;
  23. }
  24. .white-box{
  25. background: #fff;
  26. padding: 50px 70px;
  27. margin-top: 40px;
  28. margin-bottom: 40px;
  29. }
  30. .mail-title{
  31. font-weight: bold;
  32. text-align: center;
  33. color: #000;
  34. font-size: 2.46em;
  35. }
  36. .mail-title .name-color{
  37. color: #00C4CB;
  38. }
  39. .mail-subtitle{
  40. text-align: center;
  41. font-size: 1.2em;
  42. margin-bottom: 40px;
  43. }
  44. .list-container{
  45. padding-left: 20px;
  46. }
  47. .list-item {
  48. font-size: 1em;
  49. margin-bottom: 30px;
  50. list-style: none;
  51. color: #000;
  52. }
  53. .checklist-icon{
  54. background-image: url("https://ks-email.s3-sa-east-1.amazonaws.com/mailing_flujo_interactivo/Check.png");
  55. display: inline-block;
  56. height: 30px;
  57. background-repeat: no-repeat;
  58. background-size: contain;
  59. vertical-align: middle;
  60. margin-right: 26px;
  61. width: 6%;
  62. min-width: 20px;
  63. }
  64. .list-text{
  65. display: inline-block;
  66. width: 88%;
  67. vertical-align: middle;
  68. line-height: 23px;
  69. }
  70. .sing-experience-text{
  71. font-size: 1.2em;
  72. text-align: center;
  73. margin-top: 50px;
  74. margin-bottom: 30px;
  75. color: #000;
  76. }
  77. button{
  78. text-align: center;
  79. width: 270px;
  80. height: 52px;
  81. border-radius: 30px;
  82. border: none;
  83. margin: auto;
  84. display: block;
  85. font-size: 1em;
  86. background: #00C4CB;
  87. color: #fff;
  88. font-weight: bold;
  89. }
  90. .star{
  91. background-image: url("https://ks-email.s3-sa-east-1.amazonaws.com/mailing_flujo_interactivo/staryou.png");
  92. height: 260px;
  93. background-position: center 15%;
  94. background-repeat: no-repeat;
  95. width: 68%;
  96. margin: auto;
  97. margin-top: 35px;
  98. background-size: 110%;
  99. }
  100. .need-help-text{
  101. font-size: 1em;
  102. text-align: center;
  103. line-height: 25px;
  104. color: #000;
  105. margin-bottom: 40px;
  106. }
  107. .need-help-text span{
  108. display: block;
  109. font-weight: bold;
  110. }
  111. .ks-team-menber .lucero-img{
  112. background-image: url("https://ks-emails.s3-sa-east-1.amazonaws.com/promo/lucero.png");
  113. background-size: 60px;
  114. background-repeat: no-repeat;
  115. height: 60px;
  116. background-position: right;
  117. width: 45%;
  118. display: inline-block;
  119. }
  120. .lucero-description{
  121. width: 51%;
  122. float: right;
  123. line-height: 23px;
  124. font-size: 16px;
  125. color: #000;
  126. }
  127. .lucero-description p{
  128. margin: 0;
  129. margin-top: 9px;
  130. color: #000;
  131. }
  132. .lucero-description p span{
  133. display: block;
  134. font-weight: bold;
  135. }
  136. hr{
  137. margin-bottom: 40px;
  138. margin-top: 40px;
  139. }
  140. .follow-us-text{
  141. text-align: center;
  142. font-size: 1em;
  143. color: #000;
  144. opacity: 0.6;
  145. }
  146. .get-ks-text{
  147. text-align: center;
  148. color: #000;
  149. opacity: 0.6;
  150. margin-bottom: 30px;
  151. line-height: 23px;
  152. }
  153. .get-ks-text span{
  154. font-weight: bold;
  155. }
  156. .unsubscribe-text{
  157. text-align: center;
  158. width: 80%;
  159. margin: auto;
  160. margin-bottom: 30px;
  161. color: #000;
  162. opacity: 0.6;
  163. line-height: 23px;
  164. }
  165. .unsubscribe-text a{
  166. text-decoration: underline;
  167. font-weight: bold;
  168. color: #000;
  169. }
  170. .terms-and-conditions-text{
  171. text-align: center;
  172. color: #000;
  173. opacity: 0.6;
  174. line-height: 23px;
  175. }
  176. .terms-and-conditions-text a{
  177. text-decoration: underline;
  178. color: #000;
  179. }
  180. .copyright{
  181. text-align: center;
  182. margin-top: 30px;
  183. font-size: 0.8em;
  184. color: #000;
  185. opacity: 0.6;
  186. }
  187. .social-container{
  188. list-style: none;
  189. text-align: center;
  190. margin-top: 20px;
  191. margin-bottom: 20px;
  192. padding-left: 0;
  193. }
  194. .social-container li{
  195. display: inline-block;
  196. list-style: none;
  197. }
  198. .social-container li a{
  199. display: block;
  200. }
  201. .social-image{
  202. width: 30px;
  203. }
  204. .social-margin{
  205. margin-right: 10px;
  206. }
  207. .recomended-container{
  208. width: 80%;
  209. margin: auto;
  210. }
  211. .recomended-container img{
  212. width: 100%;
  213. }
  214. .phone-animations-container .col-1{
  215. width: 50%;
  216. display: inline-block;
  217. vertical-align: middle;
  218. }
  219. .phone-animations-container .col-2{
  220. width: 47%;
  221. display: inline-block;
  222. vertical-align: middle;
  223. }
  224. .canal-text{
  225. font-size: 1em;
  226. line-height: 23px;
  227. color: #000;
  228. }
  229. .canal-text span{
  230. font-weight: bold;
  231. }
  232. a.button{
  233. text-align: center;
  234. width: 270px;
  235. border-radius: 30px;
  236. border: none;
  237. margin: auto;
  238. display: block;
  239. font-size: 1em;
  240. background: #00C4CB;
  241. color: #fff;
  242. font-weight: bold;
  243. padding-top: 15px;
  244. padding-bottom: 15px;
  245. text-decoration: none;
  246. }
  247. @media (min-width: 700px) and (max-width: 799px) {
  248. .white-box{
  249. padding: 50px 40px;
  250. }
  251. }
  252. @media (min-width: 600px) and (max-width: 699px) {
  253. .white-box{
  254. padding: 50px 40px;
  255. }
  256. .list-text{
  257. width: 87%;
  258. }
  259. .mail-title{
  260. font-size: 2em;
  261. }
  262. .star{
  263. width: 82%;
  264. }
  265. .phone-animations-container .col-1{
  266. width: 50%;
  267. display: block;
  268. margin: auto;
  269. }
  270. .phone-animations-container .col-2{
  271. width: 60%;
  272. display: block;
  273. margin: auto;
  274. }
  275. .canal-text{
  276. text-align: center;
  277. }
  278. }
  279. @media (min-width: 500px) and (max-width: 599px) {
  280. .white-box{
  281. padding: 50px 40px;
  282. }
  283. .mail-title{
  284. font-size: 1.5em;
  285. }
  286. .list-text{
  287. width: 82%;
  288. }
  289. .star{
  290. width: 100%;
  291. }
  292. .recomended-container{
  293. width: 100%;
  294. }
  295. .phone-animations-container .col-1{
  296. width: 80%;
  297. display: block;
  298. margin: auto;
  299. }
  300. .phone-animations-container .col-2{
  301. width: 100%;
  302. display: block;
  303. margin: auto;
  304. }
  305. .canal-text{
  306. text-align: center;
  307. }
  308. }
  309. @media (max-width: 499px) {
  310. table, body{
  311. padding: 25px;
  312. }
  313. a.button{
  314. width: 240px;
  315. }
  316. .white-box{
  317. padding: 50px 40px;
  318. }
  319. .mail-title{
  320. font-size: 1.2em;
  321. }
  322. .list-container{
  323. padding-left: 0;
  324. }
  325. .list-text{
  326. width: 82%;
  327. }
  328. .star{
  329. width: 100%;
  330. }
  331. .unsubscribe-text{
  332. width: 100%;
  333. }
  334. .sing-experience-text{
  335. font-size: 0.9em;
  336. }
  337. .recomended-container{
  338. width: 100%;
  339. }
  340. .phone-animations-container .col-1{
  341. width: 100%;
  342. display: block;
  343. margin: auto;
  344. }
  345. .phone-animations-container .col-2{
  346. width: 100%;
  347. display: block;
  348. margin: auto;
  349. }
  350. .canal-text{
  351. text-align: center;
  352. }
  353. .ks-team-menber .lucero-img{
  354. width: 35%;
  355. }
  356. .lucero-description{
  357. width: 59%;
  358. }
  359. }
  360.  
  361. @media (min-width: 420px) and (max-width: 450px){
  362. .ks-team-menber .lucero-img{
  363. width: 36%;
  364. }
  365. .lucero-description{
  366. width: 58%;
  367. }
  368. }
  369. </style>
  370. </head>
  371. <body>
  372.  
  373. <table width=100% bgColor=#f3f3f3>
  374. <div class="logo"></div>
  375.  
  376. <div class="white-box">
  377. <h1 class="mail-title"><span class="name-color">Andrea,</span> ya eres parte de la comunidad más divertida de canto.</h1>
  378. <div class="phone-animations-container">
  379. <div class="col-1">
  380. <img style="width: 100%;" src="comunidad.gif">
  381. </div>
  382. <div class="col-2">
  383. <p class="canal-text">Canta ahora y aparece en nuestro canal de destacados <span>en el mundo.</span></p>
  384. </div>
  385. </div>
  386. <h2 class="sing-experience-text">Descubre lo que tenemos para ti</h2>
  387. <div class="recomended-container">
  388. <img src="recomendados.jpg">
  389. </div>
  390. <h2 class="sing-experience-text">¡Vive una nueva experiencia de canto!</h2>
  391. <a class="button" href="#">Cantar Ahora</a>
  392. </div>
  393.  
  394. <p class="need-help-text">Si necesitas ayuda escríbenos al Whatsapp: <span>+51 941 410 822</span></p>
  395. <div class="ks-team-menber">
  396. <div class="lucero-img"></div>
  397. <div class="lucero-description">
  398. <p>Lucero de <span>Karaoke Smart</span></p>
  399. </div>
  400. </div>
  401. <hr>
  402. <div class="footert-section">
  403. <h3 class="follow-us-text">Síguenos:</h3>
  404. <ul class="social-container">
  405. <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>
  406. <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>
  407. <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>
  408. </ul>
  409. <p class="get-ks-text">Obtén Karaoke Smart para: <span>IPhone</span> | <span>Android</span> | <span>Smart TV</span></p>
  410. <p class="unsubscribe-text">Recibes este correo porque te suscribiste a nuestra base de datos, puedes dejar de recibir nuestros correos <a target="_blank" href="https://karaokesmart.co">aquí.</a></p>
  411. <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>
  412. <p class="copyright">©2019 Karaoke Smart LLC., Delaware, USA</p>
  413. </div>
  414.  
  415. </table>
  416. </body>
  417. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!