Free bio for TEF #1

<div id="around"><img id="prof" src="https://dl.dropboxusercontent.com/s/jh1pnpoyvlsuijy/exampleporf1.png"><div id="top">
this box is "#top"</div>

<h4>title</h4>
<div id="left">
<item>Blaa blaa</item>: text
<item>Blaa blaa</item>: text
<item>Blaa blaa</item>: text

<a class="info">hover here<span> Hover text. Wow.
Such wonder.</a>
This is box is "#left"

- All these divs stretch height-wise, their widths are set with %'s.
- If you want to change radius of #around, you need to change radiuses of #top and #bottom, too. Otherwise the result might look quite strange.
- Styling for hovers are separate from other style-codes
- <h4>this is "h4".</h4>
</div><div id="right">This box is "#right"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in efficitur ligula, et porta erat. Proin vel bibendum ligula. Fusce in dolor condimentum, varius libero sit amet, vestibulum arcu. In sapien dolor, luctus ultricies laoreet sed, finibus vitae eros. Vestibulum vel metus facilisis, laoreet tortor non, dapibus diam. Phasellus egestas neque lobortis, laoreet massa a, mollis nisl. Proin nec ligula et augue eleifend vestibulum. Sed rhoncus orci sed varius porta. Curabitur quis lorem malesuada, elementum mauris vitae, commodo mi. Vivamus ultrices enim eget leo aliquet, id ullamcorper augue sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div><div id="middle">This box is "#middle"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in efficitur ligula, et porta erat. Proin vel bibendum ligula. Fusce in dolor condimentum, varius libero sit amet, vestibulum arcu. In sapien dolor, luctus ultricies laoreet sed, finibus vitae eros. Vestibulum vel metus facilisis, laoreet tortor non, dapibus diam. Phasellus egestas neque lobortis, laoreet massa a, mollis nisl. Proin nec ligula et augue eleifend vestibulum. Sed rhoncus orci sed varius porta. Curabitur quis lorem malesuada, elementum mauris vitae, commodo mi. Vivamus ultrices enim eget leo aliquet, id ullamcorper augue sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div><div id="middle-under">This box is "#middle-under"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in efficitur ligula, et porta erat. Proin vel bibendum ligula. Fusce in dolor condimentum, varius libero sit amet, vestibulum arcu. In sapien dolor, luctus ultricies laoreet sed, finibus vitae eros. Vestibulum vel metus facilisis, laoreet tortor non, dapibus diam. Phasellus egestas neque lobortis, laoreet massa a, mollis nisl. Proin nec ligula et augue eleifend vestibulum. Sed rhoncus orci sed varius porta. Curabitur quis lorem malesuada, elementum mauris vitae, commodo mi. Vivamus ultrices enim eget leo aliquet, id ullamcorper augue sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Vivamus bibendum sem id dolor iaculis, sed tempor leo luctus. Morbi consequat laoreet dignissim. Maecenas sed lorem mattis, vehicula nisl nec, interdum nisi. Vestibulum ac nibh luctus, semper nunc sit amet, tincidunt libero. Phasellus aliquet odio vel purus euismod imperdiet. Aliquam pellentesque pulvinar mi, vitae semper odio. Integer libero justo, lacinia finibus pulvinar vel, convallis non est. Mauris tincidunt et diam ut eleifend. Nullam mattis dictum lobortis.
</div><div id="bottom">This box is "#bottom"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in efficitur ligula, et porta erat. Proin vel bibendum ligula. Fusce in dolor condimentum, varius libero sit amet, vestibulum arcu.
</div></div>

<style>#around {width: 750px; border: 2px solid #000000; margin-left: auto; margin-right: auto;  border-radius: 100px 100px 20px 20px; background: #EFEEED; color: #7D7D7D; font-size: 10px; line-height: 1;} #top {background: #ffffff; height: 200px; border-bottom: 2px solid #4141C9; border-radius: 100px 100px 0px 0px; margin-bottom: 10px;} #left {border: 2px solid #000000; float: left; width: 40%; margin-left: 10px; margin-bottom: 10px; padding: 10px; background: #ffffff;} #right {border: 2px solid #000000;  float: right; width: 50%; margin-right: 10px; margin-bottom: 10px; padding: 10px; background: #ffffff;} #middle {border: 2px solid #000000; clear: both; margin-right: 10px; margin-left: 10px; margin-top: 20px; padding: 10px; background: #ffffff;} #middle-under {border: 2px solid #000000; margin-right: 10px; margin-left: 10px; margin-top: 10px; padding: 10px; background: #ffffff;} #bottom {background: #ffffff; border-top: 2px solid #4141C9; border-radius: 0px 0px 20px 20px; margin-top: 10px; padding-left: 25px; padding-right: 25px; padding-top: 10px; padding-bottom: 10px;} #prof {float: right; height: 300px; padding-right: 50px;} h4 {background: #1CF227; padding-left: 25px; color: #ffffff;} item {font-weight: bold;}</style>

<style> a.info { position:relative; z-index:24; text-decoration: none; color: #F2361C;} a.info:hover { z-index:25; background-color: none; } a.info span { display: none; } a.info:hover span { display:block; position:absolute; top:1.5em; left:-8em; width:200px; color: #EF1CF2; border:1px solid #000000; background-color:#ffffff; text-align: left; padding: 5px; border-radius: 3px; } </style>