084 | Another point of view

<div id="cala"><div id="baza"><div class="hobaza" style="background: url(https://via.placeholder.com/430x200)"></div>
<div id="sisi"></div><div id="dede"></div></div>
<div class="imba" style="background: url(https://via.placeholder.com/120)"> </div>
<div id="title"><h1> In another way, from</h1> <h2>another point of view</h2></div>
<div class="txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus urna metus, sodales nec fermentum vel, faucibus sit amet diam. Nullam aliquet urna ligula, id scelerisque orci aliquet ac. Praesent sagittis quam sit amet mi ultrices, et dignissim lorem interdum. Fusce lobortis odio id odio rutrum, ac venenatis enim aliquet.

Nullam id neque blandit, pellentesque lectus vitae, fringilla justo. Curabitur odio risus, facilisis eu eleifend ut, feugiat interdum odio. Nulla malesuada, massa sit amet mattis dapibus, velit nisi dignissim purus, bibendum finibus urna felis at risus. Donec ultrices tortor vitae nisl viverra facilisis.
</div><div class="data">
<span>Dato <b>+</b> Dato <b>+</b> Dato</span>
</div></div><div class="crdts"><a href="http://illmakegaycodesforu.tumblr.com/">— gitano;</a></div>

<style>#cala {width: 430px; border: 10px solid #fff; outline: 1px solid #eaeaea; margin: 0 auto; margin-top: 20px; background: #fff;}#cala br {display: none}#cala #baza {height: 200px; background: #4A7F9E; position: relative;}#cala #baza .hobaza {position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); opacity: .15;}#cala .imba {border: 10px solid #fff; width: 120px; height: 120px; border-radius: 100%; position: relative; margin: 0 auto; margin-top: -70px;}#cala .txt br {display: block; margin: 5px;}#baza #sisi {width: 155px; background: #fff; clip-path: polygon(0 0, 0% 100%, 100% 100%); position: absolute; -webkit-transition: all .8s ease;-moz-transition: all .8s ease; left: -1px; bottom: -1px; top: 180px}#baza #dede {width: 155px; background: #fff; clip-path: polygon(100% 0, 0% 100%, 100% 100%); position: absolute; -webkit-transition: all .8s ease;-moz-transition: all .8s ease; right: -1px; bottom: -1px; top: 180px} #cala #title {text-align: center; text-transform: uppercase; letter-spacing: -1px;}#cala #title h1 {font: 15px 'Montserrat', sans-serif; margin: 0px; padding: 0px; display: block; font-weight: 500; transform: skewX(10deg); color: #555}#cala #title h2 {font: 20px 'Montserrat', sans-serif; margin: 0px; padding: 0px; font-weight: 700; transform: skewX(-10deg); margin-top: -5px; color: #4A7F9E}#cala .txt {margin: 40px; text-align: justify; font: 11px verdana; line-height: 120%; margin-top: 30px; color: #555}#cala .data {height: 50px; clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0 100%, 0% 38%); background: #4A7F9E; margin-top: 30px; display: flex; justify-content: center; align-items: center;}#cala .data span {display: block; text-align: center; color: #fff; font: 7px 'Montserrat', sans-serif; text-transform: uppercase; font-weight: 500; margin-top: 5px; letter-spacing: 1px;}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center}#cala .data b {color: #555}</style><link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,900&display=swap" rel="stylesheet">