Say you love me | E-mail parte 2

/*************************************** CLARO *************************************/
<div class="email-bac"><div class="btemailc"><div class="email-izq"><img src="https://placehold.jp/80x80.png" style="border-color:#a6c7df;"/><div><b style="color:#a6c7df;">Margaret S. Foster</b><span style="background:#a6c7df;">New York, United States</span></div></div><div class="email-der"><div class="email-dats"><dato><i class="fa fa-at" style="background:#a6c7df;"></i><span>[email protected]</span></dato><dato><i class="fa fa-birthday-cake" style="background:#a6c7df;"></i><span>10/01/1997, 24 años</span></dato><dato><i class="fa fa-university" style="background:#a6c7df;"></i><span>MIT</span></dato><dato><i class="fa fa-chalkboard" style="background:#a6c7df;"></i><span>programmer</span></dato><frase><i class="fa fa-quote-left"></i><div>Before you came around<br/> I was doing just fine<br/>Usually, usually, usually<br/>I don't pay no mind.</div></frase></div><img src="https://placehold.jp/150x200.png"/></div><div class="email-fo"><e-bot><i class="fa fa-envelope-open" style="background:#a6c7df;"></i><span>Bandeja de entrada</span></e-bot><e-bot><i class="fa fa-archive" style="background:#a6c7df;"></i><span>Mensajes archivados</span></e-bot></div></div></div><a href="https://bettyleg.tumblr.com" class="btcred">BETTYLEG</a>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,900;1,700;1,900&display=swap" rel="stylesheet"><style>.btcred{width:200px; margin:-1px auto 10px; text-align:center; display:block; font-size:8px; color:#999; text-decoration:none; font-weight:600; font-family:arial; letter-spacing:1px;}.email-bac{margin: 10px auto; width: 480px; border: 1px solid #ddd; padding: 20px; border-radius: 10px; background: #f2f5f6;} .btemailc{border:1px solid #ddd; border-radius:10px; overflow:hidden; background:#fafafa;} .email-izq{height:130px; background:#fff; border-bottom:1px solid #ddd; display:flex; align-items:center; justify-content:space-between; padding:0px 30px;} .email-der{display:flex;} .email-izq > div {font-family: 'Lato', sans-serif; text-align:right; line-height:20px;} .email-izq > img{width:80px; height:80px; border-radius:200px; border:5px solid #ddd; padding:5px; display:block;} .email-izq >div > b{display:block; font-style:italic; font-weight:900; font-size:26px; position:relative; z-index:1; margin-bottom:0px; color:#a6c7df;} .email-izq > div >span{font-size:12px; background:#a6c7df; padding:1px 14px 3px; border-radius:4px; color:#fff;}.email-der > img{width:150px; height:200px; border:1px solid #ddd; padding:15px; margin:20px; border-radius:10px; background:#fff;}.email-dats{width:220px; padding:20px;} .email-dats > dato{display:block; border:1px solid #ddd; border-radius:6px; height:25px; display:flex; align-items:center; justify-content:flex-start; font-size:12px; overflow:hidden; margin-bottom:10px; background:#fff;} .email-dats > dato > i{border-right:1px solid #ddd; background:#a6c7df; display:flex; align-items:center; justify-content:center; height:100%; width:30px; border-radius:0px 30px 0px 0px; padding-right:10px; font-size:10px; color:#fff;} .email-dats > dato > span{padding-left:7px; font-size:10px; color:#888;font-family: 'Lato', sans-serif;}.email-dats > frase{display:flex; height:85px; align-items:center; justify-content:center; position:relative;} .email-dats > frase > div{width:140px; max-height:60px; overflow:hidden; position:absolute; margin-left:30px; color:#555; font-size:11px; line-height:12px; text-align:center; font-family: 'Lato', sans-serif;} .email-dats > frase > i{font-size:50px; color:#aaa; opacity:.14; margin-left:-100px; margin-top:-20px; transform:rotate(10deg);} .email-fo > e-bot{display:block; max-width:150px; font-size:12px; border:1px solid #ddd; margin:0px 10px; border-radius:5px; padding:5px;} .email-fo > e-bot > i{width:25px; height:25px; border-radius:5px; color:#fff; background:#ddd; font-size:9px; margin-right:10px;} .email-fo, .email-fo> e-bot,.email-fo > e-bot > i{display:flex; align-items:center; justify-content:center;} .email-fo{height:80px; background:#fff; border-top:1px solid #ddd; justify-content:flex-end; padding:0px 10px;} .email-fo > e-bot >span{padding-right:10px; font-family: 'Lato', sans-serif; font-size:10px; color:#777;}</style>

