API tools faq
paste
carlosluisb24

Untitled

carlosluisb24
Dec 12th, 2019
113
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.61 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 0px;
  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. color: #000;
  44. margin-bottom: 40px;
  45. }
  46. .list-container{
  47. padding-left: 20px;
  48. max-width: 525px;
  49. margin: auto;
  50. }
  51. .list-item {
  52. font-size: 1em;
  53. margin-bottom: 30px;
  54. list-style: none;
  55. color: #000;
  56. }
  57. .checklist-icon{
  58. background-image: url("https://ks-email.s3-sa-east-1.amazonaws.com/mailing_flujo_interactivo/Check.png");
  59. display: inline-block;
  60. height: 30px;
  61. background-repeat: no-repeat;
  62. background-size: contain;
  63. vertical-align: middle;
  64. margin-right: 20px;
  65. width: 6%;
  66. min-width: 20px;
  67. }
  68. .list-text{
  69. display: inline-block;
  70. width: 88%;
  71. vertical-align: middle;
  72. line-height: 23px;
  73. }
  74. .sing-experience-text{
  75. font-size: 1.2em;
  76. text-align: center;
  77. margin-top: 50px;
  78. margin-bottom: 30px;
  79. color: #000;
  80. }
  81. a.button{
  82. text-align: center;
  83. width: 270px;
  84. border-radius: 30px;
  85. border: none;
  86. margin: auto;
  87. display: block;
  88. font-size: 1em;
  89. background: #00C4CB;
  90. color: #fff;
  91. font-weight: bold;
  92. padding-top: 15px;
  93. padding-bottom: 15px;
  94. text-decoration: none;
  95. }
  96. .star{
  97. background-image: url("https://ks-email.s3-sa-east-1.amazonaws.com/mailing_flujo_interactivo/staryou.png");
  98. height: 260px;
  99. background-position: center 15%;
  100. background-repeat: no-repeat;
  101. width: 68%;
  102. margin: auto;
  103. margin-top: 35px;
  104. background-size: 110%;
  105. }
  106. .need-help-text{
  107. font-size: 1em;
  108. text-align: center;
  109. line-height: 25px;
  110. color: #000;
  111. margin-bottom: 40px;
  112. }
  113. .need-help-text span{
  114. display: block;
  115. font-weight: bold;
  116. }
  117. .ks-team-menber .lucero-img{
  118. background-image: url("https://ks-emails.s3-sa-east-1.amazonaws.com/promo/lucero.png");
  119. background-size: 60px;
  120. background-repeat: no-repeat;
  121. height: 60px;
  122. background-position: right;
  123. width: 45%;
  124. display: inline-block;
  125. }
  126. .lucero-description{
  127. width: 51%;
  128. float: right;
  129. line-height: 23px;
  130. font-size: 16px;
  131. color: #000;
  132. }
  133. .lucero-description p{
  134. margin: 0;
  135. margin-top: 9px;
  136. color: #000;
  137. }
  138. .lucero-description p span{
  139. display: block;
  140. font-weight: bold;
  141. }
  142. hr{
  143. margin-bottom: 40px;
  144. margin-top: 40px;
  145. }
  146. .follow-us-text{
  147. text-align: center;
  148. font-size: 1em;
  149. color: #000;
  150. opacity: 0.6;
  151. }
  152. .get-ks-text{
  153. text-align: center;
  154. color: #000;
  155. opacity: 0.6;
  156. margin-bottom: 30px;
  157. line-height: 23px;
  158. }
  159. .get-ks-text span{
  160. font-weight: bold;
  161. }
  162. .unsubscribe-text{
  163. text-align: center;
  164. width: 80%;
  165. margin: auto;
  166. margin-bottom: 30px;
  167. color: #000;
  168. opacity: 0.6;
  169. line-height: 23px;
  170. }
  171. .unsubscribe-text a{
  172. text-decoration: underline;
  173. font-weight: bold;
  174. color: #000;
  175. }
  176. .terms-and-conditions-text{
  177. text-align: center;
  178. color: #000;
  179. opacity: 0.6;
  180. line-height: 23px;
  181. }
  182. .terms-and-conditions-text a{
  183. text-decoration: underline;
  184. color: #000;
  185. }
  186. .copyright{
  187. text-align: center;
  188. margin-top: 30px;
  189. font-size: 0.8em;
  190. color: #000;
  191. opacity: 0.6;
  192. }
  193. .social-container{
  194. list-style: none;
  195. text-align: center;
  196. margin-top: 20px;
  197. margin-bottom: 20px;
  198. padding-left: 0;
  199. }
  200. .social-container li{
  201. display: inline-block;
  202. list-style: none;
  203. }
  204. .social-container li a{
  205. display: block;
  206. }
  207. .social-image{
  208. width: 30px;
  209. }
  210. .social-margin{
  211. margin-right: 10px;
  212. }
  213. .footer-line{
  214. border-width: 0.5px;
  215. }
  216. @media (min-width: 900px) {
  217. .star{
  218. background-size: 79%;
  219. }
  220. .checklist-icon{
  221. margin-top: 6px;
  222. height: 20px;
  223. width: 3%;
  224. }
  225. }
  226. @media (min-width: 700px) and (max-width: 799px) {
  227. .white-box{
  228. padding: 50px 40px 0px;
  229. }
  230. }
  231. @media (min-width: 600px) and (max-width: 699px) {
  232. .white-box{
  233. padding: 50px 40px 0px;
  234. }
  235. .list-text{
  236. width: 87%;
  237. }
  238. .mail-title{
  239. font-size: 2em;
  240. }
  241. .star{
  242. width: 82%;
  243. }
  244. }
  245. @media (min-width: 500px) and (max-width: 599px) {
  246. .white-box{
  247. padding: 50px 40px 0px;
  248. }
  249. .mail-title{
  250. font-size: 1.5em;
  251. }
  252. .list-text{
  253. width: 82%;
  254. }
  255. .star{
  256. width: 100%;
  257. }
  258. }
  259. @media (max-width: 499px) {
  260. body{
  261. padding: 25px;
  262. }
  263. .white-box{
  264. padding: 50px 30px;
  265. }
  266. .mail-title{
  267. font-size: 1.2em;
  268. }
  269. .mail-subtitle{
  270. font-size: 0.9em;
  271. }
  272. .list-container{
  273. padding-left: 0;
  274. }
  275. .list-text{
  276. width: 74%;
  277. font-size: 0.9em;
  278. }
  279. .star{
  280. width: 100%;
  281. }
  282. .unsubscribe-text{
  283. width: 100%;
  284. }
  285. .sing-experience-text{
  286. font-size: 0.9em;
  287. }
  288. a.button{
  289. width: 240px;
  290. }
  291. .ks-team-menber .lucero-img{
  292. width: 35%;
  293. }
  294. .lucero-description{
  295. width: 59%;
  296. }
  297. }
  298.  
  299. @media (min-width: 420px) and (max-width: 450px){
  300. .star{
  301. background-size: 118%;
  302. }
  303. .ks-team-menber .lucero-img{
  304. width: 36%;
  305. }
  306. .lucero-description{
  307. width: 58%;
  308. }
  309. }
  310. @media (min-width: 400px) and (max-width: 419px){
  311. .star{
  312. background-size: 114%;
  313. margin-top: 20px;
  314. height: 200px;
  315. }
  316. }
  317. @media (min-width: 385px) and (max-width: 399px){
  318. .star{
  319. background-size: 121%;
  320. margin-top: 0;
  321. }
  322. }
  323. @media (max-width: 384px){
  324. .star{
  325. background-size: 119%;
  326. margin-top: 20px;
  327. height: 200px;
  328. }
  329. }
  330. </style>
  331. </head>
  332. <body >
  333.  
  334. <table width=100% bgColor=#f3f3f3>
  335. <div class="logo"></div>
  336.  
  337. <div class="white-box">
  338. <h1 class="mail-title"><span class="name-color">Andrea,</span> estás a un paso de divertirte cantando</h1>
  339. <p class="mail-subtitle">Esto es lo que acabas de hacer:</p>
  340. <ul class="list-container">
  341. <li class="list-item"><span class="checklist-icon"></span><span class="list-text">Personalizar el contenido musical según tus preferencias.</span></li>
  342. <li class="list-item"><span class="checklist-icon"></span><span class="list-text">Crear tu cuenta para acceder en cualquier dispositivo.</span></li>
  343. <li class="list-item"><span class="checklist-icon"></span><span class="list-text">Crear tu perfil de usuario en la comunidad de canto.</span></li>
  344. </ul>
  345. <h2 class="sing-experience-text">¡Falta que vivas la experiencia de canto en tu TV!</h2>
  346. <a href="#" class="button">Conectarme a la TV</a>
  347. <div class="star"></div>
  348. </div>
  349.  
  350. <p class="need-help-text">Si necesitas ayuda escríbenos al Whatsapp: <span>+51 941 410 822</span></p>
  351. <div class="ks-team-menber">
  352. <div class="lucero-img"></div>
  353. <div class="lucero-description">
  354. <p>Lucero de <span>Karaoke Smart</span></p>
  355. </div>
  356. </div>
  357. <hr class="footer-line">
  358. <div class="footert-section">
  359. <h3 class="follow-us-text">Síguenos:</h3>
  360. <ul class="social-container">
  361. <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>
  362. <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>
  363. <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>
  364. </ul>
  365. <p class="get-ks-text">Obtén Karaoke Smart para: <span>IPhone</span> | <span>Android</span> | <span>Smart TV</span></p>
  366. <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>
  367. <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>
  368. <p class="copyright">©2019 Karaoke Smart LLC., Delaware, USA</p>
  369. </div>
  370.  
  371. </table>
  372.  
  373.  
  374. </body>
  375. </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!