Everything Xbox One Profile

by Jason Rose

HTML

<div id="wrapper">
    <div class="table">
        <div class="profilecell" id="div1">
            
            <div class="profiletext">
                <h2 id="fittexth2" >welcome</h2>
                <h1 id="fittexth1" >JimBobUKII</h1>
                </div>
    
    </div>
    </div>
    <div class="table">
        <div class="imagecell" id="div2">
            <div class="profileimage">
                <img src="http://images-eds.xboxlive.com/image?url=z951ykn43p4FqWbbFvR2Ec.8vbDhj8G2Xe7JngaTToBrrCmIEEXHC9UNrdJ6P7KIU5Sj_1hNZHeOVzbgzVj2giHnQh8gRdRs4sTYMryYlSlGCtq2UwdZr40pkuyp5.0O">
            </div>
        </div>
    </div>
</div>

CSS

html, body {
    background-color: #337cbb !important;
    height:100%;
    border: 0;
    margin: 0;
}
.table {
    width: 50%;
    display: table;
    height:100%;
    float:left;
    vertical-align: middle;
}
.imagecell {
    vertical-align: middle;
    height:100%;
    position:absolute;
    background-color: #337cbb !important;
    width:50%;
    overflow: hidden;
    text-align: center;
    display: table-cell;
}
.profilecell {
    background-color: #337cbb !important;
    vertical-align: middle;
    height:100%;
    position:absolute;
    width:50%;
    display: table-cell;
}
.profiletext {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
	width: 100%;
}
		h1 {
			text-align: left;
			color:#fff;
			font-size: 95px;
			padding-left: 50px;
			word-wrap: break-word;
			font-family: 'Raleway', sans-serif;
			font-weight: 300;
		}
		h2 {
			text-align: left;
			color:#fff;
			font-size: 95px;
			padding-left: 50px;
			word-wrap: break-word;
			font-family: 'Raleway', sans-serif;
			font-weight: 100;
			line-height: 0;
		}
#wrapper {
    overflow:hidden;
    height: 100%;
}
.profileimage {
    width: 120%;
    height: 100%;
    position: relative;
}
.profileimage img {
    width: 100%;
    margin-top: -50px;
    margin-left: -50px;
}

JavaScript

$(document).ready(function () {
    $("#div1").animate({
        'left': "50%"
    }, 500);
    $('#div2').css('left', -$('#wrapper').width()).show();
    $('#div2').animate({
        'left': 0
    }, 1000);


fitText(document.getElementById('fittexth1'), 1.2);
fitText(document.getElementById('fittexth2'), 1.2);

})();