clarity

[nobr]
[class=container]
        width: 560px;
        position: relative;
        margin: auto;
        cursor: url(http://www.rw-designer.com/cursor-view/57581.png), auto !important;
[/class]

[class=cover]
        background: url(https://i.imgur.com/kA6k1J1.png) no-repeat;
        border-left: 10px dashed #790808;
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
[/class]

[class=background]
        position: relative;
        background-color: #f5f5ef;
        margin: auto;
        color: black;
[/class]
[class=banner]
        width: 100%;
        height: 100px;
        padding: 0px;
        background-color: #790808;
[/class]
[class=banner_text]
        position: relative;
        padding: 30px;
        font-size: 20px;
        text-transform: uppercase;
        font-style: italic;
        color: white;
        top: -5px;
        text-align: right;
[/class]
[class=bannertext_two]
        position: relative;
        padding: 30px;
        font-size: 17px;
        font-style: normal;
        text-transform: normal;
        color: white;
        margin-top: -30px;
        text-align: center;
        margin-left: 155px;
[/class]
[class=divider]
        position: absolute;
        width: 57%;
        line-height: 0;
        height: 1px;
        background-color: black;
        left: 202px;
[/class]

[class=textcontainer]
        position: relative;
        height: 375px;
        padding: 10px;
        white-space: pre-wrap;
        border-bottom: 1px solid #BABCBE;
        border-right: 1px solid #BABCBE;
        border-left: 1px solid #BABCBE;
[/class]
[class=textinformation]
        font-size: 11px;
        line-height: 15px;
[/class]
[class=initial_letter]
        display: inline-block;
        font-size: 2.5em;
        line-height: 1em;
        letter-spacing: 5px;
        float: left;
        font-weight: bold;
[/class]

[class=icon_border]
        display: inline-block;
        border: solid 1px #BABCBE;
        background-color:  #F2F2F2;
        line-height: 0;
        padding: 12px;
        margin: auto;
        margin-top: -90px;
        margin-left: 15px;
        height: 100px;
        width: 100px;
[/class]
[class=icon_one]
        background: url('https://i.imgur.com/wXo02qV.png');
        background-size: 100%;
        border: solid 1px #FBFBFB;
        height: 100px;
        width: 100px;
[/class]
[class name=icon_one state=hover]
        background: url('https://i.pinimg.com/564x/26/26/48/262648646a6410d8f1d0ddd28c4e8c2f.jpg') no-repeat;
        background-size: cover;
        width: 100%;
        height: 100%;
[/class]
[class=tag]
        position: relative;
        margin-left: 150px;
        line-height: 16px;
        margin-top: -50px;
        font-size: 13px;
        color: black;
        padding: 0;
[/class]

[script class=background on=click]
        slideDown 800 cover
[/script]
[script class=cover on=click]
        slideUp 800
[/script]

[div class=container][div class=background]
[div class=banner][div class=banner_text][font=Abel]❛ quote here ❜[/font]
[div class=divider][/div]
[br][/br]
[div class=bannertext_two][font=Abel]name | title | role here[/font][/div][/div][/div]
[div class=textcontainer][div class=icon_border][div class=icon_one][/div][/div][div class=tag][font=Abel][u]location:[/u]  | [u]with:[/u]  | [u]tags:[/u] [/font][/div]
[div=margin-top: 5px;][/div][div=width: calc(100% - 0%); height: 337px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll;][font=Muli][div class=initial_letter][font=Arapey]L[/font][/div][div class=textinformation]orem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis augue lacinia, cursus enim ac, congue nisi. Sed sagittis nulla nec dignissim varius. Donec in dolor pellentesque, imperdiet augue ac, lobortis nibh. Maecenas eu ex mauris. Pellentesque in imperdiet sem. Praesent dapibus iaculis orci eu convallis. Sed ultrices ipsum id hendrerit dignissim. Fusce euismod magna nec ex facilisis consectetur id eget purus. Vivamus egestas urna id sapien feugiat aliquet. Integer vitae sapien turpis. Duis scelerisque ultrices justo ac fermentum.

Proin malesuada eleifend ante, ac suscipit nisi vehicula in. Nulla convallis facilisis justo nec sagittis. Donec gravida fermentum accumsan. Nulla luctus nulla quis enim lobortis tincidunt. Nulla tincidunt metus nec sem sollicitudin molestie. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque sem tellus, ultrices sit amet sem volutpat, condimentum laoreet eros. Etiam quis condimentum erat. Nulla sed enim pharetra ex suscipit ullamcorper. Donec nec luctus lacus, ac dictum dolor. Sed nec eros ac leo sollicitudin dignissim. Donec turpis libero, eleifend nec pellentesque eget, rutrum eget nunc. Phasellus finibus, mauris quis aliquet pharetra, purus metus ullamcorper tortor, eget consequat sapien leo sit amet enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Proin lorem arcu, viverra vitae leo nec, accumsan bibendum mi. Vivamus id commodo nulla. Sed eu dolor sapien. Ut eu tellus malesuada, scelerisque augue et, condimentum risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur viverra, nunc sed convallis posuere, nisl velit porta odio, a elementum sem magna id quam. Nullam blandit ultricies velit ut rhoncus.

Nullam suscipit id nisl non commodo. Ut et pellentesque nisi, ac tincidunt mi. Maecenas aliquam tellus sed libero lacinia dictum. Nullam eget ex quam. Suspendisse tellus mauris, condimentum vitae tortor quis, pretium rhoncus purus. Phasellus purus nisi, sodales vitae eros eu, finibus posuere diam. Sed viverra turpis ligula, vel varius lacus lobortis lobortis. Suspendisse potenti. Quisque maximus quam id consequat imperdiet. Quisque suscipit purus ac diam elementum gravida ultrices eget tortor.

Etiam tempus, nisi ut fermentum ultricies, justo ex consequat lorem, sed pharetra neque nunc vel metus. Vestibulum et ultrices enim, vel pharetra nisl. Quisque molestie odio eu sapien luctus, vel facilisis velit aliquam. Pellentesque ac dapibus dui, non molestie ligula. Vestibulum lacinia varius felis ut pretium. Proin sit amet ex vitae enim varius faucibus. Sed volutpat odio tincidunt molestie feugiat. Proin eget venenatis dolor. Donec justo lorem, viverra non tristique vitae, euismod a eros.
[/div][/font][/div][/div][/div][/div]
[div class=cover][/div][/div][/nobr][center][size=2]codedbycrucially[/size][/center]