<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div> <!-- row --> <div> <!-- row --> <!-- main left image --> <div class="col-md-6 nopadding b-padding shop-cats-box image-large"> <div class="hero-image"></div> </div> <!-- end of other main image --> <div class="col-md-6 nopadding b-padding"> <a href="/home-decoration"> <div class="square img_1-1 home-block"> <div class="text">PROIECT REALIZAT</div> </div> </a> <a href="/lighting"> <div class="square img_1-2 home-block"> <div class="text">BAR CATERING</div> </div> </a> <!-- 2nd row verticaly centered images in square columns --> <a href="/furniture"> <div class="square img_2-1 home-block"> <div class="text">MOBILIER LUMINAT</div> </div> </a> <!-- video embed in right-bottom-image in CSS grid --> <a href="/jewellery"> <div class="square img_2-2 home-block"> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/Tdb_vxoUD4w"frameborder="0" allowfullscreen></iframe> </div> </a> </div> </div> </div>

/* Latest compiled and minified CSS included as External Resource*/ div { display: block; } .b-padding { padding-left: 0px ; padding-right: 0px ; } .shop-cats-box { background-image: url(http://drapaje.ro/pub/media/wysiwyg/talazurile/pavilion_zi.jpg); float: left; position: relative; width: 50%; padding-bottom: 32.5%; background-position: center center; background-repeat: no-repeat; background-size: cover; } .square { float: left; position: relative; width: 50%; padding-bottom: 32.5%; background-position: center center; background-repeat: no-repeat; background-size: cover; } .image-large { border: 1px solid #000; } .img_1-1 { background-image: url(http://drapaje.ro/pub/media/wysiwyg/talazurile/proiect.jpg); } .img_1-1, .img_1-2, .img_7-1, .img_7-2 { border-top: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #000; } .img_1-2 { background-image: url(http://drapaje.ro/pub/media/wysiwyg/talazurile/bar.jpg); } .img_2-1 { background-image: url(http://drapaje.ro/pub/media/wysiwyg/talazurile/noaptea.jpg); } .img_2-2 { background-image: url(); } .text { background: rgba(255,255,255,0.5); position: absolute; top: 50%; left: 40%; padding: 1rem; transform: translateY(-50%); text-align: center; font-family: 'Cormorant Garamond', serif; font-style: normal; font-size: 2vmin; color: black; font-weight: 400; } .video-container { float: left; position: relative; width: 50%; height: 0; padding-bottom: 32.5%; } .youtube-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }