SHARE
TWEET

Untitled

a guest Jul 21st, 2019 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.   <style>
  7.     body {
  8.       margin: 0;
  9.       height: 100vh;
  10.       width: 100vw;
  11.       display: flex;
  12.       justify-content: center;
  13.       align-items: stretch;
  14.       flex-direction: row;
  15.     }
  16.     .container {
  17.       flex: 1;
  18.       display: flex;
  19.       align-items: stretch;
  20.       flex-direction: row;
  21.     }
  22.     .content-bg {
  23.       flex: 0.65;
  24.       background: green;
  25.       display: flex;
  26.       justify-content: flex-end;
  27.       align-items: center;
  28.     }
  29.     .right-bg {
  30.       flex: 0.35;
  31.       background: blue;
  32.       display: flex;
  33.       justify-content: flex-start;
  34.       align-items: center;
  35.     }
  36.     .content {
  37.       flex: 1;
  38.       position: relative;
  39.       padding: 20px;
  40.       max-width: 832px;
  41.       height: 500px;
  42.     }
  43.     .right {
  44.       flex: 1;
  45.       position: relative;
  46.       padding: 20px;
  47.       max-width: 448px;
  48.       height: 500px;
  49.     }
  50.   </style>
  51. </head>
  52. <body>
  53.   <div class='content-bg'>
  54.     <div class='content'>
  55.       <h2>content</h2>
  56.     </div>
  57.   </div>
  58.   <div class='right-bg'>
  59.     <div class='right'>
  60.       <h2>right</h2>
  61.     </div>
  62.   </div>
  63. </body>
  64. </html>
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
 
Top