Nem túl nehéz megfejteni, ha nyitsz egy fejlesztőpanelt (F12, Ctrl+Shift+I - szoktad használni? érdemes...).
body {
height: 800px;
background-color: #8156a3;
}
ez adja a lilás háttérszínt.
ez jön a body alatt közvetlenül:
<div class="mainPageBG"></div>
div.mainPageBG {
background-color: white;
position: absolute;
z-index: -99999;
width: 100%;
height: 627px;
top: 0;
left: 0;
}
aztán még logocontainer, navbar, majd container-fluid, azonbelül mainContent, majd nem sokkal később beljebb menve jön a carousel-inner, ami tartalmazza a carousel lapozható elemeit; még beljebb egy carouselItemTable divben van egy táblázat, ami tartalmazza a szöveget, képet:
<table cellpadding="0" cellspacing="0" border="0" class="carouselItemTable">
<tbody>
<tr>
<td class="carouselItemDesc"> <a href="./products/mac/" class="carouselItemTitle">Viber for Mac</a>
<div class="carouselItemText">Viber for Mac lets you send free messages as well as make free calls to other Viber users, on any device and network, in any country!
<div style="padding-top:8px;"><a href="./products/mac/">Read more...</a>
</div>
</div>
<a class="btn mac" href="http://download.viber.com/desktop/mac/Viber.dmg" onclick="javascript:location=this.href;pageTracker._trackPageview('/download'+pageGA);addStatEvent('2', referral);return false;">
<div class="getDevice">Get Viber
<div class="note">OS 10.7 & up</div>
</div>
</a>
</td>
<td class="carouselItemImage">
<div>
<img alt="" src="./images/screenMacV2.png">
</div>
</td>
</tr>
</tbody>
</table>
a lényeg a kérdésedben a kép:
http://www.viber.com/images/screenMacV2.png
szóval egyszerűen csak fölé van téve.
Tehát a lényeg: lila háttéren fehér háttér, majd egy abból kicsit kilógó táblázat képpel, kb. ennyi.
Sk8erPeter