API tools faq
paste
Advertisement
Guest User

Wordpress Swell Lite theme remake

a guest
Mar 31st, 2015
259
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.45 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3. This is free and unencumbered software released into the public domain.
  4.  
  5. Anyone is free to copy, modify, publish, use, compile, sell, or
  6. distribute this software, either in source code form or as a compiled
  7. binary, for any purpose, commercial or non-commercial, and by any
  8. means.
  9.  
  10. In jurisdictions that recognize copyright laws, the author or authors
  11. of this software dedicate any and all copyright interest in the
  12. software to the public domain. We make this dedication for the benefit
  13. of the public at large and to the detriment of our heirs and
  14. successors. We intend this dedication to be an overt act of
  15. relinquishment in perpetuity of all present and future rights to this
  16. software under copyright law.
  17.  
  18. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  19. EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  20. MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
  21. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
  22. OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
  23. ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
  24. OTHER DEALINGS IN THE SOFTWARE.
  25.  
  26. For more information, please refer to <http://unlicense.org/>
  27. -->
  28. <html>
  29. <head>
  30.  
  31.   <meta charset="UTF-8">
  32.  
  33.   <title>CodePen - Wordpress Swell Lite theme remake</title>
  34.  
  35.   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
  36.   <style type="text/css">
  37.  
  38.   html {
  39.     box-sizing: border-box;
  40.   }
  41.  
  42.   *, *:before, *:after {
  43.     box-sizing: inherit;
  44.   }
  45.  
  46.   body {
  47.     margin: 0;
  48.     color: #333333;
  49.     background-color: #EEEEEE;
  50.     font-family: sans-serif;
  51.   }
  52.  
  53.   a {
  54.     color: #05ad9c;
  55.     text-decoration: none;
  56.   }
  57.   a:hover, a:focus {
  58.     text-decoration: underline;
  59.   }
  60.  
  61.   header[role="banner"] {
  62.     padding: 3em 0;
  63.     margin: 0;
  64.     text-align: center;
  65.     color: #fff;
  66.     background-color: #495150;
  67.   }
  68.   header[role="banner"] a {
  69.     color: inherit;
  70.   }
  71.   header[role="banner"] a:hover, header[role="banner"] a:focus {
  72.     text-decoration: none;
  73.     color: rgba(255, 255, 255, 0.8);
  74.   }
  75.   header[role="banner"] h1 {
  76.     font-size: 3rem;
  77.     margin-bottom: 0.4rem;
  78.   }
  79.   header[role="banner"] h2 {
  80.     font-size: 1.2rem;
  81.     color: rgba(255, 255, 255, 0.6);
  82.   }
  83.  
  84.   .navbar {
  85.     text-align: center;
  86.     padding: 1em 0;
  87.     background-color: #fff;
  88.   }
  89.   .navbar.closed > a:not(.nav-toggle) {
  90.     display: none;
  91.   }
  92.   .navbar > a {
  93.     color: inherit;
  94.     text-decoration: none;
  95.     text-transform: uppercase;
  96.     display: block;
  97.     padding: 1rem 0;
  98.   }
  99.   .navbar > a.nav-toggle {
  100.     display: block;
  101.   }
  102.  
  103.   .wrap {
  104.     max-width: 996px;
  105.   }
  106.   .wrap:before, .wrap:after {
  107.     content: "";
  108.     display: table;
  109.   }
  110.   .wrap:after {
  111.     clear: both;
  112.   }
  113.  
  114.   main {
  115.     padding: 1rem;
  116.     margin: 1rem 1rem;
  117.     background-color: #fff;
  118.     box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.08);
  119.   }
  120.  
  121.   aside {
  122.     padding: 2rem;
  123.   }
  124.  
  125.   .sidebar li {
  126.     list-style-type: none;
  127.   }
  128.  
  129.   footer {
  130.     padding: 3rem 4rem;
  131.     background-color: #495150;
  132.     color: rgba(255, 255, 255, 0.4);
  133.   }
  134.   footer a {
  135.     color: rgba(255, 255, 255, 0.6);
  136.   }
  137.  
  138.   @media (min-width: 40em) {
  139.     .navbar > a:not(.nav-toggle), .navbar.closed > a:not(.nav-toggle) {
  140.       display: inline-block;
  141.       width: 5em;
  142.       padding: 0;
  143.     }
  144.     .navbar > a.nav-toggle, .navbar.closed > a.nav-toggle {
  145.       display: none;
  146.     }
  147.  
  148.     main {
  149.       float: left;
  150.       width: 60%;
  151.     }
  152.  
  153.     aside {
  154.       float: right;
  155.       width: 35%;
  156.     }
  157.   }
  158.  
  159.   </style>
  160.  
  161. </head>
  162.  
  163. <body>
  164.  
  165.   <header role="banner">
  166.   <h1><a href="https://wordpress.org/themes/swell-lite/">Site Title</a></h1>
  167.   <h2>description of this strange, strange site</h2>
  168. </header>
  169.  
  170. <nav class="navbar">
  171.   <a href="#" class="nav-toggle">Menu</a>
  172.   <a href="#">Link</a>
  173.   <a href="#">Link</a>
  174.   <a href="#">Link</a>
  175.   <a href="#">Link</a>
  176. </nav>
  177.  
  178. <div class="wrap">
  179.   <main id="content" role="main">
  180.     <h1>Page Title</h1>
  181.     <p>Much slight octopus one gosh chameleon more gosh well jaguar adamant packed dear more and as gibbered reindeer fussy manatee jeepers about however regarding yikes notwithstanding pre-set innocently the sound picked much conveniently much this.</p>
  182.     <p>Diligent lantern much lavish less one thus made gosh positively wistfully the far shark iguana decided depending ouch macaw overdrew slit sought alert less gawky hey thus sulky rethought.</p>
  183.   </main>
  184.  
  185.   <aside role="complementary">
  186.     <h2>Sidebar</h2>
  187.     <nav class="sidebar">
  188.       <li><a href="#">Link</a></li>
  189.       <li><a href="#">Link</a></li>
  190.       <li><a href="#">Link</a></li>
  191.     </nav>
  192.   </aside>
  193. </div>
  194.  
  195. <footer role="contentinfo">
  196.   <small>&copy; 1970 this guy</small><br />
  197.   <small>Swell Lite from <a href="http://organicthemes.com/">Organic Themes</a></small>
  198. </footer>
  199.  
  200.   <script src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
  201.   <script type="text/javascript">
  202.  
  203.   $(function() {
  204.  
  205.     /*
  206.     This way, the mobile menu doesn't dissapear for people with noscript and such.
  207.     */
  208.     $('.navbar').addClass('closed');
  209.  
  210.     $('.nav-toggle').click(function() {
  211.       /*
  212.       Normally, I would use a data-target attribute
  213.       on the nav-toggle, but I can't be bothered at
  214.       this time.
  215.       */
  216.       $('.navbar').toggleClass('closed');
  217.     });
  218.  
  219.   });
  220.   </script>
  221.  
  222. </body>
  223.  
  224. </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!