1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5.         <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
  6.         <meta name="keywords" content="" />
  7.         <meta name="description" content="" />
  8.                
  9.         <title>Milan</title>
  10.  
  11.         <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
  12.        
  13. </head>
  14. <body>
  15.  
  16. <div id="site">
  17.        
  18.         <div id="header">
  19.        
  20.                 <h1><a href="#">Milan - let's meet</a></h1>
  21.                
  22.                 <div id="profile_header">
  23.                        
  24.                         <div id="profile_photo"><img src="images/header_photo.png" alt="Suman Mishra" /></div>
  25.                        
  26.                         <div id="profile_navigation">
  27.                        
  28.                                 <div id="name">
  29.                                         <div id="name_inner">
  30.                                                 <span class="name">Sample</span><span class="surname">Name</span>
  31.                                                 <span id="stars">
  32.                                                         <img src="images/star.gif" alt="" /><img
  33.                                                                  src="images/star.gif" alt="" /><img
  34.                                                                  src="images/star.gif" alt="" /><img
  35.                                                                  src="images/star_not.gif" alt="" /><img
  36.                                                                  src="images/star_not.gif" alt="" />
  37.                                                 </span>
  38.                                         </div>
  39.                                 </div>
  40.                                                        
  41.                                 <ul>
  42.                                         <li><a id="ha_profile" href="#">Profile</a></li>
  43.                                         <li><a id="ha_friends" href="#">Friends</a></li>
  44.                                         <li><a id="ha_networks" href="#">Networks</a></li>
  45.                                         <li><a id="ha_mail" href="#">Mail</a></li>
  46.                                 </ul>
  47.                                
  48.                         </div>
  49.                        
  50.                         <div id="profile_details">
  51.                                 <table cellspacing="0">
  52.                                         <tr><th>Birthday</th><td>12 Jan 82</td></tr>
  53.                                         <tr><th>Groups</th><td>Cricket, Internet, Design</td></tr>
  54.                                         <tr><th>Location</th><td>Manchester, UK</td></tr>
  55.                                         <tr><th>Contact</th><td>gmail@gmail.com</td></tr>
  56.                                         <tr><th>Messages</th><td>201</td></tr>
  57.                                         <tr><th>Networks</th><td>None</td></tr>
  58.                                         <tr><th>Status</th><td>Single &amp; Peeking</td></tr>
  59.                                 </table>
  60.                         </div>
  61.                        
  62.                 </div>
  63.        
  64.         </div>
  65.        
  66.         <div id="contents">
  67.        
  68.                 <div id="big_profile_photo" style="background: transparent url('images/hp_photo.jpg') no-repeat 35px 20px;">
  69.                         <div id="big_profile_photo_overlay"><a href="#">Change home page photo</a></div>
  70.                 </div>
  71.                
  72.                 <ul id="big_profile_menu">
  73.                         <li><a href="#" id="a_debate">Debate</a></li>
  74.                         <li><a href="#" id="a_scraps">Scraps</a></li>
  75.                         <li><a href="#" id="a_bookmark">Bookmark</a></li>
  76.                         <li><a href="#" id="a_block">Block</a></li>
  77.                         <li><a href="#" id="a_images">Images</a></li>
  78.                         <li><a href="#" id="a_show_love">Show love</a></li>
  79.                 </ul>
  80.                
  81.                 <div id="search">
  82.                
  83.                         <a href="#">Add more applications</a>
  84.        
  85.                         <form method="get" action="#">         
  86.                                 <p>
  87.                                         <input type="text" name="q" id="form_q" value="Enter text" />
  88.                                         <input type="checkbox" name="f" id="form_f" /> <label for="form_f">Friends</label>
  89.                                         <input type="checkbox" name="p" id="form_p" /> <label for="form_p">Pictures</label>
  90.                                         <input type="checkbox" name="o" id="form_o" /> <label for="form_o">Online</label>
  91.                                         <button type="submit">Search</button>
  92.                                 </p>
  93.                         </form>
  94.                        
  95.                 </div>
  96.                
  97.                 <div class="scrollbox" id="scrollbox_new_messages">
  98.                         <div class="scrollbox_header">
  99.                                 <h3>New Messages</h3>
  100.                                 <a href="#">Show all</a>
  101.                         </div>
  102.                         <p class="scrollbox_inner_menu">
  103.                                 <span class="menu">
  104.                                         New (8)
  105.                                 </span>
  106.                                 <span class="see_all">
  107.                                         <a href="#">See all</a>
  108.                                 </span>
  109.                         </p>
  110.                         <div class="scrollbox_inner">
  111.                                 <div class="messages">
  112.                                         <p class="sender">Sample User</p>
  113.                                         <a href="#">Reply</a>
  114.                                         <p class="message">This is not a test...</p>
  115.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  116.                                 </div>
  117.                                 <div class="messages">
  118.                                         <p class="sender">Sample User</p>
  119.                                         <a href="#">Reply</a>
  120.                                         <p class="message">This is not a test...</p>
  121.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  122.                                 </div>
  123.                                 <div class="messages">
  124.                                         <p class="sender">Sample User</p>
  125.                                         <a href="#">Reply</a>
  126.                                         <p class="message">This is not a test...</p>
  127.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  128.                                 </div>
  129.                                 <div class="messages">
  130.                                         <p class="sender">Sample User</p>
  131.                                         <a href="#">Reply</a>
  132.                                         <p class="message">This is not a test...</p>
  133.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  134.                                 </div>
  135.                                 <div class="messages">
  136.                                         <p class="sender">Sample User</p>
  137.                                         <a href="#">Reply</a>
  138.                                         <p class="message">This is not a test...</p>
  139.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  140.                                 </div>
  141.                                 <div class="messages">
  142.                                         <p class="sender">Sample User</p>
  143.                                         <a href="#">Reply</a>
  144.                                         <p class="message">This is not a test...</p>
  145.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  146.                                 </div>
  147.                         </div>
  148.                 </div>
  149.                 <div class="scrollbox" id="scrollbox_new_friends">
  150.                         <div class="scrollbox_header">
  151.                                 <h3>New Friends</h3>
  152.                                 <a href="#">Show all</a>
  153.                         </div>
  154.                         <p class="scrollbox_inner_menu">
  155.                                 <span class="menu">
  156.                                         New (8)
  157.                                 </span>
  158.                                 <span class="see_all">
  159.                                         <a href="#">See all</a>
  160.                                 </span>
  161.                         </p>
  162.                         <div class="scrollbox_inner">
  163.                                 <div class="friends">
  164.                                         <img src="images/sample84x101.jpg" alt="" />
  165.                                         <p class="friend">Sample User</p>
  166.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  167.                                 </div>
  168.                                 <div class="friends">
  169.                                         <img src="images/sample84x101.jpg" alt="" />
  170.                                         <p class="friend">Sample User</p>
  171.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  172.                                 </div>
  173.                                 <div class="friends">
  174.                                         <img src="images/sample84x101.jpg" alt="" />
  175.                                         <p class="friend">Sample User</p>
  176.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  177.                                 </div>
  178.                                 <div class="friends">
  179.                                         <img src="images/sample84x101.jpg" alt="" />
  180.                                         <p class="friend">Sample User</p>
  181.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  182.                                 </div>
  183.                                 <div class="friends">
  184.                                         <img src="images/sample84x101.jpg" alt="" />
  185.                                         <p class="friend">Sample User</p>
  186.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  187.                                 </div>
  188.                                 <div class="friends">
  189.                                         <img src="images/sample84x101.jpg" alt="" />
  190.                                         <p class="friend">Sample User</p>
  191.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  192.                                 </div>
  193.                                 <div class="friends">
  194.                                         <img src="images/sample84x101.jpg" alt="" />
  195.                                         <p class="friend">Sample User</p>
  196.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  197.                                 </div>
  198.                         </div>
  199.                 </div>
  200.                 <div class="scrollbox" id="scrollbox_album">
  201.                         <div class="scrollbox_header">
  202.                                 <h3>Album</h3>
  203.                                 <a href="#">Show all</a>
  204.                         </div>
  205.                         <p class="scrollbox_inner_menu">
  206.                                 <span class="menu">
  207.                                         My Albums (10)
  208.                                 </span>
  209.                                 <span class="inner_menu_links">
  210.                                         <a href="#">Add</a>
  211.                                         <a href="#">Delete</a>
  212.                                         <a href="#">Hide</a>
  213.                                 </span>
  214.                                 <span class="see_all">
  215.                                         <a href="#">See all</a>
  216.                                 </span>
  217.                         </p>
  218.                         <div class="scrollbox_inner">
  219.                                 <div class="books">
  220.                                         <img src="images/sample84x101.jpg" alt="" />
  221.                                         <p class="book">Sample User</p>
  222.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  223.                                 </div>
  224.                                 <div class="books">
  225.                                         <img src="images/sample84x101.jpg" alt="" />
  226.                                         <p class="book">Sample User</p>
  227.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  228.                                 </div>
  229.                                 <div class="books">
  230.                                         <img src="images/sample84x101.jpg" alt="" />
  231.                                         <p class="book">Sample User</p>
  232.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  233.                                 </div>
  234.                                 <div class="books">
  235.                                         <img src="images/sample84x101.jpg" alt="" />
  236.                                         <p class="book">Sample User</p>
  237.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  238.                                 </div>
  239.                                 <div class="books">
  240.                                         <img src="images/sample84x101.jpg" alt="" />
  241.                                         <p class="book">Sample User</p>
  242.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  243.                                 </div>
  244.                                 <div class="books">
  245.                                         <img src="images/sample84x101.jpg" alt="" />
  246.                                         <p class="book">Sample User</p>
  247.                                         <p class="date">Jan 20 2008 2:06 PM</p>
  248.                                 </div>
  249.                         </div>
  250.                 </div>
  251.                 <div class="scrollbox" id="scrollbox_books">
  252.                         <div class="scrollbox_header">
  253.                                 <h3>Books</h3>
  254.                                 <a href="#">Show all</a>
  255.                         </div>
  256.                         <p class="scrollbox_inner_menu">
  257.                                 <span class="menu">
  258.                                         My Books (8)
  259.                                 </span>
  260.                                 <span class="see_all">
  261.                                         <a href="#">See all</a>
  262.                                 </span>
  263.                         </p>
  264.                         <div class="scrollbox_inner">
  265.                                
  266.                         </div>
  267.                 </div>
  268.                 <div class="scrollbox" id="scrollbox_movies">
  269.                         <div class="scrollbox_header">
  270.                                 <h3>Movies</h3>
  271.                                 <a href="#">Show all</a>
  272.                         </div>
  273.                         <p class="scrollbox_inner_menu">
  274.                                 <span class="menu">
  275.                                         My Movies (999)
  276.                                 </span>
  277.                                 <span class="see_all">
  278.                                         <a href="#">See all</a>
  279.                                 </span>
  280.                         </p>
  281.                         <div class="scrollbox_inner">
  282.                                
  283.                         </div>
  284.                 </div>
  285.        
  286.         </div>
  287.        
  288.         <div class="clear"></div>
  289.  
  290. </div>
  291.  
  292. </body>
  293. </html>