<!DOCTYPE html>
<html>

<head>
	<link rel='stylesheet' href='style.css'/>
	
	<!-- Add our custom font: Open Sans and the icons -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
	<script src='script.js'></script>
</head>

<!-- ontouchstart makes :active work in mobile Safari -->
<body ontouchstart="">
<main>
<header>
    Click or tap the tiles! Watch them move!
</header>
    
    <!-- Now make the tiles! -->
    <!-- Use the <i> to make the icon and number -->
    <!-- Move the <span>s in CSS so they appear in the bottom left corner -->
    <ul>
        <li class="phone"><i class="fa fa-phone"> 4</i><span>phone</span></li>
        <li class="messages"><i class="fa fa-comments"> 2</i><span>messages</span></li>
        <li class="contacts span2"><i class="fa fa-user"></i><span>contacts</span></li>
        <li class="internet"><i class="fa fa-globe"></i><span>internet</span></li>
        <li class="games span2"><i class="fa fa-gamepad"></i><span>games</span></li>
        <li class="maps"><i class="fa fa-map-marker"></i><span>maps</span></li>
        <li class="search"><i class="fa fa-search"></i><span>search</span></li>
        <li class="email"><i class="fa fa-envelope">&thinsp;58</i><span>email</span></li>
        <li class="photos"><i class="fa fa-instagram"></i><span>photos</span></li>
        <li class="settings"><i class="fa fa-gears"></i><span>settings</span></li>
    </ul>
</main>

</body>
</html>
* {
    /* Reset the default styles. 
    Use border-box because it's easier! */
  padding:0;
  margin:0;
  box-sizing:border-box;
}

body {
  background:#1a2125;
  color:aliceblue;
  font-family:'Open Sans', sans-serif;
  font-weight:300;
  margin:0 auto;
  
  /* Click-and-drag or text-selection doesn't make sense. */
  /* Or long-tap on webkit phones. */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

main {
  /* Use a max-width so that we have 4 columns */
  max-width:680px;
  margin:auto;
  padding:20px;
}

main header {
  text-align:center;
  margin:0 5px 36px 5px;
  font-size:24px;
  border:1px rgb(128, 128, 159) solid;
  padding:8px;
  background:rgba(128, 128, 159, 0.1);
}

ul {
  /* We don't need actual bullets */
  list-style:none;
}

li {
  float:left; /* So that they wrap */
  height:150px;
  width:150px;
  margin:5px; /* The gaps between them */
  
  text-transform:capitalize;
  
  /*transition may need prefixes in some browsers */
  -webkit-transition:.2s -webkit-transform, 1s opacity;
  -moz-transition:   .2s -moz-transform, 1s opacity;
  -o-transition:     .2s -o-transform, 1s opacity;
  transition:        .2s transform, 1s opacity;
  
  /*transform*/
  -webkit-transform:perspective(800px);
  -moz-transform:perspective(800px);
  -ms-transform:perspective(800px);
  -o-transform:perspective(800px);
  transform:perspective(800px);
  
  /*transform-style*/
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-transform-origin-x:50%;
  -webkit-transform-origin-y:50%;
  
  text-align:center;
  cursor:pointer;
}

/* When moused over, rotate it! */
li:active {
  /*transform*/
  -webkit-transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
  -moz-transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
  -ms-transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
  -o-transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
  transform:perspective(800px) rotate3d(1, 0, 0, 17deg);
}

/* It'd be neat to have double-width tiles */
.span2{
  width:310px;
}

/* Icon and number */
li i{
  font-size:60px;
  margin:35px 0 0;
}

/* Text label on tiles */
li span{
  position:absolute;
  bottom:8px;
  left:8px;
}

/* Specialized background colours */
.games{
  background:rgb(0, 192, 0);
}
.phone{
  background:rgb(27, 161, 226);
}
.messages{
  background:rgb(240, 163, 10);
}
.contacts{
  background:rgb(119, 158, 203);
}
.internet{
  background:rgb(0, 80, 239);
}
.maps{
  background:rgb(119, 221, 119);
}
.search{
  background:rgb(130, 111, 214);
}
.settings{
  background:rgb(100, 118, 135);
}
.email{
  background:rgb(255, 105, 97);
}
.photos{
  background:rgb(162, 0, 37);
}
Created from scratch
1395 forks
50051 views

Browse more Codebits