Tech Messenger

by Chandana Thota

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="pageone">
  <div data-role="header">
          <a href="#pageone" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a>
      <div style="display:inline-block;padding-left:250px;">
          <div style="display:inline-block">
          <div style="color:red">tech</div> <div    style="color:blue;padding-left:20px">Messenger</div>
          </div>
          <div class="techlogo"></div>    
      </div>
      <a href="#login" data-rel="popup">Login</a>
    </div>
  <div data-role="main" class="ui-content">
<div class="block-container">
<div class="orange-block">
    <div class="block-count">12</div>
    <div class="block-title">
        <a href="#Activities">Activities</a>
    </div>
</div>
<div class="blue-block">
    <div class="block-count">4</div>
    <div class="block-title"> <a href="#Activities">Materials</a></div>
</div>
<div class="green-block">
    <div class="block-count">6</div>
    <div class="block-title"> <a href="#Activities">Friends</a></div>
</div>
 <div class="grey-block">
    <div class="block-count">3</div>
    <div class="block-title"> <a href="#Activities">Messages</a></div>
</div>
<div class="violet-block">
    <div class="block-count">9</div>
    <div class="block-title"> <a href="#Activities">Jobs</a></div>
</div>
<div class="red-block">
    <div class="block-count">18</div>
    <div class="block-title"> <a href="#Activities">Discussions</a></div>
</div>  
</div>
   <div data-role="popup" id="login" class="ui-content" style="min-width:250px;">
        <div>
          <h3>Login</h3>
          <label for="usrnm" class="ui-hidden-accessible">Username:</label>
          <input type="text" name="user" id="usrnm" placeholder="Username">
         ...

CSS

.orange-block,.blue-block,.green-block,.grey-block,.violet-block,.red-block{
    height:150px;
    width:150px;
    display:inline-block;
}
.orange-block{
    background-color:orange;
}
.blue-block{
    background-color:blue;
}
.green-block{
    background-color:green;
}
.red-block{
    background-color:red;
}
.violet-block{
    background-color:violet;
}
.grey-block{
    background-color:grey;
}
.block-container{
    width:320px;
}
.block-count,.block-title{
    font-family:segoe ui light,calibri;
    color:white;
    text-align:center;
    padding-top:40px;
}
.block-title a {
    color:white !important;
    text-decoration:none;
}
.block-count{
    font-size:30px;
}
div.techlogo{
   display:inline-block;
}