Mint Chocolate App

<div class="mint">
<div class="mheader"><i class="fas fa-spa"></i><span>MINT CHOCOLATE</span></div>
<img class="mimg" src="https://i.imgur.com/1ar6buu.png"/>
<div class="mcajas">
<div class="mdatos">
<span><i class="fas fa-fingerprint"></i>MANDY DUMONT</span>
<span><i class="fas fa-id-badge"></i>19 YEARS-OLD</span>
<span><i class="fas fa-globe-europe"></i>PARIS, FRANCE</span>
<span><i class="fas fa-user"></i>@Melvnin</span>
</div>
<div class="minfo"><div class="mheader2"><i class="fas fa-spa"></i><span>MINT CHOCOLATE</span></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque imperdiet posuere lacus eu dapibus. Quisque eu metus elementum, ornare lacus non, accumsan elit. Aliquam et neque cursus, pulvinar lacus nec, cursus neque. In tincidunt pellentesque risus nec tincidunt. Maecenas facilisis malesuada turpis, sit amet tempor urna laoreet sit amet. Praesent vel cursus risus. Quisque ac dui eu quam lobortis maximus ut vel odio. Maecenas dictum augue odio, at tincidunt neque rutrum sit amet. Proin luctus ac mi sed sagittis. Nam sit amet sapien et justo luctus dignissim. Praesent euismod, purus vitae suscipit luctus, arcu lacus consequat massa, a accumsan leo neque vitae est. Nunc ullamcorper nisi et felis euismod, rhoncus placerat odio semper.

Nullam dictum tempor urna, ut scelerisque neque imperdiet eu. Sed sed laoreet diam, a feugiat nibh. Aliquam augue odio, laoreet non suscipit in, lacinia vel tellus. Phasellus ornare mauris a dui vehicula ultricies. Nulla convallis elit ipsum, in iaculis ligula elementum volutpat. Praesent non lacus viverra nunc luctus tristique in nec risus. Duis commodo tristique velit. Sed iaculis ligula et arcu tempus efficitur. Phasellus enim est, faucibus ut mi maximus, tempor placerat lectus. Duis luctus dapibus lacus a volutpat. Duis malesuada velit a auctor molestie. Quisque sed volutpat massa, a efficitur lacus. In tristique nulla nibh, vehicula condimentum ex semper vitae. Vestibulum pretium urna in dui fermentum dictum. Ut magna est, molestie ac faucibus in, ultricies eu sapien. Suspendisse varius felis ac lacinia pellentesque.</p></div>
</div>
</div>
<a href="http://necromancercoding.tumblr.com" class="ncredit"><i class="fas fa-heart"></i></a>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/solid.css" integrity="sha384-r/k8YTFqmlOaqRkZuSiE9trsrDXkh07mRaoGBMoDcmA58OHILZPsk29i2BsFng1B" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/fontawesome.css" integrity="sha384-4aon80D8rXCGx9ayDt85LbyUHeMWd3UiBaWliBlJ53yzm9hqN21A+o1pqoyK04h+" crossorigin="anonymous"/><style>.mint { background: #f5f5f5; border: 1px solid white; outline: 1px solid #97e8a9; margin: 5px auto; width: 450px; } .mheader { background: #97e8a9; color: white; height: 59px; margin: -1px -1px 10px -1px; } .mint>br, .mdatos>br, .mcajas>br { display: none; } .mheader i { background: rgba(255,255,255,0.5); width: 42px; height: 42px; display: inline-block; vertical-align: middle; border-radius: 100%; margin: 10px; color: white; box-sizing: border-box; padding-top: 13px; font-size: 16px; text-align: center; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); } .mheader span { display: inline-block; vertical-align: middle; text-align: center; width: calc((100%) - (62px)); font: 10px calibri; font-weight: bold; letter-spacing: 3px; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } .mimg { width: 200px; height: 500px; border: 5px solid white; margin: 0 10px; } .mcajas { display: inline-block; vertical-align: top; width: 210px; } .mdatos span { height: 30px; display: block; background: #e2e2e2; margin: 0 0 10px; color: #555; text-transform: uppercase; font: 9px calibri; font-weight: bold; line-height: 30px; border-radius: 5px 3px 3px 5px; } .minfo { background: #efefef; margin: 0 auto 10px; height: 350px; } .mheader2{ display:block; height: 30px; display: block; color: #555; background: #dedede; font: 9px calibri; font-weight: bold; line-height: 30px; border-radius: 5px 3px 0 0; text-transform: uppercase; } .mheader2 i{ background: #97e8a9; height: 30px; width: 30px; text-align: center; line-height: 30px; font-size: 12px; color: white; margin-right: 10px; border-radius: 3px 0 0 0; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } .minfo p{ height: 280px; overflow: auto; margin: 20px; padding-right: 3px; text-align: justify; font: 11px calibri; line-height: 12px; color: #333; } .mdatos span i { background: #97e8a9; height: 30px; width: 30px; text-align: center; line-height: 30px; font-size: 12px; color: white; margin-right: 10px; border-radius: 3px 0 0 3px; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); } .minfo p::-webkit-scrollbar { width: 5px; height: 5px; } .minfo p::-webkit-scrollbar-thumb { background: #7bc68c; border: 1px solid #efefef; } .minfo p::-webkit-scrollbar-track { background: #7bc68c; border: 2px solid #efefef; } .minfo p::selection, .mheader span::selection, .mheader2 span::selection, .mdatos span::selection{ background:#97e8a9; color:white; text-shadow:1px 1px 0px rgba(0,0,0,0.2) } a.ncredit{ display:block; width:454px; text-align:center; font-size:8px; margin:5px auto; color:#97e8a9!important; } .mint+br{ display:none; }</style>