API tools faq
paste
Advertisement
carlosluisb24

Untitled

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