API tools faq
paste
vonko1988

SliceAndDice_ResponsiveDesign_homework_task1.html

vonko1988
Apr 12th, 2014
160
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.74 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!doctype html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>
  7.         Responsive Design - Task 1
  8.     </title>
  9.     <link href="styles/task1.css"  rel="stylesheet" type="text/css">
  10. </head>
  11.  
  12. <body>
  13.     <div id="wrapper">
  14.         <header>
  15.             <h1>
  16.                 <a href="#">Site Logo</a>
  17.             </h1>
  18.             <nav>
  19.                 <ul>
  20.                     <li>
  21.                         <a href="#">Home</a>
  22.                     </li>
  23.                     <li>
  24.                         <a href="#">Portfolio</a>
  25.                     </li>
  26.                     <li>
  27.                         <a href="#">Info</a>
  28.                     </li>
  29.                     <li>
  30.                         <a href="#">Contacts</a>
  31.                     </li>
  32.                 </ul>
  33.             </nav>
  34.         </header>
  35.         <section>
  36.             <header>
  37.                 <div class="slider">
  38.                     <ul>
  39.                         <li class="slider-current">
  40.                             <h2>
  41.                                 Lorem ipsum dolor sit amet
  42.                             </h2>
  43.                             <p>
  44.                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis
  45.                                 luctus aliquet. Phasellus fermentum odio enim. Fusce eu arcu justo, non
  46.                                 pellentesque ligula. Nam eget diam dui. Aliquam tellus massa, pretium quis
  47.                                 gravida non, cursus a velit. In accumsan vulputate mi, in viverra lorem
  48.                                 auctor ut. Duis adipiscing venenatis tempus. Integer vel justo nulla. Maecenas
  49.                                 elit quam, laoreet non cursus vel, facilisis scelerisque velit. Duis eu
  50.                                 nisi pellentesque libero sollicitudin euismod. Pellentesque mattis, sem
  51.                                 ac convallis fermentum, metus neque blandit diam, non euismod est orci
  52.                                 quis mi. Curabitur mattis dictum nisl, eget dapibus sapien viverra mollis.
  53.                                 Maecenas eleifend lacus eu magna bibendum venenatis.
  54.                             </p>
  55.                         </li>
  56.                         <li>
  57.                             <h2>
  58.                                 Class aptent taciti sociosqu
  59.                             </h2>
  60.                             <p>
  61.                                 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
  62.                                 inceptos himenaeos. Phasellus gravida odio id ligula mollis sagittis volutpat
  63.                                 mauris commodo. Cras sit amet luctus tellus. In hac habitasse platea dictumst.
  64.                                 Proin scelerisque ultrices justo vitae ornare. Nullam adipiscing, magna
  65.                                 et vehicula accumsan, nulla mi elementum est, id iaculis magna purus eu
  66.                                 neque. Maecenas congue, est hendrerit posuere posuere, nisl lectus pellentesque
  67.                                 est, sodales pretium purus purus et velit. In hac habitasse platea dictumst.
  68.                                 Mauris ut enim eget libero luctus faucibus non molestie est. Suspendisse
  69.                                 potenti. Praesent eu mauris tortor, quis condimentum mauris.
  70.                             </p>
  71.                         </li>
  72.                         <li>
  73.                             <h2>
  74.                                 Aenean porta
  75.                             </h2>
  76.                             <p>
  77.                                 Aenean porta, nibh non pulvinar iaculis, ipsum augue varius arcu, placerat
  78.                                 placerat augue erat a magna. Praesent commodo congue pretium. Fusce id
  79.                                 posuere tortor. Phasellus ante nunc, blandit et congue nec, rhoncus ut
  80.                                 est. Nulla pellentesque placerat arcu, in gravida nisl pretium eu. Aliquam
  81.                                 sed eros quis sapien tempor dictum. Proin convallis mollis orci, vel ullamcorper
  82.                                 felis venenatis at. Nullam pharetra, elit quis euismod vulputate, lectus
  83.                                 orci sagittis nibh, ac pretium nisl nulla eu diam. Sed tempor dolor non
  84.                                 lorem tincidunt hendrerit. Ut dolor arcu, euismod quis adipiscing in, adipiscing
  85.                                 eget dolor. Pellentesque ac lectus tempus ipsum tincidunt aliquet. Nam
  86.                                 iaculis viverra molestie. Duis sed leo ut elit rhoncus tincidunt sed in
  87.                                 felis. Nam elementum venenatis est, pulvinar hendrerit tortor convallis
  88.                                 et. Aenean tristique suscipit pharetra. Aenean molestie ultrices dui, volutpat
  89.                                 aliquam lectus tristique sed.
  90.                             </p>
  91.                         </li>
  92.                         <li>
  93.                             <h2>
  94.                                 Vivamus ac metus justo
  95.                             </h2>
  96.                             <p>
  97.                                 Vivamus ac metus justo, quis consectetur orci. Suspendisse blandit suscipit
  98.                                 mi, eu scelerisque elit facilisis vel. Vivamus varius elit vel enim laoreet
  99.                                 dictum. Vestibulum et augue magna, id blandit mauris. Proin posuere ante
  100.                                 eget lorem ornare fringilla. Sed enim elit, posuere at gravida ut, pretium
  101.                                 eget arcu. Nunc ornare, mauris venenatis convallis eleifend, mauris justo
  102.                                 mollis arcu, vitae pharetra ipsum justo nec nisi. Pellentesque sollicitudin,
  103.                                 felis ac viverra suscipit, nunc turpis aliquam dolor, at sagittis est felis
  104.                                 ac dui.
  105.                             </p>
  106.                         </li>
  107.                         <li>
  108.                             <h2>
  109.                                 Nulla facilisi
  110.                             </h2>
  111.                             <p>
  112.                                 Nulla facilisi. Mauris facilisis odio vel leo placerat ullamcorper. Suspendisse
  113.                                 potenti. Morbi porta cursus lectus. Proin varius tincidunt condimentum.
  114.                                 Vivamus mollis, dolor luctus faucibus tincidunt, metus nisi rutrum augue,
  115.                                 et dignissim libero nisl ut nunc. Nam sollicitudin magna vitae metus vestibulum
  116.                                 ut malesuada metus hendrerit.
  117.                             </p>
  118.                         </li>
  119.                     </ul>
  120.                     <div class="slider-controls">
  121.                         <a href="#" class="slider-prev">prev</a>
  122.                         <a href="#" class="slider-next">next</a>
  123.                     </div>
  124.                 </div>
  125.             </header>
  126.             <article>
  127.                 <header>
  128.                     <h1>
  129.                         Article 1
  130.                     </h1>
  131.                 </header>  
  132.                     <div class="article-content">
  133.                         <img src="images/pc-1.png" />
  134.                         <p>
  135.                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis
  136.                             luctus aliquet. Phasellus fermentum odio enim. Fusce eu arcu justo, non
  137.                             pellentesque ligula. Nam eget diam dui. Aliquam tellus massa, pretium quis
  138.                             gravida non, cursus a velit. In accumsan vulputate mi, in viverra lorem
  139.                             auctor ut. Duis adipiscing venenatis tempus
  140.                         </p>
  141.                     </div>              
  142.             </article>
  143.             <article>
  144.                 <header>
  145.                     <h1>
  146.                         Article 2
  147.                     </h1>
  148.                 </header>
  149.                     <div class="article-content">
  150.                         <img src="images/pc-2.png" />
  151.                         <p>
  152.                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis
  153.                             luctus aliquet. Phasellus fermentum odio enim. Fusce eu arcu justo, non
  154.                             pellentesque ligula. Nam eget diam dui. Aliquam tellus massa, pretium quis
  155.                             gravida non, cursus a velit. In accumsan vulputate mi, in viverra lorem
  156.                             auctor ut. Duis adipiscing venenatis tempus
  157.                         </p>
  158.                     </div>
  159.             </article>
  160.             <article>
  161.                 <header>
  162.                     <h1>
  163.                         Article 3
  164.                     </h1>
  165.                 </header>
  166.                     <div class="article-content">
  167.                         <img src="images/trash-bin.png" />
  168.                         <p>
  169.                             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis
  170.                             luctus aliquet. Phasellus fermentum odio enim. Fusce eu arcu justo, non
  171.                             pellentesque ligula. Nam eget diam dui. Aliquam tellus massa, pretium quis
  172.                             gravida non, cursus a velit. In accumsan vulputate mi, in viverra lorem
  173.                             auctor ut. Duis adipiscing venenatis tempus
  174.                         </p>
  175.                     </div>
  176.             </article>
  177.         </section>
  178.         <footer>
  179.             <h2>
  180.                 Telerik Software Academy - Slice and Dice Course
  181.             </h2>
  182.         </footer>
  183.     </div>
  184. </body>
  185.  
  186. </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!