API tools faq
paste
mejpark

Responsive HTML 5 layout

mejpark
Oct 18th, 2013
398
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.31 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 name="viewport" content="initial-scale=1.0, width=device-width">
  6.     <title>Fluid Grid</title>
  7.     <link rel="stylesheet" href="normalize.css">
  8. </head>
  9. <style>
  10. /*
  11.  * #D60000 // RED
  12.  * #FF530D // ORANGE
  13.  * #FFC801 // YELLOW
  14.  * #93C700 // GREEN
  15.  * #0E99DA // BLUE
  16.  */
  17. #page {
  18.     margin: 36px auto;
  19.     width: 90%;
  20.     background: #FFC801;
  21. }
  22. .lede {
  23.     padding: 0.8em 5.33333333%; /* 48px / 920px */
  24.     background: #93C700;
  25. }
  26. .blog {
  27.     margin: 0 auto 53px;
  28.     width: 93.75%;
  29. }
  30. .blog .main {
  31.     float: left;
  32.     width: 67.39130434782609%; /* 620px / 920px */
  33.     background: #FF530D;
  34. }
  35. .article {
  36.     padding: 40px 7.741935483870968%; /* 48px / 620px */
  37. }
  38. .blog .other {
  39.     float: right;
  40.     width: 32.60869565217391%; /* 300px / 920px */
  41.     background: #0E99DA;
  42. }
  43. .recent-entries {
  44.     margin: 0 auto;
  45.     width: 69.7885196%; /* 231px / 300px */
  46.     padding: 40px 5.217391304347826%; /* 48px / 920px */
  47. }
  48. #footer {
  49.     clear: both;
  50.     background: #D60000;
  51. }
  52. @media (max-width: 800px) {
  53.     .blog .main {
  54.         width: 100%;
  55.     }
  56.     .blog .other {
  57.         clear: both;
  58.         width: 100%;
  59.     }
  60. }
  61. </style>
  62. <body>
  63. <div id="page">
  64.  
  65. <a class="whatever">Link</a>
  66.  
  67.     <div class="blog section">
  68.         <h1 class="lede">Title</h1>  
  69.  
  70.         <div class="main">
  71.             <article class="article">
  72.                 <h2>Article</h2>
  73. <p>Street art excepteur letterpress gastropub adipisicing, ex butcher +1 organic dolore veniam occupy salvia you probably haven't heard of them aute. Drinking vinegar you probably haven't heard of them gastropub, adipisicing Schlitz fixie aliquip ullamco food truck gentrify street art freegan Intelligentsia. 8-bit vegan artisan 90's Wes Anderson forage. Ad banh mi nesciunt, before they sold out pug Williamsburg Neutra street art anim kale chips Pitchfork direct trade small batch minim trust fund. Polaroid voluptate kale chips, occaecat gluten-free velit tattooed. Scenester YOLO deserunt, messenger bag ennui mixtape farm-to-table anim irure banjo incididunt Etsy. Sed polaroid farm-to-table, freegan selfies do sunt American Apparel Carles church-key organic ea.</p>
  74.  
  75. <p>Roof party PBR Brooklyn, flannel tofu laborum yr fanny pack deserunt retro direct trade. Vegan hashtag XOXO, cred anim chia aesthetic meh kale chips narwhal sunt yr vinyl et. Shabby chic keytar aliquip cray selfies dreamcatcher. Bitters McSweeney's fashion axe, bespoke sapiente keffiyeh quinoa street art master cleanse twee. Vinyl skateboard aute, 3 wolf moon Truffaut Pitchfork shabby chic eu exercitation distillery vero umami semiotics asymmetrical. 90's YOLO kogi, id art party ut mustache brunch McSweeney's nulla Bushwick assumenda put a bird on it stumptown Wes Anderson. Thundercats Shoreditch authentic ea.</p>
  76.  
  77. <p>Meggings skateboard yr, raw denim gastropub 8-bit polaroid excepteur Echo Park hoodie. Aliquip eiusmod put a bird on it, excepteur beard wolf Thundercats Blue Bottle. Fanny pack fap pork belly retro, do beard slow-carb sed eiusmod cray. Readymade velit sriracha, aesthetic vero fap mumblecore consectetur gastropub hella. Asymmetrical odio cardigan nostrud leggings aesthetic. Nulla incididunt kitsch, drinking vinegar Carles sed ullamco occaecat cardigan aliqua ennui placeat bicycle rights Intelligentsia. Vegan Carles raw denim kale chips.</p>
  78.  
  79. <p>Fugiat synth Pinterest id, XOXO freegan cred seitan small batch vegan. Seitan pork belly PBR&amp;B, chambray farm-to-table mixtape labore viral cliche officia nesciunt direct trade chia. Tote bag labore pug Echo Park placeat, laborum shabby chic blog Terry Richardson quinoa sapiente. Bespoke deserunt distillery, cornhole craft beer Helvetica pork belly kogi drinking vinegar fingerstache scenester Truffaut. Four loko stumptown Banksy beard, bicycle rights aliquip eiusmod locavore plaid gluten-free. Placeat synth YOLO typewriter sapiente Pitchfork. Ethnic skateboard readymade iPhone.</p>
  80.             </article>
  81.         </div><!-- /end .main -->
  82.  
  83.         <div class="other">
  84.             <section class="recent-entries">
  85.                 <h2>Recent entries</h2>            
  86. <p>Meggings skateboard yr, raw denim gastropub 8-bit polaroid excepteur Echo Park hoodie. Aliquip eiusmod put a bird on it, excepteur beard wolf Thundercats Blue Bottle. Fanny pack fap pork belly retro, do beard slow-carb sed eiusmod cray. Readymade velit sriracha, aesthetic vero fap mumblecore consectetur gastropub hella. Asymmetrical odio cardigan nostrud leggings aesthetic. Nulla incididunt kitsch, drinking vinegar Carles sed ullamco occaecat cardigan aliqua ennui placeat bicycle rights Intelligentsia. Vegan Carles raw denim kale chips.</p>
  87.  
  88. <p>Fugiat synth Pinterest id, XOXO freegan cred seitan small batch vegan. Seitan pork belly PBR&amp;B, chambray farm-to-table mixtape labore viral cliche officia nesciunt direct trade chia. Tote bag labore pug Echo Park placeat, laborum shabby chic blog Terry Richardson quinoa sapiente. Bespoke deserunt distillery, cornhole craft beer Helvetica pork belly kogi drinking vinegar fingerstache scenester Truffaut. Four loko stumptown Banksy beard, bicycle rights aliquip eiusmod locavore plaid gluten-free. Placeat synth YOLO typewriter sapiente Pitchfork. Ethnic skateboard readymade iPhone.</p>
  89.             </section>
  90.         </div><!-- /end .other -->
  91.     </div><!-- /end .blog.section -->
  92.  
  93.     <footer id="footer">Footer</footer>
  94. </div><!-- /end #page -->
  95. </body>
  96. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!