SHARE
TWEET

Untitled

a guest Jun 25th, 2019 52 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="wrapper">
  2. <header class="header">Header</header>
  3. <article class="main">
  4. <p>Pellentesque ...</p>  
  5. </article>
  6. <aside class="aside aside-1">Product #1 photo</aside>
  7. <aside class="aside aside-2">Product #1 details</aside>
  8. <!--<aside class="aside aside-3">Product #2 photo</aside>-->
  9. <!--<aside class="aside aside-4">Product #2 details</aside>-->
  10. <footer class="footer">Footer</footer>
  11. </div>
  12.      
  13. .wrapper {
  14.   display: flex;  
  15.   flex-flow: row wrap;
  16.   font-weight: bold;
  17.   text-align: center;
  18. }
  19.  
  20. .wrapper > * {
  21.   padding: 10px;
  22.   flex: 1 100%;
  23. }
  24.  
  25. .header {
  26.   background: tomato;
  27. }
  28.  
  29. .footer {
  30.   background: lightgreen;
  31. }
  32.  
  33. .main {
  34.   text-align: left;
  35.   background: deepskyblue;
  36. }
  37.  
  38. .aside-1 {
  39.   background: gold;height:300px;
  40. }
  41.  
  42. .aside-2 {
  43.   background: hotpink;height:300px;
  44. }
  45.  
  46. @media all and (min-width: 600px) {
  47.   .aside { flex: 1 0 0; }
  48. }
  49.  
  50.  
  51. body {
  52.   padding: 2em;
  53. }
RAW Paste Data
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!
 
Top