API tools faq
paste
Advertisement
EnsarMeskovic

[WRD] Yoko's Kithcen

EnsarMeskovic
Mar 26th, 2017
123
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.81 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>HTML5 Layout</title>
  5.     <!--[if lt IE 9]>
  6.    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  7.    <![endif]-->
  8.     <style>
  9.         * {
  10.             box-sizing: border-box;
  11.         }
  12.  
  13.         body {
  14.             background-image: url(images/dark-wood.jpg);
  15.             font-family: 'Bookman Old Style', sans-serif;
  16.         }
  17.  
  18.         .wrapper {
  19.             margin: 0 auto;
  20.             max-width: 960px;
  21.             border: 1px solid black;
  22.             background-color: ghostwhite;
  23.         }
  24.  
  25.         .topheader {
  26.             background-image: url(images/header.jpg);
  27.             height: 150px;
  28.         }
  29.  
  30.         nav {
  31.             padding-top: 115px;
  32.         }
  33.  
  34.         ul {
  35.             margin: 0;
  36.             padding-top: 7px;
  37.             height: 35px;
  38.             display: block;
  39.             background-color: #888888;
  40.             position: relative;
  41.         }
  42.  
  43.             ul > li {
  44.                 display: inline-block;
  45.                 position: inherit;
  46.             }
  47.  
  48.                 ul > li > a {
  49.                     text-decoration: none;
  50.                     color: black;
  51.                     background-color: #808080;
  52.                     border: 2px groove transparent;
  53.                     padding: 5px;
  54.                     border-radius: 10px;
  55.                     font-size: 18px;
  56.                     position: inherit;
  57.                 }
  58.  
  59.                     ul > li > a:hover {
  60.                         background-color: white;
  61.                         border: 2px solid black;
  62.                     }
  63.  
  64.                     ul > li > a:focus {
  65.                         color: white;
  66.                         background-color: lightgray;
  67.                     }
  68.  
  69.         article > figure {
  70.             width: 45%;
  71.             float: left;
  72.             display: inline-block;
  73.             border: .5px solid gray;
  74.             padding: 5px;
  75.             margin: 10px;
  76.             margin-left: 20px;
  77.         }
  78.  
  79.         figcaption {
  80.             padding-left: 5px;
  81.         }
  82.  
  83.         img {
  84.             width: 100%;
  85.         }
  86.  
  87.         .courses {
  88.             width: 70%;
  89.             display: inline-block;
  90.             border-right: .2px solid lightgrey;
  91.         }
  92.  
  93.         aside {
  94.             display: inline-block;
  95.             width: 30%;
  96.             padding-left: 8px;
  97.             float: right;
  98.         }
  99.  
  100.         .textpart {
  101.             margin-top: 20px;
  102.             padding-right: 15px;
  103.             width: 45%;
  104.             display: inline-block;
  105.             float: right;
  106.         }
  107.  
  108.         article {
  109.             display: inline-block;
  110.             margin: auto;
  111.             padding-top: 25px;
  112.             padding-bottom: 15px;
  113.             width: 100%;
  114.         }
  115.  
  116.         section > a {
  117.             width: 75%;
  118.             text-decoration: none;
  119.             color: plum;
  120.             font-size: 18px;
  121.             margin-left: 20px;
  122.             padding: 5px;
  123.             padding-left: 15px;
  124.             border-bottom: .1px solid grey;
  125.             display: inline-block;
  126.             text-align: left;
  127.         }
  128.  
  129.             section > a:hover {
  130.                 background-color: #efeeee;
  131.             }
  132.  
  133.         .popular-recipes {
  134.             color: plum;
  135.         }
  136.  
  137.             .popular-recipes h2 {
  138.                 margin-left: 25px;
  139.                 margin-bottom: 10px;
  140.             }
  141.  
  142.         hgroup > h2 {
  143.             margin: 0;
  144.         }
  145.  
  146.         h2 {
  147.             font-size: 22px;
  148.         }
  149.  
  150.         h3 {
  151.             color: plum;
  152.             margin: 0;
  153.         }
  154.  
  155.         #dropdown {
  156.             background-color: transparent;
  157.             display: none;
  158.             position: absolute;
  159.             margin-top: 6.5px;
  160.             padding: 0;
  161.             width: 270px;
  162.         }
  163.  
  164.             #dropdown li {
  165.                 margin: 0;
  166.                 list-style: none;
  167.                 color: black;
  168.                 background-color: #808080;
  169.                 border: 2px groove transparent;
  170.                 padding: 5px;
  171.                 border-radius: 10px;
  172.                 width: 33.3%;
  173.                 float: left;
  174.             }
  175.  
  176.             #dropdown > li:hover {
  177.                 background-color: white;
  178.                 border: 2px solid black;
  179.             }
  180.  
  181.             #dropdown li a {
  182.                 font-size: 16px;
  183.                 margin: 0;
  184.                 text-decoration: none;
  185.                 color: black;
  186.             }
  187.  
  188.         ul > li:hover > #dropdown {
  189.             display: inline-block;
  190.         }
  191.  
  192.         .contact-details {
  193.             margin-top: 50px;
  194.             margin-left: 20px;
  195.             line-height: 1.4;
  196.         }
  197.  
  198.             .contact-details > h2 {
  199.                 color: plum;
  200.             }
  201.  
  202.         footer {
  203.             display: block;
  204.             background-color: #888888;
  205.             height: 35px;
  206.             padding-left: 15px;
  207.             padding-top: 8px;
  208.             color: white;
  209.         }
  210.     </style>
  211. </head>
  212. <body>
  213.     <div class="wrapper">
  214.         <header class="topheader">
  215.             <nav>
  216.                 <ul>
  217.                     <li><a href="">home</a></li>
  218.                     <li>
  219.                         <a href="">classes</a>
  220.                         <ol id="dropdown">
  221.                             <li><a href="">1st class</a></li>
  222.                             <li><a href="">2nd class</a></li>
  223.                             <li><a href="">3rd class</a></li>
  224.                         </ol>
  225.                     </li>
  226.                     <li><a href="">catering</a></li>
  227.                     <li><a href="">about</a></li>
  228.                     <li><a href="">contact</a></li>
  229.                 </ul>
  230.             </nav>
  231.         </header>
  232.         <section class="courses">
  233.             <article>
  234.                 <figure>
  235.                     <img src="images/bok-choi.jpg" alt="Bok Choi" />
  236.                     <figcaption>Bok Choi</figcaption>
  237.                 </figure>
  238.                 <div class="textpart">
  239.                     <hgroup>
  240.                         <h2>Japanese Vegetarian</h2>
  241.                         <h3>Five week course in London</h3>
  242.                     </hgroup>
  243.                     <p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p>
  244.                 </div>
  245.             </article>
  246.             <article>
  247.                 <figure class="">
  248.                     <img src="images/teriyaki.jpg" alt="Teriyaki sauce" />
  249.                     <figcaption>Teriyaki Sauce</figcaption>
  250.                 </figure>
  251.                 <div class="textpart">
  252.                     <hgroup>
  253.                         <h2>Sauces Masterclass</h2>
  254.                         <h3>One day workshop</h3>
  255.                     </hgroup>
  256.                     <p>An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese cookery.</p>
  257.                 </div>
  258.             </article>
  259.         </section>
  260.         <aside>
  261.             <section class="popular-recipes">
  262.                 <h2>Popular Recipes</h2>
  263.                 <a href="">Yakitori (grilled chicken)</a>
  264.                 <a href="">Tsukune (minced chicken patties)</a>
  265.                 <a href="">Okonomiyaki (savory pancakes)</a>
  266.                 <a href="">Mizutaki (chicken stew)</a>
  267.             </section>
  268.             <section class="contact-details">
  269.                 <h2>Contact</h2>
  270.                 <p>
  271.                     Yoko's Kitchen<br />
  272.                     27 Redchurch Street<br />
  273.                     Shoreditch<br />
  274.                     London E2 7DP
  275.                 </p>
  276.             </section>
  277.         </aside>
  278.         <footer>
  279.             &copy; 2011 Yoko's Kitchen
  280.         </footer>
  281.     </div><!-- .wrapper -->
  282. </body>
  283. </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!