HTML CSS examples for CSS Widget:Image
Make two column 50% split layout with one big image on the side
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .container {<!-- ww w . ja v a 2 s . c o m--> width:96%; max-width:961px; height:auto; margin:0 auto; position:relative; } .about-top { width:100%; height:auto; position:relative; } .about-top:after { content:""; position:absolute; top:0; left:51%; width:51%; height:100%; background-image:url('http://www.java2s.com/style/demo/Google-Chrome.png'); background-position:center center; background-size:cover; z-index:-2; } .content-left { width:86%; padding:21% 16% 21% 0px; } hr { width:41px; margin:16px auto 16px 0px; } p { font-size:16px; line-height:24px; color:Chartreuse; margin-bottom:11px; letter-spacing:0px; } h1 { font-size:22px; line-height:25px; color:yellow; margin-bottom:5px; text-transform:uppercase; letter-spacing:2px; } h2 { font-size:17px; line-height:22px; color:blue; margin-bottom:7px; letter-spacing:0px; } .section { clear:both; padding:0px; margin:0px; } .col { display:block; float:left; margin:2% 0 2% 2.7%; } .col:first-child { margin-left:0; } .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .span_6_of_12 { width:50.3%; } </style> </head> <body> <div class="about-top"> <div class="container"> <div class="section group"> <div class="col span_6_of_12"> <div class="content-left"> <h1>Who</h1> <h2>What</h2> <hr> <p> <strong>test test.</strong> </p> <p>test. test test test test test</p> <a href="#"> <div class="button"> work with us </div> </a> </div> </div> </div> </div> </div> </body> </html>