API tools faq
paste
vonko1988

SliceAndDice_ResponsiveDesign_homework_task2.html

vonko1988
Apr 12th, 2014
230
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.30 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>
  6.         Responsive Design - All together
  7.     </title>
  8.     <link href="styles/task2.css" rel="stylesheet" type="text/css"/>
  9. </head>
  10.  
  11. <body>
  12.     <div id="wrapper">
  13.         <header>
  14.             <h1>
  15.                 <a href="#">
  16.  
  17.                 <img src="images/ninja-logo.png" />
  18.  
  19.                 <span>The .NET Ninja</span>
  20.  
  21.             </a>
  22.             </h1>
  23.             <nav>
  24.                 <ul>
  25.                     <li>
  26.                         <a href="#">Nav item 1</a>
  27.                     </li>
  28.                     <li>
  29.                         <a href="#">Nav item 2</a>
  30.                         <ul>
  31.                             <li>
  32.                                 <a href="#">Sub item 2.1</a>
  33.                             </li>
  34.                             <li>
  35.                                 <a href="#">Sub item 2.2</a>
  36.                             </li>
  37.                             <li>
  38.                                 <a href="#">Sub item 2.3</a>
  39.                             </li>
  40.                             <li>
  41.                                 <a href="#">Sub item 2.4</a>
  42.                             </li>
  43.                         </ul>
  44.                     </li>
  45.                     <li>
  46.                         <a href="#">Nav item 3</a>
  47.                         <ul>
  48.                             <li>
  49.                                 <a href="#">Sub item 3.1</a>
  50.                             </li>
  51.                             <li>
  52.                                 <a href="#">Sub item 3.2</a>
  53.                             </li>
  54.                             <li>
  55.                                 <a href="#">Sub item 3.3</a>
  56.                             </li>
  57.                             <li>
  58.                                 <a href="#">Sub item 3.4</a>
  59.                             </li>
  60.                         </ul>
  61.                     </li>
  62.                     <li>
  63.                         <a href="#">Nav item 4</a>
  64.                     </li>
  65.                 </ul>
  66.             </nav>
  67.         </header>
  68.         <aside>
  69.             <div class="social">
  70.                 <ul>
  71.                     <li>
  72.                         <a href="#">
  73.  
  74.                         <img src="images/social_twitter_box.png" />
  75.  
  76.                         <span>Tweet about us</span>
  77.  
  78.                     </a>
  79.                     </li>
  80.                     <li>
  81.                         <a href="#">
  82.  
  83.                         <img src="images/social_facebook.png" />
  84.  
  85.                         <span>Follow us on Facebook</span>
  86.  
  87.                     </a>
  88.                     </li>
  89.                     <li>
  90.                         <a href="#">
  91.  
  92.                         <img src="images/social_google.png" />
  93.  
  94.                         <span>Join us on Google Plus</span>
  95.  
  96.                     </a>
  97.                     </li>
  98.                     <li>
  99.                         <a href="#">
  100.  
  101.                         <img src="images/social_linkedin.png" />
  102.  
  103.                         <span>Join us on LinkedIn</span>
  104.  
  105.                     </a>
  106.                     </li>
  107.                     <li>
  108.                         <a href="#">
  109.  
  110.                         <img src="images/social_myspace.png" />
  111.  
  112.                         <span>Follow us on Myspace</span>
  113.  
  114.                     </a>
  115.                     </li>
  116.                 </ul>
  117.             </div>
  118.             <div class="news">
  119.                 <ul>
  120.                     <li>
  121.                         <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum lorem vitae eros</a>
  122.                     </li>
  123.                     <li>
  124.                         <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum lorem vitae eros</a>
  125.                     </li>
  126.                     <li>
  127.                         <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum lorem vitae eros</a>
  128.                     </li>
  129.                     <li>
  130.                         <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dictum lorem vitae eros</a>
  131.                     </li>
  132.                 </ul>
  133.             </div>
  134.         </aside>
  135.         <section>
  136.             <article>
  137.                 <header>
  138.                     <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
  139.                 </header>
  140.                 <div>
  141.                     <p>
  142.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel massa
  143.                         nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
  144.                         ridiculus mus. Morbi posuere massa pretium neque condimentum quis posuere
  145.                         libero ullamcorper. Praesent viverra sagittis nisi vel mattis. Pellentesque
  146.                         non quam sem. Aenean dignissim elementum eleifend. Etiam ac dolor diam,
  147.                         at vehicula felis. Fusce pretium placerat dui non egestas. Vivamus molestie
  148.                         gravida urna, sit amet cursus ligula eleifend ac. Cras feugiat ultricies
  149.                         eros, ac faucibus felis ullamcorper quis. Nulla fringilla tellus at risus
  150.                         dictum sit amet bibendum velit mattis. Nam hendrerit accumsan aliquam.
  151.                         Integer tincidunt felis a nibh tincidunt volutpat.
  152.                     </p>                    
  153.                 </div>              
  154.             </article>
  155.             <article>
  156.                 <header>
  157.                     <h1>Nulla adipiscing, ipsum malesuada</h1>
  158.                 </header>
  159.                 <div>
  160.                     <p>Nulla adipiscing, ipsum malesuada sagittis euismod, nulla felis faucibus
  161.                     diam, nec tempus mauris leo at est. Nunc ligula tortor, tincidunt a porta
  162.                     sed, dignissim a neque. Aenean sagittis adipiscing nunc, a bibendum sapien
  163.                     tincidunt ut. Fusce mattis fermentum sollicitudin. Phasellus id aliquet
  164.                     mi. Mauris quis hendrerit turpis. Donec auctor sollicitudin pharetra. Phasellus
  165.                     elementum faucibus aliquet. Nulla egestas elementum posuere. Vivamus pulvinar
  166.                     tempor neque ut posuere. Integer consectetur pulvinar convallis. Nam auctor
  167.                     tortor id neque volutpat vel placerat nulla vulputate.</p>                  
  168.                 </div>
  169.             </article>
  170.             <article>
  171.                 <header>
  172.                     <h1>Aenean quam eros, sollicitudin eu auctor eu</h1>
  173.                 </header>
  174.                 <div>
  175.                     <p>
  176.                         Aenean quam eros, sollicitudin eu auctor eu, convallis eget augue. Praesent
  177.                         aliquet luctus mauris vel molestie. Praesent hendrerit hendrerit placerat.
  178.                         Ut pharetra nisi id purus scelerisque pulvinar. Mauris sodales consequat
  179.                         tincidunt. Integer pellentesque tristique leo et accumsan. Etiam augue
  180.                         tellus, ornare ut blandit sit amet, venenatis in felis. Fusce augue mauris,
  181.                         adipiscing quis porttitor ut, euismod at diam. Donec eu dolor nibh. Proin
  182.                         sit amet fermentum nunc. Proin aliquam, mauris in euismod molestie, lorem
  183.                         risus commodo urna, et faucibus libero turpis quis libero.
  184.                     </p>                  
  185.                 </div>
  186.             </article>
  187.             <article>
  188.                 <header>
  189.                     <h1>Phasellus non lacus sit</h1>
  190.                 </header>
  191.                 <div>
  192.                     <p>
  193.                         Phasellus non lacus sit amet dolor blandit consequat sit amet id felis.
  194.                         Nunc eu massa ac lacus posuere ultricies. Pellentesque aliquam nunc ut
  195.                         enim feugiat viverra. Pellentesque habitant morbi tristique senectus et
  196.                         netus et malesuada fames ac turpis egestas. Duis id pretium diam. Suspendisse
  197.                         sollicitudin, nisi sit amet tempus gravida, erat nulla bibendum metus,
  198.                         ullamcorper lobortis urna dolor eget purus. Aliquam rhoncus quam vitae
  199.                         sapien rutrum hendrerit. Donec rutrum vehicula nibh vel lacinia. In hac
  200.                         habitasse platea dictumst. Vestibulum orci mi, porttitor ac eleifend et,
  201.                         rhoncus vel ipsum. Quisque sed magna vitae dui tempus blandit placerat
  202.                         sed libero. Etiam volutpat, tortor non sollicitudin porta, est lacus venenatis
  203.                         dolor, et cursus ipsum risus et orci. Aenean posuere consequat metus, non
  204.                         molestie nibh dictum sit amet. Nam eu orci vitae justo sagittis laoreet.
  205.                         Curabitur sollicitudin turpis et orci viverra semper.
  206.                     </p>                
  207.                 </div>
  208.             </article>
  209.         </section>
  210.         <footer>
  211.             <h2>
  212.                 Telerik Software Academy - Slice and Dice
  213.             </h2>
  214.         </footer>
  215.     </div>
  216.     <script src="jquery.js"></script>
  217.     <script src="task1.js"></script>
  218. </body>
  219.  
  220. </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!