API tools faq
paste
Venciity

[ Telerik CSS] LAYOUT 04-W3Fools

Venciity
Feb 16th, 2014
203
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.44 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>W3 Fools</title>
  6.     <link href="CSS/StyleSheet.css" rel="stylesheet" />
  7. </head>
  8.  
  9. <body class="container">
  10.     <div class="row">
  11.         <nav class="span1 nav">
  12.             <h1><i class="icon-home"></i>Home</h1>
  13.  
  14.             <dl class="styled">
  15.                 <dt><a href="#">CSS Basic</a></dt>
  16.                 <dd><a href="#">CSS Introduction</a></dd>
  17.                 <dd><a href="#">CSS Syntax</a></dd>
  18.                 <dd><a href="#">CSS How To</a></dd>
  19.                 <dd><a href="#">CSS Background</a></dd>
  20.                 <dd><a href="#">CSS Text</a></dd>
  21.                 <dd><a href="#">CSS Font</a></dd>
  22.                 <dd><a href="#">CSS Border</a></dd>
  23.                 <dd><a href="#">CSS Outline</a></dd>
  24.                 <dd><a href="#">CSS Margin</a></dd>
  25.                 <dd><a href="#">CSS Padding</a></dd>
  26.                 <dd><a href="#">CSS List</a></dd>
  27.                 <dd><a href="#">CSS Table</a></dd>
  28.             </dl>
  29.  
  30.             <dl class="styled">
  31.                 <dt><a href="#">CSS Advanced</a></dt>
  32.                 <dd><a href="#">CSS Dimension</a></dd>
  33.                 <dd><a href="#">CSS Classification</a></dd>
  34.                 <dd><a href="#">CSS Positioning</a></dd>
  35.                 <dd><a href="#">CSS Pseudo-class</a></dd>
  36.                 <dd><a href="#">CSS Pseudo-element</a></dd>
  37.                 <dd><a href="#">CSS Image Gallery</a></dd>
  38.                 <dd><a href="#">CSS Image Opacity</a></dd>
  39.                 <dd><a href="#">CSS Media Types</a></dd>
  40.                 <dd><a href="#">CSS Don't</a></dd>
  41.                 <dd><a href="#">CSS Summary</a></dd>
  42.             </dl>
  43.  
  44.             <dl class="styled">
  45.                 <dt><a href="#">CSS Examples</a></dt>
  46.                 <dd><a href="#">CSS Examples</a></dd>
  47.             </dl>
  48.  
  49.             <dl class="styled">
  50.                 <dt><a href="#">References</a></dt>
  51.                 <dd><a href="#">CSS2 Reference</a></dd>
  52.                 <dd><a href="#">CSS2 Print</a></dd>
  53.                 <dd><a href="#">CSS2 Aural</a></dd>
  54.                 <dd><a href="#">CSS Units</a></dd>
  55.                 <dd><a href="#">CSS Colors</a></dd>
  56.                 <dd><a href="#">CSS Colorvalues</a></dd>
  57.                 <dd><a href="#">CSS Colornames</a></dd>
  58.             </dl>
  59.  
  60.             <dl class="styled">
  61.                 <dt><a href="#">CSS Quiz</a></dt>
  62.                 <dd><a href="#">CSS Quiz</a></dd>
  63.                 <dd><a href="#">CSS Exam</a></dd>
  64.             </dl>
  65.         </nav>
  66.  
  67.         <article class="span3">
  68.             <div class="content">
  69.                 <h1>CSS Tutorial</h1>
  70.  
  71.                 <nav class="pagination inline">
  72.                     <ul>
  73.                         <li class="prev"><a href="#">Previous</a></li>
  74.                         <li class="next"><a href="#">Next</a></li>
  75.                     </ul>
  76.                 </nav>
  77.  
  78.                 <hr />
  79.  
  80.                 <section>
  81.                     <h2>CSS Tutorial</h2>
  82.                     <img src="IMAGES/css-logo.png" alt="CSS Logo" class="pull-left" width="95" height="84" />
  83.                     <p><strong>Save a lot of work with CSS!</strong></p>
  84.                     <p><strong>In our tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.</strong></p>
  85.                     <p><a href="#">Start learning CSS!</a></p>
  86.                 </section>
  87.  
  88.                 <section>
  89.                     <h2>CSS Examples</h2>
  90.                     <p>Learn by 70 examples! With our editor, you can edit CSS, and click on a test button to view the result</p>
  91.                     <p><a href="#">Try-It-Yourself!</a></p>
  92.                 </section>
  93.  
  94.                 <section>
  95.                     <h2>CSS Reference</h2>
  96.                     <p>At W3Schools you will find a complete CSS2 reference, listing properties, units of measurements, colors, and more.</p>
  97.                     <p><a href="#">CSS2 Reference</a></p>
  98.                 </section>
  99.  
  100.                 <section>
  101.                     <h2>CSS Quiz Test</h2>
  102.                     <p>Test your skills at W3Schools!</p>
  103.                     <p><a href="#">Start CSS Quiz!</a></p>
  104.                 </section>
  105.  
  106.                 <hr />
  107.  
  108.                 <nav class="pagination inline">
  109.                     <ul>
  110.                         <li class="prev"><a href="#">Previous</a></li>
  111.                         <li class="next"><a href="#">Next</a></li>
  112.                     </ul>
  113.                 </nav>
  114.  
  115.                 <hr />
  116.             </div>
  117.         </article>
  118.  
  119.         <aside class="span1 aside">
  120.             <section class="box">
  121.                 <form class="search">
  122.                     <h2>Site Search</h2>
  123.  
  124.                     <input type="search" />
  125.                     <input type="submit" value="..." />
  126.                 </form>
  127.  
  128.                 <ul class="unstyled">
  129.                     <li><a href="#">About W3Schools</a></li>
  130.                     <li><a href="#">W3Schools Forum</a></li>
  131.                 </ul>
  132.             </section>
  133.  
  134.             <section>
  135.                 <ul class="unstyled box">
  136.                     <li>
  137.                         <a href="#">
  138.                             <img src="IMAGES/25-styles.png" alt="25+ styles" width="102" height="31" /> Dynamic button image generation
  139.                         </a>
  140.                     </li>
  141.                 </ul>
  142.  
  143.                 <h2>Web Hosting</h2>
  144.  
  145.                 <ul class="unstyled">
  146.                     <li class="box">
  147.                         <ul class="unstyled">
  148.                             <li><a href="#">$15 Domin Name Registration</a></li>
  149.                             <li><a href="#">Save $20 / year!</a></li>
  150.                         </ul>
  151.                     </li>
  152.                     <li class="box">
  153.                         <ul class="unstyled">
  154.                             <li><a href="#">UK Domain Names</a></li>
  155.                             <li><a href="#">UK Web Hosting</a></li>
  156.                             <li><a href="#">Alojamiento Web</a></li>
  157.                         </ul>
  158.                     </li>
  159.                     <li class="box">
  160.                         <ul class="unstyled">
  161.                             <li><a href="#">Buy UK Domain Names</a></li>
  162.                             <li><a href="#">Register Domain Names</a></li>
  163.                         </ul>
  164.                     </li>
  165.                     <li class="box">
  166.                         <ul class="unstyled">
  167.                             <li><a href="#">Cheap Domain Names</a></li>
  168.                             <li><a href="#">Cheap Web Hosting</a></li>
  169.                         </ul>
  170.                     </li>
  171.                     <li class="box"><a href="#">Best Web Hosting</a></li>
  172.                     <li class="box"><a href="#">Domain Name</a></li>
  173.                     <li class="box"><a href="#">Registration</a></li>
  174.                     <li class="box"><a href="#">PHP MySQL Hosting</a></li>
  175.                     <li class="box"><a href="#">Top 10 Web Hosting</a></li>
  176.                     <li class="box"><a href="#">Web Hosting Providers</a></li>
  177.                     <li class="box"><a href="#">Web Hosting Company</a></li>
  178.                     <li class="box"><a href="#">Web Hosting Reviews</a></li>
  179.                     <li class="box"><a href="#">UK Web Hosting</a></li>
  180.                 </ul>
  181.             </section>
  182.         </aside>
  183.     </div>
  184. </body>
  185. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!