JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='gamecontent'>


<div class='bg01'></div>
<div class='bg02'></div>
<div class='bg03'></div>
<div class='bg04'></div>

<div class='contents'>

<div class='top_buttons'>
bbb
</div>

.... just picking apart some HTML and CSS to see how this site design was put together ....

<div class='intro'>
introoooo
</div>

</div>

</div>

CSS

.gamecontent {position: relative;width: 100%;}

div {margin:0px;}

.bg01, .bg02, .bg03, .bg04 {
    position: absolute;
    width: 100%;
    z-index: 0;
}

.bg01 {background: url("http://kr.blizzard.com/static/_images/games/d3/bg-top.jpg") no-repeat center top;height: 493px;top: 0;}

.bg02 {background: url("http://kr.blizzard.com/static/_images/games/d3/bg-mid01.jpg") no-repeat center top;height: 835px;top: 493px;}

.bg03 {background: url("http://kr.blizzard.com/static/_images/games/d3/bg-mid02.jpg") no-repeat center top;height: 994px;top: 1328px;}

.bg04 {background: url("http://kr.blizzard.com/static/_images/games/d3/bg-mid03.jpg") no-repeat center top;height: 890px;top: 2322px;}

.top-buttons {position: absolute;z-index: 110;left: 119px;top: 133px;border:1px dotted yellow;}

.contents {
    position: absolute; color:white;border:1px dotted white;
    top: 624px;
    left: 50%;
    margin-left: -487px;
    width: 943px;
    z-index: 50;
}

.intro {min-height: 390px;clear: both;position: relative;width: 516px;border:1px dashed blue;}