API tools faq
paste
Advertisement
Shailrshah

Semantic Elements

Shailrshah
Apr 23rd, 2015
241
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.34 KB | None | 0 0
raw download clone embed print report
  1. <DOCTYPE html>
  2. <html>
  3. <head>
  4. <title> Hello World! </title>
  5. <style>
  6. header{
  7.     /*border:1px solid;*/
  8.     width: 100%;
  9.     background: orange;
  10.     line-height: 90px;
  11.     text-align: center;
  12.     display:block;
  13. }
  14. nav{
  15.     background: lightblue;
  16.     height: 40px;
  17.     display: block;
  18. }
  19. nav li{
  20.     display:inline-block;
  21.     color: white;
  22.     width:33%;
  23.     height: 100%;
  24.     text-align: center;
  25.     font-size: large;
  26.     font-weight: bold
  27.     vertical-align:middle;
  28.     line-height: 35px;
  29. }
  30. nav li:hover{
  31.     background: green;
  32. }
  33. section{
  34.     margin-top: 1px;
  35.     /*border: 1px solid;*/
  36.     width:80%;
  37.     height:80%;
  38.     float:left;
  39.     /*display: flex;
  40.     flex-direction: row;
  41.     justify-content: center;
  42.     align-items: center;*/
  43.  
  44.     background: lightgreen;
  45. }
  46. aside{
  47.     margin-top: 1px;
  48.     float:right;
  49.     background: rgb(233,43,22);
  50.     height:80%;
  51.     width:20%;
  52. }
  53. aside ul{
  54.     list-style-type: none;
  55. }
  56. article{
  57.    
  58.     height:48%;
  59.     width: 100%;
  60.     display: block;
  61.     background: lightgreen;
  62.     font-size: 100%;
  63.     overflow:auto;
  64.     text-align:justify;
  65. }
  66. body{
  67.     background: purple;
  68. }
  69. article img{
  70.     width:100%;
  71. }
  72. footer{
  73.     background: brown;
  74.     display:block;
  75.     text-align: center;
  76.     font-style: italic;
  77. }
  78.  
  79. @media screen and (max-width: 870px){
  80.     body{
  81.         background: black;
  82.     }
  83.     nav li{
  84.         width: 25%;
  85.     }
  86.     section{
  87.         width:100%;
  88.     }
  89.     aside{
  90.         width:0%;
  91.     }
  92. }
  93. </style>
  94. </head>
  95. <body>
  96.     <header>
  97.         <h1>HTML5 Semantics</h1>
  98.     </header>
  99.     <nav>
  100.         <ul>
  101.             <li>Home</li>
  102.             <li>About Us</li>
  103.             <li>Contact Us</li>
  104.         <ul>
  105.     </nav>
  106.     <section>
  107.         This section has great articles
  108.         <article>
  109.             <h3>This is a great article.</h3>
  110.             <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>  
  111.         </article>
  112.         <article>
  113.             <h3>Yet another awesome article.</h3>
  114.             <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  115.         </article>
  116.     </section>
  117.     <aside>
  118.             <ul>
  119.                 <li> More Links </li>
  120.                 <li> More Links </li>
  121.                 <li> More Links </li>
  122.                 <li> More Links </li>
  123.                 <li> More Links </li>
  124.                 <li> More Links </li>
  125.                 <li> More Links </li>
  126.                 <li> More Links </li>
  127.                 <li> More Links </li>
  128.                 <li> More Links </li>
  129.                 <li> More Links </li>
  130.                 <li> More Links </li>
  131.                 <li> More Links </li>
  132.                 <li> More Links </li>
  133.                
  134.             </ul>
  135.     </aside>
  136.     <footer>
  137.         <p>Copyright Shail R. Shah 2015. All rights reservered under IT Act 2000.
  138.     </footer>
  139. </body>
  140. </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!