API tools faq
paste
Advertisement
Booster

Box exercise

Booster
Sep 24th, 2014
256
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.65 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html charset=utf-8" >
  5. <meta type="author" content="Ilian Grekov">
  6. <style>
  7. body, html {
  8.      font-family: verdana,helvetica,arial, sans-serif;
  9.      font-size: 0.8em;
  10.      height: 830px;
  11.      margin: 0;
  12.      padding: 0;
  13.      background-image: url('./puzzle.jpg');
  14. }
  15. #base {
  16.     width: 900px;
  17.     margin: 0 auto;
  18.     height: 800px;
  19.     padding: 0;
  20.     background-color: #FCE5B8;
  21.     position: relative;
  22.     box-shadow: 0 0 10px 5px #444;
  23. }
  24. div header {
  25.     height: 270px;
  26.     width: 100%;
  27.     margin: 0;
  28.     padding: 0;
  29.     background-image: url('./green-park.jpg');
  30. }
  31. div header span {
  32.     font-family: "Script MT Bold", "Rage Italic" ,Verdana sans-serif;
  33.     font-size: 5em;
  34.     padding-left: 30px;
  35.     color: white;
  36. }
  37. nav {
  38.     position: relative;
  39.     float: left;
  40.     width: 140px;
  41.     height: 530px;
  42.    
  43.     background: #ADEDB5;
  44. }
  45. nav ul li {
  46.     list-style-type: none;
  47.     list-style-position: outside;
  48.     margin-left: -20px;
  49.     padding-bottom: 10px;
  50.     padding-right: 20px;
  51. }
  52. nav ul li a {
  53.     text-decoration: none;
  54.     font-variant: small-caps;
  55.     font-size: 1.7em;
  56.     display: block;
  57.     line-height: 2em;
  58. }
  59. nav ul li a:hover {
  60.     color: white;
  61.     background-color: #4D52FF;
  62.     opacity: 0.6;
  63.     border-radius: 0 20px 20px 0;
  64.     }
  65. h2 {
  66.     padding-left: 20px;
  67.     color: white;
  68.     font-size: 1.8em;
  69.     font-variant: small-caps;
  70.     text-shadow: 0 0 5px #333;
  71. }
  72. aside {
  73.     position: relative;
  74.     float: right;
  75.     width: 140px;
  76.     height: 530px;
  77.     background: #ADEDB5;
  78. }
  79. aside div {
  80.     padding: 0 5px;
  81. }
  82. aside div p {
  83.     color: #444;
  84. }
  85. #main {
  86.     position: absolute;
  87.     width: 600px;
  88.     height: 530px;
  89.     margin-left: 140px;
  90.     padding: 0 10px;
  91. }
  92. #main h1 {
  93.     font-size: 2.6em;
  94.     text-align: center;
  95.     font-family: "Script MT Bold", "Rage Italic" ,Verdana sans-serif;
  96.     color: #000;
  97.     margin-bottom: 0;
  98. }
  99. #main p {
  100.     text-indent: 10px;
  101.     font-size: 1.3em;
  102.     text-align: justify;
  103. }
  104. #main p:first-letter {
  105.     color: red;
  106.     font-size: 1.4em;
  107.     font-family: "Script MT Bold", "Rage Italic" ,Verdana sans-serif;
  108. }
  109. footer {
  110.     width: 900px;
  111.     height: 30px;
  112.     background: #DDD;
  113.     position: fixed;
  114.     bottom: 0;
  115.     text-align: right;
  116.     opacity: 0.8;
  117.     line-height: 0.8em;
  118.    
  119. }
  120. footer p {
  121.     display: inline-block;
  122.     margin-right: 30px;
  123.     text-decoration: underline;
  124.     font-size: 1.1em;
  125. }
  126. </style>
  127. <title>Box page</title>
  128. </head>
  129. <body>
  130.     <div id="base">
  131.         <header>
  132.             <span>Green Paradise</span>
  133.         </header>
  134.         <article>
  135.         <nav>
  136.             <h2>Pleasures</h2>
  137.             <ul>
  138.             <li><a href="#">Relax zone</a></li>
  139.             <li><a href="#">Massage</a></li>
  140.             <li><a href="#">Sauna</a></li>
  141.             <li><a href="#">Steam bath</a></li>
  142.             <li><a href="#">Reiki</a></li>
  143.             <li><a href="#">Yoga</a></li>
  144.             <li><a href="#">Fitness</a></li>
  145.             </ul>
  146.         </nav>
  147.         <div id="main">
  148.             <h1>Welcome to the "Green Paradise"</h1>
  149.             <p>Proin quis placerat arcu. Suspendisse ut turpis ac turpis ornare varius. Curabitur finibus, urna et fermentum mattis,
  150.             enim est tincidunt velit, eget efficitur lorem ipsum ut arcu. Nullam euismod aliquet eros a blandit. Mauris tincidunt
  151.             tortor est, nec hendrerit orci commodo vitae. Proin tellus urna, vulputate vitae turpis id, tincidunt consectetur sem.
  152.             In hac habitasse platea dictumst. Suspendisse potenti. Praesent tincidunt gravida scelerisque. Vivamus et rhoncus libero.
  153.             Duis finibus augue nec rhoncus imperdiet. Cras a turpis lobortis, feugiat mauris et, accumsan mi. Duis at libero at dui
  154.             mattis pellentesque. Etiam a ultrices lectus, vel faucibus ex. Donec ornare magna lobortis mauris volutpat, sit amet pharetra
  155.             nibh bibendum.</p>
  156.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in dui egestas, dignissim leo eget, consectetur nulla. Class
  157.             aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin dignissim fermentum nunc, id consequat
  158.             diam luctus at. Nulla in nulla sed nisi viverra tincidunt. Nunc scelerisque purus ut diam suscipit ultricies. Vestibulum vel orci
  159.             tincidunt, viverra dolor in, finibus ipsum. Nam pulvinar, est a lobortis molestie, libero sapien pulvinar est, non convallis diam
  160.             ligula sed neque. Suspendisse potenti. Aliquam cursus vulputate augue, dignissim fringilla mauris imperdiet eu.</p>
  161.             <p>In hac habitasse platea dictumst. Integer fermentum arcu sapien, eget malesuada erat sagittis ac. Aenean nisl lectus, hendrerit
  162.             dignissim odio eu, tempor maximus leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut a
  163.             arcu non arcu dictum tempor id vel eros. Vestibulum felis enim, feugiat id gravida sit amet, consequat vitae augue. Aliquam sed tellus
  164.             rutrum, malesuada libero in, sagittis nisi. Etiam ultricies lectus nec volutpat egestas.
  165.             </p>
  166.         </div>
  167.         <aside>
  168.             <div>
  169.                 <h4>Visit Dubai NOW!</h4>
  170.                 <p>Phasellus sed cursus lectus. Vestibulum quam ante, malesuada ut varius sit amet, finibus sed justo. Duis sagittis quis ante at egestas.</p>
  171.             </div>
  172.             <div>
  173.                 <h4>October fest is here</h4>
  174.                 <p>Integer condimentum mauris nec nunc facilisis varius. Curabitur vestibulum sodales tincidunt. Donec at sagittis tortor, eu auctor tellus.</p>
  175.             </div>
  176.             <div>
  177.                 <h4>Weather forecast</h4>
  178.                 <p>Integer condimentum mauris nec nunc facilisis varius. Curabitur vestibulum sodales tincidunt. Donec at sagittis tortor, eu auctor tellus.</p>
  179.             </div>
  180.             <div>
  181.                 <h4>You need a job?</h4>
  182.                 <p>Integer condimentum mauris nec nunc facilisis varius. Curabitur vestibulum sodales tincidunt. Donec at sagittis tortor, eu auctor tellus.</p>
  183.             </div>
  184.         </aside>
  185.         </article>
  186.         <footer id="contact">
  187.          <p>email: green_paradise@yahoo.com</p>
  188.          <p>phone/fax: +359 977 123 456, +359 821 293 899</p>
  189.         </footer>
  190.     </div>
  191. </body>
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!