API tools faq
paste
Advertisement
duck__boy1981

Sample Facebook App

duck__boy1981
Aug 29th, 2012
744
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.  
  6.     <meta charset="utf-8">
  7.     <title>Design and Code an integrated Facebook App</title>
  8.  
  9.     <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
  10.     <link rel="stylesheet" type="text/css" href="css/style.css">
  11.     <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
  12.     <script src="js/functions.js" type="text/javascript"></script>
  13.  
  14. </head>
  15.  
  16. <body>
  17.  
  18. <div class="wrapper">
  19.    
  20.     <div class="maincontent">
  21.    
  22.         <div class="logo">
  23.             <img src="images/logo.jpg" width="217" height="75" alt="webdesigntuts+ logo">
  24.         </div>
  25.        
  26.         <ul class="tabs">
  27.             <li><a href="#tab1">All</a></li>
  28.             <li><a href="#tab2">About</a></li>
  29.             <li><a href="#tab3">Write For Us</a></li>
  30.             <li><a href="#tab4">Other Blogs</a></li>
  31.         </ul>
  32.        
  33.         <div class="tab_container">
  34.        
  35.             <div id="tab1" class="tab_content">
  36.            
  37.                 <div class="post">
  38.                     <h3><a href="#">Designing For, and As, a Color-Blind Person</a></h3>
  39.                     <span class="postInfo">by <a href="#">Connor Turnbull</a> on Jul 22nd 2011 with 2 comments</span>
  40.                     <p>Color blindness is a mild disability through which the affected experience a decreased ability to distinguish colors from others. This can be a real drawback for anyone in the design field since color theory is an integral feature in successful design, and a lot of decisions are based on the feeling and emotion derived from...</p>
  41.                     <a class="more" href="#">Read More</a>
  42.                     <span class="line"></span>
  43.                     <a href="#">12 Likes 14 Comments Share</a>
  44.                     <span class="line"></span>
  45.                 </div><!--End Blog Post-->
  46.                
  47.                 <div class="post">
  48.                     <h3><a href="#">Designing For, and As, a Color-Blind Person</a></h3>
  49.                     <span class="postInfo">by <a href="#">Connor Turnbull</a> on Jul 22nd 2011 with 2 comments</span>
  50.                     <p>Color blindness is a mild disability through which the affected experience a decreased ability to distinguish colors from others. This can be a real drawback for anyone in the design field since color theory is an integral feature in successful design, and a lot of decisions are based on the feeling and emotion derived from...</p>
  51.                     <a class="more" href="#">Read More</a>
  52.                     <span class="line"></span>
  53.                     <a href="#">12 Likes 14 Comments Share</a>
  54.                     <span class="line"></span>
  55.                 </div><!--End Blog Post-->
  56.                
  57.                 <div class="post">
  58.                     <h3><a href="#">Designing For, and As, a Color-Blind Person</a></h3>
  59.                     <span class="postInfo">by <a href="#">Connor Turnbull</a> on Jul 22nd 2011 with 2 comments</span>
  60.                     <p>Color blindness is a mild disability through which the affected experience a decreased ability to distinguish colors from others. This can be a real drawback for anyone in the design field since color theory is an integral feature in successful design, and a lot of decisions are based on the feeling and emotion derived from...</p>
  61.                     <a class="more" href="#">Read More</a>
  62.                     <span class="line"></span>
  63.                     <a href="#">12 Likes 14 Comments Share</a>
  64.                     <span class="line"></span>
  65.                 </div><!--End Blog Post-->
  66.                
  67.             </div><!--End Tab 1-->
  68.            
  69.             <div id="tab2" class="tab_content">
  70.            
  71.                 <h3>About</h3>
  72.                 <p>Webdesigntuts+ is a blog made to house and showcase some of the best web design tutorials and articles around. We publish tutorials that not only produce great results and interfaces, but explain the techniques behind them in a friendly, approachable manner.</p>
  73.                 <p>Web design is a booming industry with a lot of competition. We hope that reading Webdesigntuts+ will help our readers learn a few tricks, techniques and tips that they might not have seen before and help them maximize their creative potential!</p>
  74.                 <p><strong>Webdesigntuts+ is part of the Tuts+ Network</strong></p>
  75.            
  76.             </div><!--End Tab 2 -->
  77.            
  78.             <div id="tab3" class="tab_content">
  79.             </div><!--End Tab 3 -->
  80.            
  81.             <div id="tab4" class="tab_content">
  82.             </div><!--End Tab 4 -->
  83.        
  84.         </div><!--End Tab Container -->
  85.        
  86.     </div><!--End Main Content-->
  87.    
  88.     <div class="sidebar">
  89.    
  90.         <form action="" method="get">
  91.             <input name="search" class="search" placeholder="Filter webdesigntuts+ posts">
  92.         </form>
  93.        
  94.         <a class="button left" href="http://webdesign.tutsplus.com/" target="_blank"><span class="buttonimage left"></span>Website</a>
  95.         <div id="fb-root"></div>
  96.         <script src="http://connect.facebook.net/en_US/all.js#appId=253432341349745&amp;xfbml=1"></script>
  97.         <fb:like href="http://apps.facebook.com/fbtuttts"layout="button_count" width="75" show_faces="true" action="like" font="lucida grande"></fb:like>
  98.         <a class="button right" href="#"><span class="buttonimage left"></span>Logout</a>
  99.        
  100.         <div class="tabHeader">Categories</div>
  101.         <ul>
  102.             <li><a href="#">Sample Cat 1</a></li>
  103.             <li><a href="#">Sample Cat 2</a></li>
  104.             <li><a href="#">Sample Cat 3</a></li>
  105.             <li><a href="#">Sample Cat 4</a></li>
  106.             <li><a href="#">Sample cat 5</a></li>
  107.         </ul>
  108.        
  109.         <div class="tabHeader">A Little Bit About Us</div>
  110.        
  111.     </div><!--End Sidebar-->
  112.    
  113. </div><!--End Wrapper -->
  114.  
  115. </body>
  116.  
  117. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!