Nokia lumia 620 - code-chunk.com

HTML

* {
		margin: 0;
		padding: 0;
		-webkit-font-smoothing: antialiased;
		font-weight: 200;
		line-height: 1em;
		color:#bbb;
		font-family: segoe ui, helvetica neue, helvetica, arial, sans-serif;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	body{
  		background-color:#919798;
	}
	.lumia_620{
		margin: 5% auto;
		width: 300px;
		height: 525px;
		background-color: #333;
		border-radius: 40px;
		box-shadow: 0px 0px 0px 1px #3C3C3C,0px 0px 0px 3px #000,0px 0px 0px 8px #1ba1e2,0px 0px 0px 11px #3B3D55;
		overflow:hidden;
	}
	.tiles_container{
		width: 100%;
		height: 410px;
		margin: 0px auto;
		overflow: auto;
		border-left: 10px solid #000;
		border-right: 10px solid #000;
	}
	div[class^="tile-"]{
		text-align: center;
		float: left;
	}
	div[class^="tile-"] i{
		margin-top: 10px;
		color: #fff;
		display: block;
	}
	div[class^="tile-"] span{
		display: block;
		float: left;
		color: #fff;
		margin-left: 5px;
		margin-top: 15px;
		font-size: 12px;
	}
	.tile-1{
		margin-top: 20px;
	}
	.tile-1,.tile-12,.tile-21{
		width: 100%;
		height: 105px;
		background-color: #1ba1e2;
		overflow: hidden;
	}
	.tile-2,.tile-7,.tile-13,.tile-14,.tile-19,.tile-20{
		margin-top: 5px;
		margin-right: 5px;
		width: 122px;
		height: 105px;
		background-color: #1ba1e2;
	}
	.tile-3,.tile-8{
		margin-top: 5px;
		margin-right: 5px;
		width: 59px;
		height: 50px;
		background-color: #1ba1e2;
	}
	.tile-4,.tile-9{
		margin-top: 5px;
		width: 59px;
		height: 50px;
	}
	.tile-9{
		background-color: #069;
	}
	.tile-4,.tile-12{
		background-color: #4c66a4;
	}
	.tile-5,.tile-10{
		margin-top: 5px;
		margin-right: 5px;
		width: 59px;
		height: 50px;
		background-color: #1ba1e2;
	}
	.tile-6,.tile-11{
		margin-top: 5px;
		width: 59px;
		height: 50px;
		background-color: #1ba1e2;
	}
	.tile-6{
		background-color: orangered;
	}
	.tile-12{
		margin-top: 5px;
	}
	.tile-13{
		background-color: #028801;
		background-image: url("http://i.imgur.com/iCXQb2v.jpg?1");
		background-repeat: no-repeat;
		background-size: 50%;
		background-position: center;
	}
	.tile-14{
		margin-right: 0px;
		background-color: #107c0f;
		background-image: url("http://i.imgur.com/0mxUnQZ.jpg?1");
		background-repeat: no-repeat;
		background-size: 38%;
		background-position: center;
	}
	.tile-15,.tile-16,.tile-17,.tile-18{
		margin-top: 5px;
		margin-right: 5px;
		width: 59px;
		height: 50px;
		background-color: #1ba1e2;
	}
	.tile-16{
		background-image: url('http://static.here.sc/maps/44923/modules/download/img/icons/icon-wp-nokia-city-lens.png');
		background-repeat: no-repeat;
		background-position: 0px;
	}
	.tile-17{
		background-image: url('http://static.here.sc/maps/44923/modules/download/img/icons/icon-wp-nokia-drive.png');
		background-repeat: no-repeat;
		background-position: 0px;
	}
	.tile-18{
		background-image: url('http://static.here.sc/maps/44923/modules/download/img/icons/icon-wp-nokia-maps.png');
		background-repeat: no-repeat;
		background-position: 0px;
	}
	.tile-15{
		width: 58px;
		background-color: #38aae1;
	}
	.tile-18{
		width: 58px;
		margin-right: 0px;
	}
	.tile-20{
		margin-right: 0px;
	}
	.tile-21{
		background-color: #76A70A;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	.tile-22{
		width: 100%;
		margin-bottom: 20px;
	}
	.tile-22 i{
		float: right;
		color: #fff;
		font-size: 1.5em;
		font-weight: 100;
	}
	::-webkit-scrollbar { 
    	display: none; 
	}
	.tiles_container { -ms-overflow-style: none; }
	.tiles_container { overflow: -moz-scrollbars-none; }
	.phone_header{
		width: 100%;
		height: 45px;
		background-color: #000;
		line-height: 38px;
	}
	.phone_footer{
		width: 100%;
		height: 70px;
		background-color: #000;
		line-height: 70px;
	}
	.container{
		width: 250px;
		height: 100%;
		margin: 0px auto;
	}
	.phone_footer i:nth-child(1){
		margin-left:28px;
	}
	.phone_footer i:nth-child(2){
		margin-left:100px;
	}
	.phone_footer i:nth-child(3){
		margin-left: 94px;
		-webkit-transform: rotate(90deg);
	}
	.front-cam{
		width: 16px;
		height: 16px;
		background-color: #fff;
		border-radius: 10px;
		display: inline-block;
		margin-left: 28px;
		box-shadow: inset 0px 0px 0px 1px #333,inset 0px 0px 0px 4px #394F63,inset 0px 0px 0px 7px #293947;
	}
	.front-speaker{
		display: inline-block;
		width: 60px;
		height: 8px;
		background-color: #222;
		border-radius: 5px;
		margin-left:66px;
	}
	.brand-name{
		background: url("http://r.nokia.com/r/26/images/layout/nokia_logo_tiny.png") no-repeat;
		background-size: 100% 50%;
		background-position: center;
		height: 21px;
		width: 55px;
		display: inline-block;
		margin-left: 47px;
	}
	img {
		width: 110px;
		margin-left: -42px;
	}
	.win-icon{
		width: 25px !important;
		margin-left: 90px !important;
		position: relative;
		top: 7px;
	}
	#txt{
		font-size: 0.6em;
		font-weight: bold;
		position: relative;
		top: -9px;
		left: 190px;
	}
	.main-img{
		width:250px;
		margin-left:0px;
		/* Chrome, Safari, Opera */
		-webkit-animation-name: myfirst;
		-webkit-animation-duration: 30s;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-direction: alternate;
		-webkit-animation-play-state: running;
		/* Standard syntax */
		animation-name: myfirst;
		animation-duration: 30s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-play-state: running;
	}
	@-webkit-keyframes myfirst
	{
		0%{
			-webkit-transform: translateY(0px);
		}
		10%{
			-webkit-transform: translateY(-28px);
		}
		20%{
			-webkit-transform: translateY(-28px);
		}
		30%{
			-webkit-transform: translateY(-68px);
		}
		40%{
			-webkit-transform: translateY(-88px);
		}
		50%{
			-webkit-transform: translateY(-108px);
		}
		60%{
			-webkit-transform: translateY(-128px);
		}
		70%{
			-webkit-transform: translateY(-148px);
		}
		80%{
			-webkit-transform: translateY(-168px);
		}
		90%{
			-webkit-transform: translateY(-188px);
		}
		100%{
			-webkit-transform: translateY(-208px);
		}
	}

CSS

Loading....

Preview