Circle in the CSS

by whelkaholism

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<div class="circle">
    <div>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend placerat magna eu porttitor. 
        </div>
    </div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend placerat magna eu porttitor. Pellentesque vel nunc sed est commodo feugiat. Morbi mi velit, sodales id maximus sed, accumsan ac lacus. Fusce ut imperdiet orci, vulputate consequat odio. Praesent varius lectus non eleifend ornare. Suspendisse eget convallis sapien, vitae venenatis sem. Morbi erat augue, hendrerit nec vulputate sit amet, feugiat at leo. Vestibulum quis eros eget nisl sodales venenatis quis id sem. Vestibulum mollis elit a egestas mollis. In dolor orci, congue quis arcu ut, aliquam molestie turpis. Nullam id felis vitae mauris molestie feugiat. Morbi a ante in metus egestas ullamcorper eu et purus. Ut pretium lobortis luctus. Aliquam sit amet felis sed nulla varius tristique at ut ante. Nunc tincidunt nisi vel semper egestas. Curabitur mattis semper felis, a lobortis neque posuere et.

Vestibulum semper, mauris non hendrerit consectetur, diam mauris blandit urna, eget pulvinar enim urna et purus. Nulla scelerisque massa eu massa posuere, id condimentum erat hendrerit. Curabitur quis consequat ligula. Maecenas non neque nulla. Suspendisse ac risus in magna auctor fringilla in ac erat. Duis lorem lacus, vulputate eget justo sit amet, feugiat laoreet lorem. Sed tincidunt tempor mauris. Nullam massa turpis, feugiat...

CSS

.circle {
    position: absolute;
    border-radius: 50%;
    border: 4px solid #000000;
    width: 33%;
    height: 33%;
    background: rgba(255, 255, 255, 0.65)
}

.circle > div {
    position: absolute;
    border-radius: 50%;
    width: 90%;
    height: 90%;
    background: rgba(0, 0, 0, 1);
    left: 5%;
    top: 5%;
}

.circle > div > div {
    color: #ffffff;
    font-family: Verdana;
    font-size: 12px;
    padding: 22%;
    text-align: center;
}

JavaScript

function Model(data, mapping)
{
    var _this = this;
    var _mapping = $.extend({}, {}, mapping);
    
    if(data)
        ko.mapping.fromJS(data, _mapping, _this);
}

var model = new Model();
ko.applyBindings(model);