/*********************************** OSCURO *********************************/

<div class="email-bac" style="background: #404d51;"><div class="btemailc"><div class="email-izq"><img src="https://placehold.jp/80x80.png" style="border-color:#a6c7df;"/><div><b style="color:#a6c7df;">Margaret S. Foster</b><span style="background:#a6c7df;">New York, United States</span></div></div><div class="email-der"><div class="email-dats"><dato><i class="fa fa-at" style="background:#a6c7df;"></i><span>[email protected]</span></dato><dato><i class="fa fa-birthday-cake" style="background:#a6c7df;"></i><span>10/01/1997, 24 años</span></dato><dato><i class="fa fa-university" style="background:#a6c7df;"></i><span>MIT</span></dato><dato><i class="fa fa-chalkboard" style="background:#a6c7df;"></i><span>programmer</span></dato><frase><i class="fa fa-quote-left"></i><div>Before you came around<br/> I was doing just fine<br/>Usually, usually, usually<br/>I don't pay no mind.</div></frase></div><img src="https://placehold.jp/150x200.png"/></div><div class="email-fo"><e-bot><i class="fa fa-envelope-open" style="background:#a6c7df;"></i><span>Bandeja de entrada</span></e-bot><e-bot><i class="fa fa-archive" style="background:#a6c7df;"></i><span>Mensajes archivados</span></e-bot></div></div></div><a href="https://bettyleg.tumblr.com" class="btcred">BETTYLEG</a>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,900;1,700;1,900&display=swap" rel="stylesheet"><style>.btcred{width:200px; margin:-1px auto 10px; text-align:center; display:block; font-size:8px; color:#999; text-decoration:none; font-weight:600; font-family:arial; letter-spacing:1px;}.email-bac{margin: 10px auto; width: 480px; border: 1px solid #777; padding: 20px; border-radius: 10px; background: #404d51} .btemailc{border:1px solid #777; border-radius:10px; overflow:hidden; background:#333;} .email-izq{height:130px; background:#222; border-bottom:1px solid #777; display:flex; align-items:center; justify-content:space-between; padding:0px 30px;} .email-der{display:flex;} .email-izq > div {font-family: 'Lato', sans-serif; text-align:right; line-height:20px;} .email-izq > img{width:80px; height:80px; border-radius:200px; border:5px solid #777; padding:5px; display:block;} .email-izq >div > b{display:block; font-style:italic; font-weight:900; font-size:26px; position:relative; z-index:1; margin-bottom:0px; color:#a6c7df;} .email-izq > div >span{font-size:12px; background:#a6c7df; padding:1px 14px 3px; border-radius:4px; color:#222;}.email-der > img{width:150px; height:200px; border:1px solid #777; padding:15px; margin:20px; border-radius:10px; background:#222;}.email-dats{width:220px; padding:20px;} .email-dats > dato{display:block; border:1px solid #777; border-radius:6px; height:25px; display:flex; align-items:center; justify-content:flex-start; font-size:12px; overflow:hidden; margin-bottom:10px; background:#222;} .email-dats > dato > i{border-right:1px solid #777; background:#a6c7df; display:flex; align-items:center; justify-content:center; height:100%; width:30px; border-radius:0px 30px 0px 0px; padding-right:10px; font-size:10px; color:#333;} .email-dats > dato > span{padding-left:7px; font-size:10px; color:#aaa;font-family: 'Lato', sans-serif;}.email-dats > frase{display:flex; height:85px; align-items:center; justify-content:center; position:relative;} .email-dats > frase > div{width:140px; max-height:60px; overflow:hidden; position:absolute; margin-left:30px; color:#aaa; font-size:11px; line-height:12px; text-align:center; font-family: 'Lato', sans-serif;} .email-dats > frase > i{font-size:50px; color:#aaa; opacity:.14; margin-left:-100px; margin-top:-20px; transform:rotate(10deg);} .email-fo > e-bot{display:block; max-width:150px; font-size:12px; border:1px solid #777; margin:0px 10px; border-radius:5px; padding:5px;} .email-fo > e-bot > i{width:25px; height:25px; border-radius:5px; color:#333; font-size:9px; margin-right:10px;} .email-fo, .email-fo> e-bot,.email-fo > e-bot > i{display:flex; align-items:center; justify-content:center;} .email-fo{height:80px; background:#222; border-top:1px solid #777; justify-content:flex-end; padding:0px 10px;} .email-fo > e-bot >span{padding-right:10px; font-family: 'Lato', sans-serif; font-size:10px; color:#aaa;}</style>