Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- body {
- margin: 0;
- height: 100vh;
- width: 100vw;
- display: flex;
- justify-content: center;
- align-items: stretch;
- flex-direction: row;
- }
- .container {
- flex: 1;
- display: flex;
- align-items: stretch;
- flex-direction: row;
- }
- .content-bg {
- flex: 0.65;
- background: green;
- display: flex;
- justify-content: flex-end;
- align-items: center;
- }
- .right-bg {
- flex: 0.35;
- background: blue;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- }
- .content {
- flex: 1;
- position: relative;
- padding: 20px;
- max-width: 832px;
- height: 500px;
- }
- .right {
- flex: 1;
- position: relative;
- padding: 20px;
- max-width: 448px;
- height: 500px;
- }
- </style>
- </head>
- <body>
- <div class='content-bg'>
- <div class='content'>
- <h2>content</h2>
- </div>
- </div>
- <div class='right-bg'>
- <div class='right'>
- <h2>right</h2>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement