Advertisement
Shailrshah

Media Queries

Apr 23rd, 2015
251
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.08 KB | None | 0 0
  1. <DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. header{
  6.     text-align: center;
  7.     display: block;
  8.     background: green;
  9.     font-size: 20px;
  10. }
  11. nav{
  12. }
  13. nav ul{
  14.     background: blue;
  15.     height: 18px;
  16. }
  17. nav li{
  18.     display: inline-block;
  19.     width:30%;
  20.     text-align: center;
  21.     color: white;
  22. }
  23. nav li:hover{
  24.     background: orange;
  25. }
  26. section{
  27.     background: lightblue;
  28. }
  29. img{
  30.     width:33%;
  31. }
  32.  
  33. @media screen and (max-width:900px){
  34.     body{
  35.         background: orange;
  36.     }
  37.     header{
  38.         font-size: smaller;
  39.     }
  40.     img{
  41.         width: 45%;
  42.     }
  43. }
  44.  
  45. @media screen and (max-width:800px){
  46.     body{
  47.         background: black;
  48.     }
  49.     header{
  50.         font-size: smaller;
  51.     }
  52.     img{
  53.         width: 100%;
  54.     }
  55.     nav li{
  56.         width: 45%;
  57.         display: inline-block;
  58.     }
  59.     nav ul{
  60.         height: 36px;
  61.     }
  62. }
  63. </style>
  64. </head>
  65. <body>
  66.     <header>
  67.         <h1>Image</h1>
  68.     </header>
  69.     <nav>
  70.         <ul>
  71.             <li>Home</li>
  72.             <li>About</li>
  73.             <li>Contanct</li>
  74.         </ul>
  75.     </nav>
  76.     <section>
  77.         <p>Have a look at these amazing images of 3 birds.</p>
  78.         <span><img src="b.png" /><span>
  79.         <span><img src="b.png" /><span>
  80.         <span><img src="b.png" /><span>
  81.     </section>
  82. </body>
  83. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